Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

flip flop divi module.png

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

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

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

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

пример кнопки триггера divi.png

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

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

параметры конфигурации toggle divi.png

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Контент

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

Закладка

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

новый контент с divi.png rocker

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

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

модуль toggle divi.gif

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

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

параметры flip-flops divi.png

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

Текст

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

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

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

контекст

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

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

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

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

опционный дизайн toggle wordpress.png

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

значок

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

Текст

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

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

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

текст тела

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

границы

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

расстояние

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

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

параметр триггера divi.png

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

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

Другие учебные пособия Divi

Эта статья содержит комментарии 0

Оставить комментарий

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

Вверх