Tworzenie zaawansowanego menu rozwijanego eleganckich motywów za pomocą kreatora motywów Divi

Odkąd pojawił się Divi's Theme Builder, sposób, w jaki projektujemy nagłówki i stopki na naszych stronach internetowych za pomocą Divi, stał się łatwiejszy niż kiedykolwiek. Wszystko można dostosować i uzyskać dokładnie takie menu, jakie masz na myśli, bez konieczności opuszczania intuicyjnego środowiska Divi. Teraz, w pewnym momencie, możesz natknąć się na rozwijane menu Eleganckie motywy na naszej stronie internetowej. To rozwijane menu jest bardziej zaawansowanym typem mega menu, które twórczo łączy ikony, tekst i wezwania do działania. Pozwala to odwiedzającym na wizualną nawigację po różnych dostarczanych produktach. Przekłada się to również na piękne zagnieżdżone menu na mniejszych ekranach.

W tym samouczku pokażemy, jak odtworzyć to zaawansowane menu rozwijane Elegant Themes w narzędziu Divi Theme Builder. Połączymy to, co najlepsze z obu światów; użyjemy wbudowanych elementów Divi, aby stworzyć podstawę naszych list rozwijanych i połączyć je z kodem, który umieszcza listy rozwijane w menu WordPress. 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 układ nagłówka menu rozwijanego Advanced Elegant Themes ZA DARMO

Aby położyć swoje ręce na darmowym układzie nagłówka, 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!

Jak przesłać plik JSON

Rozpakuj spakowany folder, który udało Ci się pobrać powyżej. Następnie przejdź do swojej witryny WordPress> Divi> Biblioteka Divi i prześlij plik JSON.

Po zapisaniu układu w bibliotece Divi możesz przejść do Kreatora motywów Divi i zaimportować zapisany układ, klikając „Dodaj globalny nagłówek” lub „Dodaj niestandardowy nagłówek” i wybierając „Buduj globalny/niestandardowy nagłówek”. Przejdź do zakładki „Twoje zapisane układy” w Bibliotece Divi, wybierz układ przesłany w poprzednim kroku i zapisz wszystkie zmiany w Kreatorze motywów Divi.

Aby mieć działające menu od samego początku, będziesz musiał przejść przez pierwszą część tego samouczka poniżej; dodawanie klas CSS do pozycji menu na indywidualnym poziomie. Będziesz także musiał włączyć jedną z klas CSS wewnątrz modułu kodu, jak pokazano w części 5 tego samouczka.

1. Dodaj klasy CSS do pozycji menu

Przejdź do menu w wyglądzie

Pierwsza część tego samouczka skupia się na skonfigurowaniu elementów menu WordPress z odpowiednimi klasami CSS. Aby to zrobić, przejdź do pulpitu WordPress> Menu> Utwórz nowe menu lub otwórz istniejące.

Włącz opcję klasy CSS

Następnie w prawym górnym rogu ekranu zobaczysz „Opcje ekranu”. Przełącz tę opcję i włącz „Klasy CSS” we właściwościach menu zaawansowanego. Umożliwi nam to dodawanie klas CSS do określonych pozycji menu na indywidualnym poziomie.

Dodaj kolejne klasy CSS do pozycji menu, które wymagają listy rozwijanej

W tym samouczku stworzymy trzy różne listy rozwijane i przypiszemy każde z nich do określonego elementu menu. Aby rozpocząć ten proces, musimy przypisać dwie różne klasy CSS do trzech pozycji menu, które chcemy umieścić w menu rozwijanym.

• Pierwsza pozycja menu, do której chcesz przypisać listę rozwijaną: pierwszy poziom pierwszy poziom-1
• Druga pozycja menu, do której chcesz przypisać listę rozwijaną: pierwszy poziom pierwszy poziom-2
• Trzecia pozycja menu, do której chcesz przypisać listę rozwijaną: pierwszy poziom pierwszy poziom-3

2. Utwórz niestandardowy nagłówek za pomocą kreatora motywów Divi

Przejdź do kreatora motywów Divi

Po ustanowieniu klasy CSS elementu menu nadszedł czas, aby przejść do Divi. Przejdź do Divi Theme Builder i wybierz „Dodaj globalny/niestandardowy nagłówek”.

Zacznij budować globalny nagłówek

Następnie wybierz „Buduj globalny nagłówek”, aby zostać przekierowanym do edytora szablonów.

Ustawienia sekcji

Kolor tła

Wewnątrz szablonu zauważysz sekcję. Otwórz tę sekcję i zmień kolor tła.

• Kolor tła: #ffffff

Rozstaw

Następnie usuń wszystkie domyślne wyściółki górnej i dolnej sekcji.

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

Cień Pudełka

I dodaj również subtelny cień pudełkowy.

• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 30px
• Kolor cienia: rgba (103.151.255.0.17)

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając pierwszy wiersz do sekcji, 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:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Maksymalna szerokość: 1440px

Rozstaw

Zmień górne i dolne wartości dopełnienia w ustawieniach odstępów.

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

Dodaj moduł menu do wiersza

Wybierz menu

Następnie dodaj moduł menu do kolumny wiersza i wybierz menu WordPress, które zmodyfikowałeś w pierwszej części tego samouczka.

Prześlij logo

Następnie prześlij logo.

Ustawienia tekstu menu

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

• Czcionka menu: Lato
• Grubość czcionki menu: pogrubiona
• Styl czcionki menu: wielkie litery
• Kolor tekstu menu: rgba (32,41,47,0.62)
• Rozmiar tekstu menu: 13px
• Odstępy między literami menu: 3px
• Wyrównanie tekstu: do prawej

Rozwijane ustawienia menu

Następnie wprowadź zmiany w ustawieniach menu rozwijanego.

• Kolor tła menu rozwijanego: #ffffff
• Kolor linii menu rozwijanego: rgba(0,0,0,0)
• Kolor tekstu menu rozwijanego: #000000
• Kolor tła menu mobilnego: #f2f4f5
• Kolor tekstu menu mobilnego: #000000

Ustawienia ikon

Jak również ustawienia ikon.

• Kolor ikony koszyka na zakupy: #000000
• Kolor ikony wyszukiwania: #000000
• Kolor ikony menu hamburgerów: #ff4a9e

Rozmiary

I uzupełnij ustawienia modułu, przypisując maksymalną wysokość logo do ustawień rozmiaru.

• Maksymalna wysokość logo: 64px

3. Utwórz elementy rozwijane

Dodaj nowy wiersz do sekcji

Struktura kolumny (zgodna liczba potrzebnych menu rozwijanych)

Po utworzeniu domyślnego menu nadszedł czas, aby utworzyć menu rozwijane. W tym celu dodamy nowy wiersz zawierający trzy kolumny o jednakowej wielkości. Liczba kolumn odpowiada liczbie rozwijanych menu, które utworzymy.

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i odpowiednio zmodyfikuj ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 86%
• Maksymalna szerokość: brak

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

Klasa CSS

I przypisz klasę CSS do wiersza.

• Klasa CSS: dropdown-menu-row

Wszystkie klasy CSS kolumn

Po zakończeniu ogólnych ustawień wierszy otwórz każdą kolumnę osobno i przypisz następującą klasę CSS:

• Klasa CSS: rozwijane-menu-kolumna

Dodaj Blurb Module #1 do kolumny 1

Dodaj zawartość

Czas dodać moduły! Zaczniemy od utworzenia pierwszego menu rozwijanego w pierwszej kolumnie. Aby wyświetlić wszystkie różne produkty, użyjemy modułu Blurb Divi. Dodaj wybrane przez siebie treści.

Wybierz ikonę

Następnie wybierz pasującą ikonę.

Dodaj link

Dodaj też link do modułu.

Ustawienia ikon

Przejdź do zakładki projektu i dostosuj ustawienia ikony w następujący sposób:

• Kolor ikony: #8f42ec
• Umieszczenie obrazu/ikony: po lewej
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 30px

Ustawienia tekstu tytułu

Następnie dostosuj styl tekstu tytułu.

• Czcionka tytułu: Lato
• Grubość czcionki tytułu: pogrubiona
• Styl czcionki tytułu: wielkie litery
• Kolor tekstu tytułu: #8f42ec
• Rozmiar tekstu tytułu: 16px
• Odstępy między literami tytułu: 2px

Ustawienia tekstu podstawowego

Wraz z treścią tekstu.

• Czcionka ciała: Lato
• Kolor tekstu ciała: #999999

Rozmiary

Upewniamy się, że szerokość treści również wynosi „100%”.

• Szerokość treści: 100%

Rozstaw

Następnie przejdziemy do ustawień odstępów i użyjemy różnych wartości dopełnienia na różnych rozmiarach ekranu.

• Górna wyściółka: 15px
• Dolna wyściółka: 15px
• Lewa wyściółka: 6% (komputer), 2% (tablet), 3% (telefon)
• Prawa wyściółka: 6% (komputer), 2% (tablet), 3% (telefon)

Unosić się:

• Górna wyściółka: 15px
• Dolna wyściółka: 15px
• Lewa wyściółka: 8%
• Prawa wyściółka: 4%

Animacje

Następnie usuniemy domyślną animację ikon w ustawieniach animacji.

• Animacja obrazu/ikony: brak animacji

Klasa CSS

