Особенности плагина Divi - повсюду построитель страниц

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

Page Builder Everywhere добавляет Divi Builder в те области, внутри которых он обычно не работает. Он позволяет использовать конструктор для настраиваемых типов сообщений, страниц категорий, страниц поиска, страниц архивов, страниц продуктов WooCommerce, страниц 404 и т. Д. Вы даже можете использовать его для создания заголовков, нижних колонтитулов и боковых панелей.

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

Макеты Divi

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

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

Области виджетов

Плагин добавляет в Divi пять новых областей виджетов и позволяет размещать макеты в этих местах:

• Над заголовком
• Под заголовком
• Нижний колонтитул
• Над содержимым
• Ниже содержания

После того, как вы создали нужный макет, перетащите виджет Divi Layout в то место, где вы хотите, чтобы он появился, и выберите макет из раскрывающегося списка. Если вы еще не создали макет, вы можете щелкнуть ссылку « Добавить дополнительные макеты в библиотеку Divi», и вы перейдете в библиотеку.

Условная логика

Виджет позволяет использовать условную логику, чтобы вы могли решить, когда появится макет. Я выбрал заголовок с сообщением и нажал « Где» . Это вызывает условную логику, чтобы вы могли выбрать, отображать или нет, выбрать тип сообщения и выбрать результат из раскрывающихся списков. Вы можете добавить столько условий, сколько захотите. Они используют логику ИЛИ, поэтому будет отображаться IF This = That OR this = That OR…

Например, вы можете отображать модуль на основе типа сообщения, пользователя, на определенных страницах, таксономии и т. Д. Это означает, что вы можете создать макет, который будет отображать сообщение только в том случае, если пользователь не вошел в систему, или только в WooCommerce. страницы продуктов. Вы даже можете использовать многоуровневую логику, чтобы определить, когда показывать макет. Для разных категорий могут отображаться разные разделы. Различные части вашего веб-сайта могут иметь собственное меню.

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

Примеры компоновщика страниц везде

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

Над заголовком

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

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

Под заголовком

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

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

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

Над содержимым

В этом примере я разместил его в обычном сообщении в блоге, в котором не используется Divi Builder. Любая из локаций работает с обычными постами и страницами. Это отличный способ добавлять макеты Divi и добавлять модули в обычные сообщения. Над содержимым прокручивается содержимое.

Ниже содержания

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

Нижний колонтитул

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

Страницы продуктов WooCommerce

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

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

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

Результатом является страница продукта с макетами Divi над и под продуктом.

404 Стр.

Я создал макет для использования в качестве страницы 404.

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

Это отличный способ создать страницу 404 с помощью Divi Builder.

Page Builder Everywhere Customizer

Новый настройщик называется РВЕ Customizer добавляется в раскрывающемся меню на передней части и в меню Theme Customizer. Он включает разделы для:

• Главный заголовок
• Над заголовком
• Нижний колонтитул

Вот посмотрите на каждого из них.

Главный заголовок

Как вы можете видеть в примере над заголовком , логотип перекрывает разделы над заголовком и заголовок . Вы можете предотвратить перекрытие и оставить логотип в исходном месте, выбрав « Остановить перекрытие раздела с логотипом над заголовком» .

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

Над заголовком

Above Header позволяет скрыть содержимое над заголовком при прокрутке программы чтения.

Нижний колонтитул

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

Цена и документация

Page Builder Everywhere стоит 14 долларов. На странице продаж есть инструкции и ответы на часто задаваемые вопросы, которые помогут вам начать работу.

Последние мысли

Page Builder Everywhere - простой в использовании плагин. Он дает вам пять новых мест для добавления макетов Divi, а также вы можете добавлять их к определенным типам сообщений, категориям, авторам, датам, таксономиям и т. Д. И создавать несколько условий. Вы даже можете отображать или скрывать их в зависимости от того, вошел ли пользователь в систему. Плагин может конфликтовать с Divi Widget Builder, но вам не понадобится этот плагин, если вы используете Page Builder Everywhere.

Ждем вашего ответа. Вы пробовали Page Builder везде? Расскажите нам о своем опыте в комментариях ниже!

Лучшее изображение через Sentavio / shutterstock.com