Стань конструктором с плагином Page Builder от SiteOrigin

Приветствую вас!

Представляю вашему вниманию, плагин конструктор Page Builder от SiteOrigin.  

Плагин, достаточно лёгкий и имеет в своём наборе визуальный редактор, ряд дополнительных виджетов, а также позволяет задействовать стандартные виджеты  WP и других плагинов. Он  может, компоновать структуру страницы любой сложности и при этом работает практически с любой темой. Вместе с ним, нужно загрузить и дополнение, плагин SiteOrigin Бандл Виджетов.

Они оба есть в репрозитории.

 

Как установить плагин, смотрим здесь.

Начинаем!

После активации Page Builder, переходим Страницы > добавить новую (можно начать и с записей, всё зависит от цели). 

В окошке визуального редактора, нажимаем  Page Builder и переходим в конструктор.

Мы оказались в конструкторе Page Builder.

А знакомство, с панелью основных инструментов, начнём с права на лево.

  1. Кнопка «Вернуться в редактор» («Revert to Editor»). 
  2. Кнопка Get Addons, нам без надобности.
  3. Визуальный редактор. В этом режиме в правой области мы можем видеть, как будет отображаться наш контент в браузере, а в левой – в админ панели. Просматривая текст, мы можем сразу же его редактировать. Для этого достаточно по нему кликнуть.

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

Готовый макет («Layouts»). Здесь, как понятно из названия, можно подобрать готовый макет. Если есть необходимость очистить содержимое главной страницы, жмите на кнопку с иконкой гаечного ключа над полем редактора Page Builder и выберите в выпадающем списке «Удалить строку».

Теперь переходим на вкладку готовых макетов. Выбираем пункт «Layouts Directory» и жмём «Enable». Тем самым мы загрузим библиотеку готовых шаблонов посадочных страниц.

Каждый из предлагаемых вариантов можно открыть в режиме пред просмотра. Этому служит ссылка «Preview», которая появляется при наведение на миниатюру.  Понравившийся макет устанавливается с помощью кнопки «Вставить» внизу вкладки и выбрав «Replace current» (добавить вместо).

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

На шаблоне, проще всего тренироваться и иметь понимание всего процесса. И здесь, нам понадобится виджеты из дополнения к плагину SiteOrigin Бандл Виджетов. 

Мы же, вернёмся к оставшимся кнопкам конструктора. 

Добавить строку. Строки  — это области страницы, имеющие горизонтальное расположение. Размещаются они, друг под другом, при этом каждая из них может быть разделена на части. По сути, строки определяют зоны для последующего размещения в них блоков виджетов.

Перейдем на вкладку. Изначально строка разбита на 2 равных колонки.

Мышкой мы можем расширять и сужать границы каждой из них, предварительно выбрав, сколько колонок должно быть в нашем макете строки. Если выбрать 1 колонку, она будет занимать 100% ширины. Устанавливаем нужные параметры и жмем «Вставить». Выбранная конструкция отображается в редакторе Page Builder.

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

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

Оставляю вам, удовольствие от познания, остальных виджетов и их свойств.

Как видим, логика работы Page Builder довольна проста, а функционал достаточен для создания всех основных элементов посадочной страницы. Скоро будет и видео подсказка по этому конструктору.

Успехов Вам!

С уважением, Максим!

Понравилось,оставьте свой email:


1+

2 Replies to “Стань конструктором с плагином Page Builder от SiteOrigin

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

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