Введение
При создании сайта на WordPress один из шагов — это выбор рабочей темы. По сути выбор темы — это выбор «базового» дизайна сайта.
В поиске темы среди разнообразия может возникнуть «проблема выбора»: предложений много, а ни один вариант в полной мере не подходит.
Ведь часто оказывается, что:
- сайт с выбранной темой выглядит не так, как хочется;
- настроек темы или слишком много или слишком мало;
- изменения дизайна требует кодирования и глубоких технических знаний;
- для интерактивного создания дизайна страниц или записей нужно отдельно подключать плагины «конструкторы страниц».
Претендент на звание «идеальной темы»: тема Divi компании ElegantThemes. По данным сайта BuiltWith.com на август 2021 года более 7% всех сайтов WordPress сделаны на Диви
В статье рассмотрены особенности темы Divi, которые привели к ее популярности при создании сайтов на WordPress.
Особенности темы Divi
В теме есть конструктор макета сайта
В теме есть конструктор макета сайта Divi Theme Builder. C помощью Divi Theme Builder можно создать и настроить все части страниц сайта: верхний колонтитул страницы (хедер), контент и нижний колонтитул (футер), макет 404 страницы, макеты страниц категорий и многое другое без кодирования.
В тему встроены «конструкторы страниц»
В теме встроены два способа создания web-страниц: Divi Builder и Divi Visual Builder.
В Divi Builder — элементы страницы вставляются и настраиваются в редакторе «изнутри» страницы (бэкенд) и лишь потом можно увидеть их отображение на странице.
В Divi Visual Builder дизайн страницы создается прямо на странице в реальном времени — модули и элементы вставляются и настраиваются на странице визуально (фронтэнд). Когда ты делаеш изменения в визуальном редакторе на странице — все мгновенно обновляется прямо перед твоими глазами.
46 готовых элементов дизайна (модулей)
Тема поставляется с 46 различными модулями — элементами дизайна для контента на странице: кнопка, счетчик, блог, подписка, слайдер, заголовок и другие элементы. Комбинируйте, совмещайте и созавайте практически все, что можете себе представить
В тему добавлены модули настройки страниц товара для интернет магазинов на базе плагина Woocommerce.
220+ готовых макетов сайтов (1600+ готовых страниц)
Настраивается все
Каждый элемент (модуль, ряд, секция) полностью настраивается. Указывай шрифты, цвета, размеры, интервал, анимацию, границы и даже примени свой CSS к каждому элементу и макету страницы.
Начиная с Divi 4 в тему добавилась опция Theme Builder: конструктор макетов сайта. Данная опция позволяет вам настраивать заголовок сайта (хедер), подвал сайта (футер), страницы категорий, меток, 404 ошибки и другие. По сути — вы можете настроить весь сайт.
Библиотека элементов дизайна
Настроенные модули, ряды, секции и целые страницы можно сохранить в библиотеке для последующего использования. Возможен импорт, экспорт, совместное использование и загрузка объектов библиотеки из других проектов или Интернета.
Глобальные элементы библиотеки
Глобальный элемент библиотеки — общий элемент для нескольких страниц сайта. Возможна простая синхронизация глобальных элементов одним действием сразу на нескольких страницах. Обновляйте их один раз, и они обновляются повсюду на сайте.
Мобильные стили
А/В тестирование
В теме добавлен тип данных - "проекты"
Тема имеет русский и украинский переводы
Хорошая техническая поддержка темы
Безлимит по установке темы
Рассмотрим особенности WordPress темы Divi подробнее.
к оглавлению ↑«Конструкторы страниц» Divi Builder и Divi Visual Builder
В тему встроены два способа создания web-страниц: Divi Builder и Divi Visual Builder.
В Divi Builder страница создается путем вставки и настройки элементов на страницу в редакторе «изнутри» (бэкенд):
В случае Divi Builder ты перетаскиваешь и настраиваешь блоки, которые представляют элементы дизайна, не видишь сразу результаты работы.
В случае с Visual Builder работая с элементами ты сразу видишь результат своей работы — страницу в реальном виде. Visual Builder позволяет сокращать время построения страниц сайта.
С версии 3.0.64 (13 июля 2018 года) «конструкторы страниц» могут работать в пользовательских типах записей (товары, события,…):
Как работать с Divi Builder
Для включения Divi Builder и установки разметки нужно выбрать опции, появляющуюся каждый раз при создании новой страницы или записи:
1) Выбрать секцию: стандартный раздел, полноэкранная секция, специальная секция или секция из библиотеки
2) Для секции создать ряд, выбрав количество колонок.
3) В колонки разместить элементы дизайна (модули)
4) Настроить модули
Ниже приведена разметка ряда стандартной секции:
В теме Divi — 46+ готовых элементов дизайна (модулей)
Тема поставляется с 46 различными настраиваемыми модулями — элементами для дизайна на странице: кнопка, счетчик, блог, подписка, слайдер, заголовок и другие элементы:
В тему добавлены модули настройки страниц товара для интернет магазинов на базе плагина Woocommerce.
220+ готовых макетов сайтов (1600+ готовых страниц)
Для создания сайта в теме Divi есть возможность взять за его основу один из 220+ готовых шаблонов сайтов различной тематики (в общем — это более 1600 готовых страниц).
После загрузки шаблона останется отредактировать содержимое выбранных страниц, добавить свой контент, убрать лишние элементы.
В теме Divi настраивается все
Каждый элемент в теме полностью интерактивно настраивается. Указывай шрифты, цвета, размеры, интервал, анимацию, границы и даже примени пользовательский CSS к каждому элементу или всему макету страницы:
Начиная с редакции 3.17 в теме Divi появилась возможность отображать на страницах динамичексий контент.
Библиотека Divi
Библиотека темы — удобный инструмент для повторного использования готовых элементов дизайна. Настроенные модули, ряды, секции и целые страницы можно сохранить в библиотеке для последующего использования.
Возможен импорт, экспорт, совместное использование и загрузка объектов библиотеки из других проектов или Интернета.
Для помещения элемента в библиотеку достаточно выбрать пункт «Сохранить в библиотеку» в меню элемента и присвоить элементу имя:
Мобильные стили
Тема адаптирована для просмотра сайта на мобильных устройствах и планшетах.
В настройках элементов дизайна есть вкладки значений параметров для различных устройств, где можно установить разные значения для экрана, планшета и смартфона:
А/В тестирование Divi Leads
При A/B тестировании сравнивается конверсия двух разных версий страницы. К примеру, ты можешь изменить текст на кнопке, но всё остальное оставить без изменений. И тогда 50% посетителей будет показываться одна кнопка, а другим 50% – другая. В ходе этого эксперимента можно выяснить, на какую версию кнопки нажмёт больше людей.
Активирование сплит-тестирования для происходит в настройках Divi Builder на странице:
Объекты сплит-тестирования будут на странице продублированы. Каждая вариация сплит-тестирования будет отображаться для посетителей и будут собраться статистические данные, чтобы выяснить, какая вариация более результативная. Тест начнется, когда будет сохранена страница.
Сколько стоит тема Divi ?
Тема Divi отдельно не продаётся. Она является частью подписки Elegant Themes. Помимо темы Divi ты получаешь доступ еще до 87 тем компании, плагинов Bloom, Monarсh, Shortcodes, форума и технической поддержки компании.
На сегодня есть два пакета за пользование Elegant Themes: ежегодный взнос или бессрочный более дорогой одноразовый платёж:
Заключение
Divi – многоцелевая тема. Встроенный в тему Divi Builder стал одним из лучших конструкторов страниц.
Наличие модулей и готовых шаблонов страниц плюс использование библиотеки Divi для повторного использования элементов ускоряет создание красивых сайтов.
Интуитивно понятный интерфейс позволяет качественно настраивать тему пользователям с минимальными техническими знаниями.
Divi Leads устраняет необходимость в сторонних услугах по A/B тестированию. Поскольку он интегрирован с Divi Builder — то это один из самых лёгких способов A/B тестирования на WordPress.
Если вы ищете универсальную тему с функциями интерактивного построения страниц — используте Divi для своего проекта.
Александр Коваль
