Come aggiungere un Mega Menu al vostro sito WordPress (passo dopo passo)

I mega menu consentono di visualizzare un’ampia varietà di link e categorie di contenuti in un layout strutturato e facile da navigare.

Questo può migliorare notevolmente l’esperienza di navigazione dei visitatori, rendendo la navigazione del sito più intuitiva e accessibile.

Noi di WPBeginner utilizziamo un mega menu per visualizzare i link più importanti nella parte superiore della pagina. Quando gli utenti ci cliccano sopra, si apre un menu a tendina che rivela altri collegamenti chiave. Questa impostazione ci ha permesso di creare un menu di navigazione pulito e organizzato, che presenta un’ampia gamma di opzioni senza ingombrare la pagina.

In questo articolo vi mostreremo come aggiungere facilmente un mega menu al vostro sito WordPress, passo dopo passo.

Perché aggiungere un Mega Menu al vostro sito WordPress?

WordPress è dotato di un costruttore drag-and-drop che si può utilizzare per creare tutti i tipi di menu, compresi quelli a discesa, quelli per l’header e altri ancora. Esistono anche plugin che consentono di creare menu di navigazione personalizzati nei temi WordPress.

Tuttavia, se il sito ha molti contenuti, potrebbe essere necessario creare un mega menu. Questo vi permette di aggiungere alla struttura standard del menu di WordPress delle tendine a più colonne.

Potete usare i mega menu per organizzare i vostri contenuti sotto diverse voci e sottovoci, in modo che i visitatori possano trovare rapidamente ciò che stanno cercando. Ad esempio, se create un mercato online, potreste organizzare tutte le categorie e le sottocategorie di prodotti in un mega menu.

I menu mega possono anche mostrare ai visitatori contenuti ricchi, come video, testo, ricerche e post recenti.

È inoltre possibile aggiungere immagini, che rendono i mega menu più facili da scansionare.

Detto questo, vediamo come aggiungere facilmente un mega menu al vostro sito WordPress.

Come creare un mega menu per il vostro sito WordPress

Il modo più semplice per aggiungere un mega menu al vostro sito WordPress è utilizzare Max Mega Menu. Questo plugin vi permette di aggiungere contenuti ricchi ai vostri mega menu, tra cui video, gallerie di immagini, ricerche e altro ancora.

In questo modo è possibile creare menu più coinvolgenti e utili.

È inoltre possibile modificare lo stile del menu aggiungendo colori diversi, cambiando la dimensione dei caratteri e utilizzando icone diverse.

Per prima cosa, è necessario installare e attivare il plugin. Se avete bisogno di aiuto, consultate la nostra guida su come installare un plugin di WordPress.

Abilitate i mega menu sul vostro sito WordPress

Dopo l’attivazione, andare alla pagina Mega Menu ” Posizioni del menu dalla dashboard di WordPress per vedere tutte le diverse aree in cui è possibile aggiungere un mega menu.

Potreste vedere opzioni diverse a seconda del vostro tema WordPress.

Per iniziare, è necessario abilitare i mega menu in tutti i luoghi in cui si desidera utilizzarli.

A tal fine, è sufficiente fare clic per espandere una posizione e selezionare la casella “Abilitato”.

Successivamente, è possibile modificare l'”Evento” che aprirà il mega menu.

L’impostazione predefinita è “Intento Hover”, il che significa che il visitatore deve passare il mouse sul mega menu per alcuni secondi per attivarlo. Questa impostazione funziona bene per la maggior parte dei siti WordPress, ma si può anche aprire il menu a tendina “Effetto” e scegliere invece “Hover” o “Click”.

Se si sceglie “Clicca”, il visitatore dovrà fare clic per esplorare il mega menu. Questo può essere utile se si teme che i visitatori possano attivare il menu per sbaglio, il che può essere frustrante.

Nel frattempo, ‘Hover’ aprirà il vostro mega menu non appena il visitatore vi passerà sopra con il mouse. Questo può incoraggiare i visitatori a esplorare diverse aree del sito, per cui si consiglia di utilizzare ‘Hover’ sulle pagine di destinazione o sulla homepage del sito.

Dopo aver preso questa decisione, è possibile modificare la modalità di apertura del menu utilizzando le impostazioni di “Effetto”.

Max Mega Menu offre diverse animazioni che si possono provare, tra cui la dissolvenza e lo scorrimento verso l’alto. È anche possibile modificare la velocità dell’animazione. Provando diverse animazioni, è possibile creare un mega menu che catturi l’attenzione del visitatore.

Se non si desidera utilizzare alcuna animazione, è sufficiente aprire il primo menu a tendina e selezionare “Nessuna”.

Per impostazione predefinita, Mega Menu non utilizza animazioni sui dispositivi mobili, poiché smartphone e tablet hanno in genere una potenza di elaborazione inferiore. Tuttavia, se si desidera creare un’animazione unica per i visitatori mobili, è possibile utilizzare le impostazioni dell’area “Effetto (Mobile)”.

Se volete testare i vostri mega menu su mobile, consultate la nostra guida su come visualizzare la versione mobile dei siti WordPress da un desktop.

Se si è scelto “Clic” dal menu a discesa “Evento”, assicurarsi di selezionare la scheda “Avanzate”.

Qui è possibile utilizzare il “comportamento dell’evento clic” per definire cosa succede quando il visitatore fa clic sul mega menu. Ad esempio, il secondo clic potrebbe chiudere il menu o aprire un nuovo link.

Ci sono altre impostazioni che si possono consultare, ma questo dovrebbe essere sufficiente per la maggior parte dei blog e siti web WordPress.

Quando si è soddisfatti della configurazione del plugin, fare clic su “Salva modifiche”.

Per abilitare i mega menu per più sedi, è sufficiente seguire la stessa procedura descritta sopra.

Personalizzazione dell’aspetto dei menu mega sul vostro sito web

Il passo successivo consiste nel configurare l’aspetto dei mega menu sul vostro sito web.

È possibile farlo selezionando la scheda “Temi del menu” a sinistra dello schermo.

In questa schermata è possibile cambiare la direzione delle icone delle frecce, utilizzare un’altezza diversa delle linee, aggiungere un’ombra e altro ancora.

Una volta soddisfatti delle impostazioni, non dimenticate di fare clic su “Salva modifiche”.

Se si desidera rimuovere queste modifiche in qualsiasi momento, è sufficiente selezionare la casella “Ripristina lo stile del widget” e fare clic su “Salva le modifiche”.

È poi possibile personalizzare la barra dei menu, che è la barra che i visitatori vedono quando il menu è nello stato predefinito, chiuso.

Per apportare queste modifiche, fare clic sulla scheda ‘Barra dei menu’ e quindi utilizzare le impostazioni per modificare il colore di sfondo, il padding, il raggio del bordo e altro ancora.

È anche possibile creare una sfumatura di colore selezionando due colori diversi nella sezione “Sfondo del menu”.

Se si scorre verso il basso, è possibile modificare l’aspetto del menu di primo livello.

Questa è la prima riga di voci, visibile quando il mega menu è in stato di chiusura.

Poiché sono così importanti, è opportuno far risaltare le voci di menu di primo livello.

Ad esempio, nell’immagine seguente si utilizza un colore di sfondo diverso.

Nella sezione “Stato di passaggio” è possibile evidenziare la voce di menu di livello superiore attualmente selezionata.

Ad esempio, nell’immagine seguente si utilizza un effetto di sottolineatura.

Questo può aiutare il visitatore a vedere dove si trova nel menu, il che lo rende particolarmente utile per i siti che devono avere mega menu di grandi dimensioni.

Se si aggiunge uno stato hover, scorrere fino alla parte inferiore dello schermo e selezionare la casella “Evidenzia elemento corrente”.

Successivamente, è possibile modificare l’aspetto del sottomenu.

È il menu che appare sotto un genitore di livello superiore, come si può vedere nell’immagine seguente.

Per personalizzare il sottomenu, fare clic sulla scheda “Mega menu”.

Ora è possibile utilizzare queste impostazioni per modificare il colore di sfondo del sottomenu, aumentare il raggio per creare angoli curvi, aggiungere padding e altro ancora.

Per aggiungere contenuti ai menu mega si utilizzano i widget. Ad esempio, si può aggiungere un widget Galleria e visualizzare i prodotti WooCommerce più popolari, oppure incorporare una tag cloud all’interno del mega menu. Questi widget possono fornire informazioni aggiuntive o incoraggiare i visitatori a fare clic su determinate voci del menu.

È possibile personalizzare l’aspetto di questi widget scorrendo la sezione “Widget”. Ad esempio, si può cambiare il colore del titolo del widget, aumentare la dimensione del carattere, aggiungere un padding e regolare l’allineamento.

In questa schermata è possibile personalizzare anche l’aspetto delle voci di menu di secondo livello e di quelle di terzo livello sul sito web, sul blog o sul mercato online. Sono i figli delle voci di menu di primo livello.

Quando si costruiscono i menu, è possibile aggiungere quattro o più livelli per creare un mega menu annidato. In questo caso, WordPress utilizzerà semplicemente lo stile del terzo livello per tutti i livelli successivi.

Si può vedere in azione nell’immagine seguente. Il secondo livello ha un testo rosso, mentre il terzo e il quarto livello utilizzano lo stesso testo blu.

Una volta soddisfatti della configurazione del menu, non dimenticate di fare clic su “Salva modifiche”.

Come aggiungere un Mega Menu al vostro sito WordPress

Una volta terminata la personalizzazione del mega menu, è il momento di aggiungerlo al sito web.

È sufficiente andare alla pagina Aspetto ” Menu dalla barra laterale dell’amministratore.

Se si desidera trasformare un menu esistente in un mega menu, aprire il menu a discesa “Seleziona un menu da modificare” e sceglierlo dall’elenco. Il menu scelto deve essere assegnato a una posizione in cui è stata attivata la funzione mega menu.

Se volete partire da zero, cliccate su “Crea un nuovo menu” e digitate un titolo per il vostro nuovo mega menu.

È quindi possibile selezionare la posizione che si desidera utilizzare e fare clic su “Crea menu”. Anche in questo caso, deve trattarsi di una posizione in cui sono stati abilitati i mega menu.

Aggiungere contenuto al menu di WordPress

Successivamente, aggiungere tutte le pagine, i post, i prodotti WooCommerce e qualsiasi altro contenuto che si desidera includere nel mega menu.

Per istruzioni passo passo, consultare la nostra guida per principianti su come aggiungere un menu di navigazione in WordPress.

Successivamente, è necessario disporre gli elementi nei genitori e nei sottomenu che si desidera utilizzare nel mega menu. Per creare un sottomenu, trascinate un elemento sotto il genitore e poi trascinatelo leggermente a destra prima di rilasciarlo.

Per creare più livelli, è sufficiente continuare a trascinare le voci verso destra, in modo che appaiano rientrate l’una sotto l’altra. Questa operazione è simile alla creazione di un menu a discesa in WordPress.

Abilitare la funzione Mega Menu

Al termine, fare clic per espandere le “Impostazioni del menu Mega massimo” e selezionare la casella accanto a “Abilita”.

In questo riquadro potete anche sovrascrivere le impostazioni predefinite del mega menu. Questo vi consente di creare mega menu unici per diverse aree del vostro sito WordPress, quindi procedete pure ad apportare le modifiche che desiderate.

Quindi, fare clic su “Salva”.

Creare il layout del menu Mega

Ora, passando con il mouse sulla prima voce di livello superiore, si vedrà un nuovo pulsante “Mega Menu”. Fate un clic su questo pulsante.

Ora vengono visualizzate tutte le impostazioni di questo elemento di primo livello.

Per impostazione predefinita, Max Mega Menu utilizza lo stile flyout, in cui i sottomenu “volano” lateralmente. Per creare invece un mega menu, aprite il menu a tendina “Modalità di visualizzazione dei sottomenu” e scegliete “Layout standard” o “Layout a griglia”.

Il layout standard mostra tutti i sottomenu in colonne.

Il layout a griglia, invece, consente di organizzare le voci dei sottomenu in colonne e righe.

È l’ideale se volete mostrare molti contenuti, come ad esempio tutti i prodotti digitali del vostro negozio online, o se avete in mente un layout molto specifico.

Dopo aver selezionato il layout standard o a griglia, verranno visualizzati tutti i sottomenu assegnati a questo genitore.

Ora è possibile modificare la disposizione di queste voci nel mega menu.

Se si utilizza il layout standard, è possibile modificare il numero di colonne utilizzando il menu a discesa nell’angolo in alto a destra.

Se si utilizza un layout a griglia, è possibile aggiungere colonne e righe utilizzando i pulsanti “+Colonna” e “+Riga”.

Quando si è soddisfatti del layout, è possibile disporre le voci del sottomenu in diverse colonne e righe mediante il trascinamento.

Dopodiché, è il momento di modificare la quantità di spazio che ogni elemento occupa nella colonna. Max Mega Menu mostra la dimensione attuale come frazione della larghezza totale disponibile.

Ad esempio, nell’immagine seguente, entrambe le colonne occupano metà dello spazio disponibile.

Per modificare le dimensioni di un elemento, è sufficiente fare clic sui pulsanti freccia per ingrandire o rimpicciolire la frazione.

Creare un Mega Menu compatibile con i dispositivi mobili (solo layout a griglia)

Per impostazione predefinita, Max Mega Menu mostra lo stesso contenuto su dispositivi desktop e mobili. Questo può essere un problema con i layout a griglia, poiché gli smartphone e i tablet hanno schermi più piccoli e lo scorrimento orizzontale può essere difficile.

Se si utilizza il layout a griglia, è possibile creare mega menu diversi per i dispositivi mobili. Ad esempio, potreste utilizzare un numero inferiore di colonne per evitare che gli utenti debbano scorrere orizzontalmente. In questo modo, è possibile creare un menu WordPress adatto ai dispositivi mobili.

È possibile nascondere intere colonne o righe utilizzando l’icona “Nascosto su cellulare”, che assomiglia a un piccolo telefono cellulare.

È sufficiente attivare e disattivare l’icona per nascondere e mostrare contenuti diversi su desktop e mobile.

Aggiungere contenuti ricchi con i widget del menu Mega

Fatto questo, si può iniziare ad aggiungere widget al mega menu. Ciò consente di mostrare contenuti extra nel sottomenu, come commenti recenti, video, gallerie e altro ancora.

Ad esempio, potreste utilizzare le immagini per promuovere una vendita sul vostro negozio online o per mettere in evidenza i vostri ultimi prodotti.

Per aggiungere un widget, è sufficiente fare clic per aprire il menu a tendina “Seleziona un widget….”.

È ora possibile scegliere un widget dall’elenco.

WordPress aggiunge automaticamente il widget a una colonna o a una riga, ma è possibile spostarlo in una nuova posizione trascinandolo.

Per configurare il widget, fare clic sull’icona della chiave inglese.

Si apre una finestra di dialogo in cui è possibile aggiungere contenuti al widget e modificarne le impostazioni.

Si vedranno opzioni diverse a seconda del tipo di widget che si sta creando. Ad esempio, se aggiungete un widget per il lettore musicale audio al menu principale, vedrete le impostazioni per caricare una traccia audio.

Tutti i widget hanno un campo “Titolo” in cui è possibile aggiungere un testo che apparirà sopra il widget.

Al termine, fare clic su “Salva” per memorizzare le modifiche e poi selezionare “Chiudi”. Per aggiungere altri widget al mega menu, basta seguire la stessa procedura descritta sopra.

Rivedere le impostazioni predefinite del menu Mega

Quindi, fare clic sulla scheda “Impostazioni”.

Qui è possibile utilizzare le caselle di controllo per nascondere o mostrare diversi contenuti nel sottomenu.

È inoltre possibile nascondere o mostrare il sottomenu sui dispositivi mobili e sui desktop e modificare l’allineamento in modo che il sottomenu si apra a sinistra o a destra del genitore di livello superiore.

Se si apportano modifiche alle impostazioni predefinite, non dimenticare di fare clic su “Salva modifiche”.

Aggiungere icone di immagini al Mega Menu di WordPress

Le icone di immagine aiutano i visitatori a capire il contenuto di una voce di menu, senza dover leggere l’etichetta di navigazione. Questo è particolarmente utile per i menu di grandi dimensioni, dove un visitatore può preferire una rapida scansione del contenuto piuttosto che leggere ogni etichetta di navigazione.

È possibile utilizzare le icone per far risaltare i contenuti più importanti. Ad esempio, potreste incoraggiare i visitatori a completare l’acquisto aggiungendo un’icona del carrello al menu “Cassa”.

Per aggiungere le icone immagine al menu di navigazione, fare clic sulla scheda “Icona”.

È ora possibile scegliere qualsiasi icona dash dalla libreria integrata o utilizzare la propria immagine. Se passate a Max Mega Menu Pro, avrete accesso anche ad altri font di icone, Genericons e FontAwesome.

Terminate la configurazione del menu Mega sul vostro sito WordPress

Dopo aver effettuato tutte queste impostazioni, è possibile chiudere la finestra popup per tornare alla pagina principale Aspetto ” Menu.

A questo punto è possibile ripetere questa procedura per ogni genitore di primo livello.

Quando si è soddisfatti della configurazione del mega menu, fare clic sul pulsante Salva menu per renderlo attivo.

Ora è sufficiente visitare il front-end del sito per vedere il mega menu in azione.

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere un mega menu sul vostro sito WordPress. Potete anche consultare la nostra guida passo-passo su come aggiungere un pulsante nel menu dell’header di WordPress e il nostro tutorial su come creare un menu di navigazione fluttuante appiccicoso in WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.