Jak stworzyć responsywne wysuwane menu za pomocą kreatora motywów Divi

Konfigurując stronę internetową dla swojego klienta, zastanawiasz się, jaki rodzaj nagłówka zbudować. Najczęściej używanym w Internecie jest poziomy pasek menu u góry, ale są też inne opcje, takie jak menu wysuwane. Wysuwane menu pomagają ograniczyć miejsce zajmowane przez globalny nagłówek. Zamiast pokazywać wszystkie pozycje menu od razu, możesz pozwolić, aby wysuwane menu pojawiło się, gdy odwiedzający klikną ikonę hamburgera w prawym górnym rogu. Korzystanie z wysuwanego menu pomaga dodać dodatkową interakcję do Twojej witryny.

W dzisiejszym samouczku dotyczącym przypadku użycia Divi pokażemy, jak utworzyć go za pomocą Kreatora motywów Divi, wbudowanych elementów Divi i dodatkowego kodu. Wygląd tego wysuwanego menu idealnie pasuje do Pakietu Układu Instruktora Jogi, ale możesz go dowolnie modyfikować, aby pasował do dowolnej strony, którą tworzysz. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

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

Pulpit

mobilny

Pobierz szablon globalnego nagłówka responsywnego wsuwanego menu za DARMO

Aby położyć swoje ręce na darmowym szablonie globalnego nagłówka menu wysuwanego, najpierw musisz go 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!

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

Przejdź do kreatora motywów Divi

Zacznij od przejścia do Divi Theme Builder na zapleczu swojej witryny WordPress i kliknij „Dodaj globalny nagłówek”.

Zacznij budować globalny nagłówek

Kontynuuj, wybierając „Buduj globalny nagłówek”.

2. Utwórz projekt nagłówka

Ustawienia sekcji

Kolor tła

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i ustaw przezroczysty kolor tła.

• Kolor tła: rgba (255,255,255,0)

Rozstaw

Przejdź do zakładki projektu i usuń wszystkie domyślne górne i dolne wyściółki.

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

Pozycja

Następnie zmienimy sekcję naprawioną, przechodząc do zakładki Zaawansowane i modyfikując ustawienia pozycji.

• Pozycja: Naprawiono
• Lokalizacja: górne centrum

Dodaj wiersz nr 1

Struktura kolumny

Po skonfigurowaniu ustawień sekcji dodaj nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru w następujący sposób:

• Szerokość: 97%
• Maksymalna szerokość: 100%

Rozstaw

Następnie zmodyfikuj ustawienia odstępów.

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

Główny element

Następnie przejdź do zakładki zaawansowane i dodaj dwie linie kodu CSS do głównego elementu wiersza. Pomoże nam to wyrównać w pionie zawartość kolumny w naszym wierszu.

display: flex;
align-items: center;

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.

Dodaj moduł tekstowy do kolumny 3

Dodaj 3 przęsła do pola zawartości

Następnie przejdź do trzeciej kolumny i dodaj moduł tekstowy. Użyjemy karty tekstowej modułu tekstowego, aby dodać trzy rozpiętości HTML z przypisanymi do nich niestandardowymi klasami. W dalszej części samouczka użyjemy tych przęseł do stworzenia naszej interaktywnej ikony hamburgera.

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

Kolor tła

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

• Kolor tła: rgba (0,0,0,0,04)

Ustawienia tekstu

Następnie przejdź do zakładki projektu i usuń wysokość linii tekstu. Pomoże nam to mieć pełną kontrolę nad dodanymi rozpiętościami.

• Wysokość linii tekstu: 0em

Rozmiary

Następnie zmodyfikujemy ustawienia rozmiaru modułu.

• Szerokość: 120px
• Wyrównanie modułu: w prawo

Rozstaw

Dokończymy ustawienia modułu, zmieniając moduł w kwadrat, używając niestandardowych wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 40px
• Dolna wyściółka: 60px
• Lewa wyściółka: 40px
• Prawe wypełnienie: 40px

Dodaj wiersz nr 2

Struktura kolumny

Do następnego rzędu! Użyjemy tego wiersza do zaprojektowania całego naszego menu rozwijanego. Użyj następującej struktury kolumn:

Kolor tła

Bez dodawania żadnych modułów otwórz ustawienia wierszy i zmień kolor tła w następujący sposób:

• Kolor tła: #e7e0e2

Zdjęcie w tle

Używamy również obrazu tła z wzorem. Obraz, którego użyliśmy, możesz znaleźć w folderze pobierania, który udało Ci się pobrać na początku tego samouczka, ale możesz użyć dowolnego innego wybranego wzoru tła.

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: środek
• Powtórzenie obrazu tła: powtórz

Rozmiary

Następnie przejdź do zakładki projekt i odpowiednio zmień ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 20% (komputer stacjonarny), 40% (tablet), 60% (telefon)
• Wysokość: 100vh

Rozstaw

Zmodyfikuj również ustawienia odstępów na różnych rozmiarach ekranu.

• Górna wyściółka: 10vw (komputer stacjonarny), 30vw (tablet), 40vw (telefon)

Granica

I uzupełnij ustawienia wiersza, dodając lewą ramkę.

• Szerokość lewej krawędzi: 10px
• Kolor lewej krawędzi: #24394a
• Styl lewej obramowania: podwójny

Dodaj moduł tekstowy do kolumny

Dodaj zawartość

Czas dodać pierwszy element menu Moduł tekstowy! Dodaj kopię do pola treści.

Dodaj link

Kontynuuj, dodając odpowiedni link do pozycji menu.

• Adres URL łącza modułu: #

Kolor tła

Następnie zmodyfikuj kolor tła.

• Kolor tła: rgba (216,210,212,0.35)

Ustawienia tekstu

Następnie przejdź do zakładki projekt i zmień ustawienia tekstu w następujący sposób:

• Czcionka tekstu: Domine
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #000000
• Rozmiar tekstu: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Wyrównanie tekstu: do środka

Rozstaw

Uzupełnij ustawienia modułu, dodając kilka niestandardowych wartości odstępów na różnych rozmiarach ekranu.

• Margines dolny: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
• Górna wyściółka: 1vw
• Dolna wyściółka: 1vw

Klonuj moduł tekstowy (1 moduł na pozycję menu)

Po ukończeniu pierwszego elementu menu Moduł tekstowy, możesz go sklonować tyle razy, ile potrzeba. Tylko upewnij się, że Twoje moduły nie przekraczają wysokości widocznego obszaru.

Zmień zawartość i linki zduplikowanych modułów tekstowych

Zmień zawartość i linki każdego zduplikowanego modułu tekstowego.

Dodaj moduł przycisku do kolumny

Dodaj kopię

Ostatnim modułem, którego potrzebujemy w tym wierszu, jest moduł przycisku. Dodaj wybraną kopię.

Dodaj link

Dodaj też link.

• URL linku przycisku: #

Wyrównanie

Przejdź do zakładki projektu i zmień wyrównanie przycisków.

• Wyrównanie przycisków: środek

Ustawienia przycisków

Kontynuuj, stylizując moduł przycisków w następujący sposób:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0,7vw (komputer), 1,5vw (tablet), 2,5vw (telefon)
• Kolor tekstu przycisku: #000000
• Kolor tła przycisku: rgba(0,0,0,0)
• Kolor obramowania przycisku: #24394a
• Promień obramowania przycisku: 0px
• Odstępy między przyciskami: 4px

• Czcionka przycisku: Otwórz Sans
• Waga czcionki przycisku: pogrubiona
• Styl czcionki przycisku: wielkie litery

Rozstaw

I uzupełnij ustawienia modułu, dodając niestandardowe wartości odstępów na różnych rozmiarach ekranu.

• Górny margines: 5vw
• Górna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Dolna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Lewa wyściółka: 1.8vw (komputer stacjonarny), 3vw (tablet), 4vw (telefon)
• Prawa wyściółka: 1.8vw (komputer stacjonarny), 3vw (tablet), 4vw (telefon)

3. Dodaj funkcję wsuwania

Dodaj identyfikator CSS do modułu tekstowego ikony menu

Teraz, gdy mamy już wszystkie elementy, nadszedł czas, aby stworzyć responsywny efekt wysuwanego menu! Najpierw otwórz moduł tekstowy (zawierający spas) w trzeciej kolumnie pierwszego wiersza i użyj niestandardowego identyfikatora CSS na karcie zaawansowane. Użyjemy tego identyfikatora CSS do utworzenia funkcji kliknięcia w naszym kodzie.

• Identyfikator CSS: wsuń-otwórz

Dodaj klasę CSS do wiersza nr 2

Następnie otwórz drugi wiersz, przejdź do zakładki zaawansowane i dodaj niestandardową klasę CSS. Po kliknięciu pozwolimy, by rząd się wsunął.

• Klasa CSS: slide-in-menu-container

Zmień pozycjonowanie rzędu #2

Zmienimy również położenie tego wiersza. Zwróć uwagę, jak przesunięcie w poziomie pasuje do szerokości wiersza na różnych rozmiarach ekranu w ustawieniach rozmiaru.

• Pozycja: bezwzględna
• Lokalizacja: u góry po prawej
• Przesunięcie w poziomie: -20% (komputer), -40% (tablet), -60% (telefon)

Zmień przezroczystość wiersza #2

I sprowadź krycie do 0 w stanie domyślnym.

opacity: 0;

Dodaj moduł kodu do drugiej kolumny pierwszego wiersza

Wstaw kod CSS

Aby stworzyć efekt funkcji kliknięcia i stylizować przęsła naszej ikony hamburgera, potrzebujemy kodu CSS. Dodaj moduł kodu do drugiej kolumny pierwszego wiersza i umieść następujące wiersze kodu CSS między tagami stylu, jak widać na poniższym zrzucie ekranu:

#slide-in-open{
cursor: pointer;
}

.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.line-2 {
top: 10px;
}

.line-3 {
top: 20px;
}

#slide-in-open.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

#slide-in-open.open .line-2 {
display: none;
}

#slide-in-open.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}

.slide-in-menu {
right: 0 !important;
opacity: 1 !important;
}

.slide-in-menu-container {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

Wstaw kod JQuery

Musimy też dodać trochę JQuery dla funkcji click. Upewnij się, że umieściłeś kod pomiędzy tagami skryptu, jak widać na poniższym zrzucie ekranu:

jQuery(function($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});

4. Zapisz zmiany w kreatorze motywów i zobacz wyniki na stronie internetowej

Po uzupełnieniu wszystkich elementów w globalnym nagłówku jedyne, co pozostało do zrobienia, to zapisanie wszystkich zmian i wyświetlenie wyniku na swojej stronie!

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak używać Kreatora motywów Divi do tworzenia responsywnego menu wysuwanego dla następnego projektu Divi. Połączyliśmy najlepsze wbudowane elementy i opcje Divi z niestandardowym kodem funkcji kliknięcia. Pozwala to skupić się na projektowaniu rozwijanego menu i pozwolić kodowi przejąć funkcjonalną część globalnego nagłówka! Udało Ci się również pobrać plik JSON za darmo. Jeśli masz jakieś pytania lub sugestie, 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.