Želite li imati Divi Mega Menu sa slikama za ilustraciju sadržaj iz jelovnika? Pratite naš vodič o tome kako dodati slike u Mega izbornik?
Volimo interakciju sa slikama na internetu. Imajući to na umu, ima smisla dodati sliku svom web stranica kad god je moguće.
Osim toga, dodavanje slika u mega izbornik još je jedna sjajna prilika da svojim korisnicima pružite interakciju koja im je potrebna.
Slike također poboljšavaju izbornik privlačeći njihovu pažnju kako bi dodatno pojednostavile proces navigacije.
pregled
Prije nego što skočimo na ovaj vodič, pogledajmo rezultat koji želimo postići.
Izrada mega jelovnika
Da bismo započeli, prvo moramo napraviti jelovnik.
Za ovaj primjer, stvorit ćemo glavnu nadređenu stavku izbornika pod nazivom “Mega meni” s četiri stavke podizbornika ispod. Svaka od četiri stavke podizbornika ima tri stavke podizbornika.
Idite na WordPress nadzornu ploču i zatim kliknite Izgledi> Izbornici
Kliknite 'Stvori novi izbornik', dajte mu naziv i kliknite na 'Stvori izbornik'.
Provjerite jeste li omogućili svojstvo izbornika CSS klasa klikom na karticu Opcije zaslon u gornjem desnom kutu zaslona izbornika i provjera CSS klase.
Sada možete dodati svoje stavke jelovnika u novi jelovnik koji ste stvorili.
Kreirajmo prvo stavku izbornika koja će biti nadređena svim ostalim stavkama izbornika. Ovo je poveznica koja će prikazati vaš mega izbornik kada zadržite pokazivač.
Da biste stvorili ovu stavku izbornika, izradite prilagođenu vezu sa sljedećim parametrima:
- URL: http://#
- Naziv navigacije: Mega izbornik
- CSS klase: mega-izbornik
Sada rasporedite/povucite četiri stavke izbornika (svaka s tri svoje podstavke) da postanu podstavke glavne nadređene veze Mega izbornika.
Nakon što su veze dodane u izbornik, pomaknite se prema dolje do 'Postavke izbornika' na dnu zaslona izbornika i odaberite 'Glavni izbornik' za mjesto prikaza. Na kraju kliknite na 'Spremi izbornik'
Evo kako do sada izgleda naš mega jelovnik:
Dodavanje slika u mega meni
Sad kad je jelovnik spreman, vrijeme je da dodate slike.
Pročitajte također: Kako mogu plutati blog postove u DIVI?
Nabavite slike
Počnite dobivanjem četiri slike. Ove slike trebaju se odnositi na četiri stavke podizbornika (O nama, isporuka usluga, naš rad i kontaktirajte nas).
Pomoću uređivača fotografija smanjite i izrežite svaku sliku tako da bude 500 piksela široka i 300 piksela visoka.
Dodajte ove slike u WordPress biblioteku. Kliknite na Mediji > Dodaj.
Povucite svoje slike na stranicu da biste ih dodali ili kliknite 'Odaberite datoteke'
Umetnite slike u Mega izbornik
Vratite se na stranicu s izbornicima na WordPress nadzornoj ploči.
U ovom primjeru, poveznica na vrhu prvog stupca je "O".
Pritisnite strelicu s desne strane stavke "O". U okvir Navigacijska oznaka dodajte željenu sliku koristeći html oznaku IMG neposredno prije teksta "O". Oznaka slike trebala bi izgledati ovako:
<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
Da biste pronašli url slike, idite na Mediji > Medijska biblioteka, kliknite sliku koju želite dodati.
Na skočnom zaslonu Pojedinosti o privitku, pronađite URL u desnom odjeljku, a zatim kliknite 'Kopiraj URL u međuspremnik'
Sada se vratite na konfiguraciju stavki izbornika "O" na stranici izbornika i zamijenite tekst "Umetni URL slike" lijepljenjem URL-a svoje slike pomoću ctrl + v.
Prije izlaska iz opcija konfiguracije za stavku izbornika "O", pronađite tekstni okvir CSS Classes i unesite klasu "mega-link".
To će nam omogućiti da kasnije dodamo prilagođeni stil.
Ponovite ovaj postupak kako biste dodali sljedeće tri slike svakoj od stavki podizbornika s klasom "mega-link". (U ovom primjeru, preostala tri elementa su “Pružanje usluga”, “Naš rad” et " Kontaktirajte nas ".)
rezultat
Pristupite svom web stranica i zadržite pokazivač iznad veze mega izbornika. Sada bi vaš mega jelovnik trebao izgledati ovako:
Imajte na umu da kada prijeđete pokazivačem iznad svake od slika, slike blijede sa stavkom podizbornika neposredno ispod. To je zato što je slika dio te veze, pa će vas klik na nju odvesti na povezani URL.
Završni detalji
Za ovaj posljednji korak, dodajte prilagođeni css u izbornik kako bi font teksta bio veći i centriran. Također odredite radijus obruba oko slike kako bi izgledala čistije.
Na WordPress nadzornoj ploči idite na Divi> Opcije teme .
Pomaknite se prema dolje do okvira Custom CSS, unesite CSS ispod i kliknite 'Spremi promjene' :
.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;
}
Konačni rezultat
Završili ste!
Ako ste slijedili sve korake u ovom vodiču, ovo je rezultat koji biste trebali dobiti.
Preuzmite DIVI odmah!!!
Zaključak
Imate Divi mega izbornik sa slikama bez potrebe za korištenjem dodatka. Ova vrsta izbornika posebno dobro funkcionira za web stranice. e-commerce koji imaju puno sadržaj i zahtijevaju slike proizvoda. Nadamo se da će vam ovaj vodič biti koristan za vaše sljedeće Divi projekte.
Ako trebate više elemenata za dovršetak svojih projekata izrade web stranica, također pregledajte naš vodič na Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara raspravljati o tome.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
