Модуль Вкладки Divi

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

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

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

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

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

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

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

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

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

Сначала добавьте новый раздел и новую строку с макетом 1/2 1/2 столбца. В левом столбце добавьте изображение продукта 510 x 510 с помощью модуля Изображение.

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

Заголовок: [добавьте заголовок или ярлык вашей вкладки]
Body: [добавьте содержимое вкладки]

Сохраните настройки вкладки и повторите действия, чтобы добавить еще две вкладки.

После создания вкладок перейдите на вкладку «Дизайн» в настройках модуля вкладок и измените цвет текста вкладки на # 0c71c3 (синий).

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

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

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

Добавить новый Таб

Здесь вы добавляете новые вкладки в свой модуль вкладок. Нажатие на «Добавить новый Таб» откроет совершенно новый список настроек дизайна (включая «Контент», «Дизайн», «Расширенный») для вашей новой вкладки. Описание настроек вкладок см. ниже.

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

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

Цвет фона активной вкладки

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

Цвет фона неактивной вкладки

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

Цвет фона

Эта опция позволяет вам изменить цвет фона вкладки.

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

Эта опция позволяет задать фоновое изображение для вкладки.

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

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

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

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

Таб текст

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

Body текст

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

Текст

Эти настройки позволяют изменять цвет и ориентацию текста.

Body текст

Здесь вы можете настроить шрифт текста Body, толщину, размер, цвет, интервал, высоту строки и многое другое.

Рамка

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

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

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

ID и классы CSS

Это можно использовать для добавления уникального идентификатора CSS или класса в модуль вкладок. Затем их можно использовать в таблице стилей или в поле «Настраиваемый CSS в параметрах темы» для применения настраиваемого стиля к модулю. На идентификаторы CSS также можно настроить таргетинг с помощью якорных ссылок для ссылки на определенные области вашей страницы.

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

Здесь вы можете добавить собственный CSS в модуль вкладок.

Видимость

Здесь вы можете скрыть (или отключить) свой модуль вкладок на определенных устройствах. Вы можете отключить модуль на телефоне, планшете и / или компьютере.

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

Заголовок

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

Body

Здесь вы вводите основной текст вкладки с помощью встроенного редактора wysiwyg.

Цвет фона

Здесь вы можете добавить цвет фона для своей вкладки.

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

Здесь вы можете добавить фоновое изображение для своей вкладки.

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

Таб текст

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

Body текст

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

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

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

Здесь вы можете добавить собственный CSS в конкретную вкладку, которую вы редактируете. Этот CSS будет применен только к этой вкладке.