Come aggiungere un Mega Menu sul tuo sito WordPress (Passo dopo Passo)

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

Ciò può migliorare notevolmente l'esperienza di navigazione dei visitatori rendendo la navigazione del tuo sito più intuitiva e accessibile.

Su WPBeginner, utilizziamo un mega menu per visualizzare i nostri collegamenti più importanti nella parte superiore della pagina. Quando gli utenti ci cliccano sopra, si apre un menu a discesa che rivela collegamenti chiave aggiuntivi. Questa configurazione ci ha permesso di creare un menu di navigazione pulito e organizzato, presentando una vasta gamma di opzioni senza rendere la pagina disordinata.

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

Perché aggiungere un mega menu sul tuo sito WordPress?

WordPress è dotato di un builder drag-and-drop che puoi utilizzare per creare tutti i tipi di menu, inclusi menu a discesa, menu di intestazione e altro ancora. Esistono persino plugin che ti consentono di creare menu di navigazione personalizzati nei temi WordPress.

Tuttavia, se il tuo sito ha molti contenuti, potresti dover creare un mega menu. Questo ti consente di aggiungere menu a discesa multicolonna alla struttura standard del menu di WordPress.

Puoi utilizzare i mega menu per organizzare i tuoi contenuti sotto diverse intestazioni e sottointestazioni, in modo che i visitatori possano trovare rapidamente ciò che stanno cercando. Ad esempio, se crei un marketplace online, potresti organizzare tutte le tue categorie e sottocategorie di prodotti in un mega menu.

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

Puoi anche aggiungere immagini, che rendono i mega menu più facili da scansionare.

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

Come Creare un Mega Menu per il Tuo Sito WordPress

Il modo più semplice per aggiungere un mega menu al tuo sito WordPress è utilizzare Max Mega Menu. Questo plugin ti consente di aggiungere contenuti ricchi ai tuoi mega menu, inclusi video, gallerie di immagini, ricerche e altro ancora.

In questo modo, puoi creare menu più coinvolgenti e utili.

Puoi anche cambiare lo stile del menu aggiungendo colori diversi, cambiando la dimensione del font e utilizzando icone diverse.

Innanzitutto, dovrai installare e attivare il plugin. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin WordPress.

Abilita i Mega Menu sul Tuo Sito WordPress

Dopo l'attivazione, vai alla pagina Mega Menu » Posizioni Menu dalla dashboard di WordPress per vedere tutte le diverse aree in cui puoi aggiungere un mega menu.

Potresti vedere opzioni diverse a seconda del tuo tema WordPress.

Per iniziare, dovrai abilitare i mega menu in ogni posizione in cui desideri utilizzarli.

Per fare ciò, fai semplicemente clic per espandere una posizione e quindi seleziona la sua casella 'Abilitato'.

Successivamente, puoi cambiare l' 'Evento' che aprirà il mega menu.

L'impostazione predefinita è 'Hover intent', il che significa che il visitatore deve passare il mouse sopra il mega menu per alcuni secondi per attivarlo. Questo funziona bene per la maggior parte dei siti WordPress, ma puoi anche aprire il menu a discesa 'Effetto' e scegliere invece 'Hover' o 'Click'.

Se scegli ‘Click’, il visitatore dovrà fare clic per esplorare il mega menu. Questo può essere utile se temi che i visitatori possano attivare il menu per errore, il che può essere frustrante.

Nel frattempo, ‘Hover’ aprirà il tuo mega menu non appena il visitatore sposterà il mouse su di esso. Questo può incoraggiare i visitatori a esplorare diverse aree del tuo sito, quindi potresti voler usare ‘Hover’ sulle landing page o sulla homepage del tuo sito web.

Dopo aver preso questa decisione, puoi cambiare il modo in cui il menu si apre utilizzando le impostazioni ‘Effetto’.

Max Mega Menu ha diverse animazioni che puoi provare, tra cui dissolvenza e scorrimento verso l'alto. Puoi anche cambiare la velocità dell'animazione. Provando diverse animazioni, puoi creare un mega menu che catturi l'attenzione del visitatore.

Se non vuoi usare alcuna animazione, apri semplicemente il primo menu a discesa e seleziona ‘Nessuno’.

Per impostazione predefinita, Mega Menu non utilizza animazioni sui dispositivi mobili, poiché smartphone e tablet hanno in genere meno potenza di elaborazione. Tuttavia, se desideri creare un'animazione unica per i visitatori mobili, puoi utilizzare le impostazioni nell'area 'Effetto (Mobile)'.

Se desideri testare i tuoi mega menu su dispositivi mobili, consulta la nostra guida su come visualizzare la versione mobile dei siti WordPress da un desktop.

Se hai scelto 'Click' dal menu a discesa 'Event', assicurati di selezionare la scheda 'Avanzate' successivamente.

Qui, puoi utilizzare 'Comportamento evento click' per definire cosa succede quando il visitatore fa clic sul tuo mega menu. Ad esempio, il secondo clic potrebbe chiudere il menu o aprire un nuovo link.

Ci sono altre impostazioni che puoi esaminare, ma queste dovrebbero essere sufficienti per la maggior parte dei blog e siti web WordPress.

Quando sei soddisfatto della configurazione del plugin, fai clic su 'Salva modifiche'.

Per abilitare i mega menu in più posizioni, segui semplicemente lo stesso processo descritto sopra.

Personalizza l'aspetto dei mega menu sul tuo sito web

Il passo successivo è configurare l'aspetto dei mega menu sul tuo sito web.

Puoi farlo selezionando la scheda 'Temi menu' a sinistra dello schermo.

In questa schermata, puoi cambiare la direzione delle icone delle frecce, utilizzare un'altezza di riga diversa, aggiungere un'ombra e altro ancora.

Quando sei soddisfatto delle tue impostazioni, non dimenticare di fare clic su 'Salva modifiche'.

Se desideri rimuovere queste modifiche in qualsiasi momento, controlla semplicemente la casella 'Ripristina stile widget' e quindi fai clic su 'Salva modifiche'.

Successivamente, puoi personalizzare la barra del menu, che è la barra che i visitatori vedono quando il menu è nel suo stato predefinito e compresso.

Per apportare queste modifiche, fai clic sulla scheda ‘Barra dei menu’ e quindi utilizza le impostazioni per cambiare il colore di sfondo, il riempimento, il raggio del bordo e altro ancora.

Puoi persino creare una sfumatura di colore selezionando due colori diversi nella sezione ‘Sfondo menu’.

Se scorri verso il basso, puoi cambiare l'aspetto del menu di primo livello.

Questa è la prima riga di elementi, visibile quando il mega menu è nel suo stato compresso.

Dato che sono così importanti, potresti voler far risaltare le voci del menu di primo livello.

Ad esempio, nell'immagine seguente, stiamo usando un colore di sfondo diverso.

Nella sezione ‘Stato al passaggio del mouse’ puoi evidenziare la voce del menu di primo livello attualmente selezionata.

Ad esempio, nell'immagine seguente, stiamo usando 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 aggiungi uno stato al passaggio del mouse, scorri fino in fondo alla schermata e seleziona la casella ‘Evidenzia voce corrente’.

Dopodiché, puoi cambiare l'aspetto del sottomenu.

Questo è il menu che appare sotto un genitore di primo livello, come puoi vedere nell'immagine seguente.

Per personalizzare il sottomenu, fai clic sulla scheda ‘Mega Menu’.

Ora puoi utilizzare queste impostazioni per cambiare il colore di sfondo del sottomenu, aumentare il raggio per creare angoli arrotondati, aggiungere riempimento e altro ancora.

Aggiungi contenuti ai tuoi mega menu utilizzando i widget. Ad esempio, potresti aggiungere un widget Galleria e visualizzare i tuoi prodotti WooCommerce più popolari, o incorporare una nuvola di tag all'interno del mega menu. Questi widget possono fornire informazioni aggiuntive o incoraggiare i visitatori a fare clic su determinate voci di menu.

Puoi personalizzare l'aspetto di questi widget scorrendo fino alla sezione ‘Widget’. Ad esempio, potresti cambiare il colore del titolo del widget, aumentare la dimensione del carattere, aggiungere spaziatura e regolare l'allineamento.

In questa schermata, puoi anche personalizzare l'aspetto delle voci di menu di secondo e terzo livello sul tuo sito web, blog o marketplace online. Queste sono le voci figlie delle voci di menu di primo livello.

Quando crei i tuoi menu, è possibile aggiungere quattro o anche più livelli per creare un mega menu nidificato. Se lo fai, WordPress utilizzerà semplicemente lo stile del terzo livello per tutti i livelli successivi.

Puoi vederlo in azione nell'immagine seguente. Il secondo livello ha testo rosso, mentre sia il terzo che il quarto livello utilizzano lo stesso testo blu.

Quando sei soddisfatto di come è impostato il menu, non dimenticare di fare clic su 'Salva modifiche'.

Come aggiungere un mega menu al tuo sito WordPress

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

Vai semplicemente alla pagina Aspetto » Menu dalla barra laterale dell'amministratore.

Se vuoi trasformare un menu esistente in un mega menu, apri il menu a discesa 'Seleziona un menu da modificare' e scegli quello dall'elenco. Tieni presente che il menu scelto deve essere assegnato a una posizione in cui hai abilitato la funzionalità mega menu.

Se vuoi iniziare da zero, fai clic su 'Crea un nuovo menu' e poi digita un titolo per il tuo nuovo mega menu.

Puoi quindi selezionare la posizione che desideri utilizzare e fare clic su 'Crea menu'. Ancora una volta, questa deve essere una posizione in cui hai abilitato i mega menu.

Aggiungi contenuti al tuo menu WordPress

Dopo di che, aggiungi tutte le pagine, i post, i prodotti WooCommerce e qualsiasi altro contenuto che desideri includere nel mega menu.

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

Successivamente, dovrai organizzare i tuoi elementi nei menu padre e sottomenu che desideri utilizzare nel mega menu. Per creare un sottomenu, trascina un elemento sotto il padre, quindi trascinalo leggermente verso destra prima di rilasciarlo.

Per creare più livelli, continua semplicemente a trascinare gli elementi verso destra in modo che appaiano indentati uno sotto l'altro. Questo è simile a creare un menu a discesa in WordPress.

Abilita la funzionalità Mega Menu

Una volta terminato, fai clic per espandere le 'Impostazioni Mega Menu Massime' e seleziona la casella accanto a 'Abilita'.

In questa casella, puoi anche sovrascrivere le impostazioni predefinite del mega menu. Ciò ti consente di creare mega menu unici per diverse aree del tuo sito Web WordPress, quindi procedi pure con le modifiche che desideri.

Dopo di che, clicca su 'Save'.

Crea il layout del Mega Menu

Ora, passa il mouse sopra il primo elemento di primo livello e vedrai un nuovo pulsante 'Mega Menu'. Procedi e fai clic sul pulsante.

Ora vedrai tutte le impostazioni per questo elemento di primo livello.

Per impostazione predefinita, Max Mega Menu utilizzerà lo stile flyout, in cui i sottomenu 'escono' dal lato. Per creare invece un mega menu, apri il menu a discesa 'Modalità di visualizzazione sottomenu' e scegli 'Layout standard' o 'Layout griglia'.

Il layout standard mostra tutti i sottomenu in colonne.

Nel frattempo, il layout griglia ti consente di organizzare gli elementi del sottomenu in colonne e righe.

Questo è ideale se desideri mostrare molti contenuti, come tutti i prodotti digitali nel tuo negozio online, o se hai in mente un layout molto specifico.

Dopo aver selezionato il layout standard o griglia, vedrai tutti i sottomenu assegnati a questo padre.

Ora puoi procedere e modificare il modo in cui questi elementi sono disposti nel mega menu.

Se stai utilizzando il layout standard, puoi modificare il numero di colonne utilizzando il menu a discesa nell'angolo in alto a destra.

Se stai usando un layout a griglia, puoi aggiungere colonne e righe usando i pulsanti '+Colonna' e '+Riga'.

Quando sei soddisfatto del layout, puoi disporre le voci del sottomenu in diverse colonne e righe usando il trascinamento.

Dopodiché, è ora di cambiare lo spazio occupato da ciascuna voce 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, fai clic sui suoi pulsanti freccia per ingrandire o rimpicciolire la frazione.

Crea un Mega Menu ottimizzato per dispositivi mobili (solo layout a griglia)

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

