Все для начинающих интернет-предпринимателей

Руководство по работе с новым редактором Gutenberg. Часть 2

novyi-redaktor-Gutenberg-0

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

Из этой статьи вы узнаете:

  • Блок последних комментариев

  • Использование блока разделить

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

  • Добавление файла

  • Встраивание видео Youtube

  • Добавление галереи

  • Чтобы сделать переход к Гутенбергу максимально безболезненным, мы создали обширное руководство по работе с новым редактором Gutenberg. Итак, начнем.

    1. Блок последних комментариев

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

    Наведите указатель мыши на значок «Добавить блок» (знак «плюс» в верхнем левом углу в редакторе Гутенберга). Выберите «Виджеты». Выберите «Последние комментарии».

    novyi-redaktor--Gutenberg-1

    Появится последний блок комментариев. Вы увидите ваши последние комментарии в блоке.

    novyi-redaktor--Gutenberg-2

    Вы можете изменить аватар, дату, выдержку, а также количество комментариев, которые вы хотели бы видеть.

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

    novyi-redaktor--Gutenberg-3

    2. Использование блока разделить

    Идем на страницу, где вы хотите добавить разделитель. Нажмите на значок плюса в левом верхнем углу. Оттуда выберите Элементы разметки из выпадающего меню. Нажмите на разделитель.

    novyi-redaktor--Gutenberg-4

    На вашей странице появится горизонтальная линия. Отрегулируйте, где вы хотите, чтобы разделитель появился на странице.

    novyi-redaktor--Gutenberg-5

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

    novyi-redaktor--Gutenberg-6

    3. Добавление кнопки

    Наведите указатель мыши на значок «Добавить блок», это вам уже знакомо. Затем выберете «Элементы разметки». Под этим разделом вы увидите кнопку.

    novyi-redaktor--Gutenberg-7

    Подсказка: вы также можете набрать «Кнопка» в строке поиска, чтобы быстро перейти к опции кнопки.

    Появится окно редактирования кнопки. Отсюда вы сможете выбрать, как ваша кнопка будет выравниваться с вашим текстом, ввести текст, отображаемый на кнопке, ввести URL-адрес, на который вы хотите перенаправить кнопку, и задать стиль текста (полужирный, курсив, добавить зачеркнутый текст). У вас также есть возможность добавить класс CSS для кнопки.

    novyi-redaktor--Gutenberg-8

    На правой стороне есть больше параметров настроек для кнопок. Параметры цвета, цвета текста и т.д. У вас также есть возможность ввести RGB или HEX код цвета, который вы хотели бы использовать, если вы не нашли желаемый цвет.

    Переместите кнопку в нужное место, используя стрелки в левой части раздела кнопок или перетащив кнопку в нужное место.

    novyi-redaktor--Gutenberg-9

    Подсказка: есть другие способы настройки кнопок. При нажатии на 3 точки, расположенные с правой стороны от кнопки, откроется мини-меню. Вы можете увидеть HTML-текст кнопки, дублировать кнопку и скрыть настройки блока, а также много другое.

    novyi-redaktor--Gutenberg-10

    4. Добавление файла

    Наведите указатель мыши на значок «Добавить блок». Затем выделите «Основные блоки». Под этим разделом вы увидите блок «Файл». Выберите его.

    novyi-redaktor--Gutenberg-11

    Появится файловый блок. Нажмите «Загрузить», чтобы загрузить файл с вашего компьютера или из «Библиотека файлов».

    novyi-redaktor--Gutenberg-12

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

    novyi-redaktor--Gutenberg-13

    Справа находится подменю, помогающее настроить работу вашего файлового блока. Выпадающее меню «Ссылка» позволяет вам сделать ссылку непосредственно на сам файл или на страницу, к которой прикреплен файл и т.д. Не забудьте опубликовать свою страницу, чтобы сохранить настройки.

    novyi-redaktor--Gutenberg-14

    5. Встраивание видео Youtube

    Наведите указатель мыши на значок «Добавить блок». Прокрутите до раздела Вставки. Под этим разделом вы увидите различные форматы встраивания, которые вы можете добавить на свою страницу.

    novyi-redaktor--Gutenberg-15

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

    novyi-redaktor--Gutenberg-16

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

    novyi-redaktor--Gutenberg-17

    6. Добавление галереи

    Наведите указатель мыши на значок «Добавить блок». Выберете «Основные блоки» — «Галерея». Вы можете добавить контент, загрузив мультимедийный контент со своего компьютера или выбрав элементы из своей медиагалереи.

    novyi-redaktor--Gutenberg-18

    novyi-redaktor--Gutenberg-19

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

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

    novyi-redaktor--Gutenberg-20

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

    С уважением Вячеслав и Валерия!

    Понравился материал? Поделитесь с друзьями!

    Один ответ к Руководство по работе с новым редактором Gutenberg. Часть 2

    1. Елена Голоштенко

      Мечтаю о том, чтобы галереи можно было ещё и листать без дополнительных плагинов. Мне нравятся новые галереи от Гуттенберг, современно выглядят. Но вот то, что листать их невозможно, это, конечно, не очень удобно.

      Регулярно пользуюсь разделителем, а вот что можно менять его стили — чет как-то не обращала внимание. Спасибо! Узнала новое для себя.

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *