Искате ли да добавите икона на хамбургер към модула на менюто на Divi ?
Ако вградите своя хедър Divi, има няколко начина да направите това.
Ще ви покажем как да добавите икона на хамбургер към модула на менюто на Divi. Тази икона на хамбургер вече се показва по подразбиране на по-малки екрани. Но в този урок ще се уверим, че иконата на хамбургер се появява и на работния плот.
Това придава минимален вид на заглавката ви, като същевременно добавя взаимодействие.
Да вървим.
изследване
Преди да се потопим в този урок, нека хвърлим бърз поглед на резултата.
Изтеглете DIVI сега!!!
Създайте нов глобален шаблон за заглавка с Divi Builder
Отидете на Divi Theme Builder
От таблото за управление на WordPress отидете на „Divi > Създател на теми' след това щракнете „Добавяне на глобална горна част“
Добавете нова глобална заглавка
Ще се появи падащо меню. За да започнете изграждането от нулата, продължете, като изберете „Изграждане на глобална горна част“.
Проектиране на глобалния дизайн на заглавката
Настройки на секцията
Цвят на фона
След като влезете в редактора на шаблони, е време да започнете да проектирате заглавката. Ще забележите, че вече има раздел. Отворете настройките на секцията и добавете цвят на фона.
- Цвят на фона: #f6f9fb
разстояние
Превключете към раздела Дизайн на раздела и променете следните параметри.
- Подложка (отгоре и отдолу): 0px
Добавете нов ред
Структура на колоната
Продължете, като добавите нов ред, като използвате следната структура на колоните:
оразмеряване
Отворете настройките на линията, отидете на раздела Дизайн и променете максималната ширина в настройките за оразмеряване.
- Максимална ширина: 1px
разстояние
След това променете горната и долната подложка в настройките за разстояние.
- Подложка (отгоре и отдолу): 5px
Добавете модул Меню към колоната
Изберете менюто за добавяне
След това добавете модул Меню към колоната на реда и изберете динамично меню по ваш избор.
Изтеглете логото
Изтеглете a лого.
Премахнете цвета на фона
След това премахнете стандартния бял фонов цвят от модула.
Настройки на текста в менюто
Превключете към раздела Дизайн на модула и съответно променете текстовите параметри на менюто:
- Меню за шрифт: Poppins
- Дебелина на шрифта на менюто: Полудебел
- Цвят на текста: #003e51
- Размер на текста на менюто: 16px
- Подравняване на текст: дясно
Настройки на падащото меню
След това променете настройките от падащото меню.
- Цвят на линията на падащото меню: #7159c8
Настройки на икони
Променете и настройките на иконите.
- Цвят на иконата на количката за пазаруване: #670fff
- Цвят на иконата за търсене: #670fff
- Цвят на иконата на менюто за хамбургери: #670fff
оразмеряване
След това отидете на настройките за оразмеряване и задайте максимална ширина от лого.
- лого Максимална ширина: 280px
разстояние
Също така премахнете долното поле по подразбиране от модула.
- Поле (отдолу): 0px
Направете секцията лепкава
Сега, след като менюто ни е готово, ние също ще направим секцията лепкава. Отворете настройките на секцията, отидете на раздела Подробно и приложете следните настройки:
- Залепваща позиция: Прилепване към върха
- Отместване от околните лепкави елементи: ДА
- Преход по подразбиране и залепващи стилове: ДА
Цвят на фона в лепкаво състояние
След това променете цвета на фона на секцията на лепкаво състояние.
- Цвят на фона: #ffffff
Залепваща сянка на полето за състояние
Също така приложете сянка на кутия към секцията.
- Цвят на сянка (Desktop): rgba(0,0,0,0)
- Цвят на сянка (лепкав): rgba(0,0,0,0.04)
Добавена е икона на хамбургер към модула на менюто
Добавете CSS ID към модула на менюто
Първо отворете настройките на модула на менюто, отидете на раздела Подробно и задайте CSS ID.
- CSS ID: divi-menu
Добавете модул Код под модула Меню
След това добавете модул Код под модула Меню.
Добавете тагове за скрипт и стил
Ще използваме CSS и JQuery код. За да се подготвим за това, ще добавим тагове за стил и скрипт.
Добавяне на 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 код между маркерите на скрипта:
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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...