La navigazione del sito è fondamentale per aiutare i vostri utenti ad arrivare dove vogliono. Un menu ben progettato può contribuire a migliorare l’esperienza dell’utente (UX) e persino a diminuire la frequenza di rimbalzo. Ma un menu mal progettato può fare esattamente il contrario.

Per fortuna, WordPress permette di creare menu personalizzati per le esigenze di ogni sito. È anche possibile utilizzare le funzioni native per aggiungere un menu a tendina compatto che consenta di risparmiare spazio, pur fornendo una direzione chiara ai visitatori.

In questo articolo parleremo dei motivi per cui la navigazione di un sito web è importante e di quanto possano essere utili i menu a tendina. Poi vi spiegheremo come crearli in WordPress e suggeriremo alcuni plugin che possono essere d’aiuto.

Cominciamo!

Introduzione ai Menu di Navigazione e a Tendina di WordPress

Anche se possono essere modesti, i menu di navigazione sono un elemento vitale di qualsiasi sito web. Aiutano gli utenti a trovare rapidamente le pagine più rilevanti per raggiungere i contenuti che cercano, dando anche ai visitatori che accedono per la prima volta un’idea di ciò che si ha da offrire:

Il menu di navigazione principale del sito web di Kinsta
Il menu di navigazione principale del sito web di Kinsta

Un menu di navigazione ben progettato è determinante per aumentare le conversioni e ridurre la frequenza di rimbalzo. Quando gli utenti possono trovare facilmente le pagine su cui si trova un prodotto, il modulo di iscrizione via email o altri contenuti di conversione, sarà più facile per loro fare un acquisto o iscriversi.

Inoltre, se gli utenti possono trovare facilmente la loro strada in tutto il vostro sito, non rimbalzeranno dalle vostre pagine perché sono finiti nel posto sbagliato. Aiutandoli a fare le cose per bene la prima volta potrete migliorare la UX e ridurre al minimo la frustrazione.

In WordPress i menu sono una funzione nativa. Qualsiasi sito creato con la piattaforma può averne uno o più di uno. Tuttavia, i temi di WordPress hanno un ruolo importante anche per quanto riguarda lo stile e la collocazione del menu o dei menu.

Il vostro menu di WordPress può assumere diverse forme. Il più familiare è il menu di intestazione standard:

Un esempio di un tipico menu di intestazione
Un esempio di un tipico menu di intestazione

Spesso è anche possibile inserire un menu aggiuntivo in fondo alle pagine. Questo può visualizzare lo stesso contenuto del vostro menu principale o offrire opzioni leggermente diverse:

Un esempio di menu nel footer
Un esempio di menu nel footer

Un altro stile è quello dei menu sovrapposti (overlay), che gli utenti possono aprire e chiudere a piacere:

Un esempio di menu overlay
Un esempio di menu overlay

In alternativa, si può prendere in considerazione un menu laterale (sidebar):

Un esempio di menu laterale
Un esempio di menu laterale

Oppure si può incorporare un menu a tendina (o dropdown), detto anche menu “nidificato”:

Un esempio di menu a tendina
Un esempio di menu a tendina

Questo tipo di navigazione è ideale per molti siti. Non oscura i contenuti come un menu sovrapposto e non è invadente come una grande barra di intestazione o un menu laterale.

Nascondendo alcuni contenuti fino a quando non sono necessari, si risparmia spazio sullo schermo, pur fornendo agli utenti un modo semplice per spostarsi.

Come Creare un Menu a Discesa in WordPress (in 5 Passi)

Se avete deciso che un menu a tendina è la soluzione giusta per il vostro sito WordPress, impostarne uno è abbastanza semplice. Utilizzando le funzioni di menu native disponibili in WordPress, è possibile creare un sistema di navigazione personalizzato che si adatta alle proprie esigenze in soli cinque passi.

Passo 1: Creare le Voci di Menu

