Un buton de meniu drop-down poate fi foarte util atunci când proiectați un site-ul web. Pe lângă meniul principal, anumite zone ale unui site pot necesita un meniu derulant format din sub-articole. Le vedem folosite pentru lucruri precum categorii de postări de blog, liste și intrări de blog. formă. Dar ele pot fi folosite chiar și pentru un apel la acțiune.

În acest tutorial, vă vom arăta cum să creați un buton de meniu drop-down utilizând modulul de meniu cu lățime completă Divi. Pentru a face acest lucru, vom crea mai întâi un meniu în WordPress. Vom utiliza apoi modulul de meniu cu lățime completă al lui Divi pentru a afișa acest meniu cu stiluri personalizate folosind generatorul Divi și un pic de CSS personalizat. Rezultatul este un buton derulant practic și elegant.

Să începem.

studiu

Iată o imagine de ansamblu a butonului meniu derulant pe care îl vom integra în acest tutorial.

Meniu derulant Prezentare generală

Ce ai nevoie pentru a începe

Pentru a începe, dacă nu ați făcut-o deja, instalați și activați Divi tema instalat (sau pluginul Divi Builder dacă nu utilizați Divi tema). Vom folosi generatorul Divi la început pentru a proiecta butonul meniului drop-down.

Asta e !

Creați un meniu în WordPress

Înainte de a începe să creăm meniul derulant cu Divi Builder, trebuie mai întâi să creăm un meniu WordPress pe care am dori să-l folosim pentru modulul de meniu cu lățime completă. Pentru a face acest lucru, accesați tabloul de bord WordPress și accesați Aspect> Meniuri. Apoi creați un nou meniu făcând clic pe link creați un nou meniu, introducând un nume de meniu și făcând clic pe butonul „Creați meniul”.

Creați un meniu pe wordpress

Deocamdată, puteți crea legături personalizate cu „#” ca substituent pentru adresa URL împreună cu textul legăturii.

Structurați elementele de meniu astfel încât elementul de meniu de nivel superior să aibă linkul „Aflați mai multe” cu trei elemente de submeniu.

Organizarea meniului Wordpress

După aceea, asigurați-vă că salvați meniul.

Cum se creează un buton derulant cu meniul derulant cu modulul complet de meniu Divi

Odată ce meniul a fost creat, putem începe să proiectăm butonul derulant cu Divi. Pentru a începe proiectul, creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din front-end (vizual build).

După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.

Creați conținut fals

Mai întâi, adăugați un rând dintr-o coloană la secțiunea standard implicită.

Adăugați un modul de text

Apoi adăugați un modul text la linia cu următorul conținut:

Meniul Divi Conținutul dvs. merge aici. Editați sau eliminați acest text în linie sau în modul Setări de conținut. De asemenea, puteți stiliza fiecare aspect al acestui conținut în setările de proiectare a modulului și chiar aplicați CSS personalizat acestui text în setările avansate ale modulului.

Apoi actualizați parametrii de proiectare după cum urmează:

Secțiune de umplutură

Apoi, actualizați setarea secțiunii cu următoarele elemente:

  • Padding: 0px în jos

Secțiune divi cu margine mică

Distanța de linie și granița

După actualizarea completării secțiunii, deschideți setările liniei și atribuiți-i o umplere și o ușoară margine.

  • Tapițerie: 10vw în partea de sus, 10vw în partea de jos, 5vw în stânga, 5vw în dreapta
  • Lățimea marginii: 1px

Configurarea secțiunii modulului Divi

Crearea butonului meniu derulant

Pentru a crea butonul de meniu derulant, vom folosi un modul de meniu cu lățime completă. Acest lucru ne va permite să adăugăm meniul creat anterior.

Adăugarea meniului cu lățimea completă

Pentru a crea modulul de meniu cu lățime completă, adăugați o nouă secțiune cu lățime completă în secțiunea standard curentă.

Creați o secțiune de constructor de lățimi complete

Apoi adăugați un modul de meniu cu lățime completă la linie

Meniu divi pe ecran complet

În fereastra pop-up pentru setările meniului cu lățime completă (sub Conținut), utilizați meniul derulant pentru a selecta meniul pe care doriți să îl afișați. Acesta ar trebui să fie același meniu pe care l-am creat mai devreme, denumit „meniul derulant”

Apoi, eliminați culoarea de fundal albă implicită pentru meniu.

Configurarea culorii de fundal a meniului pe ecran completDupă ce ați adăugat meniul cu modulul de meniu cu lățime completă, salvați setările. Vom reveni la acest modul într-un pic pentru a termina proiectarea. Dar, deocamdată, vom adăuga un fundal la secțiunea cu lățime completă.

