Ultimate Addons for Gutenberg (UAG) — это бесплатный плагин, который добавляет в стандартный редактор страниц WordPress дополнительные блоки, а также даёт возможность импортировать на сайт готовые секции и даже целые страницы, сделанные при помощи этих блоков.

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

Недавно разработчики плагина анонсировали ребрендинг. Новое название плагина — Spectra. Но в консоли WordPress ещё пока встречается старое название.

Плагин Ultimate Addons for Gutenberg в разделе консоли WordPress «Плагины – Добавить новый»

Содержание

  1. Библиотека шаблонов
  2. Блоки для Gutenberg
  3. Настройки UAG

Библиотека шаблонов

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

Чтобы открыть библиотеку, находясь в редакторе Gutenberg, нажмите в верхней его части кнопку «UAG Templates».

Кнопка «UAG Templates» в шапке редактора Gutenberg

Откроется библиотека с готовыми страницами. Каждое из превью представляет собой группу страниц с общим дизайном. Обычно это главная страница и несколько дополнительных: «Контакты», «О компании», «Услуги».

Кликните по понравившемуся сайту, чтобы посмотреть доступные страницы. Затем выберите интересующую вас страницу и нажмите внизу кнопку «Preview Site», чтобы просмотреть страницу в полном масштабе, или «Import Template», чтобы эту страницу импортировать.

Навигация по библиотеке шаблонов Ultimate Addons for Gutenberg

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

Навигация по библиотеке шаблонов Ultimate Addons for Gutenberg

Также в верхней части библиотеки можно перейти на вкладку «Patterns», чтобы посмотреть паттерны. Их гораздо больше, чем страниц. Слева можно отсортировать паттерны по тону — тёмные или светлые — или выбрать категорию только с какими-то конкретными паттернами.

Вкладка «Patterns» в библиотеке шаблонов Ultimate Addons for Gutenberg

Чтобы импортировать понравившийся паттерн, наведите на него мышкой и нажмите «Import». После этого библиотека закроется и вы сможете отредактировать его.

Импорт паттерна из библиотеки шаблонов Ultimate Addons for Gutenberg

Кроме разделов «Pages» и «Patterns» на главной странице библиотеки шаблонов будет ещё один раздел — «Wireframes». В нём тоже будут готовые секции, как и в разделе «Patterns», но с немного другим дизайном и нейтральными изображениями вместо реальных. 

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

Если вам понравилась какая-то секция из раздела «Wireframes», смело импортируйте её и меняйте содержимое под свой проект.

Раздел «Wireframes» в библиотеке шаблонов Ultimate Addons for Gutenberg

Блоки для Gutenberg

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

Найти новые блоки можно там же, где и остальные: в левом верхнем углу редактора нажмите на плюс и введите в строке поиска аббревиатуру плагина — «UAG». Так стандартные блоки скроются и останутся только новые.

Блоки из плагина Ultimate Addons for Gutenberg на боковой панели редактора

Как обычно, при выборе блока UAG в боковом меню справа откроются его свойства. Если у вас эта панель не отображается, нажмите в правом верхнем углу значок шестерёнки.

Кнопка, которая включает/выключает боковую панель с параметрами блока

Разработчики плагина заявляют, что он будет хорошо работать с любой темой. Но на 100% гарантируют совместимость конкретно с их темой — Astra. Это одна из самых популярных и многофункциональных тем для WordPress. Подробнее о ней читайте в нашей статье: Обзор темы Astra.

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

Настройки UAG

Это место с полезными ссылками и настройками плагина. Находится оно в разделе «Настройки – UAG». В нём вы увидите несколько блоков. Все они на английском языке, поэтому рассказываем, что к чему, для тех, кто его не знает.

Welcome to the Ultimate Addons for Gutenberg!

Здесь будет ссылка на статью с кратким обзором функционала плагина UAG и ссылка на обзор другого плагина от этих же разработчиков — Starter Sites. Этот плагин даёт возможность импортировать сразу целые готовые сайты. Сразу с дополнительными плагинами, которые нужны для их работы.

У нас на сайте есть обзор и на этот плагин тоже. В нём мы детально рассказываем, как пользоваться библиотекой сайтов. Сайты в Starter Sites будут такими же, что и в UAG, но с его помощью можно импортировать все страницы понравившегося сайта за раз, а также импортировать вариант не только для редактора Gutenberg, но и для двух других конструкторов страниц: Elementor и Beaver Builder.

Обзор плагина Starter Sites

Секция «Welcome to the Ultimate Addons for Gutenberg!» в настройках плагина UAG

Ever-growing Library of Gutenberg Blocks

Здесь будет ссылка на официальный сайт плагина UAG, где можно посмотреть примеры использования каждого блока. Также тут вы найдёте ссылку на базу знаний от разработчиков плагина, в которой почти 50 статей про каждый блок и популярные вопросы по его настройке.

Секция «Ever-growing Library of Gutenberg Blocks» в настройках плагина UAG

Blocks

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

Список блоков Ultimate Addons for Gutenberg с кнопкой деактивации

CSS & JS File Generation

Здесь вы можете изменить логику создания файлов со стилями блоков. По умолчанию плагин будет создавать отдельные файлы CSS и JS для блоков, но при необходимости это можно отключить, нажав кнопку «Disable File Generation». Тогда стили будут записываться в код каждой страницы.

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

Секция «CSS & JS File Generation» в настройках плагина UAG

Regenerate Assets

Здесь будет кнопка, нажав на которую, вы принудительно сгенерируете новые файлы CSS и JavaScript. Это вернёт стили всех блоков к состоянию по умолчанию.

Секция «Regenerate Assets» в настройках плагина UAG

Knowledge Base

Здесь будет ссылка на базу знаний от разработчиков плагина, в которой почти 50 статей про каждый блок и популярные вопросы по его настройке.

Секция «Knowledge Base» в настройках плагина UAG

Five Star Support

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

Секция «Five Star Support» в настройках плагина UAG

Что дальше

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

Как создать сайт на WordPress