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

Как добавить модуль Diapo полной ширины из Divi

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

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

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

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

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

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

Используя Visual Builder, добавьте раздел полной ширины вверху веб-страницы. Затем вставьте модуль Fullwidth Slider в новый раздел. На вкладке «Содержимое» в настройках полноразмерного слайда щелкните + Добавить новый предмет создать свой первый слайд.

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

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

En–голова : [введите название слайда]
Текст кнопки : [введите текст кнопки]
Содержание : [введите текстовое содержимое слайда]
URL кнопки : [введите целевой URL-адрес кнопки слайда]
Изображение на заднем плане : [введите изображение, которое будет служить фоном для слайда]

Варианты дизайна

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

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

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

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

Параметры полного содержимого слайдов

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

стрелки

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

Controles

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

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

Это изменит метку модуля в конструкторе для упрощения идентификации. Когда вы используете представление WireFrame в Visual Builder, эти метки появляются в модульном блоке интерфейса Divi Builder.

Параметры дизайна модуля слайдов

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

Убрать внутреннюю тень

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

Parallax эффект

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

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

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

Размер шрифта заголовка

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

Цвет текста заголовка

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

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

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

Высота строки заголовка

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

Орган полиции

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

Размер шрифта тела

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

Цвет текста тела

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

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

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

Высота линии тела

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

Верхняя обивка

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

Нижняя обивка

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

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

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

Размер текста кнопки

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

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

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

Цвет фона кнопки

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

Ширина границы кнопки

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

Цвет рамки кнопки

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

Рамка границы кнопки

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

Интервал букв кнопки

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

Шрифт кнопки

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

Добавить значок кнопки

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

Значок кнопки

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

Кнопка со значком цвета

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

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

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

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

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

Наведите текст текста на кнопку

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

Цвет фона кнопки наведения

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

Кнопка ограничения цвета

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

Наведите указатель поворота границы

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

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

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

Расширенные возможности полноразмерного слайд-модуля

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

CSS-идентификатор

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

Класс CSS

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

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

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

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

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

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

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

Продолжить Автоматическое слайд на Hover

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

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

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

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

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

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

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

видимость

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

Параметры содержимого для полноразмерных элементов слайд-модуля

Название

Установите текст заголовка вашего курсора здесь.

Текст кнопки

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

Содержание

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

URL кнопки

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

Перетащите изображение

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

Обратите внимание, что высоту слайда с изображением слайда можно определить по более высокому слайду в слайдере. Убедитесь, что изображение слайда достаточно велико, чтобы поместиться, если вы хотите выровнять изображение по нижнему краю. Для удобства чтения изображения слайдов отображаются только в ползунках шириной столбца, столбца или 1 столбца. Точно так же изображения слайдов не будут отображаться в браузере с шириной менее 768 пикселей. Ширина изображения слайда определена ниже. Мы рекомендуем, чтобы изображения слайдов были не меньше ширины.

Видео слайд

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

Пауза видео

Разрешить другим игрокам приостанавливать видео, когда они начинают воспроизведение

Фоновое изображение

Если установлено, это изображение будет использоваться в качестве фона для этого модуля. Чтобы удалить фоновое изображение, просто удалите URL-адрес из поля настроек.

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

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

Положение фонового изображения

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

Размер фонового изображения

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

Цвет фона

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

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

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

WEBM фоновое видео

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

Ширина фонового видео

Для правильного размера видео вы должны указать здесь точную ширину (в пикселях) вашего видео.

Высота фона видео

Для правильного размера видео вы должны указать здесь точную высоту (в пикселях) вашего видео.

Варианты оформления элементов скользящего элемента

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

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

Фоновый цвет наложения

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

Использовать наложение текста

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

Цвет текста

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

Пограничный радиус текста

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

Пользовательские Цветные Стрелки

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

Dot Nav Custom Color

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

Вертикальное выравнивание изображения слайда

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

Цвет текста

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

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

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

Размер шрифта заголовка

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

Цвет текста заголовка

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

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

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

Высота строки заголовка

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

тело шрифта

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

Размер шрифта тела

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

Цвет текста тела

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

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

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

Высота линии тела

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

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

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

Размер текста кнопки

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

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

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

Цвет фона кнопки

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

Кнопка ширины границы

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

Цвет рамки кнопки

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

Рамка границы кнопки

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

Интервал букв кнопки

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

Шрифт кнопки

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

Добавить значок кнопки

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

Значок кнопки

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

Кнопка со значком цвета

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

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

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

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

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

Наведите текст текста на кнопку

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

Цвет фона кнопки наведения

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

Кнопка ограничения цвета

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

Наведите указатель поворота границы

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

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

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

Дополнительные параметры курсора Полная ширина

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

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

Альтернативный текст изображения

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

[vc_row center_row="yes"][vc_column width="1/2"][vcex_button target="blank" layout="expanded" align="center" font_family="Raleway" font_weight="700" style="flat" 18 /69″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=118&url=7&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”2″ style=”flat” custom_background=”#c23065e” custom_hover_background=”#40632d1f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”] СКАЧАТЬ ШАБЛОНЫ DIVI[/vcex_button][/vc_column][/vc_row]

Другие учебные пособия Divi

• сайты 5 для использования ресторана Divi темы
• Как добавить текст в продукт Divi WooCommerce
• Как изменить цвет меню между страницами Divi
• Как персонализировать сетки блога с Divi
• Как использовать роль DiVi редактор на WordPress
• Как создать полноэкранный слайдер Divi
• Как изменить цвет меню между страницами Divi
• Особенности, которые вы, вероятно, не знаете о Divi
• Как использовать Divi Builder в WordPress
• Как использовать модуль прокрутки видео Divi
• Как использовать модуль Flip Builder Flip
• Как добавить отзыв модуль на Divi Builder
• Как использовать текстовый модуль Divi
• Как создать слайдер на Divi
• Как редактировать роль пользователя Divi
• Как использовать модуль Divi Social Media
• Как пользоваться магазинным модулем на тему WordPress Divi
• Как использовать боковую панель Divi
• Как использовать модуль таблицы цен Divi
• Как использовать титульный модуль изданий Divi
• Как добавить видео модуль Divi
• Как использовать навигационный модуль статьи
• Как использовать модуль поиска Divi
• Как использовать модуль кошелька Divi
• Как использовать модуль пользователя в Divi Builder
• Как использовать модуль кошелька с фильтром Divi
• Как использовать ползунок полной ширины
• Как использовать модуль изображения Divi Builder
• Как использовать полноразмерный навигационный модуль Divi Builder
• Как использовать модуль галереи изображений
• Как использовать модуль карты полной ширины Divi Builder
• Как использовать модуль Divi Full Width Portfolio
• Как использовать полноразмерный заголовочный модуль Divi
• Как использовать Divi Counter Module
• Как использовать слайдер статей в Divi Builder
• Как использовать модуль Divi Email Optin