Модуль Сайдбар Divi

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

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

Как добавить модуль Сайдбар на свою страницу

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

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

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

Пример использования: добавление Боковой панели (сайдбара) на страницу блога

Модуль боковой панели позволяет вставлять боковую панель (и все ее встроенные виджеты) в любом месте вашей страницы. Фактически, вы можете добавить любую область виджетов, используя модуль боковой панели. В этом примере я собираюсь показать вам, как вставить настраиваемую боковую панель на страницу вашего блога, используя специальный раздел для отображения виджета WordPress «Поиск» и «Последние сообщения».

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

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

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

Затем разверните Visual Builder для редактирования страницы блога. Добавьте на свою страницу специальный раздел (Вставить Секцию) со следующим макетом:

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

Другой (справа) имеет кнопку «вставить строку». Область «Вставить модуль» представляет вашу вертикальную боковую панель. Здесь вы войдете в модуль боковой панели. Вы можете добавить сюда столько модулей, в одну строку, и они будут охватывать вертикальную ширину секции, рядом со структурой столбцов, которую вы строите рядом с ней. Фактически, для этого примера на странице блога уже есть модуль электронной почты и персональный модуль в этой вертикальной боковой панели макета Specialty.

Теперь давайте добавим модуль боковой панели поверх других модулей в области вертикальной боковой панели.

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

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

Область виджета: сайдбар

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

Выравнивание: Справа
Удалить разделитель: Да
Цвет текста: Темный
Заголовок размер текста: 26 px
Заголовок расстояние между букв: 3 px
Заголовок высота строки: 1.1 em

Вкладка Расширенный

В разделе Пользовательский CSS добавьте следующий CSS код в текстовую область ВИДЖЕТ. Это приведет к тому, что дизайн виджетов боковой панели будет соответствовать дизайну сайта:

background: #fff;
padding: 20px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);

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

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

Вкладка Контент модуля Сайдбар

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

Облась виджета

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

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

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

Вкладка Дизайн модуля Слайдер

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

Выравнивание

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

Удалить разделитель

Здесь вы можете удалить тонкую серую рамку, отделяющую боковую панель от содержимого страницы.

Цвет текста

Здесь вы можете выбрать, должен ли ваш текст быть светлым или темным. Если вы работаете с темным фоном, ваш текст должен быть светлым. Если ваш фон светлый, тогда ваш текст должен быть темным.

Заголовок Шрифт

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

Заголовок Размер текста

Здесь вы можете настроить размер текста заголовка. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или вы можете ввести желаемое значение размера текста прямо в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Заголовок цвет текста

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

Заголовок расстояние между букв

Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить расстояние между каждой буквой в тексте заголовка, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Заголовок высота стоки

Высота строки влияет на расстояние между каждой строкой текста заголовка. Если вы хотите увеличить расстояние между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Body шрифт 

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

Body размер текста

Здесь вы можете настроить размер основного текста. Вы можете перетащить ползунок диапазона, чтобы увеличить или уменьшить размер текста, или вы можете ввести желаемое значение размера текста прямо в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Body Цвет текста

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

Body раcстояние между букв

Расстояние между буквами влияет на расстояние между буквами. Если вы хотите увеличить интервал между каждой буквой в основном тексте, используйте ползунок диапазона, чтобы отрегулировать интервал, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Body высота строки

Высота строки влияет на расстояние между каждой строкой основного текста. Если вы хотите увеличить расстояние между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «px» или «em» после вашего значения размера, чтобы изменить его тип единицы измерения.

Вкладка Расширенный модуля Сайдбар

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

ID и классы CSS

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

Класс CSS

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

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

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

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

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