Crearea meniului derulant Advanced Themes Elegant cu Divi's Theme Builder

De când a apărut Divi's Theme Builder, modul în care proiectăm anteturi și subsoluri pe site-urile noastre web cu Divi a devenit mai ușor ca niciodată. Totul poate fi personalizat și puteți obține meniul exact pe care îl aveți în minte fără a fi nevoie să părăsiți vreodată mediul intuitiv Divi. Acum, la un moment dat, este posibil să fi întâlnit meniul derulant Teme elegante de pe site-ul nostru. Acest meniu derulant este un tip mai avansat de mega meniu care combină creativ pictograme, text și CTA-uri. Acest lucru permite vizitatorilor să navigheze vizual prin diferitele produse furnizate. De asemenea, se traduce printr-un frumos meniu imbricat pe dimensiuni mai mici de ecran.

În acest tutorial, vă vom arăta cum să recreați acest meniu derulant avansat Elegant Themes în cadrul Divi's Theme Builder. Vom combina cele mai bune din ambele lumi; vom folosi elementele Divi încorporate pentru a crea fundația drop-down-urilor noastre și o vom combina cu un cod care plasează drop-down-urile în meniul WordPress. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați Layout-ul antetului meniului derulant Teme elegante elegante

Pentru a pune mâna pe aspectul gratuit al antetului, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Cum se încarcă fișierul JSON

Dezarhivați fișierul zip pe care l-ați putut descărca mai sus. Apoi, navigați la site-ul dvs. WordPress> Divi> Biblioteca Divi și încărcați JSON.

Odată ce aspectul dvs. este salvat în Biblioteca Divi, puteți naviga la Divi Theme Builder și puteți importa aspectul salvat făcând clic pe „Adăugați antet global” sau „Adăugați antet personalizat” și selectând „Construiți antet global / personalizat”. Accesați fila „Aspectele dvs. salvate” din Biblioteca Divi, selectați aspectul pe care l-ați încărcat în pasul anterior și salvați toate modificările Divi Theme Builder.

Pentru a avea un meniu funcțional chiar lângă bat, vi se va cere să parcurgeți prima parte a acestui tutorial de mai jos; adăugarea claselor CSS la elementele de meniu la nivel individual. De asemenea, va trebui să activați una dintre clasele CSS din modulul de cod, așa cum se arată în partea 5 a acestui tutorial.

1. Adăugați clase CSS la elementele de meniu

Accesați Meniuri în aparență

Prima parte a acestui tutorial se concentrează pe configurarea elementelor de meniu WordPress cu clasele CSS adecvate. Pentru aceasta, navigați la tabloul de bord WordPress> Meniuri> Creați un meniu nou sau deschideți unul existent.

Activați opțiunea CSS Class

Apoi, în colțul din dreapta sus al ecranului, veți observa „Opțiunile ecranului”. Comutați această opțiune și activați „Clase CSS” în proprietățile avansate ale meniului. Acest lucru ne va permite să adăugăm clase CSS la anumite elemente de meniu la nivel individual.

Adăugați clase CSS consecutive la articolele din meniu care necesită o listă verticală

Pe parcursul acestui tutorial, vom crea trei meniuri derulante diferite și le vom atribui fiecăruia unui anumit element de meniu. Pentru a începe acest proces, va trebui să atribuim două clase CSS diferite celor trei elemente de meniu pe care dorim să le conțină un meniu derulant.

• Primul element de meniu căruia doriți să îi atribuiți o listă derulantă: primul-nivel primul-nivel-1
• Al doilea element de meniu căruia doriți să îi atribuiți o listă derulantă: primul nivel primul-nivel-2
• Al treilea element de meniu căruia doriți să îi atribuiți o listă derulantă: primul-nivel primul-nivel-3

2. Creați un antet personalizat cu Divi's Theme Builder

Accesați Divi Theme Builder

Odată ce elementul de meniu Clasele CSS sunt la locul său, este timpul să treceți la Divi. Accesați Divi Theme Builder și selectați „Adăugați antet global / personalizat”.

Începeți să creați antet global

