Želite li znati kako prilagoditi košaricu i ikone pretraživanja modula Divi Fullwidth Menu?
Vaš jelovnik web stranica jedan je od najvažnijih dijelova vašeg web stranica zbog izravnog utjecaja koji može imati na način na koji se korisnici kreću vašim sadržaj.
Dobro dizajnirana traka izbornika može napraviti veliku razliku pojednostavljivanjem navigacije, isticanjem ključnih stranica i poboljšanjem ukupnog korisničkog iskustva.
Divijev modul "Fullwidth Menu" nudi veliku fleksibilnost dopuštajući vam da prilagodite košaricu za kupnju i ikone pretraživanja kako vam odgovara.
U ovom vodiču ćemo vam pokazati tri različita dizajna za modul "Izbornik pune širine" s različitim stilom za košaricu za kupnju i ikone za pretraživanje.
Krenimo!
pregled
Evo pregleda onoga što ćemo dizajnirati.
Prvi dizajn
Za prvi dizajn jednu od ikona postavljamo s lijeve strane, a drugu s desne strane odabirom središnje strukture izbornika. Također ćemo promijeniti boju dok lebdimo.
Drugi dizajn
Za drugi dizajn, postavljamo dvije ikone na desnu stranu i mijenjamo boju dok lebdimo.
Treći dizajn
Za treći dizajn koristimo dodatni CSS za prilagodbu ikona.
Pročitajte također: Divi: Kako prilagoditi modul "Countdown Timer" s GIF-om
Prilagodba košarice za kupnju i ikona pretraživanja Divi modula "Fullwidth Menu".
Napravite globalno zaglavlje
Za svaki od tri dizajna izbornika počet ćemo otvaranjem graditelja teme od Divi.
Da biste to učinili, s WordPress nadzorne ploče idite na Divi > Izrada tema
zatim kliknite Dodaj globalno zaglavlje
Zatim odaberite Izradite globalno zaglavlje
Umetnite novi odjeljak pune širine.
Zatim izbrišite prethodni odjeljak.
Umetnite modul Izbornik pune širine.
Učitajte svoj logotip iz izbornika.
Sada smo spremni nastaviti.
Prvi dizajn
Naš prvi dizajn će sadržavati Divi ugrađene efekte lebdenja za promjenu boje teksta i ikona pri lebdenju. Počnimo.
Vidi također: Divi: Kako dodati ikonu hamburgera u modul Izbornik
Započnite otvaranjem postavki modula i dodavanjem pozadine.
- Pozadina: #fbf9f4
Idite na karticu dizajn i odaberite izgled logotipa.
- Stil: Umetnuti logotip u sredini
Sada promijenimo neke postavke teksta izbornika.
- Boja aktivne veze: #09148c
- Font izbornika: Ruby
- Težina fonta izbornika: Podebljano
- Stil fonta: TT i U (velikim slovima i podcrtano)
Zatim postavite boju teksta izbornika, veličinu teksta i razmak između slova.
- Boja teksta izbornika: #000000
- Veličina teksta izbornika: 21px
- Razmak između slova: 1px
Ovom izborniku želimo dodati efekte lebdenja, pa promijenite boju teksta izbornika dok lebdite. Postavite drugu boju teksta izbornika pri lebdenju.
- Boja teksta izbornika (prelazak pokazivačem): #b70018
Zatim idite na postavke Padajući izbornik ispod kartice dizajn.
- Boja pozadine padajućeg izbornika: #fbf9f4
- Boja linije padajućeg izbornika: #b70018
- Boja teksta izbornika: #000000
Želimo da se i boja teksta padajućeg izbornika mijenja pri lebdenju, stoga odaberite opcije lebdenja za ovu postavku i postavite drugu boju teksta.
- Boja teksta padajućeg izbornika (prelazak pokazivačem): #b70018
- Boja aktivne veze padajućeg izbornika: #b70018
- Boja pozadine mobilnog izbornika: #fbf9f4
- Boja teksta mobilnog izbornika: #000000
Opet, želimo da se boja teksta mobilnog izbornika mijenja prilikom prelaska mišem. Odaberite opcije lebdenja za ovu postavku, a zatim postavite drugu boju teksta pri lebdenju.
- Boja teksta mobilnog izbornika (prelazak pokazivačem): #b70018
Prilagodba košarice i ikone za pretraživanje
Dodajmo sada i prilagodimo ikone košarice za kupnju i pretraživanja. Ispod kartice Sadržaj, idi na Elementi i omogućite ikonu košarice za kupnju i ikonu pretraživanja.
- Prikaži ikonu košarice: DA
- Prikaži ikonu pretraživanja: DA
Vratite se na karticu dizajn i otvorite postavke ikona. Svaka od naših ikona bit će crna i crvena dok lebdite. Prvo postavite crnu boju.
- Boja ikone košarice: #000000
- Boja ikone pretraživanja: #000000
- Boja ikone jelovnika hamburgera: #000000
Zatim odaberite ikonu lebdenja i dodajte boju pri lebdenju.
- Boja ikone košarice (zadrži pokazivač): #b70018
- Boja ikone pretraživanja (prelazak pokazivačem): #b70018
- Boja ikone izbornika hamburgera (zadrži pokazivač): #b70018
Postavite veličinu ikone.
- Veličina fonta ikone košarice: 25 px
- Veličina fonta ikone pretraživanja: 25 px
Idite na odjeljak Razmještanje, zatim postavite gornji i donji ispun.
- Razmak (gornji i donji dio): 5 px
Na kraju ćemo dodati obrub na vrh i dno modula izbornika. Otvori postavke obruba.
- Širina gornjeg ruba: 3 px
- Širina donjeg ruba: 3 px
Konačni dizajn
I evo našeg konačnog dizajna.
Drugi dizajn
Naš drugi dizajn koristit će Divi ugrađene efekte lebdenja za promjenu veličine ikona izbornika i teksta pri lebdenju. Počnimo.
Prvo ćemo dodati pozadinski gradijent modulu izbornika. Gradijent ima tri stupnja, postavke su sljedeće:
- Gradijent zaustavljanja:
- 0%: rgba(255,255,255,0)
- 23%: rgba(252,199,76,0.65)
- 82%: rgba(232,119,255,0.32)
Postavite vrstu gradijenta i položaj gradijenta.
- Vrsta gradijenta: Stožasti
- Položaj gradijenta: dolje
Zatim idite na karticu dizajn i postavite izgled (Raspored).
- Stil: centriran
Idite na odjeljak Izbornik teksta za prilagodbu dizajna teksta izbornika.
- Boja aktivne veze: #FFFFFF
- Izbornik fonta: Syne
- Težina fonta: Podebljano
- Stil fonta izbornika: TT (velika slova)
- Izbornik boja teksta: #FFFFFF
Sada postavite veličinu teksta izbornika i razmak između slova.
- Veličina teksta izbornika: 20px
- Razmak između slova izbornika: 2px
Budući da želimo da se veličina teksta našeg izbornika povećava kada lebdimo, odaberite opciju lebdenja.
- Veličina teksta izbornika: 22 px
Zatim promijenite postavke dizajna s padajućeg izbornika.
- Boja pozadine padajućeg izbornika: #fcda90
- Boja linije padajućeg izbornika: #FFFFFF
- Izbornik boja teksta: #FFFFFF
- Boja aktivne veze padajućeg izbornika: #FFFFFF
Postavite pozadinu mobilnog izbornika i boju teksta.
- Boja pozadine mobilnog izbornika: #fcda90
- Boja teksta mobilnog izbornika: #FFFFFF
Prilagodba košarice i ikone za pretraživanje
Sada počnimo prilagođavati naše ikone izbornika. Ići Elementi ispod kartice Sadržaj i omogućite ikonu košarice za kupnju i ikonu pretraživanja.
- Sow Ikona košarice: DA
- Prikaži ikonu pretraživanja: DA
Vratite se na karticu dizajn i otvorite postavke ikona.
- Boja ikone košarice: #ffffff
- Boja ikone pretraživanja: #ffffff
- Boja ikone jelovnika hamburgera: #ffffff
Ikone će imati tamnonarančastu boju dok lebde. Odaberite opciju naslovnice i postavite boju.
- Boja ikone košarice (zadrži pokazivač): #fcac00
- Boja ikone pretraživanja (prelazak pokazivačem): #fcac00
- Boja ikone jelovnika za hamburger (zadrži pokazivač): #fcac00
Zatim postavite veličinu fonta za ikone košarice za kupnju i pretraživanja.
- Veličina fonta ikone Shoppin košarice: 25 px
- Veličina fonta ikone pretraživanja: 25 px
Kako bi se veličina ikone povećala pri lebdenju, odaberite opciju lebdenja.
- Veličina fonta ikone košarice (prelazak pokazivačem): 30 px
- Veličina fonta ikone pretraživanja (lebdeći): 30 px
Na kraju idite na odjeljak Razmještanje i postavite gornju i donju podlogu.
- Razmak (gornji i donji dio): 5 px
Konačni dizajn
Ovo je konačni dizajn našeg drugog izgleda izbornika.
Treći dizajn
Za naš konačni dizajn, dodati ćemo pozadinski krug iza ikona košarice pomoću prilagođenog CSS-a.
Pročitajte također: Divi: Kako stvoriti ljepljivi i proširivi lebdeći izbornik
Počnimo.
Prvo dodajte boju pozadine modulu.
- Pozadina: #efb6ac
Zatim idite na karticu dizajn i otvorite opciju Izbornik teksta.
- Boja aktivne veze: #e84322
- Font izbornika: Cinzel
- Izbornik debljine fonta: Ultra podebljano
Želimo da se boja teksta izbornika mijenja prilikom prelaska mišem. Prvo postavite boju teksta izbornika.
- Izbornik boja teksta (radna površina): #e7644a
Pritisnite ikonu za lebdenje i postavite boju teksta za lebdenje.
- Boja teksta izbornika (prelazak pokazivačem): #e84322
Zatim postavite veličinu teksta izbornika i razmak između slova.
- Veličina teksta izbornika: 21 px
- Razmak između slova izbornika: 1px
Također želimo da se razmak između slova produži dok lebdite, pa odaberite opciju lebdenja za postavke.
- Razmak između slova izbornika: 2px
Postavite poravnanje teksta ulijevo.
- Poravnanje teksta: lijevo
Zatim promijenite sljedeće postavke s padajućeg izbornika.
- Boja pozadine padajućeg izbornika: #efb6ac
- Boja linije padajućeg izbornika: #e7644a
Pročitajte također: Divi: Kako kreirati odjeljak Svjedočanstva u obliku mreže
- Boja teksta padajućeg izbornika
- Radna površina: #e7644a
- Lebdite: #e84322
- Boja aktivne veze padajućeg izbornika: #e84322
Postavite pozadinu mobilnog izbornika i boju teksta.
- Boja pozadine mobilnog izbornika: #efb6ac
- Boja teksta mobilnog izbornika:
- Radna površina: #e7644a
- Lebdite: #e84322
Prilagodba košarice i ikone za pretraživanje
Prvo idite na Elementi ispod kartice Sadržaj i omogućite ikonu košarice za kupnju i ikonu pretraživanja.
- Prikaži ikonu košarice: DA
- Prikaži ikonu Shopping: DA
Zatim se vratite na karticu dizajn i otvorite postavke ikona. Postavite boju ikone.
- Boja ikone košarice: #e7644a
- Boja ikone pretraživanja: #e7644a
- Boja ikone jelovnika hamburgera: #e7644a
Boja ovih ikona promijenit će se kada lebdite. Omogućite opcije lebdenja i postavite boju.
- Boja ikone košarice (zadrži pokazivač): #e84322
- Boja ikone pretraživanja (prelazak pokazivačem): #e84322
- Boja ikone izbornika hamburgera (prelazak pokazivačem): #e84322
Također želimo da se veličina ikone povećava kada lebdite. Prvo postavite veličinu fonta ikone.
- Veličina fonta ikone košarice: 22 px
- Veličina fonta ikone pretraživanja: 22 px
Zatim postavite veličinu fonta ikone pri lebdenju.
- Veličina fonta ikone košarice (prelazak pokazivačem): 26 px
- Veličina fonta ikone pretraživanja (lebdeći): 26 px
Zatim idite na odjeljak Razmještanje i dodajte gornji i donji ispun.
- Razmak (gornji i donji dio): 5 px
Konačno, možemo dodati prilagođeni CSS u globalno zaglavlje kako bismo dodali krugove iza košarice i ikone za pretraživanje.
Ovaj CSS možete prilagoditi kako želite da odgovara vašem dizajnu modula izbornika.
Otvorite postavke predloška zaglavlja, a zatim idite na karticu napredan i umetnite sljedeći prilagođeni CSS.
.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%;
}
Konačni dizajn
Ovo dovršava dizajn našeg trećeg i posljednjeg izgleda izbornika.
Konačni rezultat
Sada pogledajmo konačni dizajn tri različita izbornika.
Prvi dizajn
Preuzmite DIVI odmah!!!
Drugi dizajn
Treći dizajn
Preuzmite DIVI odmah!!!
Zaključak
Modul izbornika Divi i ikone košarice i pretraživanja lako se prilagođavaju za stvaranje jedinstvenih izgleda i dizajna za vaše web stranica.
Možete jednostavno poboljšati izgled svojih modula izbornika koristeći ugrađene Divi postavke kao što su efekti lebdenja i prilagođeni CSS.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se također konzultirati naš vodič o Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
