Doriți să aveți un Mega Meniu Divi cu imagini pentru a ilustra cuprins din meniu? Urmați tutorialul nostru despre cum să adăugați imagini la un Mega Meniu?
Ne place să interacționăm cu imagini online. Având în vedere acest lucru, este logic să adăugați o imagine la dvs site-ul web ori de câte ori este posibil.
În plus, adăugarea de imagini într-un mega meniu este o altă oportunitate excelentă de a oferi utilizatorilor interacțiunea de care au nevoie.
De asemenea, imaginile îmbunătățesc meniul atrăgându-le atenția pentru a simplifica și mai mult procesul de navigare.
studiu
Înainte de a trece în acest tutorial, să aruncăm o privire asupra rezultatului pe care vrem să-l obținem.
Crearea mega meniului
Pentru a începe, trebuie mai întâi să creăm meniul.
Pentru acest exemplu, vom crea un element de meniu principal numit „Mega meniu” cu patru elemente de submeniu de mai jos. Fiecare dintre cele patru elemente de sub-meniu are trei elemente de sub-sub-meniu.
Accesați tabloul de bord WordPress, apoi faceți clic pe Apariții> Meniuri
Faceți clic pe „Creează un meniu nou”, dați-i un nume și faceți clic pe „Creează meniu”.
Asigurați-vă că activați proprietatea meniului CSS Classes făcând clic pe filă Opţiuni ecran din partea dreaptă sus a ecranului Meniuri și verificare Clasele CSS.
Acum puteți adăuga elementele de meniu în noul meniu creat.
Să creăm mai întâi elementul de meniu care va fi părintele tuturor celorlalte elemente de meniu. Acesta este linkul care va afișa mega meniul dvs. la hover.
Pentru a crea acest element de meniu, creați o legătură personalizată cu următorii parametri:
- URL: http://#
- Titlul navigației: Mega Menu
- Clase CSS: mega-meniu
Acum aranjați/trageți cele patru elemente de meniu (fiecare cu trei sub-articole proprii) pentru a deveni sub-articole ale link-ului principal Mega Menu principal.
Odată ce linkurile sunt adăugate în meniu, derulați în jos până la „Reglages du menu' în partea de jos a ecranului de meniu și selectați 'Meniu principal' pentru locația de afișare. În cele din urmă, faceți clic pe „Salvați meniul”
Iată cum arată mega meniul nostru până acum:
Adăugarea de imagini în mega meniu
Acum că meniul este gata, este timpul să adăugați imaginile.
Citiți și: Cum pot afișa postările de blog în DIVI?
Obțineți imaginile
Începeți prin a obține patru imagini. Aceste imagini ar trebui să se refere la cele patru elemente din submeniu (Despre, livrarea serviciilor, munca noastră și contactați-ne).
Utilizați un editor de fotografii pentru a reduce și decupați fiecare imagine pentru a avea 500 px lățime și 300 px înălțime.
Adăugați aceste imagini în biblioteca WordPress. Click pe Media > Adăugați.
Trageți imaginile în pagină pentru a le adăuga sau faceți clic pe „Selectati fisierele"
Inserați imagini în Mega Menu
Reveniți la pagina de meniuri din tabloul de bord WordPress.
În acest exemplu, linkul din partea de sus a primei coloane este " Despre ".
Faceți clic pe săgeata din dreapta articolului " Despre ". În caseta Etichetă de navigare, adăugați imaginea dorită folosind eticheta html img direct înaintea textului " Despre ". Eticheta de imagine ar trebui să arate astfel:
<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
Pentru a găsi adresa URL a imaginii, accesați Media > Biblioteca media, dați clic pe imaginea pe care doriți să o adăugați.
În ecranul pop-up Detalii atașament, găsiți adresa URL în secțiunea din dreapta, apoi faceți clic „Copiați adresa URL în clipboard”
Acum reveniți la configurația elementului de meniu " Despre " pe pagina de meniu și înlocuiți textul „Inserați adresa URL a imaginii” prin lipirea adresei URL a imaginii dvs. folosind ctrl + v.
Înainte de a părăsi opțiunile de configurare pentru elementul de meniu " Despre ", găsiți caseta de text CSS Classes și introduceți clasa „mega-link”.
Acest lucru ne va permite să adăugăm un stil personalizat mai târziu.
Repetați acest proces pentru a adăuga următoarele trei imagini la fiecare dintre elementele din submeniu cu clasa „mega-link”. (În acest exemplu, restul de trei elemente sunt „Livrarea serviciilor”, „Lucrarea noastră” et " Contactaţi-ne ".)
rezultat
Accesați-vă site-ul web și plasați cursorul peste linkul mega meniu. Acum mega meniul tău ar trebui să arate astfel:
Rețineți că atunci când treceți cu mouse-ul peste fiecare dintre imagini, imaginile se estompează cu elementul de submeniu direct de mai jos. Acest lucru se datorează faptului că imaginea face parte din acel link, așa că făcând clic pe ea, veți ajunge la adresa URL asociată.
Retușuri finale
Pentru acest ultim pas, adăugați niște CSS personalizate în meniu pentru a face fontul textului mai mare și centrat. Dați, de asemenea, o rază de margine în jurul imaginii pentru a o face să pară mai curată.
În tabloul de bord WordPress, accesați Divi> Opțiuni tematice .
Derulați în jos până la caseta CSS personalizat, introduceți CSS de mai jos și faceți clic 'Salvează modificările' :
.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;
}
Rezultat final
Tu ai terminat !
Dacă ai urmat toți pașii din acest tutorial, iată rezultatul pe care ar trebui să-l obții.
Descărcați DIVI acum!!!
Concluzie
Ai un mega meniu Divi cu imagini fără a fi nevoie să folosești un plugin. Acest tip de meniu funcționează deosebit de bine pentru site-urile web. e-commerce care au multe cuprins și necesită imagini ale produselor. Sperăm că acest tutorial vă va fi util pentru următoarele proiecte Divi.
Dacă aveți nevoie de mai multe elemente pentru a finaliza proiectele dvs. de creare a site-ului web, răsfoiți și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