Apoi, selectați „Construiți antet global” pentru a fi redirecționat către editorul de șabloane.

Setări secțiune

Culoare de fundal

În interiorul șablonului, veți observa o secțiune. Deschideți acea secțiune și schimbați culoarea de fundal.

• Culoare fundal: #ffffff

Spațiere

Eliminați toate căptușirile implicite ale secțiunilor de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Box Shadow

Și includeți și o umbră de cutie subtilă.

• Box Shadow Vertical Position: 0px
• Puterea neclarității umbrei cutiei: 30 px
• Culoare umbră: rgba (103,151,255,0,17)

Adăugați un rând nou

Structura coloanei

Continuați adăugând un prim rând la secțiune folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime maximă: 1440 px

Spațiere

Modificați valorile de umplere de sus și de jos în setările de spațiere următoare.

• Căptușeală superioară: 10 px
• Căptușeală inferioară: 10 px

Adăugați modulul de meniu la rând

Selectați Meniu

Apoi, adăugați un modul de meniu în coloana rândului dvs. și selectați meniul WordPress pe care l-ați modificat în prima parte a acestui tutorial.

Încărcați sigla

Încărcați o siglă în continuare.

Setări text meniu

Treceți la fila de proiectare și modificați setările textului meniului în consecință:

• Font de meniu: Lato
• Greutate font meniu: îndrăzneț
• Stilul fontului meniului: majuscule
• Culoare text meniu: rgba (32,41,47,0.62)
• Dimensiune text meniu: 13 px
• Spațiere scrisori meniu: 3 px
• Alinierea textului: dreapta

Setări meniu derulant

Apoi faceți câteva modificări la setările meniului derulant.

• Culoarea fundalului meniului derulant: #ffffff
• Culoare linie meniu derulant: rgba (0,0,0,0)
• Culoarea textului din meniul drop-down: # 000000
• Culoarea fundalului meniului mobil: # f2f4f5
• Culoarea textului meniului mobil: # 000000

Setări pictograme

La fel ca și setările pentru pictograme.

• Culoare pictogramă coș de cumpărături: # 000000
• Culoare pictogramă de căutare: # 000000
• Culoare pictogramă meniu hamburger: # ff4a9e

Dimensionare

Și finalizați setările modulului atribuind o siglă înălțime maximă setărilor de dimensionare.

• Logo Înălțime maximă: 64 px

3. Creați elemente dropdown

Adăugați un rând nou la secțiune

Structura coloanei (numărul corespunzător de meniuri derulante necesare)

Odată ce meniul implicit este instalat, este timpul să creați meniurile derulante. Pentru aceasta, vom adăuga un nou rând care conține trei coloane de dimensiuni egale. Numărul de coloane se potrivește cu numărul de meniuri derulante pe care le vom crea.

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare în consecință:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 86%
• Lățime maximă: Niciuna

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Clasa CSS

Și atribuiți o clasă CSS rândului.

• Clasa CSS: meniul derulant-meniu-rând

Toate clasele CSS de coloană

După ce ați completat setările de rând generale, deschideți fiecare coloană individual și atribuiți următoarea clasă CSS:

• Clasa CSS: meniul derulant-coloana

Adăugați Blurb Module # 1 la Coloana 1

Adauga continut

E timpul să adăugați module! Vom începe prin a crea primul meniu derulant în prima coloană. Pentru a afișa toate produsele diferite, vom folosi modulul Divi's Blurb. Adăugați un conținut la alegere.

Selectați pictograma

Apoi, selectați o pictogramă potrivită.

Adăugați un link

Adăugați și un link către modul.

Setări pictograme

Treceți la fila de proiectare și stilizați setările pictogramei după cum urmează:

• Culoare pictogramă: # 8f42ec
• Plasare imagine / pictogramă: stânga
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 30 px

Setări text titlu

Apoi, stilizați textul titlului.

• Titlu Font: Lato
• Greutatea fontului titlului: Bold
• Stilul fontului titlului: majuscule
• Culoare text titlu: # 8f42ec
• Dimensiune text titlu: 16 px
• Spațierea literelor de titlu: 2 px

Setări text corp

Împreună cu textul corpului.

