Divi: najbolja WordPress tema svih vremena!

više 901.000 preuzimanja, Divi je najpopularnija WordPress tema na svijetu. Kompletan je, jednostavan za korištenje i dolazi s više od 62 besplatnih predložaka.

Želite li imati Mega meni Divi sa slikama za ilustraciju sadržaja 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.

Mega Menu Divi sa slikama

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

Mega Menu Divi sa slikama

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:

Jednostavno izradite svoju web stranicu s Elementor-om

Elementor vam omogućuje stvaranje Jednostavno i besplatno bilo koje web stranice ili blog dizajn s profesionalnim izgledom. Prestanite plaćati puno za web stranicu koju možete sami napraviti.

  • 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:

Mega Menu Divi sa slikama

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.

kako dodati slike u mega izbornik

Povucite svoje slike na stranicu da biste ih dodali ili kliknite 'Odaberite datoteke'

kako dodati slike u mega izbornik

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:

Otkrijte najbolje alate za svoju web stranicu

Preuzmite najbolje dodatke i WordPress teme na Envato i jednostavno stvorite svoju web stranicu. Već više od preuzimanja 49.720.000. [ISKLJUČIVO]

<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
kako dodati slike u mega izbornik

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'

kako dodati slike u mega izbornik

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.

kako dodati slike u mega izbornik

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:

Mega Menu Divi sa slikama

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!

Preko 11 milijuna alata za preuzimanje

Envato Elements nudi najbolje resurse za izradu i razvoj svih aspekata vaše web stranice. Pronaći ćete milijune WordPress predložaka, grafike, audio izvora i još mnogo toga. Savršeno za početnike.

Ako ste slijedili sve korake u ovom vodiču, ovo je rezultat koji biste trebali dobiti.

Mega Menu Divi sa slikama

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 mnogo sadržaja 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đuvremenuovaj članak podijelite na svojim različitim društvenim mrežama.

...

%d blogeri vole ovu stranicu: