Utilizarea modulului de meniu cu lățime completă de la Divi vs modulul de meniu obișnuit

O parte adesea trecută cu vederea, dar esențială a oricărui site web este meniul de navigare. Navigarea este un element cheie în ceea ce privește crearea unei experiențe plăcute pentru utilizator. Dacă este făcut corect, un meniu poate îmbunătăți considerabil experiența utilizatorului și poate face mai ușor pentru vizitatori navigarea prin site.

Divi vine cu 2 tipuri diferite de module de navigare; Meniul cu lățime completă și meniul obișnuit. În acest articol, vom discuta și vom demonstra unele dintre diferențele dintre modulul de meniu complet al Divi și modulul de meniu obișnuit. Dacă v-ați întrebat vreodată ce modul să utilizați pentru site-ul dvs. web, sperăm că acest articol vă va ajuta să înțelegeți diferențele cheie și cazurile de utilizare pentru aceste module. De asemenea, vă vom oferi instrucțiuni pas cu pas pentru a personaliza designul unui meniu complet și al unui modul de meniu obișnuit.

Să începem!

Trage cu ochiul

Desktop: Modul de meniu cu lățime completă

Desktop: Modul de meniu obișnuit

Mobil: Modul de meniu cu lățime completă

Mobil: Modul de meniu obișnuit

Diferențele cheie între modulul de meniu cu lățime completă de la Divi și modulul de meniu obișnuit

Iată o prezentare generală a diferențelor cheie dintre un modul de meniu cu lățime completă și un modul de meniu obișnuit.

Container cu secțiuni obișnuite vs. cu lățime completă

Modulul de meniu cu lățime completă necesită o secțiune cu lățime completă în Divi. Deoarece secțiunea are lățime completă, orice modul pe care îl adăugați va ocupa întreaga lățime a paginii. Spre deosebire de secțiunea obișnuită de meniu, nu puteți avea mai multe module unul lângă altul. Modulul de meniu cu lățime completă este grozav dacă doriți ca meniul să acopere lățimea paginii și nu aveți nevoie de module suplimentare alături de el.

Modulul de meniu obișnuit necesită o secțiune obișnuită în Divi. Secțiunile obișnuite au multe modele de rând diferite și puteți utiliza orice aspect cu modulul de meniu obișnuit. Acest lucru vă permite să includeți conținut suplimentar alături de meniu folosind celelalte rânduri pentru a crea o bară de meniu mai complexă. Datorită numeroaselor opțiuni de rând ale Divi, puteți crea cu ușurință machete unice pentru bara de meniu folosind modulul de meniu obișnuit.

Setări de lățime încorporate vs editarea containerului de rânduri

Cealaltă diferență esențială dintre meniurile obișnuite și lățimea completă este că au moduri diferite de a edita lățimea și spațierea modulului.

Modulul de meniu cu lățime completă vine cu câteva setări încorporate pentru a edita lățimea. Puteți face textul meniului la lățime completă cu opțiunea „creați linkurile meniului la lățime completă”. Acest lucru extinde modulul de meniu cu lățime completă dincolo de lățimea implicită de conținut.

Pentru a obține un aspect similar cu un modul de meniu obișnuit, ar trebui să editați setările rândului care le conține. De exemplu, editați lățimea, lățimea maximă și alinierea rândului care conține meniul obișnuit pentru a extinde modulul de meniu obișnuit dincolo de lățimea implicită de conținut.

Utilizarea modulului de meniu cu lățime completă de la Divi vs modulul de meniu obișnuit

De ce aveți nevoie pentru a începe

Dacă doriți să urmați acest tutorial, instalați și activați Tema Divi și asigurați-vă că aveți cea mai recentă versiune a Divi pe site-ul dvs. web.

Acum, sunteți gata să începeți!

Proiectarea unui modul de meniu cu lățime completă

Adăugați o pagină nouă pe site-ul dvs. și dați-i un titlu, apoi selectați opțiunea Utilizați Divi Builder.

Pentru acest tutorial vom construi designul de la zero, deci selectați opțiunea Start Building.

Când creați pentru prima dată o pagină goală, aceasta vine preîncărcată cu o secțiune obișnuită. Mai întâi adăugați o secțiune cu lățime completă sub secțiunea obișnuită.

Apoi, ștergeți secțiunea obișnuită din pagină.

Adăugați un modul Meniu lățime completă la rândul cu lățime completă.

Adăugați o culoare de fundal în meniul cu lățime completă.

• Fundal: #4e7560

Adăugați o siglă în meniul cu lățime completă.

Apoi, navigați la opțiunile Text din meniu din fila Design.

• Font meniu: Poppins
• Culoarea textului meniului: #FFFFFF
• Dimensiunea textului meniului: 20px

Apoi, navigați la setările meniului dropdown.

• Culoarea de fundal a meniului derulant: #FFFFFF
• Culoarea liniei meniului derulant: #7EAD70
• Culoarea textului meniului derulant: #000000

Setați fundalul și culoarea textului pentru meniul mobil.

• Culoare de fundal pentru meniul mobil: #FFFFFF
• Culoarea textului meniului mobil: #000000

Apoi, modificați setările meniului Hamburger.

• Culoarea pictogramei meniului Hamburger: #FFFFFF
• Dimensiunea fontului pictogramei meniului Hamburger: 40px

În cele din urmă, adăugați niște căptușeală de sus și de jos.

• Căptușeală-Sup: 10px
• Căptușeală-partea inferioară: 10px

Acum modulul de meniu complet este complet!

Proiectarea unui modul de meniu obișnuit

Adăugați o pagină nouă pe site-ul dvs. și dați-i un titlu, apoi selectați opțiunea Utilizați Divi Builder.

Selectați Începeți construirea pentru a construi de la zero.

Pagina vine preîncărcată cu o secțiune obișnuită goală. La această secțiune, adăugați o culoare de fundal.

• Fundal: #4e7560

Apoi, îndepărtați căptușeala de sus și de jos.

• Umplutură-Sup: 0px
• Căptușeală-partea inferioară: 0px

Adăugați un rând nou cu aspectul prezentat mai jos.

În setările rândurilor, egalizați înălțimile coloanei.

• Egalizare înălțimi coloane: da

În setările CSS ale elementului principal din fila Avansat, adăugați următorul CSS personalizat.

 align-items:center; 

Adăugați un modul de text în coloana din stânga. Vom folosi acest lucru pentru a afișa numele site-ului web în loc să încărcăm o siglă. Acesta este un avantaj unic al modulului de meniu obișnuit, deoarece îl puteți folosi alături de alte module pentru a adăuga elemente suplimentare în bara de meniu.

• Text H1: „Blog Divi”

Setați alinierea textului la stânga pe desktop.

• Aliniere text-Desktop: stânga

Setați alinierea textului să se centreze pe tabletă și mobil.

• Aliniere text-Tabletă: Centru
• Aliniere text-Mobil: Centru

Apoi, navigați la setările textului titlului.

• Font de titlu: Poppins
• Greutatea fontului titlului: aldine
• Culoarea textului titlului: #FFFFFF
• Dimensiunea textului titlului: 40px

Acum că titlul „Divi Blog” este terminat, să adăugăm modulul de meniu obișnuit în coloana centrală.

Eliminați culoarea de fundal.

• Context: niciuna

Apoi, navigați la fila design. Sub Aspect, schimbați stilul la Centrat.

• Stil: centrat

Acum putem modifica stilurile de text din meniu.

• Font meniu: Poppins
• Culoarea textului meniului: #FFFFFF
• Dimensiunea textului meniului: 20px

Modificați și stilurile meniului drop-down.

• Culoarea liniei meniului derulant: #7EAD70
• Culoarea textului meniului derulant: #000000

Apoi, modificați setările meniului mobil.

• Culoare de fundal pentru meniul mobil: #FFFFFF
• Culoarea textului meniului mobil: #000000

În cele din urmă, modificați setările meniului de hamburger.

• Culoarea pictogramei meniului Hamburger: #FFFFFF
• Dimensiunea fontului pictogramei meniului Hamburger: 40px

Acest lucru completează stilul modulului de meniu obișnuit. Pentru a finaliza designul meniului, să adăugăm un buton de îndemn în coloana din dreapta. Mai întâi, adăugați modulul de butoane.

Schimbați textul butonului.

• Buton: „Probă gratuită de 30 de zile”

Setați alinierea butonului la centru.

• Alinierea butoanelor: Centru

Setați „Utilizați stiluri personalizate pentru buton” la Da și modificați culoarea textului.

• Utilizați stiluri personalizate pentru buton: Da
• Culoarea textului butonului: #FFFFFF

Setați fundalul butonului.

• Buton de fundal: #7EAD70

Setați fundalul butonului de la trecerea cursorului la portocaliu.

• Fundalul butonului la trecerea cu mouse-ul: #D19929

Apoi, setați lățimea, raza și fontul marginii butonului.

• Lățimea chenarului butonului: 0px
• Raza chenarului butonului: 40px
• Font pentru buton: Poppins

În cele din urmă, setați căptușeala din stânga și din dreapta.

• Umplutură-stânga: 30px
• Umplutură-Dreapta: 30px

Rezultat final

Acum să aruncăm o privire la rezultatul final pentru modulele noastre de meniu.

Desktop: Modul de meniu cu lățime completă

Desktop: Modul de meniu obișnuit

Mobil: Modul de meniu cu lățime completă

Mobil: Modul de meniu obișnuit

Gânduri finale

Sperăm că acest articol v-a ajutat să înțelegeți unele dintre diferențele cheie dintre modulul de meniu complet al Divi și modulul de meniu obișnuit. Ambele sunt incredibil de ușor de personalizat pentru a crea meniuri grozave pentru site-ul dvs. web. Modulul de meniu cu lățime completă ocupă lățimea paginii și vine cu opțiuni încorporate pentru modificarea și ajustarea lățimii. Pe de altă parte, modulul de meniu obișnuit poate fi folosit alături de alte module și este conținut într-un rând, unde lățimea și alte opțiuni de dimensionare pot fi modificate. Utilizați un modul de meniu cu lățime completă sau un modul de meniu obișnuit pe site-ul dvs.? Ne-ar plăcea să auzim de la tine în comentarii!