Divi jest motywem masowo konfigurowalnym, ponieważ w każdej sekcji jest wiele możliwości wdrożenia nowych unikalnych projektów. Witryna internetowa ma wiele sekcji, takich jak nagłówek, stopka, treść itp. Wśród nich sekcja nagłówka jest jedną z najważniejszych, ponieważ zawiera linki do ważnych stron w witrynie, które potencjalni klienci często będą chcieli odwiedzić. Dostarcza również kluczowych punktów dotyczących Twojej witryny, które zachęcają klienta do dalszej eksploracji. W dzisiejszym samouczku zobaczysz, jak dodać przełącznik menu hamburgera w górnym menu nagłówka nawigacji. Ogólnie wiemy, że menu hamburgerów jest używane w przypadku małych ekranów. Ale dzisiaj zobaczymy to w trybie pulpitu. Nie traćmy więcej czasu i rozpocznij nasz dzisiejszy samouczek.

zapowiedź
Dziś stworzymy ten projekt, w którym menu nawigacyjne będzie ukryte za menu hamburgerowym.
Część pierwsza: szablon nagłówka globalnego.
Zaczniemy od przejścia do kreatora motywów Divi i kliknięcia „Dodaj globalny nagłówek”. Pojawi się menu i wybierz „Build Global Header”.

Wybierz „Buduj od podstaw” i idź dalej.
Twórz niesamowite strony internetowe
Z najlepszym darmowym kreatorem stron Elementor
Zacząć teraz
Część druga: globalne projektowanie nagłówków
Ustawienia: Sekcja główna
Kolor tła
Teraz zaczniemy projektować nagłówek. Najpierw zmień kolor tła początkowej sekcji.
- Kolor tła: #f6f9fb

Rozstaw
Następnie przejdź do ustawień odstępów w zakładce projekt i ustaw dolną i górną dopełnienie na zero.
- Górna wyściółka: 0px
- Dolna wyściółka: 0px

Dodawanie: Nowy wiersz
Przejdźmy dalej, dodając nowy rząd do naszego projektu. Wybierz wzmiankę o wierszu na obrazku.

Rozmiary
Przed dodaniem kolejnych modułów zmień rozmiar wiersza.
- Maksymalna szerokość: 1280 pikseli

Rozstaw
Dostosuj górną i dolną wyściółkę.
- Górna wyściółka: 5px
- Dolna wyściółka: 5px

Dodawanie: moduł menu do kolumny
Wybór menu
Teraz dodaj moduł menu do kolumny nowego wiersza i wybierz menu.

Dodaj logo
Teraz dodaj logo do modułu.

Usuń kolor tła
Następnie usuń domyślny kolor tła modułu.

Ustawienia: Tekst menu
Z zakładki projektowania tego modułu i odpowiednio zmień ustawienia tekstu menu:
- Czcionka menu: Poppins
- Grubość czcionki menu: pół pogrubiona
- Kolor tekstu menu: #003e51
- Rozmiar tekstu menu: 16px
- Wyrównanie tekstu: do prawej

Ustawienia: menu rozwijane
Następnie zmień ustawienia menu rozwijanego.
- Kolor linii menu rozwijanego: #7159c8

Ustawienia: Ikony
Zmień też ustawienia ikon.
- Kolor ikony koszyka na zakupy: #670fff
- Kolor ikony wyszukiwania: #670fff
- Kolor ikony menu Hamburger: #670fff

Rozmiary
W ustawieniach rozmiaru zmień maksymalną szerokość logo.
- Maksymalna szerokość logo: 60px

Rozstaw
Dokonaj pewnych zmian w odstępach.
- Margines dolny: 0px

Sekcja skrętu przyklejona
Nasz manu jest teraz podzielony. Nadszedł czas, aby sekcja była przyklejona. Z ustawień sekcji przejdź do zakładki Zaawansowane i wykonaj ustawienie wymienione poniżej.
- Lepka pozycja: trzymaj się u góry
- Przesunięcie od otaczających lepkich elementów: Tak
- Domyślne i trwałe style przejścia: Tak

Kolor tła: tryb lepki
Teraz zmodyfikuj kolor tła całej sekcji w stanie lepkim.
- Kolor tła: #ffffff

Cień: tryb lepki
Zastosuj cień prostokątny do przekroju, a także z karty projektu.
- Domyślny kolor cienia: rgba(0,0,0,0)
- Lepki kolor cienia: rgba (0,0,0,0,04)

Część trzecia: Przełącznik ikony hamburgera
Identyfikator CSS modułu menu
Skoncentrujemy się na stworzeniu ikony przełączania ikony hamburgera na pulpicie w następnej części samouczka. Najpierw otwórz ustawienia modułu menu, przejdź do zakładki zaawansowane i przypisz identyfikator CSS.
- Identyfikator CSS: divi-menu

Dodaj moduł kodu
Teraz dodaj moduł kodu pod modułem menu.

Kod CSS
Teraz dodaj tag Style i umieść kod wewnątrz tagu.
.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

Kod JQuery
Następnie dodaj tag Script i umieść kod wewnątrz tagu.
jQuery(function($){
$(document).ready(function(){
var toggleIcon = $('>div class="toggle-icon"/div

Teraz zapisz postęp i wróć do opcji divi builder, naciskając prawy górny krzyż.

Ostateczny wynik
Ponieważ pomyślnie przeszliśmy wszystkie etapy, tak wygląda nasz dzisiejszy projekt.
Końcowe przemyślenia
Z Divi możesz być kreatywny na wiele sposobów. Daje Ci pełną swobodę w projektowaniu Twojej witryny tak, jak tego potrzebujesz. Dzisiaj widzieliście dodanie górnego menu nawigacyjnego w menu hamburgera w widoku pulpitu. Mam nadzieję, że pomoże to w tworzeniu bardziej kreatywnych nagłówków, a jeśli ten samouczek okaże się pomocny, udostępnienie znajomym będzie NIESAMOWITE!