Getwid – настраиваемые блоки WordPress для редактора Gutenberg

В этой статье мы рассмотрим плагин Getwid. Он является одним из лучших плагинов WordPress для расширения возможностей редактора Gutenberg.

Что такое Getwid?

Что такое Getwid?

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

Список блоков Getwid для редактора Gutenberg

Вот список блоков Gutenberg, доступных при использовании плагина Getwid:

  • Раздел.
  • Медиа и текстовый слайдер.
  • Слайдер изображений.
  • Иконка.
  • Блок значков.
  • Баннер.
  • Аккордеоны.
  • Вкладки.
  • Переключатель.
  • Галерея изображений.
  • Карты Google.
  • Блок недавно опубликованных постов.
  • Расширенный заголовок.
  • Блок изображения.
  • Группа кнопок.
  • Индикатор.
  • Круговой прогресс бар.
  • Счетчик.
  • Ценник.
  • Форма обратной связи.
  • Карусель постов.
  • Слайдер постов.
  • Пользовательский тип записи.
  • Прайс-лист.
  • Блок MailChimp;
  • Видео во всплывающем окне;
  • Обратный отсчет.

Как установить плагин Getwid

В панели администрирования WordPress перейдите в раздел Плагины. > Добавить Новый.

Как установить плагин Getwid

С помощью встроенного поисковика найдите плагин и нажмите кнопку «Установить».

Как установить плагин Getwid - 2

После этого активируйте плагин.

Добавление новой страницы

В панели администрирования WordPress перейдите в меню Страницы. > Добавить новую.

Добавление новой страницы

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

Добавление новой страницы - 2

В разделе «Атрибуты страницы» набор доступных параметров может быть разным в зависимости от используемой темы оформления.

Добавление блоков в редактор Gutenberg с помощью плагина Getwid

В редакторе Gutenberg нажмите кнопку со знаком «+», прокрутите вниз до раздела «Блоки Getwid» и выберите необходимый блок. Например, добавьте блок «Секция».

Добавление блоков в редактор Gutenberg с помощью плагина Getwid

Этот блок позволяет создавать красивые макеты страниц раздел за разделом. Вы сможете легко добавить в только что созданный раздел слайдеры, фоновые изображения, видео, параллакс, анимацию, фигуры и т. д. Чтобы увидеть веб-страницу, созданную с использованием блоков Section, ознакомьтесь со следующим примером.

Добавление блоков в редактор Gutenberg с помощью плагина Getwid - 2

Справа от страницы располагаются настройки раздела. Вот их краткое описание:

  • Размер – здесь можно задать размеры раздела.
  • Отступы – настройка отступов вокруг созданного раздела для настольных компьютеров, планшетов и мобильных устройств.
  • Поля – добавьте поля вокруг созданного блока раздела для различных устройств.
  • Выравнивание – вертикальное и горизонтальное выравнивание созданного раздела для различных устройств.
  • Цвет фона – здесь можно добавить любой цвет фона для созданного раздела.
  • Фоновый градиент – эта опция позволит создать фоновый градиент для вашего раздела. Она пригодится в том случае, если вы не хотите использовать однотонный фон.
  • Фоновое изображение – здесь можно добавить фоновое изображение в созданный раздел вместо использования фоновых цветов.
  • Фоновый слайдер – фоновые слайдеры в разделы страницы. Как здорово.
  • Фоновое видео.
  • Передний план – добавьте эффекты переднего плана для созданного вами раздела.
  • Разделители (Dividers) – добавьте разделители между блоками.
  • Анимация входа (Entrance Animation) – благодаря использованию плагина Getwid вы сможете анимировать различные разделы так, как вам нравится.
  • Дополнительно (Advanced) – здесь вы сможете добавить привязку к HTML и классам CSS.

Слайдер мультимедиа и текста

Чтобы добавить блок слайдера мультимедиа и текста, кликните по значку «+», прокрутите до раздела «Блоки Getwid» и кликните по пункту «Слайдер медиа и текста».

Слайдер мультимедиа и текста

С помощью этого блока вы сможете загрузить медиафайлы и добавить текст.

Слайдер мультимедиа и текста - 2

Краткий обзор доступных параметров настройки блока:

  • General – здесь можно указать количество слайдов, размер изображения, высоту слайдера, ширину содержимого, а также выравнивание по вертикали и горизонтали.
  • Цвет текста.
  • Цвет наложения – вы сможете установить необходимый цвет наложения и прозрачность.
  • Отступы – добавление отступов вокруг медиафайлов и текста.
  • Настройки слайдера – здесь вы сможете добавить анимацию к слайдеру и включить слайд-шоу.
  • Анимация текста – анимируйте текст на слайдерах.
  • Дополнительно – добавление пользовательских классов CSS.

Вот отличный пример использования блока слайдера медиа и текста.

Слайдер изображений

Добавьте на страницу блок «Слайдер изображений».

Слайдер изображений

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

Слайдер изображений - 2

Доступно несколько вариантов настройки:

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

Вот пример использования слайдера изображений.

Блок баннера

Этот блок позволяет размещать рекламу на WordPress-сайте.

Блок баннера

После добавления в блок баннера медиа-файла вы получите доступ к нескольким вариантам настройки.

Блок баннера - 2

С их помощью вы сможете добавить ссылку в баннер и открывать ее в новой вкладке.

Другие блоки для редактора Gutenberg от плагина Getwid

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

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

Сергей Бензенкоавтор-переводчик статьи «Getwid – Customizable WordPress Blocks for Gutenberg»