Как использовать модуль Toggle в Divi Builder: учебное пособие

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

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

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

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

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

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

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

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

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

Контент

Заголовок: [введите свой заголовок]
Содержание: [введите свое содержание]
Статус: Закрыть
Цвет открытого фона: #ffffff
Закрыто Переключить цвет фона: #ffffff
Цвет фона: #ffffff

Закладка

Цвет значка: # 000000
Open Toggle Цвет текста: # 000000
Закрыто Переключить цвет текста: # 000000
Титульный шрифт: Open Sans, Bold
Размер шрифта: 24px
Цвет текста заголовка: # 000000
Шрифт для тела: Open Sans
Размер шрифта для тела: 18px
Цвет текста тела: # 666666
Высота линии тела: 1.6em
Использовать границу: ДА
Ширина границы: 0px
Пользовательские отступы: верх 2px, низ 2px

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

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

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

Параметры содержимого модуля Toggle

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

Текст

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

Государственный

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

контекст

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

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

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

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

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

значок

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

Текст

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

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

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

текст тела

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

границы

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

расстояние

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

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

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

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

[vc_row center_row="yes"][vc_column width="1/2"][vcex_button target="blank" layout="expanded" align="center" font_family="Raleway" font_weight="700" style="flat" 18 /69″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=118&url=7&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”2″ style=”flat” custom_background=”#c23065e” custom_hover_background=”#40632d1f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”] СКАЧАТЬ ШАБЛОНЫ DIVI[/vcex_button][/vc_column][/vc_row]

Как использовать модуль Flip Builder Flip