Se stai utilizzando il layout a griglia, puoi creare mega menu diversi per i dispositivi mobili. Ad esempio, potresti usare meno colonne in modo che gli utenti non debbano scorrere orizzontalmente. In questo modo, puoi creare un menu WordPress pronto per dispositivi mobili.

Puoi nascondere intere colonne o righe utilizzando l'icona 'Nascosto su mobile', che assomiglia a un piccolo telefono cellulare.

Semplicemente attiva e disattiva l'icona per nascondere e mostrare contenuti diversi su desktop e dispositivi mobili.

Aggiungi contenuti ricchi con i widget Mega Menu

Fatto ciò, puoi iniziare ad aggiungere widget al mega menu. Questo ti consente di mostrare contenuti aggiuntivi nel sottomenu, come commenti recenti, video, gallerie e altro.

Ad esempio, potresti usare immagini per promuovere una vendita sul tuo negozio online o evidenziare i tuoi ultimi prodotti.

Per aggiungere un widget, fai semplicemente clic per aprire il menu a discesa 'Seleziona un widget...'.

Ora puoi scegliere un widget dall'elenco.

WordPress aggiungerà automaticamente il widget a una colonna o riga, ma puoi spostarlo in una nuova posizione usando il trascinamento.

Per configurare il widget, fai clic sulla sua piccola icona a forma di chiave inglese.

Si apre una finestra popup dove puoi aggiungere contenuti al widget e modificarne le impostazioni.

Vedrai opzioni diverse a seconda del tipo di widget che stai creando. Ad esempio, se aggiungi un widget lettore audio musicale al mega menu, vedrai impostazioni in cui puoi caricare una traccia audio.

Tutti i widget hanno un campo 'Titolo' dove puoi aggiungere testo che apparirà sopra il widget.

Al termine, fai clic su 'Salva' per memorizzare le modifiche e quindi seleziona 'Chiudi'. Per aggiungere altri widget al mega menu, segui semplicemente lo stesso processo descritto sopra.

Revisione delle impostazioni predefinite del mega menu

Successivamente, fai clic sulla scheda 'Impostazioni'.

Qui puoi usare le caselle di controllo per nascondere o mostrare diversi contenuti nel sottomenu.

Puoi anche nascondere o mostrare il sottomenu sui dispositivi mobili e desktop, e cambiare l'allineamento in modo che il sottomenu si apra a sinistra o a destra del genitore di primo livello.

Se apporti modifiche alle impostazioni predefinite, non dimenticare di fare clic su 'Salva modifiche'.

Aggiungere icone immagine al mega menu di WordPress

Le icone immagine aiutano i visitatori a capire di cosa tratta una voce di menu, senza nemmeno dover leggere l'etichetta di navigazione. Questo è particolarmente utile per menu di grandi dimensioni in cui un visitatore potrebbe preferire scansionare rapidamente il contenuto piuttosto che leggere ogni etichetta di navigazione.

Puoi usare le icone per far risaltare i contenuti più importanti. Ad esempio, potresti incoraggiare i visitatori a completare il loro acquisto aggiungendo un'icona del carrello alla voce di menu 'Checkout'.

Per aggiungere icone immagine al tuo menu di navigazione, fai clic sulla scheda 'Icona'.

Ora puoi scegliere qualsiasi icona dash dalla libreria integrata o usare la tua immagine. Se esegui l'aggiornamento a Max Mega Menu Pro, avrai anche accesso ad altri font di icone, Genericons e FontAwesome.

Completa la configurazione del Mega Menu sul tuo sito WordPress

Dopo aver esaminato tutte queste impostazioni, puoi chiudere la finestra popup per tornare alla pagina principale Aspetto » Menu.

Ora puoi ripetere questo processo per ogni genitore di primo livello.

Quando sei soddisfatto di come è impostato il mega menu, fai clic sul pulsante Salva menu per renderlo attivo.

Ora, visita semplicemente il front-end del tuo sito web per vedere il mega menu in azione.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un mega menu sul tuo sito WordPress. Puoi anche consultare la nostra guida passo passo su come aggiungere un pulsante nel menu di intestazione di WordPress e il nostro tutorial su come creare un menu di navigazione fisso e fluttuante in WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.