Cum se utilizează modulul de navigație pe toată lățimea pe Divi Builder

Modulul Meniu cu lățime completă Divi vă permite să plasați un meniu de navigare oriunde pe pagină. Aceasta ar putea fi utilizată pentru a adăuga un al doilea meniu de pagină la pagină sau ar putea fi utilizată împreună cu funcția Pagină goală pentru a muta navigarea principală în partea de jos a paginii. De exemplu, puteți muta meniul sub prima secțiune pentru a găzdui persoanele cu o imagine de pornire mare. Aceasta permite practic navigarea în antet să se deplaseze în jurul paginii folosind generatorul!

Cum să adăugați un modul de meniu pe ecran complet la pagina dvs.

Înainte de a putea adăuga un modul de meniu cu lățime completă la pagina dvs., trebuie mai întâi să accesați Divi Builder. Odata ce Divi tema instalat pe dvs site-ul web, veți observa un buton Utilizați Divi Builder deasupra editorului de postare ori de câte ori creați o pagină nouă. Faceți clic pe acest buton pentru a activa Divi Builder și pentru a accesa toate modulele Divi Builder. Apoi faceți clic pe buton Utilizați Visual Builder pentru a porni generatorul în modul vizual. De asemenea, puteți face clic pe buton Activați Visual Builder când răsfoiți dvs site-ul web în prim-plan dacă sunteți conectat la tabloul de bord WordPress.

După ce ați intrat în Visual Builder, puteți face clic pe butonul plus gri pentru a adăuga un nou modul la pagina dvs. Noile module cu lățime completă pot fi adăugate numai în secțiunile cu lățime completă. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi o secțiune de lățime completă la pagina dvs. Avem câteva tutoriale minunate despre modul de utilizare a elementelor secțiunii Divi.

Găsiți modulul de meniu cu lățime completă în lista de module și faceți clic pe acesta pentru a-l adăuga la pagina dvs. Lista modulelor poate fi căutată, ceea ce înseamnă că puteți introduce, de asemenea, cuvântul „Meniu complet” sau „meniu cu lățime completă” (în funcție de versiunea dvs.) și apoi faceți clic pe Enter pentru a căuta și adăuga automat modulul de meniu cu lățime completă ! Odată adăugat modulul, veți fi întâmpinat de lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupe principale: Conținut , Concepție et avansat .

Exemplu de caz de utilizare: Adăugarea unui meniu Fullwidth sub antetul paginii

Pentru acest exemplu, vă voi arăta cum să adăugați un meniu cu lățime completă în secțiunea antet a unei pagini.

Iată un exemplu:

Deoarece acest nou meniu de pagină completă va înlocui meniul principal de navigare implicit, este necesar să selectați șablonul de pagină goală, astfel încât meniul de navigare implicit să nu apară în partea de sus a paginii, în plus față de meniul cu lățime completă. că voi adăuga.

Pentru a edita șablonul de pagină, accesați editorul de pagină și selectați șablonul „pagină goală” în zona Atribute de pagină din bara laterală din dreapta.

Deoarece acest modul va afișa un meniu care există deja, este important să fi creat deja meniul înainte de a-l adăuga la modulul de meniu cu lățime completă.

Odată ce v-ați creat meniul, utilizați generatorul vizual pentru a adăuga o secțiune Lățime completă chiar sub secțiunea antet a paginii. Apoi adăugați un modul de meniu cu lățime completă la secțiune.

Actualizați setările meniului Lățime completă după cum urmează:

Opțiuni de conținut

Meniu: [selectați meniul care trebuie utilizat în modul] Context: # 333333

Opțiuni de proiectare

Culoarea textului: Lumina Orientarea textului: Font Meniul central: Meniul Roboto Dimensiunea fontului: 20 px

Asta este!

Truc : Puteți utiliza opțiunile de vizualizare din fila Advanced pentru a ascunde acest meniu pe mobil și pentru a afișa un meniu diferit deasupra antetului, astfel încât utilizatorii de dispozitive mobile să poată vedea meniul fără a fi nevoie să deruleze pagina în jos .

Fullwidth Opțiuni privind conținutul meniului

În fila conținut, veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Toate acestea controlează ce apare în modulul dvs. va fi întotdeauna găsit în această filă.

Meniu

Selectați un meniu de utilizat în modul. Puteți crea noi meniuri folosind pagina Apariții> Meniuri din tabloul de bord WordPress. De fiecare dată când creați un meniu nou, meniul va putea fi selectat din acest meniu derulant.

Culoarea de fundal

În mod implicit, modulul de meniu are o culoare de fundal albă. Dacă doriți să utilizați o culoare diferită pentru fundalul meniului, o puteți alege aici folosind selectorul de culori.

Culoarea de fundal a meniului drop-down

În mod implicit, meniurile derulante din modulul de meniu moștenesc culoarea de fundal definită în setarea anterioară. Dacă doriți ca meniurile derulante să aibă propria culoare, puteți alege o culoare personalizată folosind această setare.

Culoarea fundalului meniului mobil