Actualizați designul secțiunii cu lățimea completă

Deschideți setările pentru secțiunea pe toată lățimea și actualizați următoarele:

  • Gradient de fundal stânga: # 0047d6
  • Gradient de fundal drept Culoare: # 45b2ff

Secțiunea de fundal Divi

  • Lățimea maximă: 240px
  • Secțiunea Aliniere: centru

Am setat lățimea maximă a secțiunii la 240 px, deoarece aceasta este lățimea lățimii implicite a meniului drop-down din Divi. Este, de asemenea, o dimensiune bună pentru un buton de pe desktop și mobil.

Setările secțiunii Divi

  • Colțuri rotunjite: 5px

Configurarea setărilor de margine Divi

În fila Advanced, adăugați următoarele clase CSS, Overflow și Index Z.

  • Clasa CSS: buton derulant
  • Debordament orizontal: vizibil
  • Debord vertical: vizibil
  • Z index: 14

Clasa CSS este necesară pentru a ne putea direcționa CSS-ul extern către această secțiune mai târziu. Debordarea trebuie setată la vizibil, astfel încât să putem vedea meniul derulant. Iar indexul Z vă va ajuta să păstrați meniul derulant deasupra tuturor celorlalte conținuturi de pe pagină.

Secțiunea de setări parametru diviProiectați meniul Lățime

Acum suntem gata să proiectăm modulul de meniu Fulwidth. Deschideți setările modulului meniului lățime completă și actualizați următoarele:

  • Creați legături de meniu cu dimensiuni complete: DA
  • Culoarea textului derulant: #ffffff
  • Culoarea textului meniului mobil: #ffffff
  • Alinierea textului: centru
  • Culoarea de fundal a meniului derulant: # 45b2ff
  • Culoarea liniei derulante din meniu: #ffffff
  • Culoarea fundalului meniului: #45b2ff

Setările parametrilor stilului modulului meniului ecran complet

  • Meniu Font: Codificare Fără Semi Condensat
  • Greutatea meniului font: Semi Bold
  • Culoarea textului meniului: #ffffff
  • Dimensiunea textului meniului: 16px
  • Spațiu de meniu: 2px
  • Animarea meniului derulant: Extindeți

Modul de meniu font ecran complet divi

Poziționează butonul derulant

Pentru ca butonul să se suprapună graniței de jos, trebuie să adăugăm o marjă de sus negativă care este exact jumătate din înălțimea butonului.

  • Marja: -40.5px mare

Setări secțiune meniu lățime completă divi

După cum puteți vedea, spațiul de deplasare nu ocupă încă întreaga zonă a butonului și meniul derulant este încă în dreapta. Pentru a rezolva această problemă, putem adăuga CSS personalizat.

Adăugarea CSS personalizate

Înainte de a adăuga CSS personalizat, asigurați-vă că adăugați ID-ul CSS „drop down” la secțiunea de lățime completă (nu modulul).

Modul de reglare a clasei secțiunii diviFără codul CSS, CSS de mai jos nu va funcționa.

Pentru a adăuga CSS personalizat, deschideți setările paginii și lipiți codul următor în caseta de introducere CSS personalizată.

.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important; } .dropdown-button .fullwidth-menu li> a {padding-bottom: 0px; înălțimea liniei: 81 px; } .dropdown-button .fullwidth-menu li li a {padding: 6px 0px; înălțimea liniei: 1.6em; } .dropdown-button .et_mobile_menu li a: hover, .nav ul li a: hover, .dropdown-button .fullwidth-menu a: hover {opacity: 1; } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! important; } .dropdown-button .fullwidth-menu li {display: block; } .dropdown-button .fullwidth-menu .menu-item-has-children> a: first-child: after {right: 20px; }

CSS personalizează pagina divi

Iată rezultatul final

Animare din meniul drop-down Divi

Ultimele gânduri

Crearea unui buton de meniu derulant folosind modulul de meniu cu lățime completă Divi implică câțiva pași cheie. În primul rând, creăm meniul în WordPress pe care dorim să îl integrăm în modul. Apoi, folosim constructorul Divi pentru și stilăm modulul de meniu cu lățime completă pe placul nostru. Apoi adăugăm CSS personalizat pentru a lustrui designul atât pe desktop, cât și pe mobil. Rezultatul este un frumos (și util) meniu derulant lansat pentru deplasarea pe desktop și pentru clicul mobil. Sper că veți găsi acest lucru un plus util pentru setul de instrumente de proiectare.