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

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

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

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

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

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

Рабочий стол

Мобильный

Скачайте БЕСПЛАТНО шаблон глобального заголовка адаптивного слайд-меню

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

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

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

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

СКАЧАТЬ

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

1. Перейдите в Divi Theme Builder и начните создание глобального заголовка.

Перейти в конструктор тем Divi

Начните с перехода к Divi Theme Builder на бэкэнде вашего веб-сайта WordPress и нажмите «Добавить глобальный заголовок».

Начать создание глобального заголовка

Продолжите, выбрав «Создать глобальный заголовок».

2. Создайте дизайн заголовка

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

Фоновый цвет

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

• Цвет фона: rgba (255,255,255,0)

Интервал

Перейдите на вкладку дизайна и удалите все отступы по умолчанию сверху и снизу.

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

Позиция

Затем мы исправим секцию, перейдя на вкладку «Дополнительно» и изменив настройки положения.

• Позиция: фиксированная
• Расположение: Top Center

Добавить строку №1

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

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

Размеры

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

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

Интервал

Затем измените настройки интервала.

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

Главный элемент

Затем перейдите на вкладку «Дополнительно» и добавьте две строки кода CSS к основному элементу строки. Это поможет нам вертикально выровнять содержимое столбца в нашей строке.

display: flex;
align-items: center;

Добавить модуль изображения в столбец 1

Загрузить логотип

Пора добавить модули, начиная с модуля изображения в столбце 1. Загрузите свой логотип.

Добавить текстовый модуль в столбец 3

Добавить 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 пикселей
• Выравнивание модуля: справа

Интервал

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

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

Добавить строку №2

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

К следующему ряду! Мы будем использовать эту строку для разработки всего нашего выдвижного меню. Используйте следующую структуру столбцов:

Фоновый цвет

Не добавляя никаких модулей, откройте настройки строки и измените цвет фона следующим образом:

• Цвет фона: # e7e0e2

Фоновая картинка

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

• Размер фонового изображения: фактический размер
• Положение фонового изображения: по центру
• Повтор фонового изображения: повтор

Размеры

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

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

Интервал

Также измените настройки интервала для разных размеров экрана.

• Верхняя подкладка: 10vw (рабочий стол), 30vw (планшет), 40vw (телефон)

Граница

И завершите настройки строки, добавив левую границу.

• Ширина левой границы: 10 пикселей
• Цвет левой границы: # 24394a
• Стиль левой границы: двойной

Добавить текстовый модуль в столбец

Добавить содержимое

Пора добавить первый пункт меню Text Module! Добавьте копию в поле содержимого.

Добавить ссылку

Продолжите, добавив соответствующую ссылку в пункт меню.

• URL ссылки на модуль: #

Фоновый цвет

Затем измените цвет фона.

• Цвет фона: rgba (216,210,212,0,35)

Настройки текста

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

• Шрифт текста: Domine
• Толщина шрифта текста: полужирный
• Цвет текста: # 000000
• Размер текста: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Выравнивание текста: по центру

Интервал

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

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

Клонировать текстовый модуль (1 модуль на каждый пункт меню)

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

Изменение содержимого и ссылок повторяющихся текстовых модулей

Измените содержимое и ссылки каждого дублирующего текстового модуля.

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

Добавить копию

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

Добавить ссылку

Добавьте ссылку тоже.

• URL ссылки на кнопку: #

Выравнивание

Перейдите на вкладку дизайна и измените выравнивание кнопок.

• Расположение кнопок: по центру

Настройки кнопок

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0,7 МВт (рабочий стол), 1,5 МВт (планшет), 2,5 МВт (телефон)
• Цвет текста кнопки: # 000000
• Цвет фона кнопки: rgba (0,0,0,0)
• Цвет границы кнопки: # 24394a
• Радиус границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 4 пикселя

• Шрифт кнопки: Open Sans
• Толщина шрифта кнопок: полужирный
• Стиль шрифта кнопок: прописные

Интервал

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

• Верхняя маржа: 5vw
• Верхнее заполнение: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Нижняя прокладка: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Левое заполнение: 1.8vw (рабочий стол), 3vw (планшет), 4vw (телефон)
• Правая прокладка: 1.8vw (рабочий стол), 3vw (планшет), 4vw (телефон)

3. Добавьте функцию вставки

Добавить CSS ID в текстовый модуль значка меню

Теперь, когда у нас есть все элементы, пришло время создать эффект гибкого выдвижного меню! Сначала откройте текстовый модуль (содержащий промежутки) в третьем столбце первой строки и используйте собственный идентификатор CSS на вкладке «Дополнительно». Мы будем использовать этот CSS ID для создания функции щелчка в нашем коде.

• CSS ID: открывающийся слайд

Добавить класс CSS в строку №2

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

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

Изменить положение строки №2

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

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

Изменить прозрачность строки №2

И доведите непрозрачность до 0 в состоянии по умолчанию.

opacity: 0;

Добавить модуль кода во второй столбец первой строки

Вставить код CSS

Чтобы создать эффект функции щелчка и стилизовать промежутки нашего значка гамбургера, нам понадобится некоторый код CSS. Добавьте модуль кода во второй столбец первой строки и поместите следующие строки кода CSS между тегами стиля, как вы можете заметить на экране печати ниже:

#slide-in-open{
cursor: pointer;
}

.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.line-2 {
top: 10px;
}

.line-3 {
top: 20px;
}

#slide-in-open.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

#slide-in-open.open .line-2 {
display: none;
}

#slide-in-open.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}

.slide-in-menu {
right: 0 !important;
opacity: 1 !important;
}

.slide-in-menu-container {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

Вставить код JQuery

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

jQuery(function($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});

4. Сохраните изменения в построителе тем и просмотрите результат на веб-сайте.

После того, как вы завершили все элементы в своем глобальном заголовке, остается только сохранить все изменения и просмотреть результат на своем веб-сайте!

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

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

Рабочий стол

Мобильный

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

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

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