Pe mobil, modulul de meniu este transformat într-un design diferit și mai adaptat la mobil. Puteți controla culoarea de fundal a meniului derulant mobil, independent de omologul său de pe desktop.

Eticheta de administrare

Aceasta va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete apar în blocul de module din interfața Divi Builder.

Opțiuni de proiectare a meniului la nivel întreg

În fila Proiectare, veți găsi toate opțiunile de stilare a modulului, cum ar fi fonturile, culorile, dimensionarea și spațiul. Aceasta este fila pe care o veți utiliza pentru a schimba aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a schimba orice.

Deschideți submeniurile

În mod implicit, toate submeniurile se deschid ca un meniu derulant sub bara meniului principal. Dacă plasați meniul aproape de partea de jos a paginii și meniul dvs. conține meniuri derulante lungi, vă recomandăm să deschideți aceste meniuri deasupra modulului de meniu, astfel încât meniul să nu se extindă dincolo de fereastra browserului.

Faceți legături de meniu în întregime

În mod implicit, legăturile de nivel superior cu modulul meniu sunt plasate în lățimea de conținut implicită. Dacă doriți să eliminați această restricție și doriți ca linkurile dvs. să ruleze întreaga lățime a paginii, începând din partea stângă a ecranului, puteți activa această opțiune.

Culoarea liniei derulante din meniu

În meniurile derulante, legăturile sunt separate printr-o linie de 1 pixel. Dacă doriți să personalizați culoarea acestui rând, puteți alege o culoare personalizată folosind selectorul de culori din această setare.

Culoarea textului

Aici puteți alege valoarea textului dvs. Dacă lucrați la un fundal întunecat, textul dvs. ar trebui să fie activat. Dacă lucrați cu un fundal deschis, textul dvs. ar trebui să fie întunecat.

Orientarea textului

Aceasta controlează modul în care textul dvs. este aliniat în modul. Puteți alege între stânga, dreapta și centru.

Culoare link activă

Culorile legăturilor active sunt evidențiate în modulul de meniu pentru a arăta utilizatorului locația curentă. Puteți schimba culoarea de evidențiere utilizată pentru aceste linkuri active folosind această setare.

Culoarea textului din meniul derulant

În mod implicit, textul din meniurile derulante ale modulului moștenește culoarea textului meniului principal. Cu toate acestea, poate doriți să modificați această culoare dacă ați definit o culoare de fundal a meniului drop-down personalizat.

Culoarea textului din meniul mobil

În mod implicit, textul din meniurile derulante ale modulului moștenește culoarea textului meniului principal. Cu toate acestea, poate doriți să modificați această culoare dacă ați setat o culoare de fundal personalizată pentru meniul mobil.

Fontul meniului

Puteți schimba fontul fontului meniului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, italice, cu majuscule și cu subliniere.

Meniul Dimensiune font

Aici puteți regla dimensiunea fontului din meniu. Puteți trage glisorul de interval pentru a mări sau micșora dimensiunea textului sau puteți introduce direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoarea textului din meniu

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului dvs. digital, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor meniului

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul numeric, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsurare, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei de meniu

Înălțimea liniei afectează spațiul dintre fiecare linie a textului numeric Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere situat în dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsurare, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Opțiuni avansate pentru meniu lățime completă

În fila avansată, veți găsi opțiuni pe care designerii web mai experimentați le-ar putea găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat oricăruia dintre numeroasele elemente ale modulului. De asemenea, puteți aplica clase și ID-uri CSS personalizate modulului, care pot fi utilizate pentru a personaliza modulul în fișierul style.css al temei copilului dvs.

Cod CSS

Introduceți un ID CSS opțional de utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea legături către anumite secțiuni ale paginii dvs.

CSS

Introduceți clasele CSS opționale de utilizat pentru acest modul. O clasă CSS poate fi utilizată pentru a crea stiluri CSS personalizate. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în tema copilului Divi sau în foaia de stil CSS personalizată pe care o adăugați la pagina sau site-ul dvs. site-ul web folosind opțiunile temei Divi sau setările paginii Divi Builder.

CSS personalizate

CSS personalizat poate fi, de asemenea, aplicat modulului și oricărui intern al modulului. În secțiunea CSS personalizată, veți găsi un câmp de text în care puteți adăuga foi de stil CSS personalizate direct la fiecare element. Intrările CSS din aceste setări sunt deja înfășurate în etichetele de stil. Deci, introduceți regulile CSS separate prin punct și virgulă.

Animarea meniului derulant

Puteți alege între diferite animații de utilizat atunci când este activat un meniu derulant. În mod implicit, animația este setată să se estompeze, dar o schimbați în: extindeți, trageți sau răsturnați.

vizibilitate

Această opțiune vă permite să controlați dispozitivele pe care apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, smartphone-uri sau desktop-uri. Acest lucru este util dacă doriți să utilizați moduri diferite pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente de pe pagină.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCĂRCĂ TEMA DIVI [/vcex_button][/vc_column][vc_column] width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARCĂ ȘABLOANELOR DIVI[/vcex_button][/vc_column][/vc_row]

Cum să utilizați modulul de navigație Divi Builder cu lățime maximă