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