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

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

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

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

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

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

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

Пример использования: добавление Слайдера на страницу для продвижения товара

Слайдер — отличный способ продемонстрировать особенности вашего товара или услуги. Гароничное сочетание изображений и контента действительно может придать вашим товарам исключительный вид.

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

Используя Visual Builder, добавьте новый раздел с строкой в полную ширину (1 столбец). Затем вставьте модуль слайдера в новую строку. На вкладке «Контент» в настройках слайдера нажмите + Добавить новый элемент, чтобы создать свой первый слайд.

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

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

Заголовок: [введите заголовок слайда]
Кнопка: [введите текст кнопки]
Body: [введите текст для отображения на слайде]
URL ссылки кнопки: [введите URL адрес для перехода при нажатии на кнопку]
Изображение: [загрузите png изображение, свяанное с вашим товаром]
Фон: [выберите изобразение, которое будет служить фоном вашего слайда]

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

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

Использовать overlay на фоне: ДА

Цвет наложения фона: rgba (0,0,0,0.2) * это наложение слегка затемняет фоновое изображение, чтобы текст был более читабельным.

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

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

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

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

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

Показать стрелки

Выберите, хотите ли вы отображать стрелки навигации влево и вправо.

Показывать элементы управления

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

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

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

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

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

Навигация

Раздел в котором задается стиль навигации между слайдами.

Изображение

В данной вкладке задается стиль оформления окна слайдера, цвет, форма рамки.

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

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

Body текст

В данном раздеое Вы можете изменить настройки шрифта основного текста слайдера.

Кнопка

Настройка внешнего вида кнопки.

Размеры

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

Расстояние

Настройка отступов в слайдере

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

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

Класс CSS

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

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

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

Автоматическая анимация

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

Скорость автоматической анимации (в мс)

Здесь вы можете указать, насколько быстро сменяются слайды, если выше включена опция «Автоматическая анимация». Чем выше число, тем длиннее пауза между каждым поворотом.

Продолжить автоматическое скольжение при наведении курсора

Включение этого параметра позволит продолжить автоматическое скольжение при наведении курсора мыши.

Скрыть контент на мобильном устройстве

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

Скрыть призыв к действию (CTA) на мобильных устройствах

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

Показать изображение / видео на мобильном устройстве

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

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

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

Индивидуальные настройки модуля Слайдер — вкладка Контент

Заголовок

Укажите заголовок слайдера.

Кнопка

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

Body

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

URL ссылки кнопки

Если вы показываете кнопку, вставьте действительный веб-URL в это поле, чтобы определить целевую ссылку.

Фон

Здесь вы можете задать фон вашего слаайда. Цветной фон, градиент, изображение или видео. С сопутствующим им спектром настроек.

Индивидуальные настройки Слайдов — вкладка Дизайн

Использовать overlay на фоне

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

Цвет наложения фона

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

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

Цвет overlay текста

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

Изображение Прямоугольник с закругленными углами

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

Цвет стрелки

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

Цвет точки навигации

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

Выравнивание изображения

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

Цвет текста

Если фон вашего слайда темный, цвет текста должен быть установлен на «Светлый». И наоборот, если фон слайда светлый, цвет текста должен быть установлен на «Темный».

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

Вы можете изменить шрифт текста заголовка, выбрав нужный шрифт в раскрывающемся меню. 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 расстояние между букв

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

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

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

Использовать пользовательские стили для Кнопка

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

Кнопка размер текста

Этот параметр можно использовать для увеличения или уменьшения размера текста внутри кнопки. Кнопка будет масштабироваться по мере увеличения и уменьшения размера текста.

Кнопка Цвет текста

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

Кнопка Background

По умолчанию кнопки имеют прозрачный цвет фона. Это можно изменить, выбрав желаемый цвет фона в палитре цветов.

Кнопка Ширина рамки

По умолчанию все кнопки Divi имеют границу размером 2 пикселя. Эта граница может быть увеличена или уменьшена в размере с помощью этой настройки. Границы можно удалить, введя значение 0.

Кнопка цвет рамки

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

Кнопка радиус рамки

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

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

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

Кнопка Шрифт

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

Кнопка иконка

Отключено, этот параметр удалит значки с вашей кнопки. По умолчанию все кнопки Divi отображают значок стрелки при наведении курсора.

Кнопка иконка

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

Кнопка цвет иконки

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

Кнопка иконка размещения

Вы можете выбрать отображение значка кнопки слева или справа от кнопки.

Только показывать значок при наведении курсора мыши за Кнопка

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

Индивидуальные настройки вкладок модуля Слайдер — вкладка Расширенный

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

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