Модуль Разделитель Divi

Как добавить, настроить и адаптировать под свои требования модуль Divi — Разделитель.

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

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

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

После того, как вы вошли в Visual Builder, вы можете нажать серую кнопку с плюсом, чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы создаете новую страницу, не забудьте сначала добавить строку на свою страницу. У нас есть несколько уроков о том, как использовать строки и разделы Divi .

Найдите модуль разделитель в списке модулей и щелкните его, чтобы добавить на свою страницу. Список модулей доступен для поиска, что означает, что вы также можете ввести слово «разделитель», а затем нажать клавишу ВВОД, чтобы автоматически найти и добавить модуль отзывов! После добавления модуля вы увидите список его параметров. Эти параметры разделены на три основные группы: Контент, Дизайн и Расширенный.

Пример использования: добавьте настраиваемую линию-разделитель над заголовками разделов на странице.

Добавление стилизованной разделительной линии на веб-страницу с помощью модуля Divi Divider Module — удобное решение для обрамления ваших разделов и улучшения внешнего вида вашего заголовка.

В этом примере я покажу вам, как добавить минимальную разделительную линию над заголовком раздела толщиной 4 пикселя и шириной 50 пикселей. Маленькая линия делает две вещи. Во-первых, он добавляет элемент дизайна над вашими заголовками, чтобы они выглядели лучше. И во-вторых, разделительная линия отделяет раздел, обрамляя его для лучшей читаемости.

Здесь вы можете увидеть маленький розовый разделитель, реализованный по всей веб-странице.

Теперь я покажу вам, как добавить эту небольшую разделительную линию над одним из заголовков.

Используя Visual Builder, добавьте новую строку в 1 столбец над (или перед) заголовком раздела. Затем добавьте в эту строку модуль разделителя.

Обновите настройки разделителя следующим образом:

Вкладка Контент

Показывать разделитель: ДА

Вкладка Дизайн

Цвет ярлыка: #ea1d63 (pink)
Положение линии: Vertically Centered
Ширина разделителя: 4px
Высота: 4

Сохраните настройки.

Теперь вернитесь и отредактируйте настройки строки, которые вы создали для модуля Divider. На вкладке «Дизайн» в настройках модуля строк измените «Использовать нестандартную ширину» на ДА и установите для параметра «Настраиваемая ширина» значение 50 пикселей.

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

Теперь заголовок вашего раздела имеет тонкий разделитель, который добавляет красивый элемент дизайна.

Затем вы можете повторить этот процесс для всех заголовков разделов на своей странице.

Вкладка Контент модуля Разделитель

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

Показывать разделитель

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

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

Это изменит метку модуля в построителе для облегчения идентификации. При использовании представления WireFrame в Visual Builder эти метки будут отображаться в блоке модуля в интерфейсе Divi Builder.

Вкладка Дизайн модуля Разделитель

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

Цвет ярлыка

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

Ширина разделителя

Определите, сколько вертикального пространства вы хотите создать в модуле разделителя (в пикселях).

Вкладка Расширенный модуля Разделитель

На вкладке «Расширенный» вы найдете параметры, которые могут оказаться полезными для более опытных веб-дизайнеров, например настраиваемые атрибуты CSS и HTML. Здесь вы можете применить собственный CSS к любому из множества элементов модуля. Вы также можете применить к модулю собственные классы CSS и идентификаторы, которые можно использовать для настройки модуля в файле style.css вашей дочерней темы.

CSS ID

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

Класс CSS

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

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

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

Отключить на:

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