• Font corp: Lato
• Culoarea textului corpului: # 999999

Dimensionare

Ne asigurăm că și lățimea conținutului este „100%”.

• Lățimea conținutului: 100%

Spațiere

Apoi, vom merge la setările de spațiere și vom folosi câteva valori de umplere diferite pe diferite dimensiuni de ecran.

• Căptușeală superioară: 15 px
• Căptușeală inferioară: 15 px
• Căptușire stângă: 6% (Desktop), 2% (Tabletă), 3% (Telefon)
• Căptușeală dreaptă: 6% (desktop), 2% (tabletă), 3% (telefon)

Planare:

• Căptușeală superioară: 15 px
• Căptușeală inferioară: 15 px
• Căptușeală stângă: 8%
• Garnitura dreapta: 4%

Animații

În continuare, vom elimina animația implicită a pictogramei din setările de animație.

• Animație imagine / pictogramă: fără animație

Clasa CSS

Apoi, vom trece la fila avansată și vom atribui o clasă CSS modulului nostru. Fiecare modul din meniul derulant are nevoie de aceeași clasă CSS atribuită acestuia pentru a fi inclusă în meniul derulant.

• Clasa CSS: meniu derulant-element

Element principal CSS

Nu în ultimul rând, vom completa setările modulului schimbând cursorul folosind o linie de cod CSS în elementul principal.

cursor: pointer;

Modul Clone Blurb x3

După ce ați finalizat primul modul Blurb, clonați-l de trei ori.

Schimbați conținutul și pictogramele

Modificați tot conținutul și pictogramele pentru fiecare duplicat.

Schimbați linkurile

Împreună cu linkurile.

Clonați ultimul modul Blurb o dată

Continuați clonând ultimul modul Blurb din coloană o singură dată.

Adăugați o culoare de fundal

Deschideți setările duplicatului Blurb Module și schimbați culoarea de fundal.

• Culoare fundal: # f9f9f9

Schimbați setările pictogramei

Modificați și setările pictogramei.

• Culoare pictogramă: # 3b45eb
• Pictogramă Dimensiune font: 22 px

Modificați setările pentru textul titlului

Împreună cu setările pentru textul titlului.

• Culoarea textului titlului: # 3b45eb
• Dimensiune text titlu: 14 px

Schimbați conținutul și linkul

Și, desigur, conținutul și linkul.

Dezactivați pe tabletă și telefon

Al doilea tip de modul Blurb pe care îl avem în acest meniu derulant va fi vizibil numai pe dimensiuni mai mari ale ecranului. Acest lucru ne va ajuta să ne asigurăm că meniul derulant nu devine prea copleșitor pe dimensiuni mai mici de ecran. Pentru a ascunde modulul pe dimensiuni de ecran mai mici, accesați fila avansată și dezactivați modulul de pe tabletă și telefon.

Modul Clone Blurb x3

Odată ce al doilea tip de Blurb Module este finalizat, îl puteți clona de trei ori.

Schimbați conținutul și pictogramele

Asigurați-vă că modificați conținutul și pictogramele pentru fiecare duplicat.

Schimbați linkurile

Împreună cu linkurile.

Adăugați un modul de text în coloana 1

Adauga continut

Ultimul modul de care avem nevoie în meniul nostru derulant este un modul de text. Folosim un modul text în loc de un modul buton, deoarece modulul text se va adapta mai ușor la mediul drop-down. Adăugați o copie la alegere.

Culoare de fundal

Apoi, schimbați culoarea de fundal.

• Culoare fundal: # 3776ff

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Lato
• Greutatea fontului textului: Bold
• Stil de text text: majuscule
• Culoarea textului: #ffffff
• Spațiere scrisoare text: 3 px
• Aliniere text: centru

Spațiere

Adăugați și câteva valori de spațiere personalizate.

• Marja superioară: 20 px
• Marja inferioară: 20 px
• Marja stângă: 4%
• Marja dreapta: 4%
• Căptușeală superioară: 15 px
• Căptușeală inferioară: 15 px

Frontieră

Apoi, adăugați colțuri rotunjite la setările de margine.

