Блоки Гутенберга: полное руководство пользователя с основными соображениями на 2022 год

Опубликовано: 2020-12-04

В новом выпуске от 6 декабря 2018 года WordPress 5.0 Kirk представил редактор блоков по умолчанию, также известный как Gutenberg. Этот новый редактор контента поможет вам создавать контент совершенно другим способом. Он заменил редактор WordPress TinyMCE и предлагает более наглядный способ создания контента в виде блоков.

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

Независимо от того, обновили ли вы свой сайт до WordPress 5.0 или нет, вам следует научиться использовать Блок Гутенберга для своего будущего продвижения. Здесь вы получите полное представление и список всех блоков WordPress Гутенберга, а также тридцати популярных блоков.

Блоки WordPress Gutenberg: ваш лучший компаньон в будущем

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

Вкратце, Gutenberg — это новый блочный редактор для платформы WordPress. Он постепенно изменил способ создания сообщений, страниц, продуктов и почти всего на вашем сайте.

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

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

Блоки Гутенберга по умолчанию в WordPress

Gutenberg blocks

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

Таким образом, в основном блоки Гутенберга организованы по следующим категориям:

  • Наиболее используемое
  • Общие блоки
  • Форматирование
  • Макет
  • Виджеты
  • Встраивает
  • Многоразовый

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

Gutenberg blocks
Как сделать поиск блоков в WordPress

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

Gutenberg blocks
Категории блоков

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

Gutenberg blocks

Давайте посмотрим, как они работают на самом деле!

Общие блоки — регулярно используемые в любом посте

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

common blocks
  1. Абзац: простой текстовый блок для добавления одного абзаца содержимого.
  2. Изображение : вставьте одно изображение в любом месте вашего сообщения.
  3. Заголовок : добавить тег заголовка
  4. Галерея : отображение группы изображений в стиле галереи.
  5. Список : добавление маркированных или нумерованных списков.
  6. Цитата : Включите цитату в 2 разных стилях
  7. Аудио : Загрузка аудиофайла на ваш сайт
  8. Обложка : вставка видео- или аудиофайла с наложением текста.
  9. Файл : добавьте ссылку на загружаемый файл.
  10. Видео : загрузите видеофайл и воспроизведите его прямо на своем сайте.

Форматирование — дополнительные параметры настройки

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

formatting blocks
  1. Код: С легкостью пишите технический код любого типа.
  2. Классический: Предоставляет инструменты редактирования классического редактора WordPress.
  3. Пользовательский HTML: вставьте собственный HTML-код и просмотрите его прямо в редакторе WordPress.
  4. Предварительно отформатировано: добавьте текст с соблюдением интервалов и табуляции.
  5. Pullquote: добавьте особый визуальный акцент к цитате из вашего текста.
  6. Таблица: используйте таблицу для отображения табличных данных
  7. Стих: Пишите стихи и другие литературные выражения, включая все пробелы и разрывы строк.

Элементы макета — улучшите стиль дизайна

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

layout elements
  1. Кнопка: создайте кнопку и вставьте ссылку с другим фоном и цветом текста.
  2. Столбцы: создавайте макеты с несколькими столбцами, и вы можете включать другие типы блоков в каждый столбец.
  3. Медиа и текст: вставьте текст и медиафайл рядом в один блок; разные столбцы
  4. Подробнее: разбейте свой контент на 2 части, включая блок «Подробнее».
  5. Разрыв страницы: разделяет содержимое вашего сайта на несколько страниц.
  6. Разделитель: добавьте короткую горизонтальную черту в свой пост.
  7. Разделитель: добавьте большое прямоугольное пустое пространство между двумя блоками в своем сообщении.
  8. Текстовые столбцы: добавьте текст и отобразите его в двух-четырех столбцах, как в газете.

Виджеты - добавьте некоторые виджеты на любую страницу или запись

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

widgets blocks
  1. Шорткод: вставляйте пользовательский контент, например формы, с помощью шорткода WordPress.
  2. архивы: показывает ежемесячный архив ваших сообщений
  3. calender: отображение ежемесячного календаря ваших сообщений.
  4. категории: список всех ваших категорий сообщений
  5. last-comments: Проблеск последних 5 комментариев (не полный комментарий)
  6. last-posts: Список ваших последних сообщений
  7. RSS: добавьте RSS-канал на любую страницу или сообщение.
  8. Поиск: добавьте поиск WordPress на любую страницу или запись.
  9. Облако тегов: облачный список тегов ваших сообщений.

