15+ советов по созданию контента в редакторе Gutenberg

Большая часть времени взаимодействия с администраторской частью WordPress проходит в редакторе контента. Это процессы написания и редактирования заметок, создания страниц, и так дальше. Поэтому в пятой версии движка разработчики обновили Классический редактор на новый редактор Gutenberg, который делает данное взаимодействия еще более простым и комфортным для пользователей системы. А если еще начать применять в своей работе его новые возможности — ваша продуктивность заметно вырастит.

И в этой статье я подготовил для вас целых 15 крутых советов по созданию контента в редакторе Gutenberg, которые я сам часто использую.

1. Работайте с блоками

Блоки — это основные строительные элементы нового редактора контента Gutenberg, поэтому его иногда называют редактором блоков. С ним весь контент на вашем сайте формируется с помощью определенных блоков. Будь-то абзацы, списки, изображения, таблицы и многое другое. Для упрощения создания таких блоков в редакторе есть готовые предустановки для быстрого использования.

Для их открытия нажмите кнопку + и вы увидите целый список на выбор. Данная кнопка дублируется во многих местах работы с контентом.

Кнопка добавления нового блока в редактор содержимого WordPress

Дальше просто выбирайте нужный вам блок и наполняйте его контентом.

2. Управляйте межстрочными интервалами


После добавления самого базового блока «Абзац» и наполнения его текстом, весь он, в пределах этого абзаца, будет идти одной строкой и иметь между собой однострочный интервал. А чтобы добавить новый абзац вам нужно просто нажать клавишу Enter и у вас уже между текстом будет создан двойной междустрочный интервалом и это будет считаться новым абзацем.

Примеры междустрочного интервала на WordPress

Между новыми абзацами интервал становится двойным, чтобы создавать визуальное разделение для читателей. Но бывает такое, что нужно сделать текст с новой строки без создания абзаца. То есть сделать разрыв на новую строку, но с разделением текста в однострочном интервале. Но если нажать клавишу новой строки Enter — будет же создан новый абзац. Что делать в таком случае?

Все очень просто, для этого нажимаем сочетание клавиш Shift + Enter и продолжаем писать текст уже с новой строки, но с разрывом однострочного интервала.

Два вида написание текста с новой строки

3. Изменяйте размеры шрифтов

В современном ведении веб-контенте типография играет очень важную роль для привлечения внимания читателя и акцентирования его на ключевых моментах. А использование шрифтов разных размеров — является отличным инструментом для этого.

И отличной новостью является то, что в новом редакторе Gutenberg вы легко сможете настроить разные размеры шрифтов для разных блоков. Для этого нужно просто выбрать какой-то блок и ввести параметр шрифта в блоке настроек справа.

Изменения размера шрифта в Gutenberg

4. Выделяйте ключевые абзацы цветом

Еще одним вариантом акцентирования внимания читателей на определенных абзацах, является возможность менять их цветовые схемы.

При работе с блоком Абзаца, редактор контента показывает вам параметры цвета в правом столбце, где вы сможете выбрать любые цветовые комбинации, которые хотите. Просто убедитесь, что выбранная комбинация цвета фона и текста легко читается и отлично вписывается в ваш общий дизайн проекта.

Применение абзацу цветовой схемы в Gutenberg

5. Добавляйте заголовки в ваши статьи

Еще очень важно не просто писать текст абзацами, но и разделять его на логические части и присваивать им раскрывающие суть заголовки.

Заголовки играют важную роль не только в комфортной читабельности вашего текста, но и ключевым образом влияют на ранжирование поисковыми системами вашего сайта. Другими словами — заголовки очень важны для SEO.

Разделите ваш текст логическими заголовками с использованием ключевых слов и вы сами увидите, насколько ваш контент станет привлекательнее. Тем более, что в редакторе WordPress это не составит для вас большого труда.

Для этого нужно просто создать новый блок «Заголовок».

Добавление блока заголовка в Gutenberg

Дальше введите название заголовка, выберите нужный размер из размерной сетки (H1, H2, H3, H4, H5, H6) и расположение заголовка (Справа, По центру, Слева).

Настройка параметров заголовка в Gutenberg

6. Разбивайте страницу на колонки

В редакторе содержимого WordPress Gutenberg есть новая интересная возможность разделения страницы на блоки. Что позволит придать вашему контенту журнального вида.

Для этого просто добавьте блок «Колонки» в ваш редактор через функцию добавление блоков. Найти ее можно в разделе «Элементы разметки».

Добавление колонок в Gutenberg

После чего будет создано две колонки (количество которых можно увеличить в правом баре настроек), которые можно по отдельности наполнять различным контентом.

Изменение количества колонок в Gutenberg

А еще, в каждый такой столбец вы можете добавлять свои блоки. То есть, вы сможете создавать свои абзацы для каждого блока, свои заголовки, добавлять свои изображения, видео и многое другое. Но изображения рядом с текстом лучше добавлять следующим образом.

7. Размещайте изображения рядом с текстом

В старом редакторе WordPress было довольно сложно добавить изображение рядом с текстом, еще и с правильным выравниванием. Теперь эта задача решается очень быстро с помощью блока «Медиа и Текст».

Добавление медиа и текста в Gutenberg

Этот блок позволяет быстро и легко добавлять изображение рядом с текстом, регулировать их ширину, расположение и расстояние между ними.

Редактирование размещения картинки рядом с текстом в Gutenberg

8. Добавляйте видео 
с YouTube

