В статье приведен общий обзор конструктора страниц Divi builder от ElegantThemes для создания страниц сайтов на WordPress
Divi Builder — по сути это построитель страниц (конструктор), с помощью которого можно ускорить создание страниц сайта на WordPress. Конструктор встроен в тему Divi и тему Extra, а также существует в виде отдельного плагина, который можно подключить к любой теме WordPress

1. Особенности Диви Билдера

Не требуется кодирование

Конструктор позволяет создавать страницы WordPress без каких-либо знаний в области кодирования. Можно построить страницу визуально.

Используется с любой темой WordPress

Divi Builder подключается к любой теме как плагин. При активации плагина появляются два способа создавать страинцы:
1) элементы страницы вставляются и настраиваются в редакторе «изнутри» страницы (бэкенд) и лишь потом можно увидеть их отображение на странице.
2) в визуальном редакторе дизайн страницы создается прямо на странице — модули и элементы вставляются и настраиваются на странице визуально (фронтэнд) и все мгновенно обновляется прямо перед твоими глазами.
Всегда можно переключаться между этими способами

40+ готовых элементов дизайна (модулей)

Divi Билдер поставляется с 46 различными модулями — элементами дизайна для контента на странице: кнопка, счетчик, блог, подписка, слайдер, заголовок и другие элементы.

600+ готовых макетов страниц

Начните процесс проектирования страницы, используя один из 600+ уже готовых макетов страниц из 78+ прототипов сайтов из библиотеки компании ElegantThemes. Загружай страницы, редактируй данные, убирай лишнее, добавляй свое

Библиотека элементов дизайна

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

Глобальные элементы библиотеки

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

ВСЕ Настраивается

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

Мобильные стили

Билдер адаптирован для мобильных устройств и планшетов. Просматривайте и отдельно редактируйте в реальном времени вид страницы для мобильного устройства и планшета.

А/В тестирование

Divi Builder поставляется с интегрированной системой сплит-тестирования и конверсии, и все это работает внутри Divi Builder.
$

ЕСТЬ русский и украинский переводы

Внутренний интерфейс переведен на 32 языка, среди них есть русский и украинский переводы. Перевод автоматически устанавливается при активации Divi Builder в случае, если язык сайта один из них.
$

Хорошая техническая поддержка темы

Компания ElegantThemes достаточно хорошо обеспечивает техническую поддержку и обновление продукта.
Рассмотрим особенности Divi Builder подробнее.

2. В чем разница между Divi Builder и Divi Visual Builder

В Divi Builder встроены два способа создания web-страниц: Divi Builder и Divi Visual Builder.

В Divi Builder страница создается путем вставки и настройки элементов на страницу в редакторе «изнутри» (бэкенд):

В Visual Builder страница создается непосредственно в реальном времени со стороны страницы (фронтенд). Элементы вставляются и настраиваются на странице визуально:
Разница способов:

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

В случае с Visual Builder работая с элементами вы сразу видите результат своей работы — страницу в реальном виде.  Таким образом Visual Builder позволяет сокращать время построения страниц сайта.

С версии 2.0.64 (13 июля 2018 года)  «конструкторы страниц»  могут работать в пользовательских типах записей  (товары, события,…):

Как начать работать с Divi Builder

Для включения Divi Builder и установки разметки нужно выбрать опции, появляющуюся каждый раз при создании новой страницы или записи:

Конструктор основан на grid разметке: ты не сможешь перетаскивать элементы, куда захочешь, а будешь ограничен установленной сеткой.  Страница состоит из секций, каждая секция содержит ряды,  ряды разбиваются на колонки (от 1 до 4),  в колонки вставляются элементы дизайна (модули):
Процедура конструирования страницы следующая:

1) Выбрать секцию: стандартный раздел, полноэкранная секция, специальная секция или секция из библиотеки

2) Для секции создать ряд, выбрав количество колонок.

3) В колонки разместить элементы дизайна (модули)

4) Настроить модули

Ниже приведена разметка ряда стандартной секции:

3. В конструкторе 46+ готовых элементов дизайна (модулей)

Конструктор поставляется с 46 различными настраиваемыми модулями — элементами для дизайна на странице: кнопка, счетчик, блог, подписка, слайдер, заголовок и другие элементы:

4. 82+ готовых прототипов сайтов (600+ готовых страниц)

Для создания страниц с помощью Divi Builder есть возможность взять за основу один из 82+ готовых прототипов сайтов различной тематики (в общем — это 600+ готовых страниц).

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

Divi макеты страниц

5. В Divi Builder настраивается все

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

Divi макеты страниц
Начиная с редакции 2.16 в Divi Builder появилась возможность настроить вид при наведении курсора (свойство hover).

Начиная с редакции 2.17 появилась возможность отображать на страницах динамичексий контент.

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

6. Библиотека Divi

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

Возможен импорт, экспорт, совместное использование и загрузка объектов библиотеки из других проектов или Интернета.

Для помещения элемента в библиотеку достаточно выбрать пункт «Сохранить в библиотеку» в меню элемента и присвоить элементу имя:

Divi макеты страниц
Для использования элемента из библиотеки выбери пункт «Добавить из библиотеки» при создании элемента на странице:
Divi макеты страниц

7. Мобильные стили

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

Divi макеты страниц
В Visual Builder вид страницы для мобильного устройства и/или планшета можно просматривать и редактировать в режиме реального времени:
Divi макеты страниц

8. А/В тестирование Divi Leads

При A/B тестировании сравнивается конверсия двух разных версий страницы. К примеру, ты можешь изменить текст на кнопке, но всё остальное оставить без изменений. И тогда 50% посетителей будет показываться одна кнопка, а другим 50% – другая. В ходе этого эксперимента можно выяснить, на какую версию кнопки нажмёт больше людей.

Активирование сплит-тестирования для происходит в настройках Divi Builder на странице:

Divi макеты страниц
Далее плагин предлагает выбрать объект для сплит-тестирования ( раздел, строку или модуль). В зависимости от элемента, который ты выберешь, плагин будет отслеживать количество кликов, просмотров или продаж.

Объекты сплит-тестирования будут на странице продублированы. Каждая вариация сплит-тестирования будет отображаться для посетителей и будут собраться статистические данные, чтобы выяснить, какая вариация более результативная. Тест начнется, когда будет сохранена страница.

Divi макеты страниц
Когда у страницы появится трафик конструктор начнет собирать статистику:
Divi макеты страниц

9. Сколько стоит плагин Divi Builder ?

Плагин отдельно не продаётся. Он является частью подписки Elegant Themes. Помимо плагина  при подписке вы получаете доступ еще до 87+ тем компании, а также плагинов Bloom, Monarсh, Shortcodes, форума и технической поддержки компании.

На момент написания статьи есть два пакета за пользование Elegant Themes: ежегодный взнос или безлимит на всю оставшуюся жизнь:

Divi макеты страниц

Заключение

Divi Builder стал одним из лучших построителей страниц сайта.

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

Интуитивно понятный интерфейс позволяет качественно создавать страницы сайта WordPress  пользователям с минимальными техническими знаниями.

Divi Leads устраняет необходимость в сторонних услугах по A/B тестированию.  Поскольку он интегрирован с Divi Builder — то это один из самых лёгких способов A/B тестирования на WordPress.

Если вы ищете универсальный инструмент с функциями интерактивного построения страниц — используйте для своего проекта Divi Builder.

Удачи!
Александр Коваль
Метки: