Модуль Элемент-Аккордеон Divi

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

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

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

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

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

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

Пример использования: демонстрация функций продукта с помощью модуля Аккордеон

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

Вот модуль переключения в действии:

Давайте начнем.

Используйте визуальный конструктор, чтобы добавить регулярный раздел со строкой 1/2 1/2 (2 столбца). Измените настройки раздела, чтобы изменить цвет фона на # d94b6a (розовый).

В левом столбце добавьте изображение вашего продукта.

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

Наконец, добавьте модуль аккордеона прямо под текстовым модулем в правом столбце.

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

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

Цвет фона открытого переключателя: #ffffff
Цвет фона закрытого переключателя: rgba(255,255,255,0.83)

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

Цвет иконки: #d94b6a
Цвет текста открытого заголовка: #333333
Цвет текста закрытого заголовка: #333333
Закрытое название шрифт: Raleway
Закрытое название размер текста: 20px

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

На вкладке Content нажмите + Add New Item, чтобы добавить свой первый аккордеон в модуль.

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

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

Заголовок: [введите название]
Body: [введите текст]

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

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

Готово! Аккордеон отлично смотрится, сохраняет компактность и прекрасно вписывается в раздел страницы.

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

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

Цвет фона открытого переключателя

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

Цвет фона Закрытого переключателя

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

Фон

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

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

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

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

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

Цвет иконки

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

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

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

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

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

Body шрифт

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

Body размер текста

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

Body цвет текста

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

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

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

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

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

Закрытое название шрифт

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

Закрытое название размер шрифта

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

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

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

Закрытое название расстояние между букв

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

Закрытое название высота строки

Высота строки влияет на расстояние между каждой строкой вашего текста переключения. Если вы хотите увеличить расстояние между каждой строкой, используйте ползунок диапазона, чтобы отрегулировать расстояние, или введите желаемый размер интервала в поле ввода справа от ползунка. Поля ввода поддерживают различные единицы измерения, что означает, что вы можете ввести «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, разделенные точкой с запятой.

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

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

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

Заголовок

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

Body

При открытии элемента «аккордеон» содержимое отображается в поле элемента под заголовком.

Цвет фона открытого переключателя

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

Цвет фона закрытого переключателя

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

Фон

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

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

Цвет иконки

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

Цвет фона открытого переключателя

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

Цвет фона закрытого переключателя

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

Расстояние

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

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

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

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