Doriți să știți cum să personalizați coșul și pictogramele de căutare ale modulului Divi Fullwidth Menu?
Meniul dvs site-ul web este una dintre cele mai importante părți ale dvs site-ul web din cauza impactului direct pe care îl poate avea asupra modului în care utilizatorii vă navighează cuprins.
O bară de meniu bine concepută poate face o mare diferență prin simplificarea navigării, evidențierea paginilor cheie și îmbunătățirea experienței generale a utilizatorului.
Modulul „Fullwidth Menu” al Divi oferă o mare flexibilitate, permițându-vă să personalizați coșul de cumpărături și pictogramele de căutare după cum credeți de cuviință.
În acest tutorial, vă vom arăta trei modele diferite pentru modulul „Meniu lățime completă” cu stil diferit pentru coșul de cumpărături și pictogramele de căutare.
Să începem!
studiu
Iată o previzualizare a ceea ce vom proiecta.
Primul design
Pentru primul design, plasăm una dintre pictograme în stânga și cealaltă în dreapta selectând o structură de meniu centrată. Vom schimba și culoarea la hover.
Al doilea design
Pentru al doilea design, plasăm cele două pictograme în partea dreaptă și schimbăm culoarea la hover.
Al treilea design
Pentru al treilea design, folosim CSS suplimentar pentru a personaliza pictogramele.
Citiți și: Divi: Cum să personalizați modulul „Timer numărătoare inversă” cu un GIF
Personalizarea coșului de cumpărături și a pictogramelor de căutare ale modulului „Fullwidth Menu” de la Divi
Creați antetul global
Pentru fiecare dintre cele trei modele de meniu, vom începe prin a deschide generatorul de tematică a lui Divi.
Pentru a face acest lucru, din tabloul de bord WordPress, accesați Divi > Theme Builder
Apoi faceți clic pe Adăugați antet global
Atunci alege Creați antet global
Introduceți o nouă secțiune cu lățime completă.
Apoi ștergeți secțiunea anterioară.
Introduceți modulul Meniu cu lățime completă.
Încărcați logo-ul dvs. din meniu.
Acum suntem gata să continuăm.
Primul design
Primul nostru design va încorpora efectele Hover încorporate ale Divi pentru a schimba culoarea textului și a pictogramelor de pe hover. Să începem.
Vezi si: Divi: Cum să adăugați o pictogramă hamburger la modulul Meniu
Începeți prin a deschide setările modulului și adăugați un fundal.
- Fundal: #fbf9f4
Accesați fila Amenajări și selectați aspectul logo-ului.
- Stil: Logo centrat în linie
Acum să modificăm unele dintre setările textului meniului.
- Culoare Active Link: #09148c
- Font meniu: Ruby
- Greutate font meniu: aldine
- Stil font: TT și U (Majuscule și subliniate)
Apoi, setați culoarea textului meniului, dimensiunea textului și spațierea dintre litere.
- Culoarea textului meniului: #000000
- Dimensiunea textului meniului: 21px
- Spațiere între litere: 1px
Dorim să adăugăm efecte de trecere cu mouse-ul la acest meniu, așa că schimbați culoarea textului meniului la trecerea cu mouse-ul. Setați o culoare diferită a textului meniului la trecerea cursorului.
- Culoarea textului meniului (Hover): #b70018
Apoi mergeți la setări Meniu derulant sub filă Amenajări.
- Culoarea de fundal a meniului dropdown: #fbf9f4
- Culoarea liniei meniului dropdown: #b70018
- Culoarea textului meniului: #000000
Dorim ca culoarea textului din meniul drop-down să se schimbe și la trecerea cu mouse-ul, deci selectați opțiunile de trecere cu mouse-ul pentru această setare și setați o culoare diferită a textului.
- Culoarea textului meniului derulant (Hover): #b70018
- Meniul dropdown Culoare link activ: #b70018
- Culoare de fundal pentru meniul mobil: #fbf9f4
- Culoarea textului meniului mobil: #000000
Din nou, dorim ca culoarea textului meniului mobil să se schimbe la trecerea cursorului. Selectați opțiunile de trecere cu mouse-ul pentru această setare, apoi setați o culoare diferită pentru text.
- Culoarea textului meniului mobil (Hover): #b70018
Personalizarea coșului de cumpărături și a pictogramei de căutare
Acum să adăugăm și să personalizăm coșul de cumpărături și pictogramele de căutare. Sub fila Conţinut, du-te la Elemente de și activați pictograma coș de cumpărături și pictograma de căutare.
- Afișați pictograma coș de cumpărături: DA
- Afișați pictograma de căutare: DA
Reveniți la filă Amenajări și deschideți setările pictogramei. Fiecare dintre pictogramele noastre va fi neagră și roșie când hover. Mai întâi, setați culoarea neagră.
- Culoare pictogramă coș de cumpărături: #000000
- Culoare pictogramă de căutare: #000000
- Culoarea pictogramei meniului Hamburger: #000000
Apoi, selectați pictograma de trecere cu mouse-ul și adăugați culoarea la trecerea cu mouse-ul.
- Culoare pictogramă coș de cumpărături (Hover): #b70018
- Culoarea pictogramei de căutare (Hover): #b70018
- Culoarea pictogramei meniului Hamburger (Hover): #b70018
Setați dimensiunea pictogramei.
- Dimensiunea fontului pictogramei coș de cumpărături: 25 px
- Dimensiunea fontului pictogramei de căutare: 25 px
Accesați secțiunea spațiere, apoi setați căptușeala de sus și de jos.
- Umplutură (sus și jos): 5px
În cele din urmă, vom adăuga un chenar în partea de sus și de jos a modulului Meniu. Deschideți setările de chenar.
- Lățimea chenarului superior: 3 px
- Lățimea marginii inferioare: 3px
Proiect final
Și aici este designul nostru final.
Al doilea design
Al doilea design va folosi efectele Hover încorporate ale Divi pentru a schimba dimensiunea pictogramelor de meniu și a textului de pe hover. Să începem.
Mai întâi, vom adăuga un gradient de fundal la modulul Meniu. Gradientul are trei opriri, setările sunt după cum urmează:
- Opriri de gradient:
- 0%: rgba(255,255,255,0)
- 23%: rgba(252,199,76,0.65)
- 82%: rgba(232,119,255,0.32)
Setați tipul de gradient și poziția gradientului.
- Tip de gradient: conic
- Poziție gradient: jos
Apoi accesați fila Amenajări și setați aspectul (Aspect).
- Stil: centrat
Accesați secțiunea Textul meniului pentru a personaliza designul textului meniului.
- Culoare Active Link: #FFFFFF
- Meniu font: Syne
- Greutatea fontului: aldine
- Stil font meniu: TT (majuscule)
- Meniu culoare text: #FFFFFF
Acum setați dimensiunea textului meniului și spațierea dintre litere.
- Dimensiunea textului meniului: 20px
- Spațiere dintre litere din meniu: 2px
Deoarece dorim ca dimensiunea textului meniului nostru să crească la trecerea cu mouse-ul, selectați opțiunea de trecere cu mouse-ul.
- Dimensiunea textului meniului: 22px
Apoi, modificați setările de design din meniul drop-down.
- Culoarea de fundal a meniului dropdown: #fcda90
- Culoarea liniei meniului derulant: #FFFFFF
- Meniu culoare text: #FFFFFF
- Meniu derulant Culoare link activ: #FFFFFF
Setați fundalul meniului mobil și culoarea textului.
- Culoare de fundal pentru meniul mobil: #fcda90
- Culoarea textului meniului mobil: #FFFFFF
Personalizarea coșului de cumpărături și a pictogramei de căutare
Acum să începem să personalizăm pictogramele meniului. Mergi la Elemente de sub filă Conţinut și activați pictograma coș de cumpărături și pictograma de căutare.
- Pictograma Coș de cumpărături Sow: DA
- Afișați pictograma de căutare: DA
Reveniți la filă Amenajări și deschideți setările pictogramei.
- Culoare pictogramă coș de cumpărături: #ffffff
- Culoare pictogramă de căutare: #ffffff
- Culoarea pictogramei meniului Hamburger: #ffffff
Pictogramele vor avea o culoare portocalie închisă la trecerea cursorului. Selectați opțiunea de coperta și setați culoarea.
- Culoarea pictogramei coș de cumpărături (Hover): #fcac00
- Culoarea pictogramei de căutare (Hover): #fcac00
- Culoarea pictogramei meniului Hamburger (Hover): #fcac00
Apoi, setați dimensiunea fontului pentru coșul de cumpărături și pictogramele de căutare.
- Pictogramă Coș de cumpărături Dimensiunea fontului: 25 px
- Dimensiunea fontului pictogramei de căutare: 25 px
Pentru a crește dimensiunea pictogramei la trecerea cu mouse-ul, selectați opțiunea de trecere cu mouse-ul.
- Dimensiunea fontului pictogramei coș de cumpărături (Hover): 30 px
- Dimensiunea fontului pictogramei de căutare (Hover): 30 px
În sfârșit, accesați secțiunea spațiere și setați căptușeala de sus și de jos.
- Umplutură (sus și jos): 5px
Proiect final
Iată designul final al celui de-al doilea aspect al meniului.
Al treilea design
Pentru designul nostru final, vom adăuga un cerc de fundal în spatele pictogramelor coș folosind CSS personalizat.
Citiți și: Divi: Cum să creați un meniu lipicios și extensibil
Să începem.
Mai întâi, adăugați o culoare de fundal la modul.
- Fundal: #efb6ac
Apoi accesați fila Amenajări și deschideți opțiunea Textul meniului.
- Culoare Active Link: #e84322
- Font meniu: Cinzel
- Meniu Greutate font: Ultra Bold
Dorim ca culoarea textului meniului să se schimbe la trecerea cursorului. Mai întâi, setați culoarea textului meniului.
- Meniu culoare text (desktop): #e7644a
Faceți clic pe pictograma de trecere cu mouse-ul și setați culoarea textului de trecere cu mouse-ul.
- Culoarea textului meniului (Hover): #e84322
Apoi, setați dimensiunea textului meniului și spațierea dintre litere.
- Dimensiunea textului meniului: 21px
- Spațiere dintre litere din meniu: 1px
De asemenea, dorim ca spațierea dintre litere să se extindă la trecerea cu mouse-ul, așa că selectați opțiunea de trecere cu mouse-ul pentru setări.
- Spațiere dintre litere din meniu: 2px
Setați alinierea textului la stânga.
- Alinierea textului: stânga
Apoi, modificați următoarele setări din meniul derulant.
- Culoarea de fundal a meniului dropdown: #efb6ac
- Culoarea liniei meniului drop-down: #e7644a
Citiți și: Divi: Cum să creați o secțiune de Mărturii sub forma unei grile
- Culoarea textului meniului derulant
- Desktop: #e7644a
- Hover: #e84322
- Meniul dropdown Culoare link activ: #e84322
Setați fundalul meniului mobil și culoarea textului.
- Culoare de fundal pentru meniul mobil: #efb6ac
- Culoarea textului meniului mobil:
- Desktop: #e7644a
- Hover: #e84322
Personalizarea coșului de cumpărături și a pictogramei de căutare
Mai întâi, du-te la Elemente de sub filă Conţinut și activați pictograma coș de cumpărături și pictograma de căutare.
- Afișați pictograma coș de cumpărături: DA
- Afișați pictograma Cumpărături: DA
Apoi reveniți la filă Amenajări și deschideți setările pictogramei. Setați culoarea pictogramei.
- Culoare pictogramă coș de cumpărături: #e7644a
- Culoare pictogramă de căutare: #e7644a
- Culoarea pictogramei meniului Hamburger: #e7644a
Culoarea acestor pictograme se va schimba la trecerea cursorului. Activați opțiunile de trecere cu mouse-ul și setați culoarea.
- Culoare pictogramă coș de cumpărături (Hover): #e84322
- Culoare pictogramă de căutare (Hover): #e84322
- Culoarea pictogramei meniului Hamburger (Hover): #e84322
De asemenea, dorim ca dimensiunea pictogramei să crească la trecerea cursorului. Mai întâi, setați dimensiunea fontului pictogramei.
- Dimensiunea fontului pictogramei coș de cumpărături: 22 px
- Dimensiunea fontului pictogramei de căutare: 22 px
Apoi, setați dimensiunea fontului pictogramei pe mouse-ul.
- Dimensiunea fontului pictogramei coș de cumpărături (Hover): 26 px
- Dimensiunea fontului pictogramei de căutare (Hover): 26 px
Apoi accesați secțiunea spațiere și adăugați căptușeală de sus și de jos.
- Umplutură (sus și jos): 5px
În cele din urmă, putem adăuga CSS personalizat la antetul global pentru a adăuga cercurile din spatele coșului de cumpărături și pictograma de căutare.
Puteți personaliza acest CSS după cum doriți să se potrivească cu designul modulului Meniu.
Deschideți setările șablonului antet, apoi accesați fila Avansat și introduceți următorul CSS personalizat.
.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}
Proiect final
Aceasta completează designul celui de-al treilea și ultimul nostru aspect al meniului.
Rezultat final
Acum să aruncăm o privire asupra designului final al celor trei meniuri diferite.
Primul design
Descărcați DIVI acum!!!
Al doilea design
Al treilea design
Descărcați DIVI acum!!!
Concluzie
Modulul Meniu Divi și pictogramele coș și căutare sunt ușor de personalizat pentru a crea machete și modele unice pentru dvs site-ul web.
Puteți îmbunătăți cu ușurință aspectul modulelor dvs. de meniu folosind setările Divi încorporate, cum ar fi efectele de trecere cu mouse-ul și CSS personalizat.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.
Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