Embeds — вставка содержимого из других источников

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

embeds gutenberg blocks
  • YouTube
  • Твиттер
  • Фейсбук
  • Инстаграм
  • видео
  • Саундклауд
  • Спотифай
  • Flickr
  • Анимото
  • Облако
  • КолледжЮмор
  • Dailymotion
  • Забавный или умри
  • Хулу
  • Имгур
  • Иссуу
  • Кикстартер
  • Meetup.com
  • Mixcloud
  • Фотоведро
  • Полдэдди
  • Реддит
  • ReverbNation
  • Скринкаст
  • Скрибд
  • Слайдшер
  • СамодовольныйКружка
  • Оратор
  • ТЕД
  • Тамблер
  • ВидеоПресс
  • Вордпресс
  • WordPress.tv

Многоразовые блоки:

Как только вы нажмете «Добавить в многоразовые блоки», блок станет многоразовым для дальнейшего использования. Возможно, вы можете найти его в разделе общего меню.

HappyAddons Pro

Сторонние плагины для расширения как ваших черных списков, так и функциональности

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

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

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

  1. Ultimate Addons for Gutenberg — бесплатный плагин с более чем 15 блоками Gutenberg
  2. CoBlocks — Конструктор страниц Блоки Гутенберга
  3. Штабелируемые — блоки Гутенберга
  4. Конечные блоки — Пользовательские блоки Гутенберга
  5. Advanced Gutenberg — более 20 новых блоков для Gutenberg
  6. Kadence Block — набор инструментов для создания страниц Gutenberg
  7. Envira Gallery — блок WordPress для фотогалерей
  8. Атомные блоки - коллекция блоков Гутенберга

Ultimate Addons for Gutenberg — бесплатный плагин с более чем 15 блоками Gutenberg

Ultimate Addons for Gutenberg

Это один из популярных дополнений среди многих пользователей Гутенберга. The Ultimate Addons for Gutenberg — это полный пакет уникальных и креативных блоков. Таким образом, вы можете перегрузить свой редактор, чтобы создавать красивые страницы и публикации с помощью этого плагина.

Он включает в себя более 15 блоков Гутенберга, в том числе следующие:

  • Несколько кнопок: добавьте несколько настраиваемых кнопок в один адаптивный блок.
  • Расширенный заголовок: добавьте модные и привлекательные заголовки и подзаголовки с разделителем.
  • Информационное окно: вставьте изображение или значок с заголовком и описанием.
  • Прайс-лист: легко создавайте прайс-лист, как меню ресторана.
  • Отзыв: добавьте отзыв клиентов, используя этот блок

Самое удивительное, что этот плагин имеет встроенную поддержку темы Astra. И Astra полностью совместима с Gutenberg.

CoBlocks — Конструктор страниц Блоки Гутенберга

coblocks-gutenberg-blocks

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

Сейчас он поддерживает более 20 интерактивных блоков:

  • Аккордеонный блок
  • Блокировка оповещения
  • Блок профиля автора
  • Блок кнопок
  • Карусель Галерея Блок
  • Нажмите, чтобы заблокировать твит
  • Блок галереи коллажей
  • Блок динамического разделителя
  • Блок событий (новинка!)
  • Блок функций
  • Блок еды и напитков
  • Блок формы
  • GIF-блок
  • GitHub основной блок

и другие.

Вы можете создать весь веб-сайт с функциями CoBlocks. Кроме того, он позволяет создавать веб-страницы с привлекательными типографскими элементами.

Штабелируемые — блоки Гутенберга

stakable-gutenberg-blocks

Stackable специально разработан для нового редактора блоков WordPress. Он поддерживает 23 качественных строительных блока страниц для Gutenberg и более 50 макетов блоков и предустановленных дизайнов разделов/блоков. Он предоставляет расширенные и гибкие возможности веб-дизайна, чтобы сделать ваш путь веб-разработки гладким.

Вот некоторые популярные стекируемые блоки:

  • Контейнерный блок
  • Блок сетки функций
  • Блок карты
  • Блок заголовка
  • Блок подсчета
  • Блокировка членов команды
  • Блок уведомлений