Il primo passo nella creazione di un menu è decidere cosa metterci. Cominciate andando su Aspetto > Menu nella bacheca di WordPress:

L'editor dei menu nella bacheca di WordPress
L’editor dei menu nella bacheca di WordPress

Quello che vedete nell’editor del menu varia leggermente a seconda del vostro tema.

Tuttavia, quello che è importante notare per ora è la prima opzione nella scheda Modifica menu. Dovreste vedere un’opzione dove selezionare uno dei vostri menu esistenti da modificare e un’opzione per creare un nuovo menu:

Il link per creare un nuovo menu nella parte superiore dell'editor dei menu di WordPress
Il link per creare un nuovo menu nella parte superiore dell’editor dei menu di WordPress

Per questo esempio, sceglieremo quest’ultima opzione e creeremo un nuovo menu. Aggiungete un titolo e fate clic sul pulsante Crea menu:

Nominare e creare un nuovo menu
Nominare e creare un nuovo menu

Ora siete pronti e potete iniziare ad aggiungere voci al vostro menu di WordPress. Nella maggior parte dei casi, è meglio mantenere il menu il più semplice possibile, dando comunque agli utenti abbastanza informazioni per arrivare dove vogliono.

Inserire troppe pagine può travolgere i visitatori e rendere la navigazione più difficile invece che più facile.

Ci sono diversi modi per aggiungere le voci di menu. Le prime due sono le Pagine e i Post, e funzionano in modo molto simile.

Aggiungere pagine al menu
Aggiungere pagine al menu

Nella barra laterale dell’editor dei menu, selezionate le caselle di controllo per ogni pagina o post che volete inserire e cliccate sul pulsante Aggiungi al menu:

La vostra opzione successiva è quella di inserire i Link personalizzati. Ciò richiede l’URL della pagina a cui si desidera indirizzare gli utenti e la creazione di un’etichetta breve ma descrittiva. Dopo di che, potete cliccare di nuovo su Aggiungi al menu:

Aggiungere un link personalizzato al menu
Aggiungere un link personalizzato al menu

Infine, è possibile aggiungere al menu di navigazione anche le categorie di pagine e post. Questo porterà gli utenti ad una pagina di archivio dove potranno visualizzare tutti i contenuti di un determinato argomento.

I blog e gli altri siti che contengono molti contenuti possono trovare questa funzione particolarmente utile:

Aggiungere categorie al menu
Aggiungere categorie al menu

Come per Pagine e Messaggi, basta selezionare le caselle di controllo delle categorie che si desidera inserire e scegliere Aggiungi al menu.

Fase 2: Organizzare il Menu di WordPress

Una volta aggiunte tutte le voci di menu, dovreste vederle elencate nell’editor in singoli riquadri sotto Struttura del menu:

La sezione Struttura del menu dell'editor dei menu
La sezione Struttura del menu dell’editor dei menu

Inizialmente, le voci di menu appariranno nell’ordine in cui sono state aggiunte. Tuttavia, potrete modificare facilmente la loro organizzazione trascinandole nella posizione desiderata. In questo modo potrete creare un semplice menu senza funzionalità della tendina.

Avete un paio di modi per aggiungere dei menù a tendina al vostro menu di WordPress.

Il più semplice è continuare a trascinare e rilasciare, ma annidando alcune voci di menu sotto altre:

Categorie di nidificazione sotto la pagina del Blog
Categorie di nidificazione sotto la pagina del Blog

Ad esempio, nell’immagine qui sopra, abbiamo spostato le tre categorie di post che abbiamo aggiunto al menu sotto la voce Blog, rendendole “sotto-voci”. Sul frontend, questo creerà un menu a tendina che assomiglia a questo:

Esempio di menu a tendina in WordPress
Esempio di menu a tendina in WordPress

Se desiderate aggiungere un menu a tendina che includa tutte le categorie del vostro sito, potete farlo aggiungendo un Link personalizzato al vostro menu. Utilizzate “#” come URL e “Categorie” o qualcosa di simile per l’etichetta:

Creare un'etichetta di categoria per il menu
Creare un’etichetta di categoria per il menu

Potete quindi aggiungere tutte le vostre categorie al menu e annidarle sotto questa etichetta. Ogni categoria sarà cliccabile, ma l’etichetta non lo sarà:

Il menu a tendina Categorie
Il menu a tendina Categorie

In modo simile, potete anche nascondere tutte le voci di menu in un unico menu a tendina.

Aggiungete un altro Link personalizzato, usando “#” come URL e “Menu” come etichetta. Poi annidate tutte le altre voci di menu sotto questa:

Annidare tutti i link di navigazione sotto un'unica etichetta Menu
Annidare tutti i link di navigazione sotto un’unica etichetta Menu

Il risultato sul frontend sarà un menu a tendina con le pagine chiave del vostro sito.

Come si può vedere nella voce Categorie qui sotto, ogni contenuto annidato in una sottovoce apparirà in un sottomenu:

Un vero menu di navigazione a tendina in WordPress
Un vero menu di navigazione a tendina in WordPress

Utilizzando l’editor dei menu in questo modo, potrete creare qualsiasi stile e combinazione di menu a tendina di WordPress. Ricordate però che troppe voci di menu possono confondere gli utenti.

È anche meglio limitare il numero di sotto-menu che si inseriscono, per evitare di ingombrare eccessivamente la navigazione.

Fase 3: Incorporare le Immagini nel Menu di WordPress

Se alla fine della Fase 2 il vostro menu a tendina è esattamente come l’avete immaginato, potete passare alla Fase 5 e pubblicarlo. Tuttavia, ci sono altri passaggi se desiderate arricchire il menu con le vostre personalizzazioni.

Una possibilità da considerare è quella di inserire elementi visivi nei menu per fornire maggiori indicazioni ai visitatori. Mentre le etichette descrittive sono fondamentali, a volte un’immagine o un’icona possono aiutare gli utenti a capire più rapidamente dove conduce un particolare link di navigazione.

È possibile aggiungere immagini utilizzando CSS personalizzati, di cui parleremo a breve. Tuttavia, consigliamo di utilizzare un plugin come Menu Image, Icons Made Easy:

Menu a discesa WordPress con immagini
Menu a discesa WordPress con immagini

In questo modo, non dovrete preoccuparvi del codice per rendere visivamente interessante il vostro menu a tendina.

Basta installare il plugin e poi tornare a Aspetto > Menu:

La sezione Menu Image nell'editor dei menu
La sezione Menu Image nell’editor dei menu

Vedrete che ora ci sono opzioni per le immagini per ogni pagina che avete inserito nel menu. È possibile selezionare la foto, le dimensioni e la posizione di ogni pagina. Ricordatevi di salvare le modifiche quando avete finito.

Passo 4: Aggiungere CSS Personalizzati al Menu a Tendina

Anche se non lo consigliamo ai principianti, gli utenti intermedi e avanzati potrebbero incorporare il proprio stile nei menu a tendina di WordPress. Prima di saltare direttamente nel vostro CSS, tuttavia, dovrete aggiungere una classe al vostro menu.

Se saltate questo passaggio, i vostri CSS personalizzati potrebbero causare problemi ad un qualsiasi altro menu del sito. Per esempio, potreste inavvertitamente applicare lo stile al vostro menu del footer quando intendevate applicarlo solo al menu a tendina principale.

Nell’editor dei menu, cliccate su Opzioni schermo nell’angolo in alto a destra:

La scheda Opzioni schermo nell'editor dei menu
La scheda Opzioni schermo nell’editor dei menu

Quindi spuntate la casella per le Classi CSS:

La casella di controllo Classi CSS nella scheda Opzioni Schermo
La casella di controllo Classi CSS nella scheda Opzioni Schermo

Questo farà aggiungere un campo Classi CSS ad ogni pagina del vostro menu:

Il campo Classi CSS nell'editor dei menu
Il campo Classi CSS nell’editor dei menu

Una volta aggiunte una o più classi CSS alle voci del menu, qualsiasi codice che inserite nel vostro foglio di stile si applicherà solo alle voci del menu con la classe specificata.

Sei stanco di un host lento per il tuo sito WordPress? Kinsta fornisce server velocissimi e un supporto di livello mondiale 24 ore su 24, 7 giorni su 7, da parte di esperti di WordPress. Scopri i nostri piani

Ora potete andare al vostro foglio di stile o al Customizer e iniziare a lavorare sul vostro stile personalizzato.

Fase 5: Pubblicare il Menu nelle Prime Posizioni

Una volta che il menu a tendina di WordPress è strutturato e soddisfa le vostre esigenze, e avete applicato tutte le personalizzazioni che desiderate, siete pronti a pubblicarlo sul vostro sito.

Questo varia leggermente a seconda del tema e delle posizioni dei menu che supporta. Per questo esempio, useremo il tema Twenty Twenty.

Nell’editor dei menu, scorrete fino alla sezione Impostazioni Menu:

La sezione Impostazioni menu nell'editor
La sezione Impostazioni menu nell’editor

Se desiderate che le nuove pagine vengano aggiunte automaticamente al vostro menu, selezionate la prima casella di controllo. Se avete appena iniziato a lavorare al vostro sito e non avete ancora aggiunto tutte le pagine principali, questo può esservi utile. Ma fate attenzione a non aggiungere accidentalmente troppe voci al vostro menu.

Sotto questa voce, vedrete un elenco di caselle con l’indicazione delle diverse aree del sito in cui è possibile visualizzare il menu.

Il tema Twenty Twenty dispone di diverse aree di menu: Menu orizzontale per desktop, Menu espanso per desktop, Menu mobile, Menu nel footer, Menu social.

In questo caso, il menu che abbiamo creato si adatta meglio alla posizione del menu orizzontale per desktop, che si trova nell’intestazione del sito:

Menu orizzontale per desktop per il tema Twenty Twenty
Menu orizzontale per desktop per il tema Twenty Twenty

Potreste anche valutare la possibilità di navigare sulla scheda Gestione posizioni nell’area dei menu della bacheca. Qui vedrete tutte le posizioni dei menu supportate dal vostro tema e quale menu avete assegnato a ciascuna di esse:

La scheda Gestione posizioni
La scheda Gestione posizioni

Quando si posizionano i menu, può essere utile vedere come appariranno sul frontend.

L'opzione Gestisci con l'anteprima in tempo reale
L’opzione Gestisci con l’anteprima in tempo reale

Fate clic sul pulsante Gestisci con l’anteprima in tempo reale per vedere come apparirà il vostro menu nella posizione che avete scelto, utilizzando il Customizer di WordPress:

Un'anteprima in tempo reale del menu di WordPress nel Customizer
Un’anteprima il tempo reale del menu di WordPress nel Customizer

Potrete quindi pubblicare il vostro menu o i vostri menu direttamente dal Customizer. Se avete bisogno di aggiungere o rimuovere voci dal vostro menu a tendina, potete semplicemente tornare all’editor dei menu ed effettuare le necessarie regolazioni.

Plugin WordPress per Migliorare i Menu a Tendina

Anche se potete creare menu di navigazione di WordPress completi senza altri strumenti, a volte può essere utile estendere le funzionalità dei menu. In questo caso, potreste dare un’occhiata ad alcuni popolari plugin per i menu di WordPress.

Nested Pages è un’ottima soluzione per creare menu a tendina in blog con molti contenuti. Anche se viene utilizzato principalmente per organizzare i post e le pagine, questo plugin genera automaticamente anche un menu che rispecchia la struttura dei contenuti:

Il Plugin WordPress Nested Pages
Il Plugin WordPress Nested Pages

Anche se spesso non è consigliabile inserire un gran numero di voci nei menu, a volte è inevitabile.

In questo caso, Max Mega Menu può aiutarvi a combinare i vostri menu di WordPress esistenti per formare un “mega menu”:

Il plugin WordPress Max Mega Menu
Il plugin WordPress Max Mega Menu

Con la navigazione mobile in costante crescita, è fondamentale avere menu leggibili sui dispositivi mobili.

WP Mobile Menu si abbina a qualsiasi tema reattivo e vi aiuta a creare un sistema di navigazione per gli utenti del vostro sito in movimento:

Il plugin WordPress WP Mobile Menus
Il plugin WordPress WP Mobile Menus

Infine, come abbiamo già detto, ci possono essere situazioni in cui le voci di menu descrittive non sono sufficienti. In queste situazioni, potreste dare un’occhiata Menu Image, Icons Made Easy come abbiamo detto al punto 3.

Potete utilizzare uno qualsiasi di questi plugin per migliorare il vostro attuale sistema di navigazione e rendere più efficace il menu a tendina di WordPress. Ricordate solo che a volte, per quel che riguarda la navigazione, più semplice è, meglio è. Aggiungete funzioni extra solo se queste miglioreranno la vostra UX ed eviterete di ingombrare il vostro sito.

Risoluzione dei Problemi del Menu a Tendina di WordPress

Se avete configurato il vostro menu seguendo le nostre indicazioni, ma la funzionalità di dropdown non funziona, potreste indagare tra diverse possibili cause.

Anche se qui non possiamo trattarle tutte, possiamo aiutarvi a restringere il campo di ricerca, in modo che possiate trovare la soluzione adeguata.

Spesso, un menu malfunzionante è il risultato di un codice che crea un conflitto tra il vostro menu personalizzato e il vostro tema. La prima cosa da fare è passare a un tema predefinito come Twenty Twenty. Se il vostro menu inizia a funzionare di nuovo, saprete che il problema è legato al tema. Potete quindi contattare lo sviluppatore del tema per cercare una soluzione.

Altre possibili cause possono essere:

  • Codice mal digitato: Verificate che i CSS personalizzati che avete aggiunto siano corretti e che state usando le classi CSS come descritto al punto 4.
  • Incompatibilità del plugin: Prova a disabilitare tutti i plugin relativi al menu che avete installato, per vedere se questo risolve il problema.
  • JQuery obsoleto: Aggiornate all’ultima versione di jQuery e provate ad aprire di nuovo il menu a tendina.

Tuttavia, come abbiamo già detto, le possibili cause dei malfunzionamenti del vostro menu sono numerose. Se nessuna di queste soluzioni funziona, vi consigliamo di visitare i forum di supporto di WordPress, di contattare il nostro esperto Team di Supporto di WordPress di Kinsta o di assumere uno sviluppatore WordPress per risolvere il problema.

I menu di navigazione sono importantissimi per l'UX del tuo sito. Ma cosa succede se hai molte voci di menu da visualizzate? Usa un menu a tendina! Scopri quanto è facile crearne uno in questa guida 📑🗃️Click to Tweet

Riepilogo

Anche se può sembrare una cosa da poco, la navigazione di un sito WordPress può essere determinante per il suo successo. Un menu a tendina può far risparmiare spazio sugli schermi degli utenti, consentendo loro di muoversi facilmente nel vostro sito e può migliorare le vostre conversioni.


Risparmia tempo e costi e massimizza le prestazioni del sito con:

  • Aiuto immediato dagli esperti dell’hosting WordPress, 24/7.
  • Integrazione di Cloudflare Enterprise.
  • Copertura globale del pubblico con 32 data center in tutto il mondo.
  • Ottimizzazione del sito con il nostro Monitoraggio delle Prestazioni delle Applicazioni integrato.

Tutto questo e molto altro, in un piano senza contratti a lungo termine, con migrazioni assistite e una garanzia di 30 giorni di rimborso. Scopri i nostri piani o contattaci per trovare il piano che fa per te.