Cum să adăugați un Mega Menu pe site-ul dvs. WordPress (Pas cu Pas)

Meniurile mega îți permit să afișezi o gamă largă de linkuri și categorii de conținut într-un layout structurat, ușor de navigat.

Acest lucru poate îmbunătăți semnificativ experiența de navigare a vizitatorilor, făcând navigarea site-ului dvs. mai intuitivă și mai accesibilă.

La WPBeginner, folosim un meniu mega pentru a afișa cele mai importante linkuri noastre în partea de sus a paginii. Când utilizatorii dau clic pe el, se deschide un meniu derulant, dezvăluind linkuri cheie suplimentare. Acest aranjament ne-a permis să creăm un meniu de navigare curat și organizat, prezentând o gamă largă de opțiuni fără a face pagina să pară aglomerată.

În acest articol, îți vom arăta cum să adaugi cu ușurință un meniu mega pe site-ul tău WordPress, pas cu pas.

De ce să adăugați un Mega Menu pe site-ul dvs. WordPress?

WordPress vine cu un constructor drag-and-drop pe care îl puteți folosi pentru a crea tot felul de meniuri, inclusiv meniuri dropdown, meniuri de antet și multe altele. Există chiar și plugin-uri care vă permit să creați meniuri de navigare personalizate în temele WordPress.

Totuși, dacă site-ul tău are mult conținut, atunci s-ar putea să fie necesar să creezi un mega meniu. Acesta îți permite să adaugi dropdown-uri pe mai multe coloane la structura standard a meniului WordPress.

Puteți folosi meniuri mega pentru a vă organiza conținutul sub diferite titluri și subtitluri, astfel încât vizitatorii să poată găsi rapid ceea ce caută. De exemplu, dacă creezi un marketplace online, atunci ai putea aranja toate categoriile și subcategoriile de produse într-un meniu mega.

Mega meniurile pot afișa, de asemenea, conținut bogat vizitatorilor tăi, cum ar fi videoclipuri, text, căutare și postări recente.

Poți adăuga și imagini, ceea ce face meniurile mega mai ușor de scanat.

Acestea fiind spuse, să vedem cum puteți adăuga cu ușurință un meniu mega pe site-ul dvs. WordPress.

Cum să creați un meniu mega pentru site-ul dvs. WordPress

Cel mai simplu mod de a adăuga un mega meniu pe site-ul tău WordPress este folosind Max Mega Menu. Acest plugin îți permite să adaugi conținut bogat în mega meniurile tale, inclusiv videoclipuri, galerii de imagini, căutare și multe altele.

În acest fel, puteți crea meniuri mai captivante și mai utile.

Poți, de asemenea, să schimbi stilul meniului adăugând culori diferite, schimbând dimensiunea fontului și folosind pictograme diferite.

Mai întâi, va trebui să instalați și să activați pluginul. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.

Activați mega meniurile pe site-ul dvs. WordPress

După activare, accesează pagina Mega Menu » Locații meniu din tabloul de bord WordPress pentru a vedea toate zonele diferite unde poți adăuga un meniu mega.

Este posibil să vedeți opțiuni diferite în funcție de tema dumneavoastră WordPress.

Pentru a începe, va trebui să activezi mega meniurile în fiecare locație în care dorești să le folosești.

Pentru a face acest lucru, pur și simplu dă clic pentru a extinde o locație și apoi bifează căsuța „Activat”.

După aceea, puteți schimba ‘Event’-ul care va deschide mega meniul.

Setarea implicită este ‘Hover intent’, ceea ce înseamnă că vizitatorul trebuie să își plaseze mouse-ul peste mega meniu timp de câteva secunde pentru a-l declanșa. Acest lucru funcționează bine pentru majoritatea site-urilor WordPress, dar puteți, de asemenea, să deschideți meniul derulant ‘Effect’ și să alegeți ‘Hover’ sau ‘Click’ în schimb.

Dacă alegeți „Click”, vizitatorul va trebui să facă clic pentru a explora mega-meniul. Acest lucru poate fi util dacă vă temeți că vizitatorii ar putea declanșa meniul din greșeală, ceea ce poate fi frustrant.

Între timp, „Hover” va deschide mega-meniul dvs. imediat ce vizitatorul își mută cursorul deasupra acestuia. Acest lucru poate încuraja vizitatorii să exploreze diferite zone ale site-ului dvs., așa că ați putea dori să folosiți „Hover” pe paginile de destinație sau pe pagina principală a site-ului dvs. web.

După ce ai luat această decizie, poți schimba modul în care se deschide meniul folosind setările „Efect”.

Max Mega Menu are animații diferite pe care le puteți încerca, inclusiv estompare și glisare în sus. Puteți, de asemenea, schimba viteza animației. Încercând diferite animații, puteți crea un meniu mega care să atragă atenția vizitatorului.

Dacă nu dorești să folosești animații, pur și simplu deschide primul dropdown și selectează ‘Niciuna.’

În mod implicit, Mega Menu nu folosește animații pe dispozitivele mobile, deoarece smartphone-urile și tabletele au, de obicei, o putere de procesare mai mică. Cu toate acestea, dacă doriți să creați o animație unică pentru vizitatorii mobili, atunci puteți utiliza setările din zona „Efect (Mobil)”.

Dacă doriți să testați mega meniurile pe mobil, consultați ghidul nostru despre cum să vizualizați versiunea mobilă a site-urilor WordPress de pe un desktop.

Dacă ați ales „Click” din meniul derulant „Eveniment”, asigurați-vă că selectați apoi fila „Avansat”.

Aici, poți folosi „Comportamentul evenimentului de clic” pentru a defini ce se întâmplă atunci când vizitatorul dă clic pe mega meniul tău. De exemplu, al doilea clic ar putea închide meniul sau deschide un nou link.

Există mai multe setări pe care le puteți consulta, dar acestea ar trebui să fie suficiente pentru majoritatea blogurilor și site-urilor WordPress.

Când ești mulțumit de modul în care este configurat plugin-ul, apasă pe „Salvare Modificări”.

Pentru a activa mega meniurile pentru mai multe locații, urmați pur și simplu același proces descris mai sus.

Personalizați cum arată meniurile Mega pe site-ul dvs.

Următorul pas este configurarea aspectului meniurilor mega pe site-ul dvs. web.

Puteți face acest lucru selectând fila ‘Menu Themes’ din partea stângă a ecranului.

Pe acest ecran, puteți schimba direcția pictogramelor săgeată, puteți utiliza o înălțime diferită a liniei, puteți adăuga o umbră și multe altele.

Când ești mulțumit de setările tale, nu uita să dai clic pe „Salvează modificările”.

Dacă doriți să eliminați aceste modificări în orice moment, pur și simplu bifați caseta „Reset Widget Styling” și apoi faceți clic pe „Save Changes”.

Apoi, puteți personaliza bara de meniu, care este bara pe care vizitatorii o văd atunci când meniul este în starea sa implicită, restrânsă.

Pentru a face aceste modificări, dă clic pe fila „Bara de meniu” și apoi folosește setările pentru a schimba culoarea de fundal, spațierea, raza bordurii și multe altele.

Puteți chiar crea un gradient de culoare selectând două culori diferite în secțiunea „Fundal meniu”.

Dacă derulezi în jos, poți schimba aspectul meniului de nivel superior.

Aceasta este primul rând de elemente, care este vizibil atunci când mega-meniul este în starea sa restrânsă.

Deoarece sunt atât de importante, s-ar putea să vrei ca elementele de meniu de nivel superior să iasă în evidență.

De exemplu, în imaginea următoare, folosim o culoare de fundal diferită.

În secțiunea ‘Hover State’ puteți evidenția elementul de meniu de nivel superior selectat în prezent.

De exemplu, în imaginea următoare, folosim un efect de subliniere.

Acest lucru poate ajuta vizitatorul să vadă unde se află în meniu, ceea ce îl face deosebit de util pentru site-urile care necesită mega meniuri mari.

Dacă adaugi o stare de hover, derulează apoi în partea de jos a ecranului și bifează căsuța ‘Evidențiază elementul curent.’

După aceea, puteți schimba modul în care arată submeniul.

Acesta este meniul care apare sub un element părinte de nivel superior, așa cum poți vedea în imaginea următoare.

Pentru a personaliza submeniul, faceți clic pe fila „Mega Menus”.

Acum puteți utiliza aceste setări pentru a schimba culoarea de fundal a submeniului, a crește raza pentru a crea colțuri rotunjite, a adăuga spațiere și multe altele.

Adăugați conținut la mega meniurile dvs. folosind widget-uri. De exemplu, ați putea adăuga un widget Galerie și afișa cele mai populare produse WooCommerce, sau încorpora un nor de etichete în interiorul mega meniului. Aceste widget-uri pot oferi informații suplimentare sau pot încuraja vizitatorii să facă clic pe anumite elemente de meniu.

Puteți personaliza aspectul acestor widgeturi derulând la secțiunea „Widgeturi”. De exemplu, puteți schimba culoarea titlului widgetului, mări dimensiunea fontului, adăuga spațiere și ajusta alinierea.

Pe acest ecran, puteți, de asemenea, să personalizați modul în care vor arăta elementele de meniu de nivel secundar și de nivel terțiar pe site-ul dvs. web, blog sau piața online. Acestea sunt copiii elementelor de meniu de nivel superior.

Când construiești meniurile, este posibil să adaugi patru sau chiar mai multe niveluri pentru a crea un meniu mega imbricat. Dacă faci acest lucru, WordPress va folosi pur și simplu stilul de nivel al treilea pentru toate nivelurile ulterioare.

Puteți vedea acest lucru în acțiune în următoarea imagine. Al doilea nivel are text roșu, iar al treilea și al patrulea nivel folosesc același text albastru.

Când sunteți mulțumit de modul în care este configurat meniul, nu uitați să faceți clic pe „Salvați modificările”.

Cum să adăugați un mega meniu pe site-ul dvs. WordPress

După ce ați terminat de personalizat meniul mega, este timpul să îl adăugați pe site-ul dvs.

Pur și simplu accesați pagina Aspect » Meniuri din bara laterală de administrare.

Dacă doriți să transformați un meniu existent într-un mega meniu, deschideți meniul derulant „Selectați un meniu de editat” și alegeți-l din listă. Fiți conștienți că meniul pe care îl alegeți trebuie să fie alocat unei locații unde ați activat funcționalitatea de mega meniu.

Dacă vrei să începi de la zero, dă clic pe „Creează un meniu nou” și apoi tastează un titlu pentru noul tău mega meniu.

Puteți apoi selecta locația pe care doriți să o utilizați și faceți clic pe „Creare meniu”. Din nou, aceasta trebuie să fie o locație unde ați activat mega-meniurile.

Adăugați conținut la meniul dvs. WordPress

După aceea, adăugați toate paginile, postările, produsele WooCommerce și orice alt conținut doriți să includeți în mega meniu.

Pentru instrucțiuni pas cu pas, vă rugăm să consultați ghidul nostru pentru începători despre cum să adăugați un meniu de navigare în WordPress.

Apoi, va trebui să-ți aranjezi elementele în părinții și submeniurile pe care vrei să le folosești în meniul mega. Pentru a crea un submeniu, trage un element sub elementul părinte, apoi trage-l ușor spre dreapta înainte de a-l elibera.

Pentru a crea mai multe niveluri, pur și simplu continuă să tragi elementele spre dreapta, astfel încât să apară indentate unul sub altul. Acest lucru este similar cu crearea unui meniu dropdown în WordPress.

Activați funcția Meniu Mega

Când ați terminat, faceți clic pentru a extinde „Setări Mega Meniu Maxim” și bifați căsuța de lângă „Activare”.

În această casetă, puteți suprascrie și setările implicite ale meniului mega. Acest lucru vă permite să creați meniuri mega unice pentru diferite zone ale site-ului dvs. WordPress, așa că continuați și faceți orice modificări doriți.

După aceea, faceți clic pe „Salvare”.

Creați aspectul meniului mega

Acum, plasați cursorul mouse-ului peste primul element de nivel superior și veți vedea un nou buton „Meniu Mega”. Continuați și faceți clic pe buton.

Veți vedea acum toate setările pentru acest element de nivel superior.

În mod implicit, Max Mega Menu va folosi stilul flyout, unde submeniurile „ies în zbor” din lateral. Pentru a crea în schimb un mega meniu, deschideți meniul derulant „Mod de afișare submeniu” și alegeți fie „Aspect standard”, fie „Aspect grilă”.

Aspectul standard afișează toate submeniurile pe coloane.

Între timp, aspectul grilă vă permite să organizați elementele submeniu în coloane și rânduri.

Acest lucru este ideal dacă doriți să afișați mult conținut, cum ar fi toate produsele digitale din magazinul dvs. online, sau dacă aveți în minte un aspect foarte specific.

După selectarea aspectului standard sau de grilă, veți vedea toate submeniurile atribuite acestui element părinte.

Acum, poți continua și schimba modul în care sunt aranjate aceste elemente în meniul mega.

Dacă folosești aspectul standard, atunci poți schimba numărul de coloane folosind meniul dropdown din colțul din dreapta sus.

Dacă folosiți un layout de grilă, atunci puteți adăuga coloane și rânduri folosind butoanele ‘+Column’ și ‘+Row’.

Când ești mulțumit de aspect, poți aranja elementele submeniu în diferite coloane și rânduri folosind glisare și fixare.

După aceea, este timpul să schimbați cât spațiu ocupă fiecare element în coloană. Max Mega Menu afișează dimensiunea curentă ca o fracțiune din lățimea totală disponibilă.

De exemplu, în imaginea următoare, ambele coloane ocupă jumătate din spațiul disponibil.

Pentru a schimba dimensiunea unui element, pur și simplu faceți clic pe butoanele săgeată pentru a face fracția mai mare sau mai mică.

Creați un Mega Meniu prietenos cu dispozitivele mobile (doar layout grilă)

Implicit, Max Mega Menu va afișa același conținut pe dispozitive desktop și mobile. Aceasta poate fi o problemă cu layout-urile de tip grilă, deoarece smartphone-urile și tabletele au de obicei ecrane mai mici, iar derularea orizontală poate fi dificilă.

Dacă utilizați aspectul grilă, puteți crea mega meniuri diferite pentru dispozitivele mobile. De exemplu, ați putea folosi mai puține coloane, astfel încât utilizatorii să nu fie nevoiți să deruleze orizontal. În acest fel, puteți crea un meniu WordPress receptiv, pregătit pentru mobil.

Poți ascunde coloane sau rânduri întregi folosind pictograma „Ascuns pe mobil”, care arată ca un mic telefon mobil.

Pur și simplu activați și dezactivați pictograma pentru a ascunde și afișa conținut diferit pe desktop și mobil.

Adaugă Conținut Bogat cu Widget-uri Meniu Mega

Cu asta făcut, puteți începe să adăugați widget-uri la meniul mega. Acest lucru vă permite să afișați conținut suplimentar în submeniu, cum ar fi comentarii recente, videoclipuri, galerii și multe altele.

De exemplu, ai putea folosi imagini pentru a promova o ofertă pe magazinul tău online sau pentru a evidenția cele mai recente produse ale tale.

Pentru a adăuga un widget, pur și simplu faceți clic pentru a deschide meniul derulant „Selectați un widget…”.

Acum puteți alege un widget din listă.

WordPress va adăuga automat widgetul într-o coloană sau rând, dar îl puteți muta într-o nouă locație folosind drag and drop.

Pentru a configura widget-ul, dați click pe mica sa pictogramă de cheie.

Aceasta deschide o fereastră pop-up unde puteți adăuga conținut la widget și îi puteți schimba setările.

Veți vedea opțiuni diferite în funcție de tipul de widget pe care îl creați. De exemplu, dacă adăugați un widget de redare audio muzicală în meniul mega, veți vedea setări unde puteți încărca o piesă audio.

Toate widgeturile au un câmp 'Titlu' unde puteți adăuga text care va apărea deasupra widgetului.

Când ați terminat, faceți clic pe „Salvare” pentru a stoca modificările și apoi selectați „Închidere”. Pentru a adăuga mai multe widgeturi la meniul mega, urmați pur și simplu același proces descris mai sus.

Revizuiți setările implicite ale mega meniului

Apoi, faceți clic pe fila „Setări”.

Aici, puteți utiliza casete de selectare pentru a ascunde sau afișa conținut diferit în submeniu.

Poți, de asemenea, să ascunzi sau să afișezi submeniul pe dispozitive mobile și desktopuri, și să schimbi alinierea astfel încât submeniul să se deschidă în stânga sau în dreapta elementului părinte de nivel superior.

Dacă faci orice modificări la setările implicite, nu uita să dai clic pe „Salvează modificările”.

Adăugarea de pictograme de imagine la Mega Menu-ul WordPress

Pictogramele ajută vizitatorii să înțeleagă despre ce este vorba într-un element de meniu, fără a fi nevoiți să citească eticheta de navigare. Acest lucru este deosebit de util pentru meniurile mari, unde un vizitator poate prefera să parcurgă rapid conținutul, mai degrabă decât să citească fiecare etichetă de navigare.

Puteți folosi pictograme pentru a evidenția cel mai important conținut. De exemplu, ați putea încuraja vizitatorii să finalizeze achiziția adăugând o pictogramă de coș la meniul „Finalizare comandă”.

Pentru a adăuga pictograme de imagine la meniul de navigare, faceți clic pe fila „Pictogramă”.

Acum puteți alege orice pictogramă de bord din biblioteca încorporată sau puteți folosi propria imagine. Dacă faceți upgrade la Max Mega Menu Pro, veți avea acces și la alte fonturi de pictograme, Genericons și FontAwesome.

Finalizați configurarea mega meniului pe site-ul dvs. WordPress

După ce ați parcurs toate aceste setări, puteți închide fereastra pop-up pentru a reveni la pagina principală Aspect » Meniuri.

Puteți repeta acum acest proces pentru fiecare element părinte de nivel superior.

Când ești mulțumit de modul în care este configurat meniul mega, apasă pe butonul Salvare Meniu pentru a-l face live.

Acum, vizitează pur și simplu interfața site-ului tău pentru a vedea meniul mega în acțiune.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați un mega meniu pe site-ul dvs. WordPress. Puteți, de asemenea, să consultați ghidul nostru pas cu pas despre cum să adăugați un buton în meniul antetului WordPress și tutorialul nostru despre cum să creați un meniu de navigare plutitor fix în WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.