Обзор разделов Divi

Разделы — это самые большие строительные блоки редактора, которые можно использовать по-разному.

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

Как добавить раздел на свою страницу

Прежде чем вы сможете добавить модуль раздела на свою страницу, вам нужно перейти в Divi Builder. После того, как тема Divi будет установлена ​​на вашем веб-сайте, вы заметите кнопку « Использовать Divi Builder» над редактором сообщений каждый раз, когда создаете новую страницу. Нажатие этой кнопки активирует Divi Builder, предоставляя вам доступ ко всем модулям Divi Builder. Затем нажмите кнопку « Использовать визуальный Builder», чтобы запустить редактор в визуальном режиме. Вы также можете нажать кнопку « Использовать Визуальный Builder» при просмотре своего веб-сайта в интерфейсе пользователя, если вы вошли в панель управления WordPress.

После того, как вы вошли в Визуальный Builder, вы можете нажать синюю кнопку с плюсом, чтобы добавить новый раздел на свою страницу. Вы увидите всплывающее окно, в котором можно добавить любой из трех типов разделов Divi. К этим типам относятся: Стандартный, Специальный и Полная.

После добавления раздела вы увидите список параметров раздела. Эти параметры разделены на три основные группы: Контент, Дизайн и Расширенный.

Параметры содержимого раздела

На вкладке содержимого вы найдете все элементы содержимого раздела.

Ссылка

Вы можете добавить ссылку и способ ее открытия (в новом окне или нет), которая откроется при нажатии на раздел.

Фон

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

Фоновый цвет

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

Градиент

Настройте цвет, тип, положение фонового градиента.

Изображение

Выберите фоновое изображение из галереи или вставьте ссылку на него. К изображению можно применить параллакс-эффект и выбрать позицию и отображение.

Фоновое видео

Все видео следует загружать в обоих форматах .MP4 .WEBM, чтобы обеспечить максимальную совместимость во всех браузерах. Загрузите обе версии в соответствующих полях. Видео-фоны отключены на мобильных устройствах. Вместо этого будет использоваться ваше фоновое изображение. По этой причине вы должны загрузить как фоновое изображение, так и фоновое видео, чтобы обеспечить наилучшие результаты. Важное примечание: для того, чтобы видеоформат MP4 работал во всех браузерах, на вашем сервере должны быть указаны правильные типы MIME. Вы можете узнать больше об использовании .htaccess для определения типов MIME здесь. Если вы замечаете, что ваши видео не воспроизводятся в некоторых браузерах, вероятно, причина в этом.

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

Метка администратора

Вы можете добавить метку с названием раздела, которая будет отображаться в блочном редакторе Divi Builder, а также в панели слоев (правая кнопка мыши > Go to Layer) .

Дизайн

На вкладке «Дизайн» вы найдете все параметры стиля раздела, такие как размеры и интервалы. Это вкладка, которую вы будете использовать, чтобы изменить внешний вид вашего раздела. Каждый тип раздела Divi имеет длинный список настроек дизайна, которые вы можете использовать, чтобы изменить что угодно.

Макет > Показать внутреннюю тень

Здесь вы можете выбрать, будет ли у вашего раздела внутренняя тень. Это может отлично выглядеть, если у вас цветной фон или фоновые изображения.

Разделитель

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

Размеры

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

Расстояние

Здесь вы можете настроить внутренние и внешние отступы раздела до определенных значений или оставить поле пустым, чтобы использовать отступы по умолчанию.

Рамка

Здесь вы можете настроить границу раздела, сделав ее видимой: ширину, цвет, закругление углов.

Тень (Box Shadow)

Здесь вы можете добавить тень к разделу. Чтобы отключить стиль тени нажмите «Нет».

Фильтр

Настройки яркости, контрастности, насыщенности, размытия содержимого блока.

Преобразование

Используя элементы управления преобразованием вы можете выполнить визуальную настройку элемента, используя комбинацию параметров настройки.

Анимация

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

Расширенные опции

ID и класс CSS > CSS ID

Вы можете назначить строке CSS ID, если хотите настроить таргетинг на нее в таблице стилей или с помощью якорных ссылок.

ID и класс CSS > КЛАСС CSS

Вы можете назначить CSS-класс, если хотите, чтобы он был нацелен на стили вашего раздела.

Пользовательский CSS

Здесь вы можете добавить собственный CSS, который будет применен до элемента, к элементу или после него.

Видимость

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

Использование полноразмерных секций

Разделы полной ширины предоставляют вам доступ к новому набору модулей полной ширины. Эти модули используют всю ширину браузера. Модули с полной шириной можно размещать только в разделах с полной шириной.

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

Отличным примером полноширинного модуля является полноразмерный слайдер. Этот полноширинный слайдер работает так же, как обычный слайдер, за исключением того, что он расширяется до 100% ширины. Отображение слайдера в таком масштабе может быть довольно ошеломляющим, просто посмотрите демонстрацию divi для примера.

Использование специальных разделов

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

Как только вы добавите на страницу специальный раздел, вы заметите, что в одной области есть кнопка «добавить модуль», а в другой — «вставить строку». Область «Вставить модуль» представляет вашу вертикальную боковую панель. Вы можете добавить сюда модули в одну строку, и они будут охватывать вертикальную ширину секции, рядом со структурой столбцов, которую вы строите рядом. Нажав «вставить строку», вы сможете вставить дополнительные строки слева / справа от боковой панели. В некотором смысле это можно представить как добавление строк внутри строк!

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