• Toate colțurile: 100 px

Box Shadow

Activați o umbră de casetă subtilă.

• Box Shadow Vertical Position: 14 px
• Culoare umbră: rgba (0,0,0,0) (implicit), rgba (0,0,0,0.09) (Plasați cursorul)

Transformă Traducere

La plimbare, dorim ca butonul să crească ușor. Pentru a adăuga acel efect, vom folosi câteva setări de traducere personalizate pentru transformare la trecerea cu mouse-ul.

• Dreapta: -3px (Hover)

Clasa CSS

La fel ca toate celelalte module din meniul nostru derulant, acest modul are nevoie de următoarea clasă CSS:

• Clasa CSS: meniu derulant-element

Element principal CSS

Și vom completa setările modulului schimbând cursorul folosind o linie de cod CSS în elementul principal.

cursor: pointer;

Ștergeți coloanele 2 și 3

După ce ați finalizat prima coloană din meniul drop-down, puteți deschide setările rândului și puteți elimina cele două coloane goale din rând.

Clonați prima coloană de două ori

Clonați prima coloană de două ori.

Personalizați articolele

Și personalizați toate articolele din celelalte două meniuri derulante, după cum doriți.

4. Adăugați cod CSS și JQuery

Adăugați un nou modul de cod la coloana rândului 1

Acum că avem toate elementele din meniul derulant la locul lor, este timpul să le transformăm într-un meniu derulant și să plasăm meniul derulant într-un element de meniu corespunzător. Adăugați un modul de cod la primul rând, chiar sub modulul de meniu.

Introduceți codul CSS

Și introduceți următorul cod 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>

Introduceți codul JQuery

Folosim și un cod JQuery. Asigurați-vă că plasați acest cod între etichetele de script așa cum puteți vedea în ecranul de imprimare de mai jos.

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. Activați clasa CSS după ce ați terminat Personalizarea meniului

De îndată ce ați terminat de personalizat toate elementele drop-down, veți mai avea un lucru de făcut: ascunderea întregului rând care conține elementele din meniul drop-down. Acest lucru, în combinație cu o funcție de încărcare din codul nostru, va împiedica meniurile derulante să apară la încărcarea paginii. După ce activați această clasă CSS, nu veți mai vedea al doilea rând în Visual Builder, dar îl veți putea accesa în modul wireframe și / sau dezactiva temporar clasa CSS atunci când faceți modificări în meniurile derulante. Pentru a activa clasa, eliminați parantezele „/ * * /” de la începutul și sfârșitul clasei CSS.

• Clasa CSS: meniul derulant-meniu-rând

6. Crearea a mai mult de 3 meniuri derulante

Adăugați clase CSS la elementele de meniu în aparență

Dacă căutați o modalitate de a adăuga mai mult de 3 meniuri derulante la meniu, va trebui să navigați înapoi la meniu și să adăugați clase CSS consecutive la cel de-al patrulea element de meniu.

• Al patrulea element de meniu căruia doriți să îi atribuiți o listă derulantă: primul-nivel primul-nivel-4

Clonați coloana la sfârșitul rândului

Apoi, reveniți la antetul dvs. și clonați ultima coloană.

Asigurați-vă că clasele CSS pentru coloane și module sunt la locul lor

Asigurați-vă că clasele CSS ale coloanei și modulului sunt la locul lor pentru noul meniu derulant și ați terminat! Este important să dedicați întotdeauna o coloană nouă unui nou meniu derulant și să urmați ordinea coloanelor rândului. Aceasta înseamnă că coloana 1 va fi derulantă 1, coloana 2 va fi derulantă 2 etc.

• Coloana CSS Class: drop-menu-column
• Clasa CSS a modulului: meniul derulant-element

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În acest tutorial, v-am arătat cum să recreați meniul drop-down Elegant Themes folosind Divi's Theme Builder. Am combinat cele mai bune din ambele lumi și am folosit elementele încorporate ale Divi pentru a stiliza toate articolele din meniul nostru derulant, apoi am folosit un cod pentru a plasa toate meniurile derulante în interiorul elementului de meniu corespunzător din meniul WordPress. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.