Divi Tutorial: Как использовать ползунок полной ширины
06.09.2018
Divi: самая простая тема WordPress для использования
Вот лучшие инструменты для монетизации вашего блога
Дива позволяет разместить ползунки в полноразмерных разделах, поэтому ваши курсоры охватывают всю ширину браузера. Слайдеры Divi поддерживают фон параллакса, а также фоновые изображения!
Прежде чем вы сможете добавить ползунок полной ширины на свою страницу, вы должны сначала перейти в Divi Builder. После того, как тема Divi установлена на вашем веб-сайте, вы заметите кнопку Использовать Divi Builder над издателем каждый раз, когда вы создаете новую страницу. Нажмите эту кнопку, чтобы активировать Divi Builder и получить доступ ко всем модулям Divi Builder. Затем нажмите кнопку Использовать Visual Builder для запуска генератора в визуальном режиме. Вы также можете нажать на кнопку Использовать Visual Builder когда вы просматриваете свой сайт на переднем плане, если вы подключены к панели инструментов WordPress.
Когда вы в Visual Builder, вы можете нажать кнопку «серый плюс», чтобы добавить новый модуль на свою страницу. Новые модули можно добавлять только внутри строк. Если вы запустите новую страницу, не забудьте сначала добавить строку на свою страницу.
Найдите модуль курсора в списке модулей и нажмите на него, чтобы добавить его на свою страницу. Список модулей доступен для поиска, а это значит, что вы также можете ввести слово «Слайд», а затем нажмите «Ввод», чтобы автоматически найти и добавить полноразмерный слайдер! После добавления модуля вы будете приветствоваться списком параметров модуля. Эти параметры разделены на три основные группы: Содержание ,Дизайн и Передовой ,
Пример использования примера: добавьте полку героев ползунка на главную страницу
Ползунок полной ширины - отличный способ представить несколько CTA выше порога вашей домашней страницы. Комбинация изображений и контента может действительно дать вашему разделу профессиональное ощущение, которое выделяется.
В этом примере я добавлю ползунок полной ширины, который будет служить основным разделом на домашней странице.
Используя Visual Builder, добавьте раздел Fullwidth в начало вашей веб-страницы. Затем вставьте ползунок 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 px. Вы также можете ввести процентное значение, например 10%, чтобы сделать высоту более динамичной.
Нижняя прокладка
Этот параметр управляет внутренним пространством между нижней частью модуля и текстовым контентом в модуле. Если вы хотите увеличить или уменьшить это пространство, введите здесь нужное значение. Например, чтобы уменьшить общее пространство и размер слайдера, вы можете ввести значение 100 px. Вы также можете ввести процентное значение, например 10%, чтобы сделать высоту более динамичной.
Используйте пользовательские стили для кнопки
Включение этой опции показывает различные параметры настройки для кнопок, которые вы можете использовать для изменения внешнего вида кнопки на вашем модуле.
Размер текста кнопки
Этот параметр можно использовать для увеличения или уменьшения размера текста в кнопке. Кнопка изменяется с увеличением и уменьшением размера текста.
Цвет текста кнопки
По умолчанию кнопки используют акцент цвета вашей темы, как это определено в настройке темы. Эта опция позволяет вам назначить цвет настраиваемого текста кнопке на этом модуле. Выберите свой собственный цвет с помощью панели выбора цветов, чтобы изменить цвет кнопки.
Цвет фона кнопки
По умолчанию кнопки имеют прозрачный цвет фона. Это можно изменить, выбрав желаемый цвет фона в панели выбора цветов.
Ширина границы кнопки
Все кнопки Divi имеют границу 2px по умолчанию. Эта граница может быть увеличена или уменьшена с помощью этого параметра. Границы можно удалить, введя значение 0.
Цвет рамки кнопки
По умолчанию границы кнопок меняются на цвет акцента вашей темы, как это определено в настройке темы. Эта опция позволяет вам назначить настраиваемый цвет границы кнопке на этом модуле. Выберите свой собственный цвет, используя цветной выбор, чтобы изменить цвет границы кнопки.
Рамка границы кнопки
Радиус границы влияет на округлость углов ваших кнопок. По умолчанию кнопки в Divi имеют небольшой радиус границы, который округляет углы 3 пикселей. Вы можете уменьшить это значение до 0, чтобы создать квадратную кнопку или значительно увеличить ее для создания кнопок с круговыми краями.
Интервал букв кнопки
Интервал букв влияет на пространство между каждой буквой. Если вы хотите увеличить пробел между каждой буквой в тексте кнопки, используйте ползунок диапазона, чтобы отрегулировать пространство или ввести желаемый размер расстояния в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, а это означает, что вы можете ввести «px» или «em» в зависимости от значения вашего размера, чтобы изменить его тип устройства.
Шрифт кнопки
Вы можете изменить шрифт текста кнопки, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками больших шрифтов на основе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль своего текста, используя выделенные жирным шрифтом, курсивом, прописными и подчеркнутыми параметрами.
Добавить значок кнопки
Отключено, этот параметр удалит значки с вашей кнопки. По умолчанию все кнопки Divi отображают значок стрелки в режиме наведения.
Значок кнопки
Если значки включены, вы можете использовать этот параметр, чтобы выбрать значок, который будет использоваться в вашей кнопке. У Divi есть разные значки на выбор.
Кнопка цветного значка
Установка этого параметра изменит цвет значка, который появляется на вашей кнопке. По умолчанию цвет значка совпадает с цветом текста ваших кнопок, но этот параметр позволяет вам регулировать цвет независимо.
PEARL: тема WordPress для бизнеса
Кнопка размещения значков
Вы можете отображать значок своей кнопки слева или справа от вашей кнопки.
Показывать только значок, когда кнопка перекатывается
По умолчанию значки кнопок отображаются только во время опроса. Если вы хотите, чтобы значок всегда отображался, отключите эту настройку.
Наведите текст текста на кнопку
Когда кнопка переместится мышью посетителя, этот цвет будет использоваться. Цвет изменится с базового цвета, определенного в предыдущих настройках.
Цвет фона кнопки наведения
Когда кнопка переместится мышью посетителя, этот цвет будет использоваться. Цвет изменится с базового цвета, определенного в предыдущих настройках.
Кнопка ограничения цвета
Когда кнопка переместится мышью посетителя, этот цвет будет использоваться. Цвет изменится с базового цвета, определенного в предыдущих настройках.
Наведите указатель поворота границы
Когда кнопка переместится мышью посетителя, это значение будет использовано. Значение изменится с базового значения, определенного в предыдущих параметрах.
Кнопка разметки заметок
Когда кнопка переместится мышью посетителя, это значение будет использовано. Значение изменится с базового значения, определенного в предыдущих параметрах.
Расширенные возможности полноэкранного слайд-модуля
На вкладке «Дополнительно» вы найдете варианты, которые могут быть полезны более опытным веб-дизайнерам, например атрибутам 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 пикселей. Ширина слайд-изображения определяется ниже. Мы рекомендуем, чтобы ваши слайд-изображения были как минимум шириной.
Elementor: легко создать свой сайт - 100% Free
Видео слайд
Если вы добавите слайд-видео, он будет отображаться слева от вашего текста слайда над фоном слайда. Если вы не укажете слайд-видео, вы оставите его с помощью центрированного слайда, только текст. Поскольку высота каждого слайда определяется текстом, если изображение на слайде достаточно высоко, оно опускается ниже нижней части слайда, создавая изображение, выровненное снизу.
Пауза видео
Разрешить видео приостанавливать другие игроки, когда они начинают играть
Фоновое изображение
Если установлено, это изображение будет использоваться в качестве фона для этого модуля. Чтобы удалить фоновое изображение, просто удалите URL-адрес из поля настроек.
Высота слайда определяется количеством добавляемого текста. Если у вас несколько слайдов, курсор займет высоту самого высокого слайда.
Ширина вашего курсора определяется шириной браузера. Основываясь на стандартных размерах экрана, мы рекомендуем, чтобы ваши изображения были как минимум 1280px 768px.
Положение фонового изображения
По умолчанию фоновые изображения отображаются в центре слайда. Вы можете использовать эту настройку для изменения положения сверху, снизу, слева, справа или в одном из четырех углов слайда.
Размер фонового изображения
По умолчанию фоновые изображения будут увеличены пропорционально, чтобы обеспечить заполнение всего слайда. Однако вы можете использовать эту опцию для изменения поведения по умолчанию. «Обложка» - это поведение по умолчанию, которое масштабирует изображение, чтобы покрыть всю область слайда. «Fit» также заставит изображение покрыть всю область, однако оно будет заставлять высоту и ширину изображения соответствовать высоте и ширине ползунка. Это может привести к искажению изображения, но это предотвратит обрезку изображения. «Фактический размер» не масштабирует изображение и отображает его на свой собственный размер.
Цвет фона
Если вы просто хотите использовать сплошной цвет фона для слайда, используйте цветной выбор, чтобы установить цвет фона.
Фоновый видеоролик 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 имеют границу 2px по умолчанию. Эта граница может быть увеличена или уменьшена с помощью этого параметра. Границы можно удалить, введя значение 0.
Цвет рамки кнопки
По умолчанию границы кнопок меняются на цвет акцента вашей темы, как это определено в настройке темы. Эта опция позволяет вам назначить настраиваемый цвет границы кнопке на этом модуле. Выберите свой собственный цвет, используя цветной выбор, чтобы изменить цвет границы кнопки.
Рамка границы кнопки
Радиус границы влияет на округлость углов ваших кнопок. По умолчанию кнопки в Divi имеют небольшой радиус границы, который округляет углы 3 пикселей. Вы можете уменьшить это значение до 0, чтобы создать квадратную кнопку или значительно увеличить ее для создания кнопок с круговыми краями.
Интервал букв кнопки
Интервал букв влияет на пространство между каждой буквой. Если вы хотите увеличить пробел между каждой буквой в тексте кнопки, используйте ползунок диапазона, чтобы отрегулировать пространство или ввести желаемый размер расстояния в поле ввода справа от ползунка. Поля ввода поддерживают разные единицы измерения, а это означает, что вы можете ввести «px» или «em» в зависимости от значения вашего размера, чтобы изменить его тип устройства.
Шрифт кнопки
Вы можете изменить шрифт текста кнопки, выбрав нужный шрифт в раскрывающемся меню. Divi поставляется с десятками больших шрифтов на основе Google Fonts. По умолчанию Divi использует шрифт Open Sans для всего текста на вашей странице. Вы также можете настроить стиль своего текста, используя выделенные жирным шрифтом, курсивом, прописными и подчеркнутыми параметрами.
Добавить значок кнопки
Отключено, этот параметр удалит значки с вашей кнопки. По умолчанию все кнопки Divi отображают значок стрелки в режиме наведения.
Значок кнопки
Если значки включены, вы можете использовать этот параметр, чтобы выбрать значок, который будет использоваться в вашей кнопке. У Divi есть разные значки на выбор.
Кнопка цветного значка
Установка этого параметра изменит цвет значка, который появляется на вашей кнопке. По умолчанию цвет значка совпадает с цветом текста ваших кнопок, но этот параметр позволяет вам регулировать цвет независимо.
Кнопка размещения значков
Вы можете отображать значок своей кнопки слева или справа от вашей кнопки.
Показывать только значок, когда кнопка перекатывается
По умолчанию значки кнопок отображаются только во время опроса. Если вы хотите, чтобы значок всегда отображался, отключите эту настройку.
Наведите текст текста на кнопку
Когда кнопка переместится мышью посетителя, этот цвет будет использоваться. Цвет изменится с базового цвета, определенного в предыдущих настройках.
Цвет фона кнопки наведения
Когда кнопка переместится мышью посетителя, этот цвет будет использоваться. Цвет изменится с базового цвета, определенного в предыдущих настройках.
Кнопка ограничения цвета
Когда кнопка переместится мышью посетителя, этот цвет будет использоваться. Цвет изменится с базового цвета, определенного в предыдущих настройках.
Наведите указатель поворота границы
Когда кнопка переместится мышью посетителя, это значение будет использовано. Значение изменится с базового значения, определенного в предыдущих параметрах.
Кнопка разметки заметок
Когда кнопка переместится мышью посетителя, это значение будет использовано. Значение изменится с базового значения, определенного в предыдущих параметрах.
Расширенные возможности курсора Fullwidth
пользовательских CSS
Пользовательский CSS также может применяться к модулю и к одному из внутренних элементов модуля. В разделе «Пользовательский CSS» вы найдете текстовое поле, в котором вы можете добавлять собственные таблицы стилей CSS непосредственно к каждому элементу. Элементы CSS в этих параметрах уже завернуты в теги стиля. Поэтому просто введите правила CSS, разделенные точкой с запятой.
Альтернативный текст изображения
Альтернативный текст предоставляет всю необходимую информацию, если изображение не загружается, не отображается правильно или в любой другой ситуации, когда пользователь не может видеть изображение. Он также позволяет считывать и распознавать изображения поисковыми системами.
Вы ищете лучшие темы и плагины WordPress?
Пользователи BlogPasCher рекомендуют следующие категории: