Come aggiungere un mega menu a WordPress (+5 migliori plugin)

I menu svolgono un ruolo importante nel design e nella funzionalità del tuo sito web. Aiutano i visitatori a navigare tra le tue pagine e possono migliorare l'usabilità generale. Tuttavia, quando hai molti contenuti, capire come visualizzarli senza che sembri affollato o caotico può essere difficile.

È qui che entrano in gioco i mega menu. Un mega menu di WordPress può dare al tuo sito Web un aspetto più professionale e aiutare le persone a trovare più facilmente i contenuti che stanno cercando. Inoltre, ci sono diversi metodi che puoi utilizzare per aggiungerne uno al tuo sito web.

In questo post, spiegheremo cos'è un mega menu e i vantaggi dell'utilizzo in WordPress. Quindi ti guideremo attraverso le tue opzioni per crearne uno ed esploreremo cinque delle migliori opzioni di plug-in per mega menu.

Che cos'è un mega menu in WordPress?

Il menu di WordPress è la struttura che utilizzi per organizzare e visualizzare le pagine del tuo sito web. Di solito si trova nella parte superiore del sito, anche se può anche essere laterale o mostrato in un altro modo unico.

Per accedere al sistema di menu integrato, puoi iniziare accedendo al tuo sito WordPress. Quindi, dalla dashboard dell'amministratore, vai su Aspetto → Menu .

Per impostazione predefinita, WordPress utilizza menu standard, che mostrano un elenco di pagine, a volte con menu a discesa a una colonna. Non ci sono informazioni aggiuntive o contenuti come immagini, descrizioni, ecc. - è solo una serie di elenchi. In genere è piuttosto semplice e diretto, ma ti limita quando si tratta del numero di pagine, del volume o delle informazioni che puoi includere. Ecco un esempio da WooCommerce:

Un mega menu è un tipo di menu a discesa che consente agli utenti di accedere a una grande quantità di contenuti in un unico posto. I mega menu sono spesso utilizzati sui siti Web di eCommerce e stanno diventando sempre più popolari anche su altri tipi. Puoi vedere un esempio sul sito di Nalgene, che mostra le foto dei prodotti, i cursori e altri contenuti in uno stile più orizzontale:

La differenza fondamentale è che un mega menu ha in genere più colonne di contenuto, mentre un tradizionale menu a discesa ha solo una colonna. Ciò consente un menu molto più robusto e completo, che può essere particolarmente utile su siti Web con molte informazioni.

Perché usare un mega menu in WordPress?

Uno dei vantaggi dell'utilizzo di un mega menu è che può ridurre il numero di clic necessari per navigare su un particolare contenuto. Questo è ottimo per i visitatori che cercano qualcosa di specifico sul tuo sito web, ma migliora anche l'esperienza utente per i visitatori che visitano per la prima volta, aiutandoli a esplorare il tuo sito in modo più efficiente.

I mega menu possono anche essere utilizzati per migliorare l'aspetto del tuo sito Web e persino promuovere contenuti specifici o incoraggiare le azioni che desideri che i visitatori intraprendano. Inoltre, sono altamente personalizzabili, quindi possono giocare con il resto del tuo marchio per offrire un'esperienza visivamente accattivante e senza interruzioni.

Come creare un mega menu di WordPress

Esistono un paio di modi diversi per creare un mega menu in WordPress. Un'opzione è farlo manualmente, aggiungendo codice personalizzato. L'altra opzione (più semplice e veloce) è utilizzare un plug-in. Diamo un'occhiata a come aggiungere un mega menu a WordPress utilizzando entrambi questi metodi.

Creazione manuale di un mega menu (senza plug-in)

Se ti senti a tuo agio nel lavorare con i file del tuo sito, questa può essere una buona opzione per creare qualcosa di estremamente unico.

Prima di farlo, è importante eseguire il backup del tuo sito WordPress. Potresti anche prendere in considerazione la creazione di un sito di staging per costruire e testare il tuo mega menu prima di pubblicarlo. Questo ti aiuterà a evitare eventuali problemi che interrompono la funzionalità sul tuo sito live.

Per prima cosa, vai su Aspetto → Menu nella dashboard di WordPress e dai un nome al tuo menu.

Fare clic sul pulsante Crea menu . Trascina e rilascia le pagine che desideri includere nel mega menu, inserendole come sottomenu dove necessario.

Quando hai finito, puoi selezionare Salva menu .

Quindi, vai al File Manager del tuo cPanel o usa un client FTP (File Transfer Protocol) per connetterti ai file del tuo sito web. Trova il foglio di stile del tuo tema andando su / wp-content → /themes → /your-theme-or-child-theme → /style.css . In fondo, aggiungi la seguente riga di codice:

 .main-navigation ul:hover li ul, .main-navigation ul:hover li ul li ul { display: inherit; }

Ciò farà apparire le voci del sottomenu quando qualcuno passa con il mouse su un elemento di livello superiore. Ora personalizzeremo il codice per renderlo un po' più accattivante dal punto di vista visivo, assicurandoci che ogni elemento di livello secondario venga visualizzato a tutta larghezza, con sezioni di elementi che appaiono una accanto all'altra. Aggiungi questo codice:

 .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; }

Puoi quindi giocare con lo stile per farlo apparire come desideri, in linea con il tuo marchio e il resto del tuo sito. Ad esempio, potresti voler cambiare il colore di sfondo del tuo mega menu o mettere in grassetto determinati elementi. Potresti anche voler regolare la spaziatura delle colonne o aggiungere elementi extra come le foto. Se sei uno sviluppatore o hai una certa esperienza nel codice, puoi creare il tuo mega menu in modo che appaia come preferisci!

Vuoi una guida più approfondita? Tuts+ offre una guida completa.

Un'altra opzione per creare un mega menu senza plug-in è controllare le opzioni integrate del tuo tema. Alcuni, come il tema Hestia, includono opzioni di menu mega per impostazione predefinita. Questo non è sempre il caso, però.

Creazione di un mega menu con un plugin per WordPress

Se non ti senti a tuo agio nel modificare i file del tuo sito o il tuo tema non offre opzioni di mega menu integrate, un altro metodo che puoi utilizzare per creare un mega menu in WordPress è con un plug-in. Ci sono molte opzioni disponibili, di cui parleremo nella prossima sezione.

Sebbene questa sia un'opzione più sicura rispetto alla creazione manuale, dovresti comunque eseguire il backup del tuo sito WordPress prima di apportare modifiche.

Le caratteristiche e le funzionalità specifiche del plugin variano a seconda dello strumento che decidi di utilizzare. Ma nel complesso, il concetto sarà lo stesso.

Useremo Max Mega Menu come esempio. Per iniziare, puoi installare e attivare il plug-in sul tuo sito Web WordPress.

Successivamente, dovrai abilitare la funzionalità del mega menu navigando su Aspetto → Menu . Puoi scegliere la posizione desiderata per il tuo menu, quindi fare clic sulla casella accanto ad Abilita.

Salva le modifiche quando hai finito. Per personalizzare l'aspetto e le impostazioni del tuo mega menu, puoi andare su Mega Menu → Temi menu .

Qui troverai una varietà di opzioni per lo stile del menu. È possibile modificare il tipo di menu, nonché l'aspetto e la funzionalità di esso.

I cinque migliori plugin per mega menu di WordPress

Se decidi di utilizzare un plug-in WordPress per mega menu, ci sono molte opzioni tra cui scegliere. Durante la ricerca, è importante considerare le caratteristiche specifiche che stai cercando e il tuo budget. Con questo in mente, diamo uno sguardo dettagliato a cinque dei migliori plugin per mega menu di WordPress.

1. Menu Mega massimo

Max Mega Menu è un plug-in incredibilmente popolare che ti consente di aggiungere facilmente menu personalizzabili di alta qualità al tuo sito WordPress. Include un builder drag-and-drop facile da usare. Supporta anche più mega menu per varie posizioni nel tuo sito.

Caratteristiche principali di Max Mega Menu:

• Posizioni di menu multiple, configurabili individualmente
• Un costruttore di layout di griglia
• Menu al passaggio del mouse e opzioni di transizione
• Un costruttore drag-and-drop
• codici brevi
• Icone delle voci di menu
• Una casella di ricerca
• Loghi del menu

Pro di Max Mega Menu:

• Sono disponibili opzioni gratuite e premium.
• È leggero, con codice pulito.
• Include il supporto per WooCommerce e Easy Digital Downloads.
• Puoi posizionare mega menu in più posizioni.
• I widget ti consentono di aggiungere mappe, moduli di contatto e altro.
• Puoi anche creare mega menu da zero o utilizzare i menu esistenti.
• La navigazione tramite tastiera migliora l'accessibilità.

Contro di Max Mega Menu:

• Le opzioni di personalizzazione avanzate sono disponibili solo con una licenza pro.
• Non è prevista una prova gratuita per i piani premium.

Facilità d'uso :

Max Mega Menu è molto facile da usare. Converte automaticamente i menu esistenti in mega menu. Ha un'interfaccia user-friendly che è semplice da navigare. Una licenza pro include anche aggiornamenti e supporto prioritario.

Prezzo :

Max Mega Menu offre una versione gratuita con opzioni di personalizzazione limitate. I piani Pro con funzionalità avanzate partono da $ 29 per una licenza per sito singolo. Questo include anche un anno di supporto.

2. Menu Quad

QuadMenu è un altro popolare plug-in per mega menu facile da usare indipendentemente dal tuo livello di esperienza. Lo strumento flessibile include un intuitivo builder drag-and-drop e un'ampia varietà di opzioni di stile e personalizzazione per la creazione di menu e sottomenu per WordPress.

Caratteristiche principali di QuadMenu :

• Un costruttore drag-and-drop
• Posizioni di menu multiple
• Menu fuori tela, permanenti e verticali
• Opzioni per l'allineamento dei collegamenti
• Menu a discesa mobili
• Font Icone fantastiche e Google Fonts
• Animazioni a discesa
• Una varietà di filtri
• Visualizza i widget

Pro di QuadMenu:

• C'è sia una versione gratuita che premium.
• È adatto a principianti e sviluppatori.
• Supporta temi figlio.
• C'è l'integrazione del menu automatica e manuale.
• È intuitivo e facile da usare.
• Sono disponibili menu a schede e a carosello con la versione pro.

Contro di QuadMenu:

• Le opzioni di stile avanzate richiedono una licenza pro.
• Sono disponibili opzioni di anteprima dal vivo limitate.

Facilità d'uso :

QuadMenu è adatto sia per principianti che per sviluppatori. Il builder drag-and-drop rende la creazione e la personalizzazione dei tuoi mega menu semplice e veloce.

Prezzo:

QuadMenu ha una versione gratuita. Le licenze Pro sono disponibili a partire da $ 30 per un singolo sito.

3. UberMenu

Se stai cercando un mega menu builder premium, vale la pena dare un'occhiata a UberMenu. Questo strumento potente e ricco di funzionalità utilizza un sofisticato sistema a griglia che ti consente di creare rapidamente un mega menu dall'aspetto professionale.

Caratteristiche principali di UberMenu :

• Un sistema di griglia unico
• Più di 50 impostazioni di stile
• Generazione dinamica degli articoli
• Sottomenu basati su post, categorie e altro
• L'opzione per aggiungere schede all'interno dei menu
• Menu abilitati al tocco
• Transizioni CSS3 a discesa
• Attivatori di menu multipli (passa il mouse, intento al passaggio del mouse e fai clic)
• Varie posizioni di menu
• Layout flessibili

Pro di UberMenu :

• È ampiamente utilizzato e molto apprezzato dai proprietari di siti WordPress.
• Ci sono opzioni per aggiungere HTML, shortcode e widget personalizzati.
• Utilizza l'interfaccia nativa di personalizzazione di WordPress.
• Ci sono temi di menu illimitati.

Contro di UberMenu :

• È disponibile solo una versione premium.
• A seconda del tuo tema, potrebbe non essere l'opzione migliore se non hai competenze di programmazione CSS/PHP.

Facilità d'uso :

L'utilizzo di UberMenu sarà probabilmente un gioco da ragazzi per gli utenti WordPress esperti perché l'interfaccia è basata sul Customizer nativo. Puoi visualizzare le anteprime in tempo reale del tuo menu mentre lo costruisci. Per i principianti di WordPress, tuttavia, questo potrebbe essere più difficile da navigare rispetto a un'interfaccia di creazione drag-and-drop intuitiva.

Prezzo :

Una licenza UberMenu per un singolo sito costa $ 26. Ciò include sei mesi di supporto per gli sviluppatori.

4. Kit di elementi

Se hai familiarità e utilizzi il generatore di pagine Elementor, ElementsKit è un eccellente plug-in per mega menu da considerare. Lo strumento include un'ampia libreria di moduli personalizzati, con un generatore di intestazioni e piè di pagina.

Caratteristiche principali di ElementsKit :

• Un'interfaccia di contenuti live
• Una libreria di moduli personalizzata
• Un costruttore di intestazioni e piè di pagina
• Scorrimento della parallasse
• Oltre 200 modelli di pagina predefiniti
• Un widget per il conto alla rovescia
• Animazioni a discesa
• Menu fuori tela, appiccicosi e verticali
• Font Icone fantastiche
• Temi chiari e scuri
• Due layout di menu mobili
• CSS personalizzato

Pro di ElementsKit :

