Cum să optimizați modulul de meniu Divi cu 5 presetări globale (descărcare GRATUITĂ)

Meniurile sunt o parte vitală a oricărui site, așa că este logic să cheltuiți puțin timp și efort suplimentar pentru a vă asigura că acestea sunt afișate corect. În Divi, putem construi rapid meniuri personalizate folosind modulul Meniu Divi, care oferă multe dintre opțiunile de stil de care avem nevoie. Dar întotdeauna ajută la eficientizarea procesului de proiectare a antetului site-ului dvs. web, pregătind în prealabil câteva presetări globale ale meniului. Acest lucru vă va permite să implementați un cadru de stil de meniu personalizat printr-un clic pe un buton, astfel încât să puteți petrece mai mult timp modificând designul pentru a se potrivi cu marca site-ului dvs. web. De exemplu, dacă doriți un meniu centrat cu o siglă și linkuri care arată ca butoane, puteți utiliza o presetare globală pentru a implementa acel cadru cu un singur clic. Acest lucru vă economisește timp și energie valoroase.

În acest tutorial, vom împărtăși presetările globale ale modulului de 5 meniuri pe care le puteți utiliza atunci când creați anteturile Divi personalizate. În afară de descărcarea gratuită care include toate cele 5 presetări, vă vom prezenta prin procesul de creare a presetărilor de la zero.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, 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!

Pentru a utiliza aceste presetări globale de meniu pe antetul dvs. global, trebuie mai întâi să importați aspectul (cu presetările sale) în Biblioteca Divi după cum urmează:

1. Accesați Divi> Biblioteca Divi.
2. Faceți clic pe butonul de import / export din partea de sus a paginii.
3. Selectați fila Import în fereastra popup de portabilitate
4. Alegeți aspectul fișierului JSON de importat
5. Selectați Import presetări
6. Faceți clic pe butonul Import

Apoi mergeți la generatorul de teme și editați antetul global. Adăugați un modul de meniu în care doriți să fie logo-ul și utilizați presetările pentru a stiliza și plasa meniul în consecință.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

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

Crearea a 5 presetări globale ale modulului de meniu în Divi

# 1 - Legături cu butoane centrate cu siglă

Pentru prima noastră presetare globală de stil de meniu, vom proiecta un meniu care are legături de butoane de lățime egală, astfel încât meniul să pară simetric. Vom include chiar și stări de deplasare care se potrivesc cu starea activă a linkurilor butonului de meniu.

Pentru a crea acest preset global de meniu, adăugați un rând cu o coloană la secțiunea obișnuită.

Apoi adăugați un modul de meniu la rând.

Deschideți setările meniului și adăugați un meniu la modul.

Apoi adăugați sigla site-ului ca conținut dinamic și la modul.

Sub fila Proiectare, actualizați următoarele:

• Stil: Centrat

• Font de meniu: Poppins
• Greutate font meniu: îndrăzneț
• Stilul fontului meniului: TT
• Dimensiune text meniu: 14 px (desktop), 24 px (tabletă și telefon)
• Spațiere scrisori meniu: 0,15em
• Înălțimea liniei meniului: 1,3em (desktop), 1,8em (tabletă și telefon)

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

• Marja: 0 px de jos

Sub fila Avansat, vom adăuga câteva stiluri de legături de meniu personalizate, astfel încât acestea să apară ca butoane.

Meniu Link CSS

Adăugați următorul CSS personalizat la meniul Link:

Pe desktop ...

min-width: 10em;
padding: 1em !important;
justify-content:center;
background: #f8f8f8;
border-radius: 10px;

Pe Hover ...

background: #333333;
color: #ffffff;
opacity: 1;

Active Menu Link CSS

background: #333333;
color: #ffffff;
opacity: 1;

Logo Logo CSS

margin-bottom: 10px;

Stilul 1 Rezultat

Iată rezultatul final ...

Adăugarea stilului de meniu 1 ca presetare globală

Secțiune duplicat

Înainte de a adăuga stilul meniului ca presetare globală, copiați întreaga secțiune care conține modulul meniu, astfel încât să putem folosi stilurile meniului pentru a porni următorul design.

