Модуль переключения Divi позволяет вам отображать содержание дополнительно за клик, без необходимости использования дополнительного кода jQuery. Подобно модулю «Аккордеон», модули переключения обычно используются для совместного использования содержание сгруппированы, например, часто задаваемые вопросы. Однако вы также можете использовать их для других задач, например, для структурирования своей страницы. В этом уроке мы будем использовать модули переключателей полной ширины, чтобы создать простой дизайн страницы, который будет действовать при нажатии. Стиль дизайна, с которым мы имеем дело, смелый и чистый. Вы также сможете скачать файл JSON бесплатно!
Пойдем.
Прежде чем мы углубимся в руководство, давайте быстро посмотрим, как он выглядит на экранах разных размеров.
Давайте начнем воссоздание
Добавить новый раздел
расстояние
Начните с создания новой страницы (или открытия существующей) и добавления к ней обычного раздела. Единственное, что нужно сделать в настройках раздела, - это удалить все верхние и нижние отступы по умолчанию из настроек интервала.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Добавить новую строку
Структура столбца
Продолжайте добавлять новую строку, используя следующую структуру столбцов:
калибровка
Еще не добавляя никаких модулей, откройте настройки строки и убедитесь, что линия касается левой и правой сторон контейнера раздела, изменив настройки размера. Это важный шаг в этом руководстве. это позволяет модулю Toggle, который мы добавим позже в этом руководстве, стать полной ширины.
- Использовать произвольную ширину желоба: Да
- Ширина желоба: 1
- Ширина: 100%
- Максимальная ширина: 100%
расстояние
Мы также удаляем стандартные верхние и нижние отступы из строки. Это приведет к удалению всего пространства между модулем переключения и контейнером строки / столбца, в котором он находится.
- Верхняя обивка: 0px
- Нижняя обивка: 0px
Добавить модуль рокера
Вставьте заголовок и содержание
Пришло время начать добавлять модули! Единственный модуль, который нам нужен в этой строке, — это модуль Toggle. Мы будем использовать область заголовка, чтобы добавить заголовок и разместить все содержание которым мы хотим поделиться в области содержимого тела. Не стесняйтесь размещать в области контента все, что захотите; от текста до изображений и многого другого.
Государственный
Мы используем закрытое состояние переключения, но не стесняйтесь оставлять его открытым.
- Состояние: закрыть
Настройки значка по умолчанию
Перейдите на вкладку Дизайн и соответствующим образом измените настройки значка модуля:
- Цвет значка: # 570fff
- Использовать нестандартный размер значка: ДА
- Размер шрифта иконки: 6vw
Настройки значка при наведении
Измените цвет значка наведения.
- Цвет значка: # f2f2f2
Настройки отработки отказа по умолчанию
Затем измените цвет фона закрытого переключателя.
- Переключить цвет фона: #ffffff
Наведите курсор на настройки
И поменять цвет тоже завис.
- Переключить цвет фона: # 000000
Настройки текста заголовка
Продолжите, изменив настройки текста заголовка следующим образом:
- Цвет текста заголовка: # 000000
- Название Название Уровень: H2
- Титул полиции: Монтсеррат
- Название текста: Выравнивание по левому краю
- Размер текста заголовка: 8vw (рабочий стол), 10vw (планшет и телефон)
- Интервал между заглавными буквами: -1vw (рабочий стол), -0.5vw (планшет и телефон)
- Высота строки заголовка: 0.7em
Настройки текста закрытого заголовка по умолчанию
Затем получите доступ к текстовым параметрам закрытого заголовка и измените их соответствующим образом:
- Закрытое название шрифта: Монтсеррат
- Заголовок закрыт Размер текста: 18vw (рабочий стол), 16vw (планшет и телефон)
- Высота закрытого заголовка: 0.8em
Наведите курсор на текстовые настройки заголовка
Измените цвет текста скрытой подписи при наведении курсора.
- Заголовок закрыт Цвет текста: # f4f4f4
Настройки основного текста
Перейдите к настройкам основного текста и внесите некоторые изменения.
- Body Font: Fira Sans
- Вес шрифта: легкий
- Выравнивание основного текста: Обоснуйте
- Размер основного текста: 1.2vw (рабочий стол), 2vw (планшет), 3vw (телефон)
- Рост тела: 2.1em
расстояние
Также добавьте пользовательские отступы сверху, снизу и слева от модуля.
- Верхняя обивка: 10vw
- Нижняя обивка: 10vw
- Левая обивка: 6vw
Граница
Продолжите, удалив границы модуля по умолчанию в настройках границ.
- Ширина границы: 0px
Переключить содержимое CSS
Определите параметры модуля Toggle, добавив следующие строки кода CSS на рабочий стол:
ширина: 60vw; рамка слева: 0.2vw solidblack; отступ: 5vw 5vw 5vw 5vw;
Измените ширину строки кода CSS на планшете и телефоне:
ширина: 85vw;
Клонируйте весь раздел столько раз, сколько хотите
После завершения первого раздела, строки и модуля Toggle вы можете клонировать весь раздел столько раз, сколько захотите. в зависимости от объема контента, который вы хотите отобразить на своей странице.
Изменить содержание
Обязательно измените все содержимое триггера в каждом модуле триггера.
Изменить цвета значков
Затем откройте каждый модуль Toggle по отдельности и измените цвет значка. Те, которые мы использовали для этого урока, упомянуты ниже:
- Цвет значка 1: # ff9000
- Цвет значка 2: # 00ffd4
обследование
Теперь, когда все шаги выполнены, давайте в последний раз посмотрим, что произошло с экранами разных размеров.
Заключительные мысли
В этой статье мы показали вам, как проявить творческий подход с помощью модуля Toggle для Divi. Точнее; мы сделали их полной ширины и использовали для творческого отображения контента из разных разделов. В этом уроке показано, что вы можете легко использовать модули Divi нестандартно, если принять во внимание различные контейнеры. Вы также можете бесплатно скачать JSON-файл учебного пособия! Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставьте комментарий в разделе комментариев ниже.
