Модуль Краткое Описание Divi

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

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

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

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

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

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

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

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

Чтобы добавить на страницу четыре Blurbs, используйте визуальный конструктор, чтобы добавить стандартный раздел с строкой из четырех столбцов. Затем добавьте модуль Blurb в первый столбец вашей строки.

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

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

Заголовок: [введите название сервиса]
Body: [введите короткое описание]
URL ссылки модуля: [ссылка на страницу сервиса]
Использовать иконку: ДА
Иконка: [подберите иконку подходящую вам]

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

Цвет иконки: #42bb99 (подберите цвет)
Использовать размер шрифта значка: ДА
Иконка размер текста: 68px (размер иконки)
Располождение текста: Center
Заголовок размер текста: 24px
Body Размер текста: 18px
Body Высота строки: 1.5em

Итак, ваша первая аннотация закончена.

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

Вкладка Контент модуля Краткое описание

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

Заголовок

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

Body

В это поле вы можете ввести основной текст вашего рекламного объявления. Blurb Text также будет охватывать всю ширину столбца до 550 пикселей.

URL ссылки заголовка

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

Целевая ссылка

Здесь вы можете выбрать, будет ли ваша ссылка открываться в новом окне.

Изображения и иконки

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

Икона

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

Изображение

Если вы не выбрали использование значка, появится этот параметр. Разместите здесь действительный URL-адрес изображения или выберите / загрузите изображение через медиа-библиотеку WordPress. Размытые изображения всегда будут располагаться по центру своих столбцов и будут занимать всю ширину столбца до 550 пикселей. Однако ваше изображение никогда не будет масштабироваться больше, чем исходный размер загрузки. Высота рекламного изображения определяется соотношением сторон вашего исходного изображения, поэтому сделать все ваши рекламные изображения одинаковой высоты — хорошая идея, если вы размещаете их рядом.

Фоновый цвет

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

Фоновая картинка

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

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

Это изменит метку модуля в построителе для облегчения идентификации. При использовании представления 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 расстояние между букв

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

Body высота текста

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

Рамка

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

Цвет рамки

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

Ширина рамки

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

Стиль рамки

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

Максимальная ширина изображения

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

Расстояние поле

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

Расстояние внутренний отступ

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

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

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

CSS ID

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

Класс CSS

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

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

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

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

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