Dëshironi të dini se si të personalizoni ikonat e karrocave dhe kërkimit të modulit Divi Fullwidth Menu?
Menuja juaj Site Web është një nga pjesët më të rëndësishme të juaj Site Web për shkak të ndikimit të drejtpërdrejtë që mund të ketë në mënyrën se si përdoruesit lundrojnë në ju përmbajtje.
Një shirit menuje i dizajnuar mirë mund të bëjë një ndryshim të madh duke thjeshtuar navigimin, duke theksuar faqet kryesore dhe duke përmirësuar përvojën e përgjithshme të përdoruesit.
Moduli "Menyja me gjerësi të plotë" të Divi ofron fleksibilitet të madh duke ju lejuar të personalizoni karrocat e blerjeve dhe ikonat e kërkimit sipas dëshirës tuaj.
Në këtë tutorial, ne do t'ju tregojmë tre dizajne të ndryshme për modulin "Menyja me gjerësi të plotë" me stile të ndryshme për karrocat e blerjeve dhe ikonat e kërkimit.
Le të fillojmë!
studim
Këtu është një pamje paraprake e asaj që ne do të dizajnojmë.
Dizajni i parë
Për dizajnin e parë, vendosim njërën nga ikonat në të majtë dhe tjetrën në të djathtë duke zgjedhur një strukturë të menysë në qendër. Ne gjithashtu do të ndryshojmë ngjyrën në hover.
Dizajni i dytë
Për dizajnin e dytë, vendosim dy ikonat në anën e djathtë dhe ndryshojmë ngjyrën në hover.
Dizajni i tretë
Për dizajnin e tretë, ne përdorim CSS shtesë për të personalizuar ikonat.
Lexo gjithashtu: Divi: Si të personalizoni modulin "Countdown Timer" me një GIF
Përshtatja e karrocave të blerjeve dhe ikonave të kërkimit të modulit "Menyja me gjerësi të plotë" të Divi
Krijo kokën globale
Për secilin nga tre dizajnet e menusë, do të fillojmë duke hapur ndërtuesin e themes të Divit.
Për ta bërë këtë, nga pulti i WordPress, shkoni te Divi > Ndërtues i Temave
Pastaj kliko Shto Kreun Global
Pastaj zgjidhni Ndërtimi i titullit global
Fut një seksion të ri me gjerësi të plotë.
Pastaj fshini seksionin e mëparshëm.
Fut modulin Menyja me gjerësi të plotë.
Ngarkoni logon tuaj nga menyja.
Tani jemi gati të vazhdojmë.
Dizajni i parë
Dizajni ynë i parë do të inkorporojë efektet e integruara të lëvizjes së Divi për të ndryshuar ngjyrën e tekstit dhe ikonave në lëvizje. Le të fillojmë.
Shiko gjithashtu: Divi: Si të shtoni një ikonë hamburgeri në modulin e Menysë
Filloni duke hapur cilësimet e modulit dhe duke shtuar një sfond.
- Sfondi: #fbf9f4
Shko te skeda Projektimi dhe zgjidhni paraqitjen e logos.
- Stili: Logo e përqendruar në linjë
Tani le të ndryshojmë disa nga cilësimet e tekstit të menysë.
- Ngjyra e lidhjes aktive: #09148c
- Fonti i menysë: Ruby
- Pesha e shkronjave të menysë: Bold
- Stili i shkronjave: TT dhe U (Me të madhe dhe të nënvizuar)
Më pas, vendosni ngjyrën e tekstit të menysë, madhësinë e tekstit dhe hapësirën e shkronjave.
- Ngjyra e tekstit të menysë: #000000
- Madhësia e tekstit të menysë: 21 px
- Hapësira e shkronjave: 1 px
Ne duam të shtojmë efekte hover në këtë meny, kështu që ndryshoni ngjyrën e tekstit të menusë në lëvizje. Vendosni një ngjyrë të ndryshme të tekstit të menysë në lëvizje.
- Ngjyra e tekstit të menysë (Hover): #b70018
Pastaj shkoni te cilësimet Menyja e lëshimit nën skedinë Projektimi.
- Ngjyra e sfondit të menysë rënëse: #fbf9f4
- Ngjyra e linjës së menysë rënëse: #b70018
- Ngjyra e tekstit të menysë: #000000
Ne duam që ngjyra e tekstit të menysë rënëse të ndryshojë gjithashtu gjatë lëvizjes së pezullimit, kështu që zgjidhni opsionet e lëvizjes për këtë cilësim dhe vendosni një ngjyrë të ndryshme teksti.
- Ngjyra e tekstit të menysë rënëse (Hover): #b70018
- Menyja rënëse Ngjyra e lidhjes aktive: #b70018
- Ngjyra e sfondit të menysë celulare: #fbf9f4
- Ngjyra e tekstit të menysë celulare: #000000
Përsëri, ne duam që ngjyra e tekstit të menysë së celularit të ndryshojë kur rri pezull. Zgjidh opsionet e pezullimit për këtë cilësim, më pas vendos një ngjyrë të ndryshme teksti në lëvizje.
- Ngjyra e tekstit të menysë celulare (Hover): #b70018
Personalizimi i karrocave të blerjeve dhe ikonave të kërkimit
Tani le të shtojmë dhe personalizojmë ikonat e karrocave dhe të kërkimit. Nën skedën Përmbajtja, shkoni te Elementet dhe aktivizoni ikonën e karrocës së blerjeve dhe ikonën e kërkimit.
- Shfaq ikonën e shportës së blerjeve: PO
- Shfaq ikonën e kërkimit: PO
Kthehuni te skeda Projektimi dhe hapni cilësimet e ikonës. Secila prej ikonave tona do të jetë e zezë dhe e kuqe në lëvizje. Së pari, vendosni ngjyrën e zezë.
- Ngjyra e ikonës së karrocës së blerjeve: #000000
- Ngjyra e ikonës së kërkimit: #000000
- Ngjyra e ikonës së menysë së Hamburgerit: #000000
Më pas, zgjidhni ikonën e pezullimit dhe shtoni ngjyrën në lëvizje.
- Ngjyra e ikonës së karrocës së blerjeve (Hover): #b70018
- Ngjyra e ikonës së kërkimit (Hover): #b70018
- Ngjyra e ikonës së menysë së Hamburgerit (Hover): #b70018
Cakto madhësinë e ikonës.
- Madhësia e shkronjave të ikonës së shportës: 25 px
- Madhësia e shkronjave të ikonës së kërkimit: 25 px
Shkoni te seksioni ndarje, më pas vendosni mbushjen e sipërme dhe të poshtme.
- Mbushje (lart dhe poshtë): 5 px
Së fundi, ne do të shtojmë një kufi në krye dhe në fund të modulit të Menysë. Hap cilësimet e kufirit.
- Gjerësia e kufirit të sipërm: 3 px
- Gjerësia e kufirit të poshtëm: 3 px
Dizajni përfundimtar
Dhe këtu është dizajni ynë përfundimtar.
Dizajni i dytë
Dizajni ynë i dytë do të përdorë efektet e integruara të pezullimit të Divi për të ndryshuar madhësinë e ikonave të menysë dhe tekstit në lëvizje. Le të fillojmë.
Së pari, ne do të shtojmë një gradient të sfondit në modulin e Menysë. Gradienti ka tre ndalesa, cilësimet janë si më poshtë:
- Ndalesat e gradientit:
- 0%: rgba(255,255,255,0)
- 23%: rgba(252,199,76,0.65)
- 82%: rgba(232,119,255,0.32)
Vendosni llojin e gradientit dhe pozicionin e gradientit.
- Lloji i gradientit: Konik
- Pozicioni i gradientit: Poshtë
Pastaj shkoni te skeda Projektimi dhe vendosni paraqitjen (Plan urbanistik).
- Stili: në qendër
Shkoni te seksioni Menyja e tekstit për të personalizuar dizajnin e tekstit të menusë.
- Ngjyra e lidhjes aktive: #FFFFFF
- Menuja e shkronjave: Syne
- Pesha e shkronjave: Bold
- Stili i fontit të menysë: TT (shkronja të mëdha)
- Menyja e ngjyrave të tekstit: #FFFFFF
Tani vendosni madhësinë e tekstit të menusë dhe hapësirën e shkronjave.
- Madhësia e tekstit të menysë: 20 px
- Hapësira e shkronjave të menusë: 2 px
Meqenëse duam që madhësia e tekstit të menysë sonë të rritet kur rri pezull, zgjidhni opsionin hover.
- Madhësia e tekstit të menysë: 22 px
Tjetra, ndryshoni cilësimet e dizajnit nga menyja rënëse.
- Ngjyra e sfondit të menysë rënëse: #fcda90
- Ngjyra e linjës së menysë rënëse: #FFFFFF
- Menyja e ngjyrave të tekstit: #FFFFFF
- Menyja rënëse Ngjyra e lidhjes aktive: #FFFFFF
Caktoni sfondin e menysë celulare dhe ngjyrën e tekstit.
- Ngjyra e sfondit të menysë celulare: #fcda90
- Ngjyra e tekstit të menysë celulare: #FFFFFF
Personalizimi i karrocave të blerjeve dhe ikonave të kërkimit
Tani le të fillojmë të personalizojmë ikonat tona të menusë. Shkoni në Elementet nën skedinë Përmbajtja dhe aktivizoni ikonën e karrocës së blerjeve dhe ikonën e kërkimit.
- Ikona e karrocave të mbjelljes: PO
- Shfaq ikonën e kërkimit: PO
Kthehuni te skeda Projektimi dhe hapni cilësimet e ikonës.
- Ngjyra e ikonës së karrocës së blerjeve: #ffffff
- Ngjyra e ikonës së kërkimit: #ffffff
- Ngjyra e ikonës së menysë së Hamburgerit: #ffffff
Ikonat do të kenë një ngjyrë portokalli të errët në lëvizje. Zgjidhni opsionin e mbulesës dhe vendosni ngjyrën.
- Ngjyra e ikonës së karrocës së blerjeve (Hover): #fcac00
- Ngjyra e ikonës së kërkimit (Hover): #fcac00
- Ngjyra e ikonës së menysë së Hamburgerit (Hover): #fcac00
Më pas, vendosni madhësinë e shkronjave për ikonat e karrocës së blerjeve dhe kërkimit.
- Madhësia e shkronjave të ikonës së shportës së blerjeve: 25 px
- Madhësia e shkronjave të ikonës së kërkimit: 25 px
Për të bërë që madhësia e ikonës të rritet kur rri pezull, zgjidhni opsionin hover.
- Madhësia e shkronjave të ikonës së karrocës së blerjeve (Hover): 30 px
- Madhësia e shkronjave të ikonës së kërkimit (Hover): 30 px
Më në fund, shkoni te seksioni ndarje dhe vendosni mbushjen e sipërme dhe të poshtme.
- Mbushje (lart dhe poshtë): 5 px
Dizajni përfundimtar
Këtu është dizajni përfundimtar i paraqitjes së menusë sonë të dytë.
Dizajni i tretë
Për dizajnin tonë përfundimtar, ne do të shtojmë një rreth sfondi prapa ikonave të karrocave duke përdorur CSS të personalizuar.
Lexo gjithashtu: Divi: Si të krijoni një menu ngjitëse dhe të zgjerueshme
Le të fillojë.
Së pari, shtoni një ngjyrë sfondi në modul.
- Sfondi: #efb6ac
Pastaj shkoni te skeda Projektimi dhe hap opsionin Menyja e tekstit.
- Ngjyra e lidhjes aktive: #e84322
- Fonti i menysë: Cinzel
- Menyja e peshës së shkronjave: Ultra Bold
Ne duam që ngjyra e tekstit të menysë të ndryshojë kur rri pezull. Së pari, vendosni ngjyrën e tekstit të menusë.
- Menyja e ngjyrave të tekstit (Desktop): #e7644a
Klikoni ikonën e pezullimit dhe vendosni ngjyrën e tekstit të pezullimit.
- Ngjyra e tekstit të menysë (Hover): #e84322
Më pas, vendosni madhësinë e tekstit të menusë dhe hapësirën e shkronjave.
- Madhësia e tekstit të menysë: 21 px
- Hapësira e shkronjave të menusë: 1 px
Ne duam gjithashtu që hapësira e shkronjave të zgjerohet në momentin e pezullimit, kështu që zgjidhni opsionin hover për cilësimet.
- Hapësira e shkronjave të menusë: 2 px
Vendosni shtrirjen e tekstit në të majtë.
- Rreshtimi i tekstit: majtas
Tjetra, ndryshoni cilësimet e mëposhtme nga menyja rënëse.
- Ngjyra e sfondit të menysë rënëse: #efb6ac
- Ngjyra e linjës së menysë rënëse: #e7644a
Lexo gjithashtu: Divi: Si të krijoni një seksion Testimoniale në formën e një rrjeti
- Ngjyra e tekstit të menysë rënëse
- Desktop: #e7644a
- Rri pezull: #e84322
- Menyja rënëse Ngjyra e lidhjes aktive: #e84322
Caktoni sfondin e menysë celulare dhe ngjyrën e tekstit.
- Ngjyra e sfondit të menysë celulare: #efb6ac
- Ngjyra e tekstit të menysë celulare:
- Desktop: #e7644a
- Rri pezull: #e84322
Personalizimi i karrocave të blerjeve dhe ikonave të kërkimit
Së pari, shkoni te Elementet nën skedinë Përmbajtja dhe aktivizoni ikonën e karrocës së blerjeve dhe ikonën e kërkimit.
- Shfaq ikonën e shportës së blerjeve: PO
- Shfaq ikonën e blerjeve: PO
Pastaj kthehuni te skeda Projektimi dhe hapni cilësimet e ikonës. Vendosni ngjyrën e ikonës.
- Ngjyra e ikonës së karrocës së blerjeve: #e7644a
- Ngjyra e ikonës së kërkimit: #e7644a
- Ngjyra e ikonës së menysë së Hamburgerit: #e7644a
Ngjyra e këtyre ikonave do të ndryshojë kur rri pezull. Aktivizo opsionet e pezullimit dhe cakto ngjyrën.
- Ngjyra e ikonës së karrocës së blerjeve (Hover): #e84322
- Ngjyra e ikonës së kërkimit (Hover): #e84322
- Ngjyra e ikonës së menysë së Hamburgerit (Hover): #e84322
Ne duam gjithashtu që madhësia e ikonës të rritet kur rri pezull. Së pari, vendosni madhësinë e fontit të ikonës.
- Madhësia e shkronjave të ikonës së shportës: 22 px
- Madhësia e shkronjave të ikonës së kërkimit: 22 px
Më pas, vendosni madhësinë e shkronjave të ikonës në lëvizje.
- Madhësia e shkronjave të ikonës së karrocës së blerjeve (Hover): 26 px
- Madhësia e shkronjave të ikonës së kërkimit (Hover): 26 px
Pastaj shkoni te seksioni ndarje dhe shtoni mbushjen e sipërme dhe të poshtme.
- Mbushje (lart dhe poshtë): 5 px
Më në fund, ne mund të shtojmë CSS të personalizuar në kokën globale për të shtuar rrathët pas karrocës së blerjeve dhe ikonën e kërkimit.
Ju mund ta personalizoni këtë CSS ashtu siç dëshironi të përputhet me dizajnin e modulit tuaj të Menysë.
Hapni cilësimet e shabllonit të kokës, më pas shkoni te skeda Avancuar dhe futni CSS-në e mëposhtme të personalizuar.
.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%;
}
Dizajni përfundimtar
Kjo kompleton hartimin e paraqitjes sonë të tretë dhe të fundit të menusë.
Rezultati përfundimtar
Tani le të hedhim një vështrim në dizajnin përfundimtar të tre menuve të ndryshme.
Dizajni i parë
Shkarkoni DIVI Tani!!!
Dizajni i dytë
Dizajni i tretë
Shkarkoni DIVI Tani!!!
Përfundim
Moduli i menysë së Divi dhe ikonat e karrocave dhe kërkimit janë të lehta për t'u personalizuar për të krijuar paraqitje dhe dizajne unike për Site Web.
Mund të përmirësoni lehtësisht pamjen e moduleve tuaja të Menysë duke përdorur cilësimet e integruara të Divi, si efektet hover dhe CSS të personalizuara.
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.
Mos hezitoni të konsultoheni edhe me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