Расширьте свои дизайнерские возможности с помощью этих настраиваемых и разнообразных макетов дизайна.

Ultimate Blocks - Пользовательские блоки Гутенберга

Ultimate-gutenberg-blocks

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

В настоящее время Ultimate Blocks поддерживает около 20 блоков, чтобы сделать ваше путешествие по разработке более захватывающим. Некоторые примечательные особенности приведены ниже:

  • Фильтр содержимого
  • Обратный отсчет
  • Слайдер изображений
  • Контент с вкладками
  • Стилизованная коробка
  • Переключение содержимого

Вы можете присоединиться к их интерактивной группе Facebook для получения дополнительной помощи.

Advanced Gutenberg — более 20 новых блоков для Gutenberg

Advanced Gutenberg

Расширенный Гутенберг делает редактор Гутенберга по умолчанию более мощным, чтобы безумно легко создавать профессиональные веб-сайты. Он предоставляет более 20 новых блоков и опций для плавной настройки вашего сайта WordPress.

Здесь вы получите уникальные блоки, такие как:

  • Менеджер столбцов
  • Слайдер последнего поста
  • Блок вкладок
  • Блок значков
  • Расширенный блок изображения
  • Блок подписки по электронной почте
  • И многое другое

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

Kadence Block- Gutenberg Page Builder ToolKit

kadence-gutenberg-blocks

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

Kadence действительно поддерживает следующие блоки:

  • Макет строки
  • Расширенная галерея
  • Форма
  • Расширенный заголовок
  • Кнопка «Дополнительно»
  • Вкладки
  • Аккордеон
  • Отзывы
  • Значок
  • Разделитель/разделитель
  • Информационное окно
  • Список значков

Помимо этого, это позволяет легко создавать макеты любого типа. Это возможно только с популярными плагинами WordPress Page Builder.

Envira Gallery — лучший блок WordPress для фотогалерей

envira-gutenberg-blocks

Envira — это полностью оптимизированный и мощный плагин для вставки галереи на ваш сайт WordPress без ущерба для скорости сайта. С помощью этого плагина галереи вы можете включать альбомы, теги, интеграцию с социальными сетями, шаблоны галереи / макеты галереи, глубокие ссылки, разбивку на страницы, электронную коммерцию, проверку изображений и многое другое.

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

Атомные блоки - Коллекция блоков Гутенберга

Atomic Blocks – Gutenberg Block Collection

Atomic Blocks предлагает набор новых классных блоков Гутенберга. Та же самая талантливая команда Array Themes также работает над этой модной коллекцией блоков.

В настоящее время у Atomic Blocks есть 15 блоков Гутенберга, и на подходе еще больше:

  • Раздел и блок макета
  • Расширенный блок столбцов
  • Блок новостей
  • Ценовой блок
  • Почтовый блок сетки
  • Контейнерный блок
  • Блок отзывов
  • Встроенный блок уведомлений
  • Аккордеонный блок
  • Поделиться блоком значков
  • Блок призыва к действию
  • Настраиваемый блок кнопок
  • Разделитель и разделительный блок
  • Блок профиля автора
  • Блок буквицы

После установки плагина вы получите новый раздел Atomic Blocks в интерфейсе Gutenberg. Вы можете проверить живые демонстрации всех блоков, прежде чем использовать их на своем веб-сайте. Создание страниц с помощью редактора блоков и Atomic Blocks дает вам полный контроль над быстрой разработкой и запуском любого сайта!

7 лучших плагинов Gutenberg Block для обогащения вашего контента

Однако вы можете найти еще несколько полезных плагинов с отличными блоками для создания красивого контента оптимизированным способом. Не забудьте поделиться с нами своими мыслями!

Блоки Гутенберга открывают новую эру в разработке сайтов

Редактор Gutenberg в основном построен на концепции блоков. Эти блоки представили совершенно новый способ редактирования сообщений и содержимого страниц в редакторе WordPress. С помощью этих блоков вы можете легко добавлять несколько типов контента в свои сообщения и страницы.

В этом блоге мы постарались поделиться всей информацией о блоках Гутенберга. Таким образом, вы можете легко обновить себя с помощью революционного макета дизайна нового редактора WordPress.

Вы также можете рассказать нам свою историю и задать любые вопросы, связанные с WordPress, в разделе комментариев ниже.

HappyAddons Pro