Jak stworzyć mobilne, zwijane zagnieżdżone menu za pomocą kreatora motywów Divi

Jakiś czas temu udostępniliśmy hack menu mobilnego, który pomaga utworzyć zwijane zagnieżdżone menu. Wiemy, że wielu z was z niego korzystało, ale dzięki nowemu kreatorowi motywów Divi podejście staje się nieco inne. W dzisiejszym samouczku pokażemy, jak zastosować efekt zwijania mobilnego do modułu menu w narzędziu Divi Theme Builder. Ten samouczek składa się z trzech głównych części:

• Konfigurowanie menu i przypisywanie odpowiednich klas do pozycji menu
• Tworzenie menu za pomocą kreatora motywów i modułu menu
• Dodanie niestandardowego kodu w Theme Builder

Będziesz mógł również bezpłatnie pobrać szablonowy plik JSON! Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

mobilny

Pulpit

Pobierz projekt globalnego nagłówka ZA DARMO

Ważne: po pobraniu i przesłaniu pliku JSON do kreatora motywów nadal będziesz musiał ręcznie skonfigurować swoje menu z odpowiednimi klasami CSS + dodać moduł Code z kodem CSS i JQuery (kroki 1 i 3 tego postu) .

Aby położyć swoje ręce na darmowym zwijanym zagnieżdżonym menu, najpierw musisz je pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Subskrybuj nasz kanał YouTube

1. Skonfiguruj swoje menu

Dodaj pozycje menu i pozycje podmenu

Pierwszą rzeczą, którą musisz zrobić, to stworzyć swoje menu. Dodaj wybrane elementy podrzędne.

Dodaj opcję klasy CSS

Po dodaniu elementów menu możesz włączyć opcję klas CSS, klikając „Opcje ekranu” i włączając „Klasy CSS”.

Dodaj klasę CSS do pozycji menu pierwszego poziomu zawierających pozycje podmenu

Kontynuuj, dodając klasę CSS do elementów menu pierwszego poziomu, które zawierają elementy podmenu. W tym przykładzie oznacza to dodanie klasy CSS do elementów menu „Usługa” i „Portfolio”.

• Klasy CSS: pierwszy poziom

Dodaj klasę CSS do pozycji menu drugiego poziomu i Zapisz menu

Następnie przypisz inną klasę CSS do pozycji menu drugiego poziomu w swoim menu. Upewnij się, że dodajesz tę klasę CSS tylko do elementów menu drugiego poziomu (na wypadek dodawania kolejnych poziomów). W dalszej części tego samouczka użyjemy tej klasy CSS i tej, którą przypisaliśmy do elementów menu pierwszego poziomu, aby utworzyć zwijane zagnieżdżone menu.

• Klasy CSS: drugi poziom

2. Przejdź do Divi Theme Builder i zacznij budować globalny nagłówek

Przejdź do kreatora motywów Divi

Kolejna część tego samouczka skupia się na tworzeniu projektu nagłówka. Jeśli chcesz, aby technika zagnieżdżona została zastosowana do nagłówka, który już zbudowałeś (za pomocą modułu menu), możesz pominąć ten krok i przejść do ostatniej części samouczka. Jeśli chcesz odtworzyć projekt, postępuj zgodnie z instrukcjami. Przejdź do kreatora motywów Divi.

Zacznij budować globalny nagłówek

Zacznij teraz tworzyć swój globalny nagłówek.

Ustawienia sekcji

Rozstaw

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Indeks Z

Zwiększ również indeks z sekcji.

• Indeks Z: 99999

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i pozwól wierszowi zająć całą szerokość ekranu.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Główny element

Upewnij się, że wszystkie moduły pojawiają się obok siebie na mniejszych ekranach, dodając jeden wiersz kodu CSS również do głównego elementu wiersza.

display: flex;

Kolumna 1

Rozstaw

Następnie otwórz ustawienia kolumny 1 i dodaj niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px

Granica

Dodaj też promień obramowania.

• U góry po prawej: 100px
• Dolny prawy: 100px

Cień Pudełka

I uzupełnij ustawienia kolumny 1, dodając subtelny cień pudełka.

• Pozycja pozioma cienia pudełka: 20px
• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba(0,0,0,0.15)

Kolumna 2

Rozstaw

Otwórz następnie ustawienia drugiej kolumny i dodaj górną i dolną część dopełnienia.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px

