Cum să adăugați un mega meniu la WordPress (+5 cele mai bune pluginuri)
Publicat: 2022-08-18Meniurile joacă un rol important în designul și funcționalitatea site-ului dvs. Ele ajută vizitatorii să navigheze între paginile dvs. și pot îmbunătăți gradul de utilizare general. Totuși, atunci când aveți o mulțime de conținut, să vă dați seama cum să-l afișați fără ca acesta să pară aglomerat sau haotic poate fi o provocare.
Aici intervin mega meniurile. Un mega meniu WordPress poate oferi site-ului dvs. un aspect mai profesional și poate ajuta oamenii să găsească mai ușor conținutul pe care îl caută. În plus, există mai multe metode pe care le poți folosi pentru a adăuga una pe site-ul tău.
În această postare, vom explica ce este un mega meniu și beneficiile utilizării unuia în WordPress. Apoi vă vom prezenta opțiunile pentru a crea unul și vă vom explora cinci dintre cele mai bune opțiuni de plugin pentru mega meniu.
Ce este un mega meniu în WordPress?
Meniul dvs. WordPress este structura pe care o utilizați pentru a organiza și afișa paginile site-ului dvs. Este de obicei în partea de sus a site-ului - deși poate fi și în lateral sau afișat într-un alt mod unic.
Pentru a accesa sistemul de meniu încorporat, puteți începe prin a vă conecta la site-ul dvs. WordPress. Apoi, din tabloul de bord administrativ, navigați la Aspect → Meniuri .
În mod implicit, WordPress utilizează meniuri standard, care arată o listă de pagini, uneori cu meniuri derulante pe o singură coloană. Nu există informații sau conținut suplimentar, cum ar fi imagini, descrieri etc. - este doar o serie de liste. De obicei, este destul de simplu și direct, dar vă limitează când vine vorba de numărul de pagini, volumul sau informațiile pe care le puteți include. Iată un exemplu de la WooCommerce:
Un mega meniu este un tip de meniu derulant care permite utilizatorilor să acceseze o cantitate mare de conținut într-un singur loc. Mega meniurile sunt adesea folosite pe site-urile de comerț electronic și devin din ce în ce mai populare și pe alte tipuri. Puteți vedea un exemplu pe site-ul Nalgene, care prezintă fotografii ale produselor, glisoare și alt conținut într-un stil mai mult orizontal:
Diferența cheie este că un mega meniu are de obicei mai multe coloane de conținut, în timp ce un meniu derulant tradițional are o singură coloană. Acest lucru permite un meniu mult mai robust și cuprinzător, care poate fi util în special pe site-urile web cu multe informații.
De ce să folosiți un mega meniu în WordPress?
Unul dintre avantajele utilizării unui mega meniu este că poate reduce numărul de clicuri necesare pentru a naviga la o anumită bucată de conținut. Acest lucru este grozav pentru vizitatorii care caută ceva specific pe site-ul dvs., dar îmbunătățește și experiența utilizatorului pentru vizitatorii pentru prima dată, ajutându-i să vă exploreze site-ul mai eficient.
Mega meniurile pot fi, de asemenea, folosite pentru a îmbunătăți aspectul site-ului dvs. web și chiar pentru a promova conținut specific sau pentru a încuraja acțiunile pe care doriți să le întreprindă vizitatorii. În plus, sunt extrem de personalizabile - astfel încât să poată juca restul mărcii dvs. pentru a oferi o experiență perfectă, atrăgătoare vizual.
Cum se creează un mega meniu WordPress
Există câteva moduri diferite de a crea un mega meniu în WordPress. O opțiune este să o faci manual, adăugând cod personalizat. Cealaltă opțiune (mai rapidă și mai ușoară) este utilizarea unui plugin. Să aruncăm o privire la cum să adăugați un mega meniu la WordPress folosind ambele metode.
Crearea manuală a unui mega meniu (fără plugin)
Dacă vă simțiți confortabil să lucrați cu fișierele site-ului dvs., aceasta poate fi o opțiune bună pentru a crea ceva extrem de unic.
Înainte de a face acest lucru, este important să faceți o copie de rezervă a site-ului dvs. WordPress. De asemenea, ați putea lua în considerare crearea unui site de pregătire pentru a vă construi și a testa mega-meniul înainte de a-l pune live. Acest lucru vă va ajuta să evitați orice probleme care întrerup funcționalitatea site-ului dvs. live.
Mai întâi, navigați la Aspect → Meniuri în tabloul de bord WordPress și denumiți meniul.
Faceți clic pe butonul Creare meniu . Trageți și plasați paginile pe care doriți să le includeți în mega-meniu, indentându-le ca submeniuri acolo unde este necesar.
Când ați terminat, puteți selecta Meniu Salvare .
Apoi, navigați la Managerul de fișiere din cPanel sau utilizați un client FTP (File Transfer Protocol) pentru a vă conecta la fișierele site-ului dvs. Găsiți foaia de stil a temei dvs. accesând / wp-content → /themes → /your-theme-or-child-theme → /style.css . În partea de jos, adăugați următoarea linie de cod:
.main-navigation ul:hover li ul, .main-navigation ul:hover li ul li ul { display: inherit; }
Acest lucru va face ca elementele din submeniu să apară atunci când cineva trece cu mouse-ul peste un element de nivel superior. Acum, vom personaliza codul pentru a-l face puțin mai atrăgător din punct de vedere vizual, asigurându-ne că fiecare element de sub-nivel se afișează în lățime completă, cu secțiuni de articole care apar unele lângă altele. Adăugați acest cod:
.main-navigation { position: relative; } .main-navigation li { position: static; } .main-navigation ul li:hover ul { display: inherit; position: absolute; left: 0; right: 0; width: 100%; } .main-navigation ul li:hover ul li ul { display: inherit; position: relative; left: 0; } .main-navigation ul li:hover ul li { float: left; position: static; display: block; padding-top: 1em; } .main-navigation ul li:hover ul li ul li { float: none; padding-top: 0; }
Vă puteți juca apoi cu stilul pentru a-l face să arate așa cum doriți, în conformitate cu marca dvs. și cu restul site-ului dvs. De exemplu, s-ar putea să doriți să schimbați culoarea de fundal a mega-meniului dvs. sau anumite elemente îngroșate. De asemenea, poate doriți să ajustați spațierea coloanelor sau să adăugați elemente suplimentare, cum ar fi fotografii. Dacă sunteți dezvoltator sau aveți o anumită experiență în cod, vă puteți crea mega meniul pentru a arăta așa cum doriți!
Vrei un ghid mai aprofundat? Tuts+ oferă o prezentare completă.
O altă opțiune de a crea un mega meniu fără un plugin este să verificați opțiunile încorporate ale temei. Unele, cum ar fi tema Hestia, includ mega opțiuni de meniu implicit. Acesta nu este întotdeauna cazul, totuși.
Crearea unui mega meniu cu un plugin WordPress
Dacă nu vă simțiți confortabil să editați fișierele site-ului sau tema nu oferă opțiuni de mega meniu încorporate, o altă metodă pe care o puteți utiliza pentru a crea un mega meniu în WordPress este cu un plugin. Există o mulțime de opțiuni disponibile, despre care le vom discuta în secțiunea următoare.
Deși aceasta este o opțiune mai sigură decât crearea manuală a uneia, ar trebui să faci o copie de rezervă a site-ului WordPress înainte de a face orice modificări.
Caracteristicile specifice și funcționalitatea pluginului vor varia în funcție de instrumentul pe care decideți să îl utilizați. Dar, în general, conceptul va fi același.
Vom folosi Max Mega Menu ca exemplu. Pentru a începe, puteți instala și activa pluginul pe site-ul dvs. WordPress.
În continuare, va trebui să activați funcționalitatea mega meniului navigând la Aspect → Meniuri . Puteți alege locația dorită pentru meniul dvs., apoi faceți clic pe caseta de lângă Activare.
Salvați modificările când ați terminat. Pentru a vă personaliza aspectul și setările mega meniului, puteți accesa Mega Meniu → Teme de meniu .
Aici veți găsi o varietate de opțiuni pentru stilarea meniului. Puteți modifica tipul de meniu, precum și aspectul și funcționalitatea acestuia.
Cinci cele mai bune pluginuri de mega meniu WordPress
Dacă decideți că doriți să utilizați un plugin WordPress mega meniu, există o mulțime de opțiuni din care să alegeți. Pe măsură ce le cercetați, este important să luați în considerare caracteristicile specifice pe care le căutați, precum și bugetul dvs. Având în vedere acest lucru, haideți să aruncăm o privire detaliată la cinci dintre cele mai bune pluginuri de mega meniu WordPress.
1. Max Mega Meniu
Max Mega Menu este un plugin incredibil de popular care vă permite să adăugați cu ușurință meniuri de înaltă calitate, personalizabile pe site-ul dvs. WordPress. Include un generator de drag-and-drop care este ușor de utilizat. De asemenea, acceptă mai multe mega meniuri pentru diferite locații de pe site-ul dvs.
Caracteristicile cheie ale Max Mega Menu:
- Locații de meniu multiple, configurabile individual
- Un generator de planuri de grilă
- Opțiuni de trecere cu mouse-ul în meniu și de tranziție
- Un constructor drag-and-drop
- Shortcodes
- Pictogramele elementelor de meniu
- O casetă de căutare
- Sigle de meniu
Avantajele Max Mega Menu:
- Există opțiuni gratuite și premium disponibile.
- Este ușor, cu cod curat.
- Include suport pentru WooCommerce și Easy Digital Downloads.
- Puteți plasa mega meniuri în mai multe locații.
- Widgeturile vă permit să adăugați hărți, formulare de contact și multe altele.
- De asemenea, puteți crea mega meniuri de la zero sau puteți utiliza meniurile existente.
- Navigarea prin tastatură asigură o mai bună accesibilitate.
Contra ale Max Mega Menu:
- Opțiunile avansate de personalizare sunt disponibile numai cu o licență pro.
- Nu există o încercare gratuită pentru planurile premium.
Ușurință de utilizare :
Max Mega Menu este foarte ușor de utilizat. Convertește automat meniurile existente în mega meniuri. Are o interfață ușor de utilizat, ușor de navigat. O licență pro include, de asemenea, actualizări și asistență prioritară.
Preț :
Max Mega Menu oferă o versiune gratuită cu opțiuni limitate de personalizare. Planurile profesionale cu funcții avansate încep de la 29 USD pentru o licență pentru un singur site. Aceasta include și un an de sprijin.
2. QuadMenu
QuadMenu este un alt plugin popular de mega meniu care este ușor de utilizat, indiferent de nivelul de experiență. Instrumentul flexibil include un generator intuitiv de glisare și plasare și o mare varietate de opțiuni de stil și personalizare pentru crearea meniurilor și submeniurilor pentru WordPress.
Caracteristicile cheie ale QuadMenu :
- Un constructor drag-and-drop
- Mai multe locații de meniu
- Meniuri în afara pânzei, lipicioase și verticale
- Opțiuni pentru alinierea legăturilor
- Meniuri derulante flotante
- Font Pictograme minunate și Fonturi Google
- Animații derulante
- O varietate de filtre
- Afișează widget-uri
Avantajele QuadMenu:
- Există atât o versiune gratuită, cât și o versiune premium.
- Este potrivit pentru începători și dezvoltatori.
- Sprijină teme pentru copii.
- Există integrare automată și manuală a meniului.
- Este intuitiv și ușor de utilizat.
- Există meniuri cu file și carusel disponibile cu versiunea pro.
Contra ale QuadMenu:
- Opțiunile avansate de stil necesită o licență pro.
- Există opțiuni limitate de previzualizare live.
Ușurință de utilizare :
QuadMenu este potrivit atât pentru începători, cât și pentru dezvoltatori. Generatorul de glisare și plasare face crearea și personalizarea mega meniurilor dvs. rapidă și ușoară.
Preț:
QuadMenu are o versiune gratuită. Licențele Pro sunt disponibile începând de la 30 USD pentru un singur site.
3. UberMenu
Dacă sunteți în căutarea unui generator de mega meniu premium, merită verificat UberMenu. Acest instrument puternic, bogat în funcții, folosește un sistem de grilă sofisticat care vă permite să construiți rapid un mega meniu cu aspect profesional.
Caracteristicile cheie ale UberMenu :
- Un sistem de grilă unic
- Peste 50 de setări de stil
- Generarea dinamică a articolelor
- Submeniuri bazate pe postări, categorii și multe altele
- Opțiunea de a adăuga file în meniuri
- Meniuri cu atingere
- Meniu derulant Tranziții CSS3
- Mai multe declanșatoare de meniu (pasare cu mouse-ul, intenție de trecere cu mouse-ul și clic)
- Diverse locații de meniu
- Aspecte flexibile
Avantajele UberMenu :
- Este utilizat pe scară largă și foarte apreciat în rândul proprietarilor de site-uri WordPress.
- Există opțiuni pentru a adăuga HTML personalizat, coduri scurte și widget-uri.
- Utilizează interfața nativă WordPress Customizer.
- Există teme de meniu nelimitate.
Contra ale UberMenu :
- Există doar o versiune premium disponibilă.
- În funcție de tema dvs., este posibil să nu fie cea mai bună opțiune dacă nu aveți abilități de programare CSS/PHP.
Ușurință de utilizare :
Utilizarea UberMenu va fi probabil ușoară pentru utilizatorii WordPress experimentați, deoarece interfața este construită pe Customizerul nativ. Puteți vizualiza previzualizări în timp real ale meniului dvs. pe măsură ce îl construiți. Pentru începătorii WordPress, totuși, acest lucru ar putea fi mai dificil de navigat decât o interfață intuitivă de constructor drag-and-drop.
Preț :
O licență UberMenu pentru un singur site costă 26 USD. Aceasta include șase luni de asistență pentru dezvoltatori.
4. ElementsKit
Dacă sunteți familiarizat și utilizați generatorul de pagini Elementor, ElementsKit este un excelent plugin de mega meniu de luat în considerare. Instrumentul include o bibliotecă extinsă de module personalizate, cu un generator de antet și subsol.
Caracteristicile cheie ale ElementsKit :
- O interfață de conținut live
- O bibliotecă de module personalizată
- Un generator de antet și subsol
- Defilare paralaxă
- Peste 200 de șabloane de pagină pre-proiectate
- Un widget de cronometru cu numărătoare inversă
- Animații derulante
- Meniuri în afara pânzei, lipicioase și verticale
- Font Pictograme minunate
- Teme luminoase și întunecate
- Două configurații de meniu pentru mobil
- CSS personalizat
Avantajele ElementsKit :
- Se integrează complet cu generatorul de pagini Elementor.
- Include funcționalitatea de glisare și plasare.
- Este începător și ușor de utilizat.
- Are personalizări pentru culorile textului pictogramelor și insignei.
- Are funcții WooCommerce încorporate.
- Oferă opțiuni avansate de mega meniu.
Dezavantajele ElementsKit :
- Nu este ideal decât dacă utilizați generatorul de pagini Elementor.
- Poate fi copleșitor dacă sunteți în căutarea doar pentru un instrument de generare de meniu mega.
Ușurință de utilizare :
ElementKits este un instrument simplu și versatil. Dacă nu sunteți familiarizat cu Elementor, este posibil să vă obișnuiți cu interfața. Deși, dacă utilizați deja pluginul pentru generatorul de pagini, probabil că veți înțelege acest supliment în cel mai scurt timp.
Preț :
ElementsKit oferă o versiune gratuită. Licențele premium încep de la 39 USD pe an pentru un singur site.
5. WP Mega Meniul
Dacă sunteți în căutarea unui instrument freemium simplu și direct pentru a construi mega meniuri în WordPress, WP Mega Menu este o altă opțiune solidă. Acest plugin este ușor de utilizat și oferă toate caracteristicile și funcțiile de bază necesare pentru a construi un mega meniu de calitate pentru o mare varietate de site-uri. Pentru un instrument gratuit, acesta vine și cu un set impresionant de opțiuni pentru personalizare și stil.
Caracteristicile cheie ale WP Mega Menu :
- Navigare intuitivă
- O interfață drag-and-drop
- Opțiunea de a crea și salva teme de meniu
- Logo, bară de căutare și imagini de fundal
- Fonturi Google și pictograme Font Awesome
- Icoane sociale
- Etichetarea meniului
Avantajele WP Mega Menu :
- Este complet gratuit de descărcat și utilizat, cu un upgrade pro disponibil.
- Este ușor de navigat și utilizat.
- Are caracteristici pe care alte plugin-uri le includ doar în versiunile premium.
- Are opțiunea de a crea și salva teme de meniu pentru a le utiliza pe mai multe site-uri web.
Contra ale WP Mega Menu :
- Îi lipsesc instrumentele concepute pentru dezvoltatori în comparație cu alte opțiuni de plugin.
- Nu există opțiuni lipicioase sau în afara pânzei cu versiunea gratuită.
Ușurință de utilizare :
WP Mega Menu este un plugin prietenos pentru începători, cu o mulțime de opțiuni. Vine cu o interfață intuitivă care este ușor de înțeles și de navigat.
Preț :
WP Mega Menu este gratuit. Dar oferă și planuri Premium care pornesc de la 29 USD pe an pentru o singură licență.
Comparație dintre pluginurile de top mega meniu pentru WordPress
Max Mega Meniu | QuadMenu | UberMenu | ElementsKit | WP Mega Meniu | |
Trage si lasa | da | da | Nu | da | da |
Pictograme | da | da | Cu extensie | da | da |
Widgeturi | da | da | da | da | da |
Lipicios | Premium | da | Cu extensie | Premium | Nu |
Vertical | Premium | da | da | da | Premium |
În afara pânzei | da | da | Nu | da | Nu |
Fonturi Google/Font Awesome | Premium | da | da | da | da |
Tranziții/Animații | da | da | da | Premium | Premium |
Prețuri | Gratuit; 29 USD pe an | Gratuit; 30 USD pentru un site | 26 USD pe an | Gratuit; 39 USD pe an | Gratuit; 29 USD pe an |
Întrebări frecvente (FAQs) despre mega meniuri
În acest moment, sperăm că aveți o înțelegere solidă despre cum să creați și să adăugați un mega meniu în WordPress. Dar să luăm un moment pentru a încheia cu câteva întrebări frecvente (FAQs).
Pot adăuga imagini și pictograme la un mega meniu WordPress?
Da, puteți adăuga imagini și pictograme la un mega meniu WordPress. Unele plugin-uri vin cu suport încorporat pentru acest lucru. De asemenea, puteți adăuga imagini și pictograme prin editarea codului site-ului dvs.
Pot adăuga un mega meniu în bara mea laterală WordPress?
Da, puteți adăuga un mega meniu în bara dvs. laterală WordPress. Există câteva plugin-uri diferite pe care le puteți folosi pentru a adăuga un mega meniu în bara laterală. Majoritatea pluginurilor care vă permit să afișați meniurile ca widget-uri vă vor permite și să le adăugați în bara laterală.
Începeți să vă personalizați meniurile WordPress
Meniurile joacă un rol esențial în designul și funcționalitatea site-ului dvs., deoarece pot fi utilizate pentru a îmbunătăți aspectul oricărui site. Deci, dacă aveți un site WordPress mare, cu mult conținut și pagini, s-ar putea să vă gândiți să adăugați un mega meniu.
După cum am discutat în această postare, există trei metode principale pe care le puteți folosi pentru a crea un mega meniu în WordPress. Una este să utilizați opțiunile temei pentru a adăuga un mega meniu. Al doilea este să codificați unul manual. Dacă niciunul dintre acestea nu este posibil sau dacă doriți doar să economisiți ceva timp, puteți încerca un plugin mega meniu precum Max Mega Menu, QuadMenu sau ElementsKit.
Doriți să îmbunătățiți și mai mult performanța site-ului dvs. WordPress? Pe lângă faptul că oferă backup-uri automate simple și alte funcții de securitate WordPress, Jetpack poate ajuta la creșterea vitezei și a UX-ului site-ului tău!