U ovom vodiču pokazat ćemo vam kako stvoriti gumb padajućeg izbornika pomoću Divijevog modula izbornika pune širine. Da bismo to učinili, prvo ćemo stvoriti izbornik u WordPressu. Zatim ćemo upotrijebiti Divijev modul izbornika pune širine za prikaz ovog izbornika s prilagođenim stilovima pomoću Divi graditelja i malo prilagođenog CSS-a. Rezultat je praktičan i moderan gumb padajućeg izbornika.
Počnimo.
pregled
Ovdje je pregled gumba padajućeg izbornika koji ćemo integrirati u ovaj tutorial.
Što trebate za početak
Za početak, ako već niste, instalirajte i aktivirajte Divi tema instaliran (ili dodatak Divi Builder ako ne koristite Divi tema). Na početku ćemo koristiti Divi builder za dizajn gumba padajućeg izbornika.
To je to !
Stvorite izbornik u WordPressu
Prije nego počnemo stvarati padajući izbornik s Divi Builder, prvo moramo stvoriti WordPress izbornik koji bismo željeli koristiti za modul izbornika pune širine. Da biste to učinili, idite na WordPress nadzornu ploču i idite na Izgled> Izbornici. Zatim stvorite novi izbornik klikom na vezu za stvaranje novog izbornika, unošenjem naziva izbornika i klikom na gumb "Izradi izbornik".
Za sada možete stvoriti prilagođene veze s "#" kao rezerviranim mjestom za URL, zajedno s tekstom veze.
Strukturirajte stavke izbornika tako da stavka izbornika najviše razine ima vezu "Saznajte više" s tri stavke podizbornika.
Nakon toga, spremite izbornik.
Kako stvoriti gumb padajućeg izbornika s modulom izbornika Divi s cijelom širinom
Jednom kada je izbornik stvoren, možemo započeti s dizajniranjem gumba padajućeg izbornika s Divi. Da biste započeli projekt, stvorite novu stranicu u WordPressu i upotrijebite Divi Builder za uređivanje stranice na prednjoj strani (visual builder).
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.
Stvorite lažni sadržaj
Prvo dodajte redak s jednim stupcem u zadani standardni odjeljak.
Dodajte tekstualni modul
Zatim u redak dodajte tekstualni modul sa sljedećim sadržajem:
Divi Menu Vaš sadržaj ide ovdje. Uredite ili uklonite ovaj tekst u retku ili u modulu Postavke sadržaja. Također možete stilizirati svaki aspekt ovog sadržaja u postavkama dizajna modula, pa čak i primijeniti prilagođeni CSS na ovaj tekst u modulu Napredne postavke.
Zatim ažurirajte parametre dizajna na sljedeći način:
Padding odjeljak
Zatim ažurirajte postavke odjeljka sljedećim stavkama:
- Padding: 0px dolje
Razmak i linija
Nakon ažuriranja popunjavanja odjeljka, otvorite postavke linije i dodijelite joj ispunjavanje i malo obruba.
- Tapaciranje: 10vw na vrhu, 10vw na dnu, 5vw na dnu, 5vw na lijevoj strani, XNUMXvw na desnoj strani
- Širina granice: 1px
Izrada gumba padajućeg izbornika
Da bismo stvorili gumb padajućeg izbornika, koristit ćemo modul izbornika pune širine. To će nam omogućiti dodavanje prethodno stvorenog izbornika.
Dodavanje izbornika pune širine
Da biste stvorili modul izbornika pune širine, dodajte novi odjeljak pune širine ispod trenutnog standardnog odjeljka.
Zatim dodajte liniju modul cijele širine.
U skočnom prozoru postavki izbornika pune širine (ispod Sadržaja) pomoću padajućeg izbornika odaberite izbornik koji želite prikazati. Ovo bi trebao biti isti izbornik koji smo ranije stvorili pod nazivom "padajući izbornik gumba".
Zatim uklonite zadanu bijelu boju pozadine za izbornik.
Nakon što dodate izbornik s modulom izbornika pune širine, spremite postavke. Vratit ćemo se ovom modulu za kratko da dovršimo dizajn. Ali za sada ćemo dodati pozadinu u odjeljak pune širine.
Ažurirajte dizajn odjeljka pune širine
Otvorite postavke za odjeljak pune širine i ažurirajte sljedeće:
- Lijevi gradijent pozadine: # 0047d6
- Desni pozadinski gradijent Boja: # 45b2ff
- Maksimalna širina: 240px
- Usklađivanje odjeljka: središte
Postavio sam maksimalnu širinu odjeljka na 240 piksela, jer je ovo širina zadane širine padajućeg izbornika u Divi. Dobra je veličina i za gumb na radnoj površini i mobitelu.
- Zaobljeni uglovi: 5px
Na kartici Napredno dodajte sljedeću CSS klasu, preljev i Z indeks.
- CSS klasa: padajući gumb
- Vodoravni preljev: vidljiv
- Okomiti preljev: vidljiv
- Z indeks: 14
CSS klasa je potrebna kako bismo kasnije mogli ciljati svoj vanjski CSS na ovaj odjeljak. Preljev treba postaviti na vidljiv kako bismo mogli vidjeti padajući izbornik. A indeks Z pomoći će vam da zadržite padajući meni iznad svih ostalih sadržaja na stranici.
Dizajnirajte izbornik Fulwidth
Sada smo spremni za dizajn modula izbornika Fulwidth. Otvorite postavke modula izbornika pune širine i ažurirajte sljedeće:
- Stvorite veze u izborniku pune širine: DA
- Boja teksta padajućeg pada: #ffffff
- Boja teksta mobilnog izbornika: #ffffff
- Usklađivanje teksta: središte
- Boja pozadine padajućeg izbornika: # 45b2ff
- Boja retka padajućeg izbornika: #ffffff
- Boja pozadine izbornika: #45b2ff
- Izbornik slova: Šifriraj bez polusatnog
- Težina izbornika slova: Polusmjereno
- Boja teksta izbornika: #ffffff
- Veličina teksta izbornika: 16px
- Međusobni razmak: 2px
- Animacija padajućeg izbornika: Proširi
Namjestite padajući gumb
Da bi se gumb preklapao s donjom obrubom, moramo dodati negativnu gornju marginu koja je točno polovica visine gumba.
- Marža: -40.5px visoka
Kao što vidite, prostor za zadržavanje iznad pokazivača još uvijek ne zauzima cijelo područje gumba, a padajući izbornik i dalje je s desne strane. Da bismo riješili taj problem, možemo dodati prilagođeni CSS.
Dodavanje prilagođenog CSS-a
Prije dodavanja prilagođenog CSS-a, obavezno dodajte CSS ID "padajući" u odjeljak pune širine (ne modul).
Bez CSS ID-a, CSS u nastavku neće raditi.
Da biste dodali prilagođeni CSS, otvorite postavke stranice i zalijepite sljedeći kôd u prilagođeni okvir za unos CSS-a.
.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! važno; } .dropdown-button .fullwidth-menu li> a {padding-bottom: 0px; visina crte: 81px; } .dropdown-button .fullwidth-menu li li a {padding: 6px 0px; visina crte: 1.6em; } .dropdown-button .et_mobile_menu li a: hover, .nav ul li a: hover, .dropdown-button .fullwidth-menu a: hover {opacity: 1; } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! važno; }. -drop-button .fullwidth-menu li {display: block; } .drop-button .fullwidth-menu .menu-item-has-children> a: first-child: after {right: 20px; }
Evo konačnog rezultata
Završne misli
Stvaranje gumba padajućeg izbornika pomoću Divijevog modula pune širine uključuje nekoliko ključnih koraka. Prvo stvorimo izbornik u WordPressu koji želimo integrirati u modul. Tada koristimo Divi builder za i oblikujemo modul izbornika pune širine po svojoj želji. Zatim dodajemo prilagođeni CSS za poliranje dizajna na radnoj površini i na mobitelu. Rezultat je lijep (i koristan) padajući izbornik uveden za lebdenje na radnoj površini i klik na mobilnom uređaju. Nadam se da vam je ovo koristan dodatak vašem dizajnerskom alatu.
