Как создать слайд-меню в Divi

Опубликовано: 2022-05-12

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

В этом руководстве мы продемонстрируем два способа создания выдвижного меню на вашем веб-сайте Divi: первый — использовать настройщик темы для темы Divi, а второй — создать глобальный заголовок с помощью конструктора тем Divi.

Как создать слайд-меню в Divi через Theme Customizer

Во-первых, вам нужно войти в WordPress в качестве администратора, чтобы получить доступ к настройщику темы веб-сайта, и вам нужно убедиться, что в конструкторе тем Divi нет активного глобального заголовка. Затем перейдите в Divi → Theme Customizer .

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

Продолжите, щелкнув блок « Заголовок и навигация » → « Формат заголовка» → «Стиль заголовка» , затем выберите параметр « Вставить ».

Виола просто так, ваше выдвижное меню готово к действию.

Однако, если вы хотите добавить дополнительные настройки, такие как изменение ширины выдвижного меню, цвета фона, размера текста и т. д., вы можете перейти к настройкам заголовка слайда и полноэкранного режима в блоке « Заголовок и навигация », который появляется после выбора скользящее или полноэкранное меню.

Как создать слайд-меню в Divi с помощью Theme Builder

На этот раз мы покажем вам, как создать выдвижное меню в Divi с помощью конструктора тем Divi, создав глобальный заголовок. В меню Divi на панели инструментов WordPress выберите параметр Theme Builder , затем перейдите к созданию глобального заголовка.

Настройка раздела

Вы попадете в редактор Divi Builder, начните с нажатия на значок настроек раздела для изменения настройки первого раздела. Продолжайте, изменив цвет фона раздела на прозрачный: rgba(255,255,255,0)

Перейдите на вкладку « Дизайн » → « Интервал », чтобы удалить верхнее и нижнее заполнение по умолчанию. Установите значение 0 для обоих.

Перейдите на вкладку « Дополнительно » → « Положение », затем измените параметр « Положение » на « Фиксированное » и измените « Расположение » на верхнее центральное.

Настройка первого ряда

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

Прежде чем добавлять какие-либо модули, сначала откройте « Настройки строки », затем измените параметр « Размеры и интервалы » на вкладке « Дизайн » следующим образом:

Размеры :

Ширина : 97%
Максимальная ширина : 100%

Расстояние :

Верхняя обивка : 1%
Нижний отступ : 0px

Затем перейдите на вкладку « Дополнительно » → « Пользовательский CSS» → « Основной элемент» и добавьте туда следующие фрагменты:

 дисплей: гибкий;
выравнивание элементов: по центру;

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

Создать интерактивную иконку гамбургера

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

 <span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

Затем измените цвет фона, используя это значение: rgba(0,0,0,0.04)

Перейдите на вкладку « Дизайн » → « Текст » → « Высота строки текста», чтобы удалить высоту строки текста, введя значение 0em , чтобы иметь полный контроль над добавленными интервалами.

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

Ширина : 120 пикселей
Выравнивание модуля : справа

Давайте подровняем модуль, добавив пользовательские значения отступов в настройках интервала , значение будет следующим:

Верхнее заполнение : 40px
Нижний отступ: 60 пикселей
Отступ слева : 40px
Отступ справа : 40px

Затем добавьте пользовательский идентификатор CSS , чтобы завершить модуль. Мы будем использовать этот идентификатор CSS для создания функции щелчка в нашем коде. Перейдите на вкладку «Дополнительно» → « Идентификатор CSS и классы », затем введите следующий текст в поле « Идентификатор CSS »:

Идентификатор CSS : слайд-в-открытом

Настройки второго ряда

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

Давайте изменим цвет фона на ваш вкус, для нашего меню мы выбираем этот цвет: #e7e0e2

Перейдите на вкладку « Дизайн » → « Размер » и измените значение следующим образом:

Использовать пользовательскую ширину желоба : Да
Ширина желоба : 1
Ширина : 20% (рабочий стол), 40% (планшет), 60% (телефон)
Высота : 100vh

Затем перейдите к настройкам Spacing и измените значение Top Padding на разных устройствах: 10vw (рабочий стол), 30vw (планшет), 40vw (телефон).

Продолжите, добавив пользовательский класс CSS, он нам нужен, чтобы позволить строке скользить. Перейдите на вкладку « Дополнительно » → « Идентификатор CSS и классы », затем введите следующий текст в поле « Классы CSS »:

Класс CSS : слайд-в-меню-контейнер

Затем доведите непрозрачность строки до 0 в состоянии по умолчанию, вставив opacity: 0; в Пользовательском CSS → Основной элемент .

Чтобы завершить настройку второго ряда, измените положение в настройке « Положение » на следующие значения:

Позиция : Абсолют
Расположение : вверху справа
Горизонтальное смещение : -20% (рабочий стол), -40% (планшет), -60% (телефон)

Добавление меню

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

Продолжайте, изменив цвет фона на: rgba(216,210,212,0.35)

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

Шрифт текста : Arial
Вес шрифта текста : полужирный
Цвет текста : #0c71c3
Размер текста : 1vw (настольный компьютер), 2vw (планшет), 3vw (телефон)
Текстовая тень : световой эффект
Выравнивание текста : по центру

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

Нижнее поле: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
Верхняя обивка: 1vw
Нижняя прокладка : 1vw

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

Добавление функции выдвижения

Давайте закончим меню, добавив модуль кода во второй столбец первой строки, затем скопируйте следующий код в модуль.

 <стиль>
#слайд-в-открытом{
курсор: указатель;
}
 
.линия{
дисплей: блок;
положение: абсолютное;
высота: 4 пикселя;
ширина: 100%;
фон: #24394A;
радиус границы: 9px;
непрозрачность: 1;
-webkit-transition: .1s easy-in-out;
-moz-transition: .1s облегчение входа-выхода;
-o-переход: .1s облегчение входа-выхода;
переход: .1s облегчение входа-выхода;
}
 
.строка-2 {
верх: 10 пикселей;
}
 
.строка-3 {
верх: 20 пикселей;
}
 
#slide-in-open.open .line-1 {
верх: 10 пикселей;
-webkit-transform: повернуть (135 градусов);
-moz-transform: повернуть (135 градусов);
-o-преобразование: повернуть (135 градусов);
преобразование: поворот (135 градусов);
}
 
#slide-in-open.open .line-2 {
дисплей: нет;
}
 
#slide-in-open.open .line-3 {
верх: 10 пикселей;
-webkit-transform: повернуть (-135 градусов);
-moz-transform: повернуть (-135 градусов);
-o-transform: повернуть (-135 градусов);
преобразование: повернуть (-135 градусов);
}
 
.слайд-в-меню {
справа: 0 !важно;
непрозрачность: 1 !важно;
}
 
.слайд-в-меню-контейнер {
-webkit-transition: все 0.5s легко !важно;
-moz-transition: все 0.5s облегчаются !важно;
-o-transition: все 0.5s облегчаются !важно;
-ms-transition: все 0.5s облегчить !важно;
переход: все 0,5 с облегчения !важно;
}
</стиль>
<скрипт>
jQuery (функция ($) {
$('#slide-in-open').click(function(){
$(это).toggleClass('открыть');
$('.слайд-в-меню-контейнер').toggleClass('слайд-в-меню');
});
});
</скрипт>

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

Когда выдвижное меню будет готово, давайте сохраним проект и применим изменения, щелкнув «Сохранить все изменения» в конструкторе тем Divi. Давайте посмотрим на меню в сообщении на нашем сайте.