Creați o presetare nouă din stilurile curente

Pentru a adăuga presetarea globală, deschideți setările modulului de meniu original pe care l-am creat și faceți clic pe linkul drop-down Presetare.

Selectați Creați o presetare nouă din stilurile curente.

Dați noului preset un nume („Linkuri buton centrate cu logo”), apoi salvați presetarea.

# 2 - Logo centrat în linie cu linkuri de butoane

Pentru a crea al doilea preset global de meniu, deschideți setările modulului de meniu duplicat din designul anterior.

Sub fila Design, actualizați stilul:

• Stil: siglă centrată pe linie

Datorită CSS-ului personalizat moștenit din stilul de modul anterior, legăturile din meniu păstrează designul butonului în timp ce sigla se așază perfect în centru. Stilul personalizat de legătură a butoanelor permite legăturilor de meniu să păstreze un design simetric frumos.

Sub fila Advanced, actualizați meniul CSS Logo după cum urmează:

margin-bottom: 0px;

Stil 2 Rezultat

Iată rezultatul final.

Adăugarea stilului de meniu 2 ca presetare globală

Secțiune duplicat

Înainte de a adăuga stilul meniului ca presetare globală, copiați întreaga secțiune care conține modulul de meniu (stilul 2), astfel încât să putem utiliza stilurile meniului pentru a porni următorul design.

Creați o presetare nouă din stilurile curente

Pentru a adăuga presetarea globală, deschideți setările modulului de meniu original pentru stilul 2 pe care l-am creat și faceți clic pe linkul derulant Presetare.

Selectați Creați o presetare nouă din stilurile curente.

Dați presetării un nume („Inline Centered Logo w / Button Links”) și salvați presetarea.

# 3 - Meniu spațiat VW complet centrat cu etichetă mobilă

Pentru acest stil de meniu următor, vom proiecta un meniu centrat pe lățime completă fără o siglă care are textul meniului care este dimensionat și distanțat cu o unitate de lungime vw, astfel încât să fie la scară cu lățimea browserului. De asemenea, va avea o etichetă „meniu” deasupra pictogramei hamburger de pe mobil.

Pentru a crea al treilea meniu global presetat, vom avea nevoie de un rând cu lățime completă. Deschideți setările de rând care conține meniul duplicat și actualizați următoarele:

• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Deschideți setările modulului de meniu și ștergeți sigla.

Sub fila Design, actualizați stilul:

• Stil: Centrat

Apoi actualizați dimensiunea textului cu următoarea unitate de lungime VW, astfel încât dimensiunea textului să se scaleze cu lățimea browserului.

• Dimensiune text meniu: 1,5vw (desktop)

Pentru a crea o etichetă „meniu” pentru meniul mobil, putem adăuga câteva CSS personalizate la elementul Înainte de Psuedo de pe ecranul tabletei, după cum urmează:

Înainte de CSS

content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

Observați că familia de fonturi este setată la „poppins” pentru a se potrivi cu fontul utilizat de linkurile din meniu. Va trebui să actualizați acest lucru dacă utilizați un alt font.

NOTĂ: Acest lucru se poate afișa sau nu pe constructorul vizual. Este posibil să fie necesar să încărcați pagina live pentru a vedea rezultatul.

Apoi, vom adăuga spațiu suplimentar și margini de legături de meniu pe hover. Continuați să adăugați următoarele CSS personalizate:

Link de meniu CSS (desktop):

min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

Meniu Link CSS (plasați cursorul):

color: #333;
border: 1px solid #333;
opacity:1;

Active Menu Link CSS:

color: #333;
border: 1px solid #333;
opacity:1;

Stilul 3 Rezultat

Adăugarea stilului de meniu 3 ca presetare globală

Secțiune duplicat

Înainte de a adăuga stilul meniului ca presetare globală, copiați întreaga secțiune care conține modulul de meniu (stilul 3), astfel încât să putem utiliza stilurile meniului pentru a porni următorul design.

Creați o presetare nouă din stilurile curente

Pentru a adăuga stilul 3 ca presetare globală, deschideți setările modulului de meniu original pentru stilul 3 pe care l-am creat și faceți clic pe linkul derulant Presetare.

Selectați Creați o presetare nouă din stilurile curente.

Dați un nume presetării („Meniu complet centrat VW spațiat cu etichetă mobilă”) și salvați presetarea.

# 4 - Meniu la distanță dreaptă cu etichetă mobilă

Pentru a crea presetarea globală a celui de-al patrulea meniu, va trebui să actualizăm aspectul coloanei rândului cu un aspect 0ne-al patrulea trei sferturi. Aceasta va imita un aspect personalizat al antetului care va include un modul de meniu în dreapta și un loc separat pentru o imagine de logo în coloana din stânga.

Asigurați-vă că meniul se află în coloana din dreapta. Apoi deschideți setările meniului și actualizați opțiunile Elements pentru a afișa pictograma coșului de cumpărături și pictograma de căutare.

Sub fila Design, actualizați stilul:

• Stil: aliniat la stânga

Actualizați următoarele stiluri de linkuri și alinierea textului:

• Culoare link activ: # ac3cf7
• Dimensiune text meniu (desktop): 14 px
• Alinierea textului: dreapta

Acum că pictograma hamburger de pe mobil va fi în partea dreaptă, va trebui să ajustăm plasarea etichetei meniului pe mobil. Apoi vom adăuga câteva linkuri de meniu CSS pentru a ne asigura că linkurile sunt spațiate și așezate la culoare pe partea dreaptă a coloanei / rândului.

Adăugați următoarele CSS personalizate:

Înainte de CSS (tabletă)

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

Meniu Link CSS:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Stilul 4 Rezultat

Iată rezultatul final al meniului nostru aliniat la dreapta. Am adăugat un fundal gri deschis la rând, astfel încât să puteți vedea mai bine alinierea.

Adăugarea stilului de meniu 4 ca presetare globală

Secțiune duplicat

Înainte de a adăuga stilul meniului ca presetare globală, copiați întreaga secțiune care conține modulul meniului (stilul 4), astfel încât să putem utiliza stilurile meniului pentru a porni următorul design.

Creați o presetare nouă din stilurile curente

Pentru a adăuga stilul 4 ca presetare globală, deschideți setările modulului de meniu original pentru stilul 4 pe care l-am creat și faceți clic pe linkul derulant Presetare.

Selectați Creați o presetare nouă din stilurile curente.

Acordați un nume presetării („Meniul la distanță dreaptă cu etichetă mobilă”) și salvați presetarea.

# 4 - Meniu distanțat la stânga cu etichetă mobilă

Pentru a crea acest al patrulea meniu global presetat, va trebui să actualizăm aspectul coloanei rândului cu un aspect 0ne-al patrulea trei sferturi. Aceasta va imita un aspect personalizat al antetului care va include un modul de meniu în stânga și un loc separat pentru o imagine de logo (sau CTA) în coloana din dreapta.

Deschideți setările pentru meniu și actualizați alinierea textului pentru legăturile de meniu:

• Alinierea textului: stânga

Apoi, trebuie să ajustăm eticheta meniului mobil astfel încât să stea deasupra navului hamburger din partea stângă. Și adăugând „direcția: rtl” pe tabletă, ne vom asigura că pictogramele mobile se vor alinia și pe stânga pe mobil.

Sub fila Avansat, actualizați următoarele CSS personalizate:

Înainte de CSS (tabletă):

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

Element principal (tabletă):

direction:rtl;

Meniu Link CSS:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

Iată rezultatul final.

Rezultate finale

Gânduri finale

Deși stilul exterior al acestor module de meniu este de bază, designul cadrului interior al aspectului meniului este extrem de util pentru lansarea rapidă a procesului creativ. În plus, având o presetare globală cu aceste cadre va accelera procesul și mai mult. Simțiți-vă liber să explorați mai multe moduri de a personaliza modulul de meniu și să adăugați presetări unice pentru următoarele proiecte.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!