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

кнопка divi builder module blog divi

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

модуль резюме divi builder.png

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

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

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

Страница сервиса divi.png

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

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

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

Название: [введите название услуги]
Содержание: [введите краткое описание услуги]
URL: [добавить URL на страницу сервиса]
Используйте значок: ДА
Значок: [выберите значок, который иллюстрирует ваш сервис]

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

Цвет значка: # 42bb99 (выберите цвет, соответствующий дизайну сайта)
Используйте значок размера шрифта: ДА
Размер шрифта значка: 68 пикселей (регулирует размер значка)
Ориентация текста: по центру -
Размер шрифта головы: 24 пикселей
Размер шрифта: 18 пикселей
Высота линии тела: 1.5em

дизайнерские услуги divi.png

Теперь ваш первый вводный текст закончен.

список услуг divi builder.jpg

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

полный список услуг divi.jpg

Сводные параметры содержимого

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

Сводка параметров модуля wordpress.png

Название

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

Содержание

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

URL

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

Открытие URL-адреса

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

Значок использования

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

значок

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

использовать иконки divi builder.png

Фото товара

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

Цвет фона

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

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

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

Значок администратора

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

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

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

модуль дизайна варианта резюме divi.png

Цвет значка

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

Значок круга

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

Цвет круга

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

Показать границу круга

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

Цвет границы круга

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

Размещение изображения / значка

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

Использовать размер шрифта значка

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

Цвет текста

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

Текстовая ориентация

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

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

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

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

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

Модуль суммирует стиль раздела title.png

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

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

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

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

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

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

Шрифт тела

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

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

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

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

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

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

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

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

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

Использовать границу

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

Цвет границы

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

Ширина границы

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

Конфигурация модуля sbourdires резюме divi builder.png

Стиль границ

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

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

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

Таможенная маржа

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

Custom Padding

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

Расширенные параметры Сводный модуль

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

раздел резюме модуля advance.png

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

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

Класс CSS

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

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

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

Изображение / значок анимации

Это контролирует направление анимации отложенной загрузки.

ALT текст из изображения

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

видимость

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

Это все для этого урока. Мы надеемся, что показали вам, как использовать сводный модуль в Divi.