В этой статье рассмотрим базовую настройку известной темы divi для cms WordPress, которую можно использовать как конструктор для построения всех страниц на сайте. Преимущество divi в том, что можно создать полноценный блог, не написав ни одной строчки кода. Это очень круто — особенно для начинающих блогеров!
Панель настроек темы divi
Divi, как и любая современная тема для cms WordPress, поставляется с панелью настроек. Чтобы открыть эту панель, перейдите в Divi > Настройки темы.
Первое, что вы должны сделать — это выбрать логотип и favicon для вашего нового сайта. Логотип отобразится в шапке сайта.
Другие параметры, которые вы можете изменить в разделе «Общие», являются следующие:
- включить / отключить фиксированную панель навигации;
- активировать / деактировать галерею Divi;
- использовать / не использовать первое изображение поста;
- включить / отключить режим блога;
- настройки для WooCommerce;
- ключ API от Google;
- показать/скрыть иконки социальных медиа;
- пользовательский CSS;
- настройка количества постов, отображающихся на страницах различных таксономий;
- выбор формата даты;
- включение / выключение адаптивных шорткодов.
В дополнение к этому, у вас есть вкладки, в которых можно настроить дополнительные параметры:
- навигация
- макет
- реклама
- seo
- интеграция
- обновления
Если вы хотите знать больше о конкретном параметре щелкните вопросительный знак (т. е. помочь) справа от этого параметра.
Создание структуры страницы с помощью визуального Builder
Визуальный Builder (конструктор) является основной фишкой темы divi. Он позволяет индивидуально настроить отображение контента на любой странице сайта.
[box type=»info»] Когда вы строите страницу с divi, то её структура состоит из стандартного раздела, рядов (строк), колонок и модулей. Раздел — это большой организационный элемент. Внутри него можно добавлять любое количество рядов, которые представляют собой элемент организации контента. В рядах вы выбираете нужный вам вариант расположения колонок. Сейчас доступно более 10 таких вариантов. А уже в колонки вы вставляете нужный вам модуль, представляющий собой готовый макет и служащий определенной цели. Их уже более 35.[/box]
На картинке ниже представлен простой вариант организации контента на странице с 1 разделом, внутри которого находятся 2 ряда и 2 модуля: изображение, текст. Второй ряд показан для примера, чтобы отразить на каком этапе вы выбираете структуру колонок.
Индивидуальные настройки доступны для каждого раздела, ряда и модуля. Вы сможете настроить дизайн, фоновые изображения, стили и многое другое. Интерфейс настройки прост в использовании. Просто заполните необходимые параметры, настройте ползунки, или нажмите кнопку для переключения (тумблер).
Есть три вкладки, на каждой странице настроек:
- контент;
- дизайн;
- дополнительно.
Если вы хотите посмотреть, как модуль будет выглядеть, не выходя из редактора, нажмите на значок “глаз” в нижней части окна настройки. Как только вы закончите с настройками, вы можете нажать “сохранить и выйти” или “сохранить и добавить в библиотеку” (если хотите использовать тот же модуль в другой части вашего сайта).
[box type=»bio»] Если Вам необходимо вставить контент на всю ширину экрана, то выбирайте в качестве организационного элемента полноэкранную секцию.[/box]
Для неё доступно более 9 специализированных модулей (показаны на рисунке ниже).
И видео для закрепления:
Регулировка отступов между разделами и рядами
В первый раз, когда вы настроите свою первую структуру, вы останетесь, скорей всего, недовольны большими пробелами между разделами и рядами. Данные интервалы вы можете определить в настройках все тех же разделов и рядов.
Чтобы открыть настройки, необходимо нажать на три горизонтальные линии в верхнем левом углу указанного раздела или ряда.
Если вы пытаетесь сделать отступы между двумя разделами/строками поменьше, то нужно установить значение “отступ снизу” первого раздела/строки и “отступ сверху” второго раздела/строки.
Работа с библиотекой divi
Использование библиотеки Divi позволяет экономить время на всем протяжении веб-разработки. Её суть в том, что вы можете создать с нуля макет страницы, а затем сохранить его в библиотеку. При создании новых однотипных или похожих страниц вы можете всего за пару кликов применить сохраненный макет.
При создании структуры страницы в divi конструкторе вам представляется возможность сохранить весь макет целиком в библиотеку или загрузить его оттуда.
Также вы можете сохранить в библиотеку отдельно какой-нибудь раздел или строку с набором модулей. Сделать это вы можете нажав на кнопку внизу слева «Сохранить и добавить в библиотеку» — как показано на рисунке ниже.
