Divi Builder — по сути это построитель страниц сайта ( конструктор странициц), с помощью которого можно создавать без кода (no code) страницы сайта на WordPress.
Divi Builder встроен в тему Divi и тему Extra, а также существует в виде отдельного плагина, который можно подключить к любому сайту WordPress.
1. Особенности Диви Билдера
Не требуется кодирование (No Code)
Конструктор позволяет создавать страницы WordPress без каких-либо знаний в области кодирования. Можно построить страницу визуально.
Используется с любой темой WordPress
1) элементы страницы вставляются и настраиваются в редакторе «изнутри» страницы (бэкенд) и лишь потом можно увидеть их отображение на странице.
2) в визуальном редакторе дизайн страницы создается прямо на странице — модули и элементы вставляются и настраиваются на странице визуально (фронтэнд) и все мгновенно обновляется прямо перед твоими глазами.
Всегда можно переключаться между этими способами
40+ готовых элементов дизайна (модулей)
2000+ готовых макетов страниц
Начните процесс создания страницы, используя один из 2000+ уже готовых макетов страниц из 200+ прототипов сайтов из библиотеки компании ElegantThemes. Загружайте страницы к себе на сайт, редактируйте данные, убирайте лишнее, добавляйте свое
Создание своей библиотеки элементов дизайна
Настроенные модули, ряды, секции и целые страницы можно сохранить в своей библиотеке для последующего использования.
Возможен импорт, экспорт, совместное использование и загрузка объектов библиотеки из других проектов или Интернета.
Глобальные элементы библиотеки
Глубокая настройка всех элементов ( настраивается все)
Каждый элемент (модуль, ряд, секция) полностью настраивается. Указывайте шрифты, цвета, размеры, интервал, анимацию, границы и даже применяйте свой CSS к каждому элементу и макету страницы.
Мобильные стили
А/В тестирование
ЕСТЬ русский и украинский переводы
Хорошая техническая поддержка темы
Рассмотрим особенности 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), в колонки вставляются элементы дизайна (модули):
- Выбрать секцию: стандартный раздел, полноэкранная секция, специальная секция или секция из библиотеки
- Для секции создать ряд, выбрав количество колонок.
- В колонки разместить элементы дизайна (модули)
- Настроить модули
Ниже приведена разметка ряда стандартной секции:
3. В конструкторе 46+ готовых элементов дизайна (модулей)
Конструктор поставляется с 46 различными настраиваемыми модулями — элементами для дизайна на странице: кнопка, счетчик, блог, подписка, слайдер, заголовок и другие элементы:
4. 280+ готовых прототипов сайтов (2000+ готовых страниц)
Для создания страниц с помощью Divi Builder есть возможность взять за основу один из 280+ готовых прототипов сайтов различной тематики (в общем — это 600+ готовых страниц).
После загрузки страницы останется отредактировать содержимое страницы, добавить свой контент, убрать лишние элементы.
Правда, воспользоваться шаблонами страниц возможно только для активной подписки на Divi.
5. Divi Builder гибок в настройке: настраивается все
Каждый элемент в теме полностью интерактивно настраивается. Указывайте шрифты, цвета, размеры, интервал, анимацию, границы и даже применяйте пользовательский CSS к каждому элементу или всему макету страницы:
Начиная с редакции 2.17 появилась возможность отображать на страницах динамичексий контент.
6. Библиотека Divi
Настроенные в конструкторе модули, ряды, секции и целые страницы можно сохранить в библиотеке Divi для повторного использования.
Возможен импорт, экспорт, совместное использование и загрузка объектов библиотеки из других проектов или Интернета.
Для помещения элемента в библиотеку достаточно выбрать пункт «Сохранить в библиотеку» в меню элемента и присвоить элементу имя:
7. Мобильные стили
Тема адаптирована для просмотра сайта на мобильных устройствах и планшетах.
В настройках элементов дизайна есть вкладки значений параметров для различных устройств, где можно установить разные значения для экрана, планшета и смартфона:
8. А/В тестирование Divi Leads
При A/B тестировании сравнивается конверсия двух разных версий страницы. К примеру, вы можете изменить текст на кнопке, но всё остальное оставить без изменений. И тогда 50% посетителей будет показываться одна кнопка, а другим 50% – другая. В ходе этого эксперимента можно выяснить, на какую версию кнопки нажмёт больше людей.
Активирование сплит-тестирования для происходит в настройках Divi Builder на странице:
Объекты сплит-тестирования будут на странице продублированы. Каждая вариация сплит-тестирования будет отображаться для посетителей и будут собраться статистические данные, чтобы выяснить, какая вариация более результативная. Тест начнется, когда будет сохранена страница.
9. Сколько стоит плагин Divi Builder?
Плагин отдельно не продаётся. Он является частью подписки Elegant Themes. Помимо плагина при подписке вы получаете доступ к теме Divi и теме Extra, плагинам Bloom, Monarсh, Shortcodes, к форуму и технической поддержки компании.
На момент написания статьи есть два пакета за пользование Elegant Themes: ежегодный взнос или безлимитный доступ на всю оставшуюся жизнь:
Заключение
Divi Builder стал одним из лучших построителей страниц сайта без еодирования.
Наличие модулей и готовых шаблонов страниц плюс использование библиотеки Divi для повторного использования элементов ускоряет создание красивых сайтов.
Интуитивно понятный интерфейс позволяет качественно создавать страницы сайта WordPress пользователям с минимальными техническими знаниями.
Divi Leads устраняет необходимость в сторонних услугах по A/B тестированию. Поскольку он интегрирован с Divi Builder — то это один из самых лёгких способов A/B тестирования на WordPress.
Если вы ищете универсальный инструмент с функциями интерактивного построения страниц — используйте для своего проекта Divi Builder.
Александр Коваль
