Doriți să creați un antet global cu modulul Meniu ecran complet din Divi?
Antetul este unul dintre cele mai importante elemente ale oricăruia site-ul web și se află în centrul experiența utilizatorului. Meniul de navigare oferă utilizatorilor o idee despre ceea ce se pot aștepta să găsească pe dvs site-ul web și îi ajută să găsească informațiile de care au nevoie.
În plus, o bară de meniu secundară poate fi un spațiu excelent pentru a evidenția un îndemn la acțiune sau la promova o ofertă. Ca să nu mai vorbim de faptul că antetul este una dintre cele mai importante părți ale dvs site-ul web, pentru că de obicei apare pe fiecare pagină. Aceasta este o oportunitate excelentă de a vă prezenta brandingul și de a crea un antet care să fie în concordanță cu designul restului site-ului dvs.
Opțiunile Divi Theme Builder vă permit să creați un antet global personalizat și să personalizați aspectul antetului și al modulelor de meniu pe întregul site web.
În acest tutorial, vă vom arăta cum să creați un antet global folosind modulul de meniu pe ecran complet al Divi.
Să începem!
studiu
Iată o previzualizare a antetului global pe care îl vom proiecta.
Deschideți generatorul de teme
Deoarece construim un antet global în acest exemplu, să navigăm la „Theme Builder”, pe care îl puteți găsi în meniul WordPress Divi. Selectați Adăugare antet global, apoi selectați Creare antet global.
Creați bara de meniu secundară
Când deschideți pentru prima dată aspectul antet global, acesta vine preîncărcat cu o secțiune obișnuită. Vom modifica aceasta pentru a fi bara de meniu secundară, care va sta deasupra meniului nostru lat și va include text cu îndemn și un buton.
Mai întâi, deschideți setările secțiunii și adăugați culoarea de fundal.
- Fundal: #92A8A1
Apoi, marginea secțiunii.
- Vertexul marjei interioare: 0px
- Marja internă inferioară: 0px
Acum introduceți un rând. Pentru acest exemplu, vom folosi aspectul prezentat mai jos.
În setările rândului, sub Dimensiunea filei Stil, armonizați înălțimile coloanei.
- Armonizarea înălțimii coloanei: DA
Apoi, setați marginile de sus și de jos după cum urmează:
- Marja interioară superioară: 5 px
- Marja interioară inferioară: 5px
Deoarece dorim ca elementele noastre de antet secundare să fie aliniate vertical, vom adăuga câteva CSS personalizate la elementul de rând principal.
1.
align-items:center;
Acum că linia noastră este configurată, putem introduce modulele pentru cuprins. Mai întâi inserați un modul de text în partea stângă.
Modificați fișierul cuprins de text. Acesta este locul perfect pentru a include un apel la acțiune sau la promova o ofertă.
- Text: „Alătură-te listei noastre de corespondență pentru a primi 10% reducere la comanda ta!” »
Accesați fila Stil a modulului Text și modificați parametrii după cum urmează:
- Font „Text”: Poppins
- Lumină slabă „Text”: Medie
- Culoarea textului „Text”: #FFFFFF
Apoi, adăugați modulul Button din dreapta.
Adăugați textul butonului.
- Text: „Obțineți o ofertă gratuită”
În fila Stil, aliniați butonul în centru.
- Alinierea butoanelor: Centru
Acum să personalizăm aspectul butonului.
- Utilizați stiluri personalizate pentru „Button”: Da
- Dimensiunea textului butonului: 14px
- Culoarea textului butonului: #FFFFFF
- Buton de fundal: #2F5349
- Lățimea chenarului butonului: 0px
- Buton pentru raza chenarului: 50px
- Spațiere între litere butoane: 1px
- Font pentru buton: Poppins
Adăugați modulul Meniu ecran complet
Acum că meniul secundar este proiectat, putem trece la meniul principal. Vom construi meniul folosind modulul Full Screen Menu. Adăugați o nouă secțiune Fullscreen la antetul global.
Selectați și inserați modulul Meniu ecran complet
În continuare, vom personaliza setările meniului pe ecran complet.
- Culoare Active Link: #2F5349
- Meniu font: Poppins
- Meniu Dim Light: Semi Bold
- Copiere meniul stil: TT
- Culoarea textului meniului: #000000
- Culoarea textului meniului de trecere cu mouse-ul: #2F5349
- Dimensiunea textului meniului: 15px
- Spațiere între litere din meniu: 2px
Schimbați culoarea pictogramei meniului de hamburger în negru.
- Culoarea pictogramei meniului Hamburger: #000000
Înainte de a adăuga sigla în meniul nostru, să schimbăm opțiunile de dimensionare. Vom folosi opțiunile de răspuns încorporate ale Divi pentru a seta o înălțime maximă diferită pentru computer și mobil.
- Înălțimea maximă a logo-ului pe computer: 3vw
- Înălțimea maximă a logo-ului pe mobil: 6vw
Acum adăugați sigla dvs. în meniul pe ecran complet.
În cele din urmă, dorim ca meniul principal să rămână în partea de sus a ecranului atunci când utilizatorul defilează prin site-ul web, așa că vom folosi setările sticky sticky încorporate ale Divi pentru aceasta.
- Poziție lipicioasă: lipiți deasupra
Cu asta, designul nostru global antet este complet.
Creați o pagină nouă cu un aspect predefinit
Pentru a vedea antetul și meniul la lățime completă în acțiune, să creăm o pagină nouă cu un aspect predefinit din biblioteca Divi. Pentru acest exemplu vom folosi Pagina de pornire din pachet amenajarea podelei.
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.
Folosim un aspect prestabilit din Biblioteca Divi pentru acest exemplu, așa că selectați Alegeți aspect.
Găsiți și selectați aspectul „Pagină de pornire pentru podea”.
Selectați „Alegeți aspectul” pentru a adăuga aspectul în pagina dvs.
Acum designul este complet!
Rezultat final
Concluzie
După cum am spus mai sus, antetul și meniul de navigare se află în centrul experienței de utilizare a site-ului dvs. web. Ați văzut acum cât de ușor este să proiectați un antet general uimitor cu modulul „Meniu ecran complet” al Divi.
Din fericire, generatorul de teme Divi vă pune în control asupra fiecărui aspect al meniului și antetului site-ului dvs. și puteți crea design-uri complet personalizate și unice cu doar câteva clicuri.
Ați folosit opțiunile de antet globale ale Divi pentru a vă personaliza antetul și meniul de navigare? Spune-ne ce crezi în comentarii!