Есть два основных варианта размещения видео на вашем WordPress сайте. Это загрузка видео непосредственно в Медиабиблиотебку движка и загрузка его на какую-то Медиа-платформу (например YouTube) и вставка просмотрщика данного видео на своем сайте.

Однако пользоваться первым способом я вам крайне не советую. Так как сам WordPress не предназначен для использования в качестве потоковой платформы, так и большинство хостинговых компаний не могут адекватно обслуживать большие файлы.

Лучше всего загрузить видео, например, на YouTube и воспользоваться специальным блоком «YouTube» редактора Gutenberg для его вставки на страницу сайта.

Добавление видео с YouTube в Gutenberg

Копируем ссылку нужного видео и вставляем ее в единственное поле блока.

Вставка ссылки на встраиваемое видео в Gutenberg

После чего нажимаем «Вставить».

Добавленное видео в WordPress заметку с помощью блока Gutenberg

9. Призывайте к действию кнопками

Еще одним полезным нововведением редактора Gutenberg есть возможность быстрого добавления кастомных кнопок. Что является очень удобным, когда вы хотите внедрить какой-нибудь призыв к действию в ваших постах или страницах.

Сейчас можно в несколько кликов добавить блок «Кнопка» и настроить ее внешний вид под себя.

Добавление кнопки в Gutenberg

Кнопка поставляется с тремя стилями: квадратный, округлый и с рамкой. В которых дополнительно можно настроить свой фон, цвет текста и выравнивание.

Редактирование дизайна кнопки в Gutenberg

10. Делайте графические обложки под текстом

Обложка (в редакторе WordPress) — это изображение с наложенным на него поверх текстом. Цель которой сделать определенный текст более привлекательным. Это, например, можно использовать при вставке каких-то цитат в вашу статью.

И редактор контента Gutenberg позволяет легко добавлять такие изображения-обложки в ваши заметки. Для этого нужно просто добавить блок «Обложка», загрузить нужное изображение для фона и написать текст.

Добавление обложки под текст в Gutenberg

В идеале файл изображения должен быть большего размера, чтобы он хорошо выглядит в широком формате.

Графическая обложка под текст на Gutenberg

11. Создавайте таблицы в статьях

Теперь в новом редакторе есть возможность очень просто и быстро создавать таблицы, чего очень не хватало в Классическом. Для этого нужно просто добавить блок «Таблицы».

Добавление таблицы в Gutenberg

Ввести нужное количество столбцов и строк

Количество столбцов и строк в таблице на Gutenberg

И заполнить их данными.

Наполнение таблицы контентом

А также, обратите внимание на правый блок настроек, где вы сможете визуально настроить вашу таблицу под свой вкус.

Настройка вида таблицы на WordPress

12. Встраивайте виджеты в свои страницы

Как вы уже должны знать, виджеты обычно используются на боковых панелях или в области нижнего колонтитула, для добавления дополнительного функционала сайту. А теперь еще вы сможете встраивать некоторые виджеты в области своего контента.

Просто откройте раздел «Виджеты» в окне добавления блоков, где вы увидите доступные для вставки в посты или страницы виджеты.

Добавление виджетов в заметку WordPress

13. Работайте с пользовательскими HTML-полями

Редактор содержимого в WordPress — это визуальный редактор. Однако вы все равно можете добавлять в нем HTML-код, если вам нужно.

Просто добавьте блок «HTML-код» и скопируйте туда ваш код.

Добавление HTML-кодов в Gutenberg

Вот очень простой пример.

Пример вставки HTML-кода в Gutenberg

14. Посматривайте информационные данные о ваших заметках

Работая над длинной статьей вам будет полезно знать некоторую статистическую информацию о вашей «писанине». Для этого панель инструментов нового редактора имеет две кнопки с выводом такой информации.

Во-первых, информационная кнопка, которая показывает количество слов, абзацев, блоков и схему статьи на основе использованных вами заголовков.

Информационная кнопка в редакторе Gutenberg

И, во-вторых, прямо рядом с ней находится кнопка навигации по блокам. Которая показывает блоки, которые вы использовали в своей статье, по порядку их на странице. Тут же вы можете нажать на блок, чтобы сразу перейти к нему. Что на самом деле очень удобно.

Кнопка навигации по блокам в Gutenberg

15. Кастомизируйте редактор под себя


Редактор контента Gutenberg — это не просто статичная область с верхней панелью форматирования текста и блоком настроек справа. Это поле, с которым вы можете взаимодействовать и делать некоторые настройки для своего удобства.

Для этого нажмите на «Три точки» в верхнем правом углу страницы и пройдитесь по предоставленным настройкам.

Настройка редактора Gutenberg

БОНУС. Начните использовать сочетания клавиш

Кто хоть раз пользовался горячими клавишами, знает — насколько неэффективно перемещать мышь и кликать по иконкам настроек, просто чтобы сделать текст жирным или добавить ссылку. Ведь это можно сделать одним нажатием нескольких клавиш одновременно.

Редактор содержимого Gutenberg поставляется с полезными сочетаниями клавиш, которые ускоряют выполнения некоторых задач. Для изучения списка таких комбинаций перейдите в редакторе заметок «Три точки»«Горячие клавиши».

Открытие списка горячих клавиш в Gutenberg

И тут вы увидите все возможные комбинации поддерживаемые редактором.

Краткий список горячих клавиш в Gutenberg

Заключение

Используйте эти советы в своей работе и вы сами ощутите все прелести обновленного редактора содержимого Gutenberg. А в сочетании с использованием горячих клавиш — вы ускорите создания контента в несколько раз. Я вам это гарантирую 😉

Главный редактор
Опубликовал статей: 91
Просмотров: 34 0