Kolumna 3

Tło gradientowe

Przejdź do następnej i ostatniej kolumny. Dodaj tło gradientowe.

• Kolor 1: #26c699
• Kolor 2: #abe02f
• Kierunek gradientu: 116deg

Rozstaw

Następnie dodaj niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px

Granica

Następnie przejdź do ustawień obramowania i wprowadź następujące zmiany:

• U góry po lewej: 100px
• Dolny lewy: 100px

Cień Pudełka

Uzupełnij ustawienia kolumny, dodając cień prostokąta.

• Pozycja pozioma cienia pudełka: -26px
• Pozycja pionowa cienia pudełka: 0px
• Kolor cienia: #d2ff0c

Dodaj moduł obrazu do kolumny 1

Prześlij logo

Czas dodać moduły, zaczynając od modułu obrazu w kolumnie 1. Prześlij swoje logo.

Wyrównanie

Następnie zmień wyrównanie obrazu modułu.

• Wyrównanie obrazu: Środek

Rozmiary

Uzupełnij ustawienia modułu, zmieniając szerokość w różnych rozmiarach ekranu.

• Szerokość: 120px (komputer), 80px (tablet i telefon)

Dodaj moduł menu do kolumny 2

Wybierz menu

W kolumnie 2 jedynym modułem, którego potrzebujemy, jest moduł menu. Wybierz menu, które utworzyłeś w pierwszej części tego samouczka.

Usuń kolor tła

Następnie usuń kolor tła modułu.

Układ

Następnie zmień ustawienia układu.

• Styl: wyśrodkowany
• Menu rozwijane Kierunek: w dół

Tekst menu

Stylizuj również tekst menu.

• Czcionka menu: Montserrat
• Grubość czcionki menu: średnia
• Kolor tekstu menu: #000000
• Rozmiar tekstu menu: 13px
• Odstępy między literami menu: 1px

Menu rozwijane

Kontynuuj, zmieniając niektóre kolory w ustawieniach menu rozwijanego.

• Kolor tła menu rozwijanego: #ffffff
• Kolor linii menu rozwijanego: #000000

Ikony

I uzupełnij ustawienia modułu, zmieniając kolor ikony menu hamburgera w ustawieniach ikon.

• Kolor ikony menu hamburgerów: #000000

Dodaj moduł tekstowy do kolumny 3

Dodaj zawartość

Przejdź do następnego i ostatniego modułu, którym jest moduł tekstowy w kolumnie 3. Dodaj wybraną kopię.

Dodaj link

Następnie dodaj link do modułu.

• Adres URL łącza modułu: #

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Montserrat
• Grubość czcionki tekstu: pół pogrubiona
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 16px
• Wysokość linii tekstu: 1em
• Wyrównanie tekstu: do środka

Rozstaw

Uzupełnij ustawienia modułu, dodając trochę górnego marginesu.

• Górny margines: 10px

3. Dodaj funkcjonalność do menu za pomocą modułu kodu

Dodaj moduł kodu do kolumny 2

Po zakończeniu projektowania nagłówka nadszedł czas na dodanie niestandardowego kodu, który przekształci menu mobilne w zwijane menu zagnieżdżone. Dodaj moduł kodu do drugiej kolumny (lub gdziekolwiek indziej).

Wstaw kod CSS i JQuery

Następnie dodaj kod CSS i JQuery. Upewnij się, że kod CSS umieszczasz między tagami stylu, a kod JQuery między tagami skryptu.

.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}

(function($) {
      
function setup_collapsible_submenus() {
    
var FirstLevel = $('.et_mobile_menu .first-level > a');
  
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');  
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
  

}
      
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
 
})(jQuery);

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

mobilny

Pulpit

Końcowe przemyślenia

W tym poście pokazaliśmy, jak zastosować zwijające się zagnieżdżone menu do globalnego nagłówka w Theme Builder. Zaczęliśmy od stworzenia głównego paska menu, kontynuowaliśmy od zaprojektowania naszego nagłówka w Theme Builderze za pomocą modułu menu i ukończyliśmy samouczek, dodając niestandardowy kod, który sprawia, że ​​efekt działa. Mamy nadzieję, że podobał Ci się ten samouczek, a jeśli masz jakieś pytania, możesz zostawić komentarz w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.