Обзор темы Divi от ElegantThemes для создания сайтов на WordPress

При создании сайта на WordPress один из шагов — это выбор рабочей темы. По сути выбор темы — это выбор «базового» дизайна сайта.

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

Ведь часто оказывается, что:

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

Претендент на звание «идеальной темы»: тема Divi компании ElegantThemes.  В статье рассмотрены особенности темы Divi, которые дают мне повод так утверждать.

Divi

Особенности темы Divi

В тему встроены «конструкторы страниц»

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

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

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

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

Начни процесс проектирования страницы, используя один из 20+ готовых макетов, которые поставляются вместе с темой.

78+ готовых макетов сайтов (590 готовых страниц)

Ускорь создание сайта, взяв за его основу один из 78+ готовых шаблонов сайтов различной тематики.

Настраивается все

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

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

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

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

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

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

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

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

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

Следует отметить еще ряд особенностей для темы:

$

В теме добавлен тип данных - "проекты"

Тип данных «проекты» удобен для создания портфолио. В теме есть элементы для работы с данным типом данных

$

Тема имеет русский и украинский переводы

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

$

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

Компания ElegantThemes достаточно хорошо обеспечивает техническую поддержку и обновление темы. На форуме компании и среди сообщества пользователей можно найти ответы на вопросы по теме.

$

Безлимит по установке темы

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

Рассмотрим особенности WordPress-темы Divi подробнее.

«Конструкторы страниц» Divi Builder и Divi Visual Builder

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

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

Разница способов:

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

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

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

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

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

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

Процедура конструирования страницы:
1) Выбрать секцию: стандартный раздел, полноэкранная секция, специальная секция или секция из библиотеки
2) Для секции создать ряд, выбрав количество колонок.
3) В колонки разместить элементы дизайна (модули)
4) Настроить модули

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

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

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

В теме Divi — 20+ готовых макетов страниц

Тема поставляется с 20+ различными шаблонами для страниц: «домашняя страница», «портфолио», «особенности продукта», «о нас», «наша команда» и другие макеты:

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

78+ готовых макетов сайтов (590 готовых страниц)

Для создания сайта в теме Divi есть возможность взять за его основу один из 78+ готовых шаблонов сайтов различной тематики (в общем — это 590 готовых страниц).
После загрузки шаблона останется отредактировать содержимое выбранных страниц, добавить свой контент, убрать лишние элементы.

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

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

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

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

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

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

u

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

Параметры темы для общей настройки сайта можно задать выбрав вкладку «Настройка темы» в админпанели WordPress:

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

Более «глубокую» настройку сайта можно сделать в Customizer темы, выбрав «Настройщик темы» или «Внешний вид»->»Настроить» в админпанели WordPress:

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

Библиотека Divi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сколько стоит тема Divi ?

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

На сегодня есть два пакета за пользование Elegant Themes: ежегодный взнос или бессрочный более дорогой одноразовый платёж:

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

Заключение

Divi – многоцелевая тема. Встроенный в тему Divi Builder стал одним из лучших конструкторов страниц.

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

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

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

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

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

Метки: