Cum se înlocuiește bara de meniu principală cu modulul de meniu pentru lățimea completă a lui Divi

Bara de meniu principală face ca navigarea pentru vizitatori să fie simplă. În afară de bara de meniu principală implicită cu care ne-am obișnuit în WordPress, probabil ați întâlnit și modulul de meniu Fullwidth oferit de Divi. De obicei, este folosit pentru a afișa alte meniuri pe site-ul dvs. web care sunt diferite de meniul principal pe care îl aveți în partea de sus a fiecărei pagini.

Dar puteți utiliza cu ușurință modulul de meniu Fullwidth pentru a înlocui bara de meniu principală. Acest lucru vă oferă libertatea de a plasa meniul oriunde doriți pe pagină, fără a trata un meniu duplicat în partea de sus a paginii. De asemenea, puteți utiliza opțiunile încorporate Divi pentru a stiliza meniul așa cum doriți, ceea ce înseamnă că puteți crea rezultate uimitoare utilizând opțiunile de margine și divizor, de exemplu.

În acest tutorial, vă vom arăta cum să înlocuiți bara de meniu principală cu modulul de meniu cu lățime completă utilizând pachetul Divi's Carpenter Layout. Aceasta face parte din inițiativa noastră de proiectare Divi. Puteți alege dacă doriți ca această metodă să se aplice tuturor paginilor sau doar câteva dintre ele. Să ajungem la asta!

previzualizare

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

Dezactivați bara de navigare fixă

Accesați Opțiunile temei Divi

Primul lucru pe care trebuie să-l facem este să dezactivăm opțiunea de navigare fixă ​​din opțiunile temei Divi. Facem acest lucru pentru a scăpa de meniul principal din partea de sus a paginii noastre. Pentru aceasta, accesați tabloul de bord WordPress> Divi> Opțiuni temă.

Dezactivați bara de navigare fixă

Deschideți fila generală și dezactivați opțiunea Fixed Navigation Bar.

Creați meniul principal

Accesați Meniuri

Următorul lucru pe care îl vom face este să ne creăm meniul principal. Vom folosi acest meniu principal atât pentru bara de meniu principală implicită din partea de sus, cât și pentru modulul de meniu cu lățime completă. Pentru a adăuga meniul, accesați Tabloul de bord WordPress> Aspect> Meniuri.

Adăugați un meniu principal nou

Adăugați un meniu nou, dați meniului un nume și faceți din acesta meniul principal.

Adăugați pagini și salvați meniul

Nu în ultimul rând, adăugați toate paginile dvs. și salvați meniul.

Bara de meniu principală de stil în Customizerul tematic

Accesați Theme Customizer

În funcție de dacă doriți să ascundeți sau nu bara de meniu principală implicită pe toate paginile, este posibil să doriți mai întâi să stilizați bara de meniu principală implicită. Trebuie să faceți acest lucru numai dacă intenționați să îl utilizați pe unele pagini. Dacă doriți să eliminați bara de meniu principală peste tot, puteți sări peste acest pas.

Setări principale ale barei de meniu

Pentru a se potrivi cu pachetul de aspect, am aplicat următoarele modificări:

• Stilul fontului: Bold și majuscule
• Culoarea textului: #FFFFFF
• Culoare link activ: #FFFFFF
• Culoare fundal: # f25b3a
• Culoarea fundalului meniului drop-down: # f25b3a

Ascundeți bara de meniu principală

O pagina

Accesați pagina de alegere și activați Visual Builder

Pentru a ascunde bara de meniu principală în partea de sus a paginilor noastre, va trebui să folosim o cantitate mică de cod CSS. Rețineți că este important să fi dezactivat opțiunea Bară de navigare fixă ​​(unul dintre pașii anteriori). În caz contrar, spațiul ocupat de bara de meniu principal va fi alb și nu va dispărea complet. Dacă doriți să ascundeți meniul principal pe o pagină, în special, accesați pagina respectivă și activați Visual Builder.

Deschideți Setări pagină

Deschideți apoi setările paginii făcând clic pe următoarea pictogramă din partea de jos a paginii:

Adăugați cod CSS

Treceți la fila Avansat și adăugați următorul cod CSS în caseta CSS personalizată:

#main-header {
display: none;
}

Site-ul întreg

Accesați Opțiunile temei Divi

Dacă doriți să scăpați de bara de meniu principală de pe întregul site web, puteți face și asta. Nu trebuie să adăugați manual codul la fiecare pagină. În schimb, puteți merge doar la Tabloul dvs. de bord WordPress> Divi> Opțiuni teme.

Adăugați cod CSS

Continuați derulând în jos până când întâlniți caseta CSS personalizată și adăugați același cod CSS acolo:

#main-header {
display: none;
}

Adăugați bara de meniu principală în pagină

Deschideți pagina de destinație cu Visual Builder

Acum că am ascuns bara de meniu principală, putem începe să adăugăm modulul de meniu Fullwidth la pagina noastră. Pentru aceasta, accesați pagina de destinație, de exemplu, și activați Visual Builder.

Adăugați secțiunea lățime completă

Continuați adăugând o secțiune de lățime completă chiar sub secțiunea erou.

Frontiera de sus

Puteți utiliza toate opțiunile integrate Divi pentru a crea designul exact pe care îl doriți. O vom păstra destul de curată. Singurul lucru pe care îl vom adăuga la opțiunile secțiunii noastre este o margine de sus:

• Lățimea marginii superioare: 7 px
• Culoarea chenarului superior: # f25b3a

Adăugați modulul de meniu pentru lățime completă

Apoi, adăugați modulul de meniu Fullwidth în secțiunea dvs.

Selectați Meniul principal

Selectați meniul principal ca meniu pe care doriți să îl afișați.

Culoare de fundal

Continuați dând modulului dvs. o culoare de fundal neagră.

Setări legături

Apoi, deschideți setările Link-uri și aplicați următoarele modificări:

• Culoare link activ: #FFFFFF
• Culoarea textului din meniul drop-down: #FFFFFF
• Culoarea textului meniului mobil: #FFFFFF
• Orientare text: stânga
• Culoarea textului: deschis

Setări meniu derulant

Modificați setările meniului drop-down în continuare:

• Culoarea fundalului meniului drop-down: # 000000
• Culoare linie meniu derulant: # 000000
• Culoarea fundalului meniului mobil: # 000000

Setări text meniu

În cele din urmă, vom face ca setările de text să se potrivească cu pachetul de aspect:

• Meniul Font Greutate: Ultra Bold
• Stilul fontului meniului: majuscule

Faceți secțiunea de lățime completă globală și utilizați și în alte pagini

Salvați ca secțiune globală

Am terminat de creat noul nostru meniu principal! Dacă intenționați să îl utilizați și în alte pagini, continuați și adăugați-l la biblioteca Divi ca articol global.

Adăugați la alte pagini fără bara de meniu principală

Acum puteți adăuga cu ușurință acest meniu Fullwidth la alte pagini. Puteți alege poziția sa și sunteți liber să vă jucați cu opțiunile de design încorporate care vin împreună cu ea!

previzualizare

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

Gânduri finale

În această postare de blog de caz de utilizare, v-am arătat cum să înlocuiți bara de meniu principală din partea de sus a paginilor dvs. cu modulul de meniu cu lățime completă. Aplicarea acestei metode vă oferă libertatea de a vă putea plasa meniul oriunde doriți pe pagina dvs. În plus, puteți utiliza, de asemenea, opțiunile încorporate Divi pentru a-l stiliza. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos.