Структурирование вашей страницы с помощью полужирных модулей переключения полной ширины с помощью Divi

Модуль Divi Toggle позволяет отображать дополнительный контент при нажатии без дополнительной необходимости в коде jQuery. Подобно модулю «Аккордеон», модули переключения обычно используются для обмена сгруппированным контентом, например, часто задаваемыми вопросами. Однако вы можете использовать их и для других целей - например, для структурирования страницы. В этом руководстве мы собираемся использовать полноразмерные модули переключения, чтобы создать простой дизайн страницы, который ведет себя при нажатии. Стиль дизайна, с которым мы работаем, смелый и чистый. Вы также сможете бесплатно скачать файл JSON!

Давайте перейдем к этому.

Предварительный просмотр

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО макет Bold Fullwidth Toggle

Чтобы получить доступ к бесплатному полужирному полноразмерному переключателю макета, вам сначала необходимо загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Подпишитесь на наш канал Youtube

Начнем воссоздавать

Добавить новый раздел

Интервал

Начните с создания новой страницы (или открытия существующей) и добавления к ней обычного раздела. Единственное, что вам нужно сделать в настройках раздела, - это удалить все стандартные верхние и нижние отступы в настройках интервала.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Мы также удаляем верхнее и нижнее заполнение строки по умолчанию. Это удалит все пространство между модулем Toggle и контейнером строки / столбца, в который он помещен.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить модуль переключения в столбец

Вставить заголовок и содержимое

Пора начинать добавлять модули! Единственный модуль, который нам нужен в этой строке, - это Toggle Module. Мы будем использовать поле заголовка, чтобы добавить заголовок и поместить весь контент, которым мы хотим поделиться, в поле основного содержимого. Не стесняйтесь размещать все, что хотите, в поле содержимого; от текста к изображениям и многому другому.

Состояние

Мы используем закрытое состояние переключения, но не стесняйтесь оставлять его открытым.

• Состояние: Закрыть

Настройки значков по умолчанию

Перейдите на вкладку дизайна и соответствующим образом измените настройки значка модуля:

• Цвет значка: # 570fff
• Использовать нестандартный размер значка: ДА
• Размер шрифта значка: 6vw

Настройки значка наведения

Измените цвет значка при наведении.

• Цвет значка: # f2f2f2

Настройки переключателя по умолчанию

Затем измените цвет фона закрытого переключателя.

• Цвет фона закрытого переключателя: #ffffff

Настройки переключения при наведении

И измените цвет при наведении.

• Цвет фона закрытого переключателя: # 000000

Настройки текста заголовка

Продолжите, изменив настройки текста заголовка следующим образом:

• Цвет текста заголовка: # 000000
• Заголовок уровня заголовка: H2
• Шрифт заголовка: Montserrat
• Выравнивание текста заголовка: по левому краю
• Размер текста заголовка: 8vw (рабочий стол), 10vw (планшет и телефон)
• Интервал между заголовками: -1vw (рабочий стол), -0.5vw (планшет и телефон)
• Высота строки заголовка: 0,7 мм

Настройки закрытого текста заголовка по умолчанию

Затем перейдите к настройкам закрытого текста заголовка и соответствующим образом измените настройки:

• Шрифт закрытого заголовка: Montserrat
• Размер текста закрытого заголовка: 18vw (рабочий стол), 16vw (планшет и телефон)
• Высота закрытой строки заголовка: 0,8 em

Настройки текста закрытого заголовка при наведении

Измените цвет текста закрытого заголовка при наведении курсора.

• Цвет текста закрытого заголовка: # f4f4f4

Настройки основного текста

Перейдите к настройкам основного текста и внесите в них некоторые изменения.

• Шрифт: Fira Sans
• Толщина основного шрифта: Light
• Выравнивание основного текста: по ширине
• Размер основного текста: 1.2vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Высота линии корпуса: 2,1 м

Интервал

Также добавьте в модуль несколько пользовательских отступов сверху, снизу и слева.

• Верхняя обивка: 10vw
• Нижняя обивка: 10vw
• Левый отступ: 6vw

Граница

Продолжите, удалив границу модуля по умолчанию в настройках границы.

• Ширина границы: 0 пикселей

Переключить контент CSS

Завершите настройки модуля Toggle, добавив следующие строки кода CSS на рабочий стол:

width: 60vw;
border-left: 0.2vw solid black;
padding: 5vw 5vw 5vw 5vw;

Измените ширину строки кода CSS на планшете и телефоне:

width: 85vw;

Клонировать весь раздел столько раз, сколько нужно

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

Изменить содержимое

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

Изменить цвета значков

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

• Цвет значка 1: # ff9000
• Цвет значка 2: # 00ffd4

Предварительный просмотр

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

Рабочий стол

Мобильный

Последние мысли

В этом посте мы показали вам, как проявить творческий подход с помощью модуля переключения Divi. Точнее; мы сделали их полноразмерными и использовали их для творческого отображения различного содержания разделов. В этом руководстве показано, что вы можете легко использовать модули Divi нестандартно, когда вы принимаете во внимание различные контейнеры. Вы также можете бесплатно загрузить файл JSON с учебником! Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.