• Si integra completamente con il generatore di pagine Elementor.
• Include la funzionalità di trascinamento della selezione.
• È per principianti e facile da usare.
• Ha personalizzazioni per i colori del testo di icone e badge.
• Ha funzionalità WooCommerce integrate.
• Offre opzioni avanzate di mega menu.

Contro di ElementsKit :

• Non è l'ideale a meno che tu non usi il generatore di pagine Elementor.
• Può essere travolgente se stai solo cercando un mega strumento di creazione di menu.

Facilità d'uso :

ElementKits è uno strumento semplice e versatile. Se non hai familiarità con Elementor, l'interfaccia potrebbe richiedere del tempo per abituarsi. Anche se, se utilizzi già il plug-in per la creazione di pagine, probabilmente imparerai a usare questo componente aggiuntivo in pochissimo tempo.

Prezzo :

ElementsKit offre una versione gratuita. Le licenze Premium partono da $ 39 all'anno per un singolo sito.

5. Menu Mega WP

Se stai cercando uno strumento freemium semplice e diretto per creare mega menu in WordPress, WP Mega Menu è un'altra solida opzione. Questo plugin è facile da usare e fornisce tutte le caratteristiche e le funzioni di base necessarie per creare un mega menu di qualità per un'ampia varietà di siti. Per essere uno strumento gratuito, include anche un impressionante set di opzioni per la personalizzazione e lo stile.

Caratteristiche principali di WP Mega Menu :

• Navigazione intuitiva
• Un'interfaccia drag-and-drop
• L'opzione per creare e salvare temi di menu
• Logo, barra di ricerca e immagini di sfondo
• Icone Google Fonts e Font Awesome
• Icone sociali
• Etichettatura del menu

Pro di WP Mega Menu :

• È completamente gratuito da scaricare e utilizzare, con un aggiornamento pro disponibile.
• È facile da navigare e utilizzare.
• Ha funzionalità che altri plugin includono solo nelle versioni premium.
• Ha la possibilità di creare e salvare temi di menu da utilizzare su più siti Web.

Contro di WP Mega Menu :

• Manca di strumenti progettati per gli sviluppatori rispetto ad altre opzioni di plugin.
• Non ci sono opzioni appiccicose o fuori tela con la versione gratuita.

Facilità d'uso :

WP Mega Menu è un plugin adatto ai principianti con molte opzioni. Viene fornito con un'interfaccia intuitiva facile da capire e navigare.

Prezzo :

WP Mega Menu è gratuito. Ma offre anche piani Premium a partire da $ 29 all'anno per una singola licenza.

Confronto dei migliori plug-in mega menu per WordPress

Domande frequenti (FAQ) sui mega menu

A questo punto, si spera, tu abbia una solida comprensione di come creare e aggiungere un mega menu in WordPress. Ma prendiamoci un momento per concludere con alcune domande frequenti (FAQ).

Posso aggiungere immagini e icone a un mega menu di WordPress?

Sì, puoi aggiungere immagini e icone a un mega menu di WordPress. Alcuni plugin sono dotati di supporto integrato per questo. In alternativa, puoi anche aggiungere immagini e icone modificando il codice del tuo sito web.

Posso aggiungere un mega menu alla mia barra laterale di WordPress?

Sì, puoi aggiungere un mega menu alla barra laterale di WordPress. Esistono diversi plugin che puoi utilizzare per aggiungere un mega menu alla barra laterale. La maggior parte dei plug-in che ti consentono di visualizzare i menu come widget ti consentono anche di aggiungerli alla barra laterale.

Inizia a personalizzare i menu di WordPress

I menu svolgono un ruolo essenziale nel design e nella funzionalità del tuo sito Web perché possono essere utilizzati per migliorare l'aspetto grafico di qualsiasi sito. Quindi, se hai un grande sito Web WordPress con molti contenuti e pagine, potresti prendere in considerazione l'aggiunta di un mega menu.

Come abbiamo discusso in questo post, ci sono tre metodi principali che puoi utilizzare per creare un mega menu in WordPress. Uno è usare le opzioni del tuo tema per aggiungere un mega menu. Il secondo è codificarne uno manualmente. Se nessuno di questi è possibile, o se vuoi semplicemente risparmiare un po' di tempo, puoi provare un plug-in per mega menu come Max Mega Menu, QuadMenu o ElementsKit.

Vuoi migliorare ulteriormente le prestazioni del tuo sito WordPress? Oltre a fornire backup automatici semplici e altre funzionalità di sicurezza di WordPress, Jetpack può aiutarti ad aumentare la velocità e l'esperienza utente del tuo sito!