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

Панель настроек темы divi

Divi, как и любая современная тема для cms WordPress, поставляется с панелью настроек. Чтобы открыть эту панель, перейдите в Divi > Настройки темы.

Переход в панель настроек темы divi

Переход в панель настроек темы divi

Первое, что вы должны сделать — это выбрать логотип и favicon для вашего нового сайта. Логотип отобразится в шапке сайта.

Выбираем логотип и фавикон в теме divi

Выбираете логотип и фавикон в теме divi

Другие параметры, которые вы можете изменить в разделе «Общие», являются следующие:

  • включить / отключить фиксированную панель навигации;
  • активировать / деактировать галерею Divi;
  • использовать / не использовать первое изображение поста;
  • включить / отключить режим блога;
  • настройки для WooCommerce;
  • ключ API от Google;
  • показать/скрыть иконки социальных медиа;
  • пользовательский CSS;
  • настройка количества постов, отображающихся на страницах различных таксономий;
  • выбор формата даты;
  • включение / выключение адаптивных шорткодов.

В дополнение к этому, у вас есть вкладки, в которых можно настроить дополнительные параметры:

  • навигация
  • макет
  • реклама
  • seo
  • интеграция
  • обновления

Если вы хотите знать больше о конкретном параметре щелкните вопросительный знак (т. е. помочь) справа от этого параметра.

Значок помощи для детального пояснения параметров

Значок помощи для детального пояснения параметров

Создание структуры страницы с помощью визуального Builder

Визуальный Builder (конструктор) является основной фишкой темы divi. Он позволяет индивидуально настроить отображение контента на любой странице сайта.

Когда вы строите страницу с divi, то её структура состоит из стандартного раздела, рядов (строк), колонок и модулей. Раздел — это большой организационный элемент. Внутри него можно добавлять любое количество рядов, которые представляют собой элемент организации контента. В рядах вы выбираете нужный вам вариант расположения колонок. Сейчас доступно более 10 таких вариантов. А уже в колонки вы вставляете нужный вам модуль, представляющий собой готовый макет и служащий определенной цели. Их уже более 35.

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

Простая организация контента в divi

Пример реализации структуры страницы сайта

Примеры расположения колонок в ряду

А это примеры расположения колонок в ряду

Более 35 модулей на выбор

Более 35 модулей на выбор

Индивидуальные настройки доступны для каждого раздела, ряда и модуля. Вы сможете настроить дизайн, фоновые изображения, стили и многое другое. Интерфейс настройки прост в использовании. Просто заполните необходимые параметры, настройте ползунки, или нажмите кнопку для переключения (тумблер).

Есть три вкладки, на каждой странице настроек:

  • контент;
  • дизайн;
  • дополнительно.

Если вы хотите посмотреть, как модуль будет выглядеть, не выходя из редактора, нажмите на значок “глаз” в нижней части окна настройки. Как только вы закончите с настройками, вы можете нажать “сохранить и выйти” или “сохранить и добавить в библиотеку” (если хотите использовать тот же модуль в другой части вашего сайта).

Пример настроек модуля "Текст"

Пример настроек модуля «Текст»

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

Для неё доступно более 9 специализированных модулей (показаны на рисунке ниже).

Примеры модулей для полноэкранной секции

Примеры модулей для полноэкранной секции

И видео для закрепления:

Регулировка отступов между разделами и рядами

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

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

Пример настройки внутреннего отступа между рядами

Пример настройки внутреннего отступа между рядами

Если вы пытаетесь сделать отступы между двумя разделами/строками поменьше, то нужно установить значение “отступ снизу” первого раздела/строки и “отступ сверху” второго раздела/строки.

Работа с библиотекой divi

Использование библиотеки Divi позволяет экономить время на всем протяжении веб-разработки. Её суть в том, что вы можете создать с нуля макет страницы, а затем сохранить его в библиотеку. При создании новых однотипных или похожих страниц вы можете всего за пару кликов применить сохраненный макет.

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

Возможность сохранить или загрузить макет

Возможность сохранить или загрузить макет

Также вы можете сохранить в библиотеку отдельно какой-нибудь раздел или строку с набором модулей. Сделать это вы можете нажав на кнопку внизу слева «Сохранить и добавить в библиотеку» — как показано на рисунке ниже.

Добавление в библиотеку раздела или ряда с набором модулей

Добавление в библиотеку раздела или ряда с набором модулей