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:
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:
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 altro stile è quello dei menu sovrapposti (overlay), che gli utenti possono aprire e chiudere a piacere:
In alternativa, si può prendere in considerazione un menu laterale (sidebar):
Oppure si può incorporare un menu a tendina (o dropdown), detto anche menu “nidificato”:
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:
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:
Per questo esempio, sceglieremo quest’ultima opzione e creeremo un nuovo menu. Aggiungete un titolo e fate clic sul pulsante Crea 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.
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:
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:
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:
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:
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:
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:
Potete quindi aggiungere tutte le vostre categorie al menu e annidarle sotto questa etichetta. Ogni categoria sarà cliccabile, ma l’etichetta non lo sarà:
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:
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:
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:
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:
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:
Quindi spuntate la casella per le Classi CSS:
Questo farà aggiungere un campo Classi CSS ad ogni pagina del vostro 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.
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:
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:
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:
Quando si posizionano i menu, può essere utile vedere come appariranno sul frontend.
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:
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:
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”:
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:
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.
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.
