Модуль Переключатель с текстом Divi

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

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

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

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

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

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

Пример использования: страница часто задаваемых вопросов (FAQ)

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

Используя Visual Builder, добавьте новый раздел со строкой в полную ширину (1 столбец). Затем добавьте в строку модуль Разделитель. На вкладке «Содержимое» в настройках модуля разделителя выберите параметр «Показывать разделитель».

На вкладке «Дизайн» введите следующие параметры (Меню параметров поддерживает поиск по параметрам):

Цвет: # 000000 (черный)
Тип разделителя: Сплошной
Положение линии: вертикально по центру
Ширина разделителя: 4 пикселя
Высота: 1

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

Вкладка «Контент» (Меню параметров поддерживает поиск по параметрам):
Заголовок: [введите свой заголовок]
Содержание: [введите свое содержание]
Вид: Закрыть
Цвет фона открытого переключателя: #ffffff
Цвет фона закрытого переключателя: #ffffff
Фон: #ffffff

Вкладка «Дизайн» (Меню параметров поддерживает поиск по параметрам):
Цвет иконки: # 000000
Цвет текста открытого заголовка: # 000000
Цвет текста закрытого заголовка: # 000000
Заголовок шрифт: Open Sans, Bold
Заголовок Размер текста: 24 пикс.
Заголовок Цвет текста: # 000000
Body Шрифт: Open Sans
Body Размер текста: 18 пикселей
Body Цвет текста: # 666666
Body Высота строки: 1,6 em
Использовать границу: ДА
Ширина рамки: 0 пикселей
Внутренний отступ: верхний 2 пикселя, нижний 2 пикселя

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

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

Теперь, когда вы увидели модуль Переключателя в действии, посмотрите ВСЕ его настройки в разделах ниже. Мы предоставили подробное изложение того, что вы найдете на каждой вкладке настроек модуля, и объяснение того, что каждая из них делает.

Вкладка Контент модуля Переключателя

Вкладка Контент модуля Переключателя разделена на следующие группы настроек (которые также разворачиваются!).

Текст

Здесь вы можете добавить заголовок и содержимое переключателя.

Вид

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

Фон

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

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

По умолчанию ваш модуль переключения будет отображаться с надписью «Переключатель с текстом» в конструкторе. Метка администратора позволяет изменить эту метку для облегчения идентификации.

Вкладка Дизайн модуля Переключателя

Параметры вкладки Дизайн модуля Переключателя сгруппированы в следующие раскрывающиеся блоки.

Иконка

Здесь вы можете изменить цвет значка Переключателя.

Текст

Здесь вы можете установить цвет текста для открытого и закрытого Переключателя.

Заголовок и текст

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

Body текст

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

Рамка

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

Расстояние

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

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

На вкладке Расширенный вашего модуля «Переключатель с текстом» вы можете добавить уникальный идентификатор и класс css. Вы также можете добавить пользовательский CSS к различным предопределенным (и предварительно выбранным) селекторам CSS в модуле слайдера видео в настраиваемом раскрывающемся списке CSS. И, наконец, в раскрывающемся списке Видимость вы можете настроить видимость вашего модуля на телефонах, планшетах и настольных компьютерах.