Хотите добавить значок гамбургера в модуль меню Divi ?

Если вы создадите свой заголовок в Divi, Есть несколько способов сделать это. 

Мы покажем вам, как добавить значок гамбургера в модуль «Меню» Divi. Этот значок гамбургера уже отображается по умолчанию на небольших экранах. Но в этом уроке мы позаботимся о том, чтобы значок гамбургера появился и на рабочем столе. 

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

Пойдем.

обследование

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

Скачайте DIVI прямо сейчас!!!

Создайте новый шаблон глобального заголовка с помощью Divi Builder

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

На панели управления WordPress перейдите к «Divi > Конструктор тем' затем нажмите «Добавить глобальный заголовок»

Конструктор тем 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 Menu

Скачайте DIVI прямо сейчас!!!

Заключение

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

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

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

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

Но тем временем поделитесь этой статьей в разных социальных сетях.

...