Хотите добавить значок гамбургера в модуль меню Divi ?
Если вы создадите свой заголовок в Divi, Есть несколько способов сделать это.
Мы покажем вам, как добавить значок гамбургера в модуль «Меню» Divi. Этот значок гамбургера уже отображается по умолчанию на небольших экранах. Но в этом уроке мы позаботимся о том, чтобы значок гамбургера появился и на рабочем столе.
Это придает минимальный вид вашему заголовку, а также добавляет взаимодействия.
Пойдем.
обследование
Прежде чем погрузиться в этот урок, давайте быстро взглянем на результат.
Скачайте DIVI прямо сейчас!!!
Создайте новый шаблон глобального заголовка с помощью Divi Builder
Перейти к конструктору тем Divi
На панели управления WordPress перейдите к «Divi > Конструктор тем' затем нажмите «Добавить глобальный заголовок»
Добавить новый глобальный заголовок
Появится раскрывающееся меню. Чтобы начать сборку с нуля, продолжите, выбрав «Построить глобальный заголовок».
Разработка дизайна глобального заголовка
Настройки раздела
Фоновый цвет
Оказавшись в редакторе шаблонов, пора приступить к оформлению шапки. Вы заметите, что раздел уже есть. Откройте настройки раздела и добавьте цвет фона.
- Цвет фона: #f6f9fb
расстояние
Перейти на вкладку Проект раздела и измените следующие параметры.
- Отступы (сверху и снизу): 0 пикселей
Добавить новую строку
Структура колонны
Продолжите, добавив новую строку, используя следующую структуру столбцов:
калибровка
Откройте настройки линии, перейдите на вкладку Проект и измените максимальную ширину в настройках размера.
- Максимальная ширина: 1 пикселей
расстояние
Затем измените верхний и нижний отступы в настройках интервала.
- Отступы (сверху и снизу): 5 пикселей
Добавьте модуль меню в столбец
Выберите меню, чтобы добавить
Затем добавьте модуль меню в столбец строки и выберите динамическое меню по вашему выбору.
Скачать логотип
Download a логотип.
Удалить цвет фона
Затем удалите из модуля белый цвет фона по умолчанию.
Настройки текста меню
Перейти на вкладку Проект модуля и соответствующим образом изменить текстовые параметры меню:
- Меню шрифтов: Поппинс
- Толщина шрифта меню: полужирный
- Цвет текста: #003e51
- Размер текста меню: 16px
- Выравнивание текста: справа
Настройки раскрывающегося меню
Затем измените настройки в раскрывающемся меню.
- Цвет строки выпадающего меню: #7159c8
Настройки значка
Также измените настройки значков.
- Цвет значка корзины: #670fff
- Цвет значка поиска: #670fff
- Цвет значка меню гамбургера: #670fff
калибровка
Затем перейдите к настройкам размера и назначьте максимальную ширину логотип.
- Логотип Максимальная ширина: 280 пикселей
расстояние
Также удалите нижнее поле по умолчанию из модуля.
- Поле (снизу): 0px
Сделать раздел липким
Теперь, когда наше меню готово, мы также сделаем этот раздел липким. Откройте настройки раздела, перейдите на вкладку Фильтр и примените следующие настройки:
- Липкая позиция: Придерживайтесь верхней части
- Смещение от окружающих липких элементов: ДА
- Переход по умолчанию и липкие стили: ДА
Цвет фона в липком состоянии
Затем измените цвет фона раздела на липкое состояние.
- Цвет фона: #ffffff
Тень поля с липким состоянием
Также примените тень блока к разделу.
- Цвет тени (рабочий стол): rgba(0,0,0,0)
- Цвет тени (липкий): rgba (0,0,0,0.04)
В модуль меню добавлен значок гамбургера.
Добавить CSS ID в модуль меню
Сначала откройте настройки модуля Меню, перейдите на вкладку Фильтр и назначьте идентификатор CSS.
- Идентификатор CSS: раздельное меню
Добавьте модуль «Код» в модуль «Меню».
Затем добавьте модуль кода под модуль меню.
Добавьте теги сценария и стиля
Мы будем использовать код CSS и JQuery. Чтобы подготовиться к этому, мы добавим теги style и script.
Добавить CSS-код
Мы вставим следующие строки кода CSS между тегами стиля:
.toggle-icon:after {
content: "61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
transform: translateY(50%);
}
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
.icon-switch:after {
content: '4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
Добавить JQuery
Добавьте строки открытия кода JQuery
Далее у нас будет код JQuery. Добавьте следующие строки кода JQuery между тегами script:
jQuery(function($){
$(document).ready(function(){
});
});
Создать переменные
Затем создайте несколько переменных.
var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');
Поместите значок переключения в модуль меню
Затем поместите переменную значка переключателя в модуль «Меню», используя следующую строку кода:
toggleIcon.insertAfter(desktopMenu);
Добавьте функцию щелчка
Мы также добавляем функцию щелчка.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
Сохранить изменения Divi Theme Builder
Теперь, когда все на месте, остается только сохранить все модификации Divi Theme Builder и просмотреть результат!
обследование
Теперь, когда мы прошли все этапы, давайте в последний раз взглянем на конечный результат.
Скачайте DIVI прямо сейчас!!!
Заключение
В этой статье мы показали вам, как проявить творческий подход к глобальному заголовку в Divi Theme Builder.
В частности, мы показали вам, как добавить значок меню гамбургера на рабочий стол. По умолчанию на планшете и мобильном телефоне отображается значок гамбургера.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для завершения проектов по созданию веб-сайтов. Или см. также наше руководство по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...