Dëshironi të keni një Divi Mega Menu me imazhe për të ilustruar përmbajtje nga menyja? Ndiqni udhëzuesin tonë se si të shtoni imazhe në një Mega Menu?
Na pëlqen të ndërveprojmë me imazhet në internet. Me këtë në mendje, ka kuptim të shtoni një imazh në tuaj Site Web kur te jete e mundur.
Për më tepër, shtimi i imazheve në një mega menu është një tjetër mundësi e shkëlqyer për t'u dhënë përdoruesve tuaj ndërveprimin që u nevojitet.
Imazhet gjithashtu përmirësojnë menunë duke tërhequr vëmendjen e tyre për të thjeshtuar më tej procesin e navigimit.
studim
Përpara se të hidhemi në këtë tutorial, le të hedhim një vështrim në rezultatin që duam të arrijmë.
Krijimi i mega menusë
Për të filluar, së pari duhet të krijojmë menunë.
Për këtë shembull, ne do të krijojmë një artikull kryesor të menusë prind të quajtur "Mega menu" me katër artikuj të nënmenysë më poshtë. Secili nga katër artikujt e nënmenysë ka tre nën-artikuj të nënmenysë.
Shkoni te pulti i WordPress dhe më pas klikoni Paraqitjet> Menutë
Kliko në "Krijoni një menu të re", jepni një emër dhe klikoni mbi "Krijo menu".
Sigurohuni që të aktivizoni veçorinë e menysë CSS Classes duke klikuar në skedën Opcionet ekrani në krye të djathtë të ekranit të Menyve dhe kontrolloni Klasat CSS.
Tani mund të shtoni artikujt e menysë në menunë e re që keni krijuar.
Le të krijojmë fillimisht artikullin e menysë që do të jetë prindi i të gjithë artikujve të tjerë të menysë. Kjo është lidhja që do të shfaqë mega menunë tuaj në hover.
Për të krijuar këtë artikull të menysë, krijoni një lidhje të personalizuar me parametrat e mëposhtëm:
- URL: http://#
- Titulli i navigimit: Mega Menu
- Klasat CSS: mega-menu
Tani rregulloni/zvarritni katër artikujt e menysë (secila me tre nën-artikuj të tyre) për t'u bërë nën-artikuj të lidhjes kryesore të Mega Menu-së.
Pasi të shtohen lidhjet në meny, lëvizni poshtë te 'Cilësimet e menysë' në fund të ekranit të menysë dhe zgjidhni 'Menyja kryesore' për vendndodhjen e shfaqjes. Së fundi, klikoni mbi "Ruaj menunë"
Ja si duket deri tani mega menuja jonë:
Shtimi i imazheve në mega menunë
Tani që menyja është gati, është koha për të shtuar imazhet.
Lexo gjithashtu: Si mund të notoj postimet e blogut në DIVI?
Merrni imazhet
Filloni duke marrë katër imazhe. Këto imazhe duhet të lidhen me katër artikujt e nënmenusë (Rreth, Ofrimi i Shërbimit, Puna jonë dhe Na Kontaktoni).
Përdorni një redaktues fotografie për të zvogëluar shkallën dhe prerjen e çdo imazhi në gjerësi 500 px dhe lartësi 300 px.
Shtoni këto imazhe në bibliotekën e WordPress. Klikoni mbi Media > Shto.
Zvarritni imazhet tuaja në faqe për t'i shtuar ato ose klikoni 'Zgjidhni skedarët'
Futni imazhe në Mega Menu
Kthehuni në faqen e menyve në pultin e WordPress.
Në këtë shembull, lidhja në krye të kolonës së parë është "Rreth".
Klikoni shigjetën në të djathtë të artikullit "Rreth". Në kutinë e etiketës së navigimit, shtoni imazhin e dëshiruar duke përdorur etiketën html img direkt para tekstit "Rreth". Etiketa e imazhit duhet të duket kështu:
<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
Për të gjetur url-në e figurës, shkoni te Media > Biblioteka e mediave, klikoni imazhin që dëshironi të shtoni.
Në ekranin që shfaqet Detajet e shtojcës, gjeni URL-në në seksionin e djathtë dhe më pas klikoni 'Kopjo URL-në në kujtesën e fragmenteve'
Tani kthehuni te konfigurimi i artikullit të menusë "Rreth" në faqen e menysë dhe zëvendësoni tekstin "Fut URL e imazhit" duke ngjitur URL-në e imazhit tuaj duke përdorur ctrl+v.
Para se të dilni nga opsionet e konfigurimit për artikullin e menysë "Rreth", gjeni kutinë e tekstit CSS Classes dhe futni klasën "mega-link".
Kjo do të na lejojë të shtojmë një stil të personalizuar më vonë.
Përsëriteni këtë proces për të shtuar tre imazhet e mëposhtme në secilin prej artikujve të nënmenusë me klasën "mega-link". (Në këtë shembull, tre elementët e mbetur janë "Shpërndarja e shërbimit", "Puna jonë" et " Na kontaktoni ".)
Rezultat
Qasuni në tuaj Faqja e internetit dhe rri pezull mbi lidhjen e mega menusë. Tani mega menuja juaj duhet të duket kështu:
Vini re se kur rri pezull mbi secilën prej imazheve, imazhet zbehen me artikullin e nënmenysë direkt më poshtë. Kjo për shkak se imazhi është pjesë e asaj lidhjeje, kështu që klikimi mbi të do t'ju çojë në URL-në e lidhur.
Prekjet e fundit
Për këtë hap të fundit, shtoni disa css të personalizuara në meny për ta bërë fontin e tekstit më të madh dhe në qendër. Jepni gjithashtu një rreze kufiri rreth imazhit për ta bërë atë të duket më i pastër.
Në pultin e WordPress, shkoni te Divi> Opsionet e temës .
Lëvizni poshtë te kutia CSS e personalizuar, futni CSS më poshtë dhe klikoni 'Ruaj ndryshimet' :
.mega-link > a {
text-align: center;
font-size: 20px !important;
text-transform: uppercase;
font-weight: 400 !important;
letter-spacing: 3px;
}
.mega-link > a img {
margin-bottom: 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Rezultati përfundimtar
Ju keni mbaruar!
Nëse i keni ndjekur të gjitha hapat në këtë tutorial, këtu është rezultati që duhet të merrni.
Shkarkoni DIVI Tani!!!
Përfundim
Ju keni një mega menu Divi me imazhe pa pasur nevojë të përdorni një shtesë. Ky lloj menyje funksionon veçanërisht mirë për faqet e internetit. E-commerce të cilët kanë shumë përmbajtje dhe kërkojnë imazhe të produktit. Shpresojmë që ky tutorial të jetë i dobishëm për projektet tuaja të ardhshme Divi.
Nëse keni nevojë për më shumë elementë për të përfunduar projektet e krijimit të faqes suaj të internetit, shfletoni gjithashtu udhëzuesin tonë në Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Por ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