Następnie przejdziemy do zakładki zaawansowane i przypiszemy klasę CSS do naszego modułu. Każdy moduł w rozwijanym menu wymaga tej samej przypisanej do niego klasy CSS, aby mógł być uwzględniony w rozwijanym menu.

• Klasa CSS: dropdown-menu-item

Główny element CSS

Na koniec uzupełnimy ustawienia modułu, zmieniając kursor za pomocą jednej linii kodu CSS w głównym elemencie.

cursor: pointer;

Moduł Clone Blurb x3

Po ukończeniu pierwszego modułu Blurb sklonuj go trzy razy.

Zmień zawartość i ikony

Zmodyfikuj całą zawartość i ikony dla każdego duplikatu.

Zmień linki

Wraz z linkami.

Klonuj ostatni moduł Blurb raz

Kontynuuj, klonując jeden raz ostatni moduł Blurb w kolumnie.

Dodaj kolor tła

Otwórz zduplikowane ustawienia modułu Blurb i zmień kolor tła.

• Kolor tła: #f9f9f9

Zmień ustawienia ikon

Zmodyfikuj również ustawienia ikon.

• Kolor ikony: #3b45eb
• Rozmiar czcionki ikony: 22px

Zmień ustawienia tekstu tytułu

Wraz z ustawieniami tekstu tytułu.

• Kolor tekstu tytułu: #3b45eb
• Rozmiar tekstu tytułu: 14px

Zmień treść i łącze

I oczywiście treść i link.

Wyłącz na tablecie i telefonie

Drugi typ modułu Blurb, który mamy w tym menu rozwijanym, będzie widoczny tylko na większych ekranach. Pomoże nam to zapewnić, że menu rozwijane nie stanie się zbyt przytłaczające na mniejszych ekranach. Aby ukryć moduł na mniejszych ekranach, przejdź do zakładki zaawansowane i wyłącz moduł na tablecie i telefonie.

Moduł Clone Blurb x3

Po ukończeniu drugiego typu modułu Blurb możesz go sklonować trzy razy.

Zmień zawartość i ikony

Upewnij się, że zmieniłeś zawartość i ikony dla każdego duplikatu.

Zmień linki

Wraz z linkami.

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Ostatnim modułem, którego potrzebujemy w naszym menu rozwijanym, jest moduł tekstowy. Używamy modułu tekstowego zamiast modułu przycisku, ponieważ moduł tekstowy łatwiej dostosuje się do środowiska rozwijanego. Dodaj wybraną kopię.

Kolor tła

Następnie zmień kolor tła.

• Kolor tła: #3776ff

Ustawienia tekstu

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

• Czcionka tekstu: Lato
• Grubość czcionki tekstu: pogrubiona
• Styl czcionki tekstu: wielkie litery
• Kolor tekstu: #ffffff
• Odstępy między literami tekstu: 3px
• Wyrównanie tekstu: do środka

Rozstaw

Dodaj też kilka niestandardowych wartości odstępów.

• Górny margines: 20px
• Margines dolny: 20px
• Lewy margines: 4%
• Prawy margines: 4%
• Górna wyściółka: 15px
• Dolna wyściółka: 15px

Granica

Następnie dodaj zaokrąglone rogi do ustawień obramowania.

• Wszystkie rogi: 100px

Cień Pudełka

Włącz subtelny cień pudełkowy.

• Pozycja pionowa cienia pudełka: 14px
• Kolor cienia: rgba (0,0,0,0) (domyślnie), rgba (0,0,0,0,09) (najechanie kursorem)

Przekształć Tłumacz

Po najechaniu chcemy, aby przycisk lekko się podniósł. Aby dodać ten efekt, po najechaniu myszą użyjemy niestandardowych ustawień tłumaczenia transformacji.

• Po prawej: -3px (najedź)

Klasa CSS

Podobnie jak wszystkie inne moduły w naszym menu rozwijanym, ten moduł wymaga następującej klasy CSS:

• Klasa CSS: dropdown-menu-item

Główny element CSS

A my uzupełnimy ustawienia modułu, zmieniając kursor za pomocą jednej linii kodu CSS w głównym elemencie.

cursor: pointer;

Usuń kolumnę 2 i 3

Po wypełnieniu pierwszej kolumny menu rozwijanego możesz otworzyć ustawienia wiersza i usunąć dwie puste kolumny w wierszu.

Klonuj pierwszą kolumnę dwa razy

Dwukrotnie sklonuj pierwszą kolumnę.

Dostosuj przedmioty

I dostosuj wszystkie elementy w dwóch pozostałych menu rozwijanych w dowolny sposób.

4. Dodaj kod CSS i JQuery

Dodaj nowy moduł kodu do kolumny wiersza nr 1

