В статье приведен общий обзор конструктора страниц Divi builder от ElegantThemes для создания страниц сайтов на WordPress

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

Особенности конструктора Divi Builder

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$

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

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

$

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

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

Рассмотрим особенности Divi Builder подробнее.

В чем разница между 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) Настроить модули

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

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

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

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

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

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

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

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

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

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

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

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

u

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

Библиотека Divi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плагин 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 для своего проекта.

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

Метки: ,