Czy chcesz dodać ikonę hamburgera do modułu Menu w Divi ?
Jeśli zbudujesz swój nagłówek w Divi, można to zrobić na kilka sposobów.
Pokażemy Ci jak dodać ikonę hamburgera do modułu Menu Divi. Ta ikona hamburgera pojawia się już domyślnie na mniejszych ekranach. Ale w tym samouczku upewnimy się, że ikona hamburgera pojawi się również na pulpicie.
Daje to minimalistyczny wygląd nagłówkowi, a jednocześnie dodaje interakcji.
Chodźmy.
badanie
Zanim zagłębimy się w ten samouczek, rzućmy okiem na wynik.
Pobierz DIVI teraz !!!
Utwórz nowy szablon globalnego nagłówka za pomocą Divi Builder
Przejdź do kreatora motywów Divi
Z pulpitu WordPress przejdź do „Divi > Kreator motywów' następnie kliknij „Dodaj globalny nagłówek”
Dodaj nowy nagłówek globalny
Pojawi się rozwijane menu. Aby rozpocząć tworzenie od zera, kontynuuj, wybierając „Zbuduj globalny nagłówek”.
Projektowanie globalnego projektu nagłówka
Ustawienia sekcji
Kolor tła
Po wejściu do edytora szablonów czas rozpocząć projektowanie nagłówka. Zauważysz, że istnieje już sekcja. Otwórz ustawienia sekcji i dodaj kolor tła.
- Kolor tła: #f6f9fb
rozstaw
Przełącz na kartę Wnętrze sekcji i zmodyfikuj następujące parametry.
- Dopełnienie (góra i dół): 0px
Dodaj nową linię
Struktura kolumny
Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:
zaklejania
Otwórz ustawienia linii, przejdź do zakładki Wnętrze i zmień maksymalną szerokość w ustawieniach rozmiaru.
- Maksymalna szerokość: 1 pikseli
rozstaw
Następnie zmień górną i dolną wyściółkę w ustawieniach odstępów.
- Dopełnienie (góra i dół): 5px
Dodaj moduł Menu do kolumny
Wybierz menu do dodania
Następnie dodaj moduł menu do kolumny wiersza i wybierz wybrane dynamiczne menu.
Pobierz logo
Pobierz logo.
Usuń kolor tła
Następnie usuń z modułu domyślny biały kolor tła.
Ustawienia tekstu menu
Przełącz na kartę Wnętrze modułu i odpowiednio zmodyfikuj parametry tekstowe menu:
- Menu czcionek: Poppins
- Grubość czcionki menu: pół pogrubiona
- Kolor tekstu: #003e51
- Rozmiar tekstu menu: 16px
- Wyrównanie tekstu: do prawej
Ustawienia menu rozwijanego
Następnie zmień ustawienia z menu rozwijanego.
- Kolor linii menu rozwijanego: #7159c8
Ustawienia ikon
Zmień również ustawienia ikon.
- Kolor ikony koszyka na zakupy: #670fff
- Kolor ikony wyszukiwania: #670fff
- Kolor ikony menu Hamburger: #670fff
zaklejania
Następnie przejdź do ustawień rozmiaru i przypisz maksymalną szerokość logo.
- logo Maksymalna szerokość: 280px
rozstaw
Usuń również domyślny dolny margines z modułu.
- Margines (dolny): 0px
Uczyń sekcję lepką
Teraz, gdy nasze menu jest na swoim miejscu, sprawimy, że sekcja będzie przyklejona. Otwórz ustawienia sekcji, przejdź do zakładki Zaawansowane i zastosuj następujące ustawienia:
- Lepka pozycja: przyklej do góry
- Odsunięcie od otaczających lepkich elementów: TAK
- Domyślne i trwałe style przejścia: TAK
Kolor tła w stanie lepkim
Następnie zmień kolor tła sekcji na przyklejony.
- Kolor tła: #ffffff
Przyklejony cień pola stanu
Zastosuj również cień do sekcji.
- Kolor cienia (komputer): rgba(0,0,0,0)
- Kolor cienia (przyklejony): rgba (0,0,0,0.04)
Dodano ikonę hamburgera do modułu Menu
Dodaj identyfikator CSS do modułu menu
Najpierw otwórz ustawienia modułu Menu, przejdź do zakładki Zaawansowane i przypisz identyfikator CSS.
- Identyfikator CSS: divi-menu
Dodaj moduł Kod w module Menu
Następnie dodaj moduł Kod w module Menu.
Dodaj tagi skryptu i stylu
Użyjemy kodu CSS i JQuery. Aby się do tego przygotować, dodamy tagi stylu i skryptu.
Dodaj kod CSS
Wklejmy następujące wiersze kodu CSS między tagami stylu:
.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;
}
Dodaj JQuery
Dodaj linie otwierania kodu JQuery
Dalej będziemy mieli kod JQuery. Dodaj następujące wiersze kodu JQuery między tagami skryptu:
jQuery(function($){
$(document).ready(function(){
});
});
Utwórz zmienne
Następnie utwórz kilka zmiennych.
var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');
Umieść ikonę przełączania w module Menu
Następnie umieść zmienną toggle icon w module Menu, używając następującego wiersza kodu:
toggleIcon.insertAfter(desktopMenu);
Dodaj funkcję kliknięcia!
Dodajemy również funkcję kliknięcia.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
Zapisz zmiany w Kreatorze motywów Divi
Teraz, gdy wszystko jest na swoim miejscu, pozostaje tylko zapisać wszystkie modyfikacje Divi Theme Builder i wyświetlić wynik!
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się po raz ostatni efektowi końcowemu.
Pobierz DIVI teraz !!!
Wnioski
W tym artykule pokazaliśmy, jak wykazać się kreatywnością za pomocą globalnego nagłówka w Divi Theme Builder.
W szczególności pokazaliśmy, jak dodać ikonę menu hamburgera również na pulpicie. Domyślnie na tablecie i telefonie komórkowym wyświetlana jest ikona hamburgera.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do ukończenia projektów tworzenia stron internetowych. Lub zobacz także nasz przewodnik na Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