Teraz, gdy mamy już wszystkie pozycje menu rozwijanego, nadszedł czas, aby przekształcić je w menu rozwijane i umieścić menu rozwijane w pasującej pozycji menu. Dodaj moduł kodu do pierwszego wiersza, tuż pod modułem menu.

Wstaw kod CSS

I wstaw następujący kod CSS:

<style>
  
/* Enable class below once you're done editing the menu */
  
/*
.dropdown-menu-row {
display: none;
}*/
  
</style>
<style>
  
.et_pb_menu__menu [class*="dropdown-menu-container"] {
position: absolute;
top: 75px;
left: -195px;
background-color: white;
width: 464px;
-webkit-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
-moz-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
border-radius: 20px;
padding-top: 20px;
padding-bottom: 5px;
visibility: hidden;
opacity: 0;
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);     
}
  
.et_pb_menu__menu ul>li:hover [class*="dropdown-menu-container"] {
visibility: visible;
opacity: 1;
}
  
.et_pb_menu__menu [class*="dropdown-menu-container"]:before  {
position: absolute;
left: 195px;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}    
.et_mobile_menu [class*="dropdown-menu-container"] {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   
.et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF4A9E;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.et_mobile_menu [class*="dropdown-menu-container"] {
display: none;
}
  
.et_mobile_menu [class*="dropdown-menu-container"].reveal-items {
display: block;
}
  
.et_mobile_menu {
width: 130%;
margin-left: -15% !important;
min-height: 100vh;
}
</style>

Wstaw kod JQuery

Używamy również kodu JQuery. Upewnij się, że umieściłeś ten kod między tagami skryptu, jak widać na poniższym zrzucie ekranu.

jQuery(function($){
$(document).ready(function(){
  
$('.dropdown-menu-column').each(function(i){
  
i = i + 1;
  
var $dropdownMenuItems = $(this).find('.dropdown-menu-item');
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdownMenuItems.wrapAll('<div class="dropdown-menu-container-' + i + '" />');
var $dropdownContainer = $('.dropdown-menu-container-' + i);
$dropdownContainer.insertAfter($mainMenuItem);
  
});
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu [class*="dropdown-menu-container"]');
$firstLevel.off('click').click(function() {
$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 
$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');
var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();
var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  
});    
    
$(".dropdown-menu-row").css('visibility','hidden');
     
$(window).load(function() {
$(".dropdown-menu-row").fadeIn(1000);
});
  
});
});

5. Włącz klasę CSS po zakończeniu dostosowywania menu

Jak tylko skończysz dostosowywać wszystkie elementy rozwijane, będziesz miał jedną rzecz do zrobienia: ukrycie całego wiersza zawierającego elementy menu rozwijanego. To, w połączeniu z funkcją ładowania w naszym kodzie, zapobiegnie wyświetlaniu menu rozwijanych podczas ładowania strony. Po włączeniu tej klasy CSS nie zobaczysz już drugiego wiersza w programie Visual Builder, ale będziesz mieć do niego dostęp w trybie szkieletowym i/lub tymczasowo wyłączyć klasę CSS podczas wprowadzania zmian w menu rozwijanych. Aby włączyć klasę, usuń nawiasy „/* */” na początku i na końcu klasy CSS.

• Klasa CSS: dropdown-menu-row

6. Tworzenie więcej niż 3 menu rozwijanych

Dodaj klasy CSS do elementów menu w wyglądzie

Jeśli szukasz sposobu na dodanie do menu więcej niż 3 menu rozwijanych, musisz wrócić do menu i dodać kolejne klasy CSS do czwartego elementu menu.

• Czwarta pozycja menu, do której chcesz przypisać listę rozwijaną: pierwszy poziom pierwszy poziom-4

Klonuj kolumnę na końcu rzędu

Następnie wróć do nagłówka i sklonuj ostatnią kolumnę.

Upewnij się, że klasy CSS kolumn i modułów są na swoim miejscu

Upewnij się, że klasy CSS kolumn i modułów są na miejscu dla nowego menu rozwijanego i gotowe! Ważne jest, aby zawsze dedykować nową kolumnę nowemu menu rozwijanemu i przestrzegać kolejności kolumn w wierszu. Oznacza to, że kolumna 1 będzie rozwijana 1, kolumna 2 będzie rozwijana 2 itd.

• Klasa CSS kolumny: rozwijane-menu-kolumna
• Moduł CSS Class: dropdown-menu-item

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 samouczku pokazaliśmy, jak odtworzyć menu rozwijane Elegant Themes za pomocą Kreatora motywów Divi. Połączyliśmy to, co najlepsze z obu światów i wykorzystaliśmy wbudowane elementy Divi, aby nadać styl wszystkim elementom w naszym menu rozwijanym, a następnie użyliśmy kodu, aby umieścić wszystkie listy rozwijane w odpowiadających im elementach menu w menu WordPress. 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.