Në këtë manual, ne do t'ju tregojmë se si të krijoni një buton të menusë zbritëse duke përdorur modulin e menysë me gjerësi të plotë të Divi-t. Për ta bërë këtë, së pari do të krijojmë një menu në WordPress. Më pas do të përdorim modulin e menysë me gjerësi të plotë të Divi-t për të shfaqur këtë menu me stile të personalizuara duke përdorur ndërtuesin Divi dhe pak CSS të personalizuar. Rezultati është një buton drop-down praktik dhe elegant.
Le të fillojë.
studim
Këtu është një përmbledhje e butonit drop-down menu që ne do të integrojmë në këtë tutorial.
Çfarë duhet të filloni
Për të filluar, nëse nuk e keni bërë tashmë, instaloni dhe aktivizoni Tema divi instaluar (ose shtojcën Divi Builder nëse nuk e përdorni Tema divi). Ne do të përdorim ndërtuesin Divi në fillim për të dizajnuar butonin e menusë rënëse.
Kjo eshte !
Krijoni një menu në WordPress
Para se të fillojmë të krijojmë menunë zbritëse me Divi Builder, së pari duhet të krijojmë një menu WordPress që do të dëshironim ta përdorim për modulin e menusë me gjerësi të plotë. Për ta bërë këtë, shkoni në panelin e WordPress dhe shkoni te Pamja> Menutë. Pastaj krijoni një menu të re duke klikuar në krijimin e një lidhjeje të re menu, duke futur një emër menuje dhe duke klikuar në butonin "Krijo menunë".
Tani për tani, ju mund të krijoni lidhje të personalizuara me "#" si një mbajtës për URL-në së bashku me tekstin e lidhjes.
Strukturoni artikujt e menusë në mënyrë që artikulli i nivelit të lartë të ketë lidhjen "Mëso më shumë" me tre artikuj të nën menysë.
Pas kësaj, sigurohuni që të ruani menunë.
Si të krijoni një buton meny drop-down me modulin e menusë të plotë me Divi
Pasi menuja të jetë krijuar, ne mund të fillojmë të hartojmë butonin e menusë zbritëse me Divi. Për të filluar projektin, krijoni një faqe të re në WordPress dhe përdorni Divi Builder për të redaktuar faqen në pjesën e përparme (ndërtues vizual).
Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.
Krijoni përmbajtje false
Së pari, shtoni një rresht të një kolone në seksionin standard të paracaktuar.
Shto një modul teksti
Pastaj shtoni një modul teksti në rreshtin me përmbajtjen e mëposhtme:
Menuja Divi Përmbajtja juaj shkon këtu. Redaktoni ose hiqni këtë tekst brenda ose në modulin Cilësimet e përmbajtjes. Ju gjithashtu mund të stilizoni çdo aspekt të kësaj përmbajtjeje në cilësimet e Modulit të Dizajnit dhe madje të aplikoni CSS të personalizuar në këtë tekst në modulin Cilësimet e Avancuara.
Pastaj azhurnoni parametrat e projektimit si më poshtë:
Seksioni i mbushjes
Pastaj, azhurnoni cilësimin e seksionit me artikujt e mëposhtëm:
- Mbushja: 0px poshtë
Hapësira e linjës dhe kufiri
Pasi të jetë azhurnuar mbushja e seksionit, hapni cilësimet e linjës dhe caktojeni asaj një mbushje dhe një kufi të lehtë.
- Mobilje tapiceri: 10vw në krye, 10vw në fund, 5vw në të majtë, 5vw në të djathtë
- Gjerësia e kufirit: 1px
Krijimi i butonit të menusë rënëse
Në mënyrë që të krijojmë butonin e menusë zbritëse, do të përdorim një modul të menusë me gjerësi të plotë. Kjo do të na lejojë të shtojmë menunë e krijuar më parë.
Shtimi i menusë me gjerësi të plotë
Për të krijuar modulin e menusë me gjerësi të plotë, shtoni një seksion të ri me gjerësi të plotë nën seksionin aktual standard.
Pastaj shtoni një modul menu me gjerësi të plotë në rresht.
Në dritaren pop-up të cilësimeve të menusë me gjerësi të plotë (poshtë Përmbajtjes), përdorni menunë në rënie për të zgjedhur menunë që dëshironi të shfaqni. Kjo duhet të jetë e njëjta menu që kemi krijuar më parë me emrin "menu zbritëse".
Pastaj, hiqni ngjyrën e paracaktuar të sfondit të bardhë për menunë.
Pasi të keni shtuar menunë me modulin e menusë me gjerësi të plotë, ruani cilësimet. Ne do të kthehemi në këtë modul për pak për të përfunduar projektin. Por tani për tani, ne do të shtojmë një sfond në seksionin e gjerësisë së plotë.
Përditësoni dizajnin e seksionit me gjerësi të plotë
Hapni cilësimet për seksionin me gjerësi të plotë dhe azhurnoni si vijon:
- Shkalla e majtë e sfondit: # 0047d6
- Ngjyra e gradientit të gradientit të sfondit: # 45b2ff
- Gjerësia maksimale: 240px
- Rreshtimi i Seksionit: qendra
Vendos gjerësinë maksimale të seksionit në 240px, pasi kjo përputhet me gjerësinë e gjerësisë së parazgjedhur të menysë në Divi. Alsoshtë gjithashtu një madhësi e mirë për një buton në desktop dhe celular.
- Qoshet e rrumbullakosura: 5px
Në skedën Advanced, shtoni klasën vijuese CSS, tejmbushjen dhe indeksin Z.
- Klasa CSS: buton dropdown
- Rrjedhja horizontale: e dukshme
- Mbingarkesa vertikale: e dukshme
- Indeksi Z: 14
Klasa CSS është e nevojshme në mënyrë që ne të mund të synojmë CSS tonë të jashtëm në këtë seksion më vonë. Mbingarkesa duhet të vendoset e dukshme në mënyrë që të mund të shohim menunë në rënie. Dhe indeksi Z do t'ju ndihmojë të mbani zbritësin mbi të gjitha përmbajtjet e tjera në faqe.
Hartoni menunë e Fulwidth
Tani jemi gati të hartojmë modulin e menysë Fulwidth. Hapni cilësimet e modulit të menysë me gjerësi të plotë dhe azhurnoni sa vijon:
- Krijoni lidhje me gjerësi të plotë të menusë: PO
- Ngjyra e tekstit të lëshimit: #ffffff
- Ngjyra e tekstit të menusë së lëvizshme: #ffffff
- Shtrirja e tekstit: qendra
- Ngjyra e sfondit të menusë që lëshohen: # 45b2ff
- Ngjyra e linjës së menusë rënëse: #ffffff
- Ngjyra e sfondit të menusë: #45b2ff
- Menuja e shkronjave: Kodifikoni pa gjysmë të kondensuar
- Pesha e menusë së shkronjave: Gjysmë e theksuar
- Ngjyra e tekstit të menusë: #ffffff
- Madhësia e tekstit të menusë: 16px
- Hapësira e menusë: 2px
- Animacion i menusë që lëshohet: Zgjeroni
Poziciononi butonin rënës
Që butoni të mbivendoset kufiri i poshtëm, duhet të shtojmë një diferencë të sipërme negative që është saktësisht gjysma e lartësisë së butonit.
- Margjina: -40.5px e lartë
Siç mund ta shihni, hapësira e rri pezull ende nuk zë të gjithë zonën e butonit dhe menuja në rënie është akoma në të djathtë. Për të zgjidhur këtë problem, ne mund të shtojmë CSS të personalizuar.
Shtimi i CSS me porosi
Para se të shtoni CSS me porosi, sigurohuni që të shtoni CSS ID "drop down" në seksionin me gjerësi të plotë (jo modul).
Pa CSS ID, CSS më poshtë nuk do të funksionojë.
Për të shtuar CSS me porosi, hapni cilësimet e faqes dhe ngjitni kodin e mëposhtëm në kutinë e hyrjes me porosi CSS.
.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important; }. butoni i zbritjes. menuja e plotë e gjerësisë li> a {fund-mbushja: 0px; lartësia e vijës: 81px; }. butoni i zbritjes. menuja e plotë e gjerësisë li li a {padding: 6px 0px; lartësia e vijës: 1.6em; }. butoni i zbritjes .et_mobile_menu në një: rri pezull, .nav ul li në një: rri pezull,. buton zbritës. menuja e plotë-gjerësi a: rri pezull {opacity: 1; }. butoni i zbritjes .et_pb_fullwidth_menu_fullwidth .et_pb_row {mbushja: 0 0! e rëndësishme; }. butoni i zbritjes. menuja me plot gjerësi li {shfaqje: bllok; }. butoni i zbritjes. menyja e plotë e gjerësisë. menuja-artikulli-ka-fëmijë> a: fëmija i parë: pas {djathtas: 20px; }
Këtu është rezultati përfundimtar
Mendimet e fundit
Krijimi i një butoni në menunë zbritëse duke përdorur modulin e menusë me gjerësi të plotë të Divi përfshin disa hapa kryesorë. Së pari, ne krijojmë menunë në WordPress që duam të integrohemi në modul. Pastaj ne përdorim ndërtuesin Divi për dhe stilojmë modulin e menusë me gjerësi të plotë sipas dëshirës tonë. Pastaj shtojmë CSS të personalizuar për të lustruar dizajnin si në desktop ashtu edhe në celular. Rezultati është një menu e bukur (dhe e dobishme) që lëshohet për hover desktop dhe klikim celular. Shpresoj që ju ta gjeni këtë një shtesë të dobishme në paketën tuaj të dizajnit.
