Come creare un menu di navigazione verticale in WordPress

Un menu di navigazione ben progettato è importante se si desidera creare un'esperienza utente positiva sul proprio sito WordPress.

Mentre i menu orizzontali sono comuni, un menu di navigazione verticale offre un modo unico ed efficace per organizzare i contenuti del tuo sito, specialmente per siti web con molte pagine o strutture complesse.

Questi menu possono migliorare l'accessibilità perché si adattano meglio alla barra laterale del tuo sito web e sono più facili da navigare sui dispositivi mobili.

In questo articolo, ti mostreremo come creare facilmente un menu di navigazione verticale in WordPress.

Cos'è un menu di navigazione?

Un menu di navigazione è un elenco di collegamenti che puntano ad aree importanti di un sito web WordPress. Questo menu è solitamente presentato come una barra orizzontale di collegamenti nella parte superiore di ogni pagina.

I menu di navigazione danno struttura al tuo sito e aiutano i visitatori a trovare ciò che cercano. Puoi aggiungere collegamenti alle tue pagine più importanti, categorie o argomenti, post del blog di WordPress e persino aggiungere collegamenti personalizzati come il tuo profilo sui social media.

Ma mentre spesso li vedi posizionati orizzontalmente in cima a un sito web, i menu di navigazione verticali hanno molti usi e vantaggi.

Un menu di navigazione verticale occupa meno spazio sulla pagina, è più facile da scansionare e navigare, e può essere posizionato nella barra laterale, nel piè di pagina, o anche come finestra popup, rendendolo più flessibile.

Ad esempio, se hai un negozio online, allora l'utilizzo di un menu di navigazione verticale ti permetterà di visualizzare molte più categorie di prodotti e prodotti senza occupare troppo spazio.

Detto questo, diamo un'occhiata a diversi modi per creare un menu di navigazione verticale in WordPress. Ecco gli argomenti che tratteremo in questo articolo:

• Prova diverse posizioni di visualizzazione del menu
• Aggiungere un menu di navigazione verticale alla barra laterale
• Creare un menu di navigazione verticale su un articolo o una pagina
• Aggiungere un menu di navigazione verticale utilizzando l'editor completo del sito
• Creare un menu di navigazione verticale utilizzando un plugin per la creazione di temi
• Creare un menu di navigazione verticale reattivo per dispositivi mobili
• Crea un menu a discesa in WordPress
• Creare un mega menu in WordPress
• Bonus: Crea un menu di navigazione fisso fluttuante in WordPress

Prova diverse posizioni di visualizzazione del menu

Quando aggiungi un menu di navigazione al tuo sito web, questo verrà visualizzato verticalmente o orizzontalmente. Ciò dipende dal tuo tema e dalla posizione del menu selezionata.

Il numero di posizioni del menu disponibili dipende dal tema che stai utilizzando. Potresti scoprire che alcune di queste posizioni visualizzano il menu verticalmente.

Per testare questo con il tuo tema, naviga alla pagina Aspetto » Menu dalla barra laterale di amministrazione di WordPress. Qui, puoi sperimentare per vedere quali posizioni sono disponibili sul tuo sito web e come vengono visualizzate.

Ad esempio, il tema Twenty Twenty-One non offre posizioni verticali, mentre il tema Twenty Twenty ne offre una chiamata 'Menu espanso desktop'.

Puoi semplicemente selezionare il menu che desideri visualizzare verticalmente e quindi selezionare la casella 'Menu espanso desktop' in fondo alla schermata.

Successivamente, devi assicurarti di fare clic sul pulsante 'Salva menu' per memorizzare le tue impostazioni. Questo è come appare sul nostro sito web demo.

Per ulteriori informazioni sulla modifica di menu e posizioni dei menu, puoi consultare la nostra guida per principianti su come aggiungere un menu di navigazione in WordPress.

Aggiungere un menu di navigazione verticale alla barra laterale

Indipendentemente dal tema che stai utilizzando, è facile aggiungere un menu di navigazione verticale alla barra laterale utilizzando un widget.

Innanzitutto, dovrai creare un menu di navigazione che desideri visualizzare, se non l'hai già fatto. Quindi, devi visitare la pagina Aspetto » Widget dalla dashboard di WordPress.

Da qui, fai semplicemente clic sul pulsante '+' nell'angolo in alto a sinistra della pagina e trascina il blocco Menu di navigazione sulla barra laterale.

Dopodiché, puoi dare un nome al widget e selezionare il menu che desideri visualizzare dal menu a discesa. Infine, fai clic sul pulsante 'Aggiorna' in alto per salvare le impostazioni.

Ecco come appare il menu verticale della barra laterale sul nostro blog WordPress dimostrativo.

Creare un menu di navigazione verticale su un articolo o una pagina

Puoi aggiungere un menu di navigazione verticale a post e pagine in modo simile.

Innanzitutto, devi creare un nuovo post o modificare uno esistente.

Dopodiché, fai clic sul pulsante '+' nella parte superiore della pagina, quindi trascina il blocco Navigazione sulla pagina.

Successivamente, scegli quale menu verrà visualizzato. Fai semplicemente clic sul pulsante 'Seleziona menu' sulla barra degli strumenti e seleziona il menu desiderato.

Infine, devi esaminare le impostazioni del blocco nel pannello a destra.

Lì troverai due pulsanti per l'orientamento del menu. Dovrai fare clic sul pulsante con la freccia verso il basso per orientare il menu verticalmente.

Una volta terminato, fai clic sul pulsante 'Pubblica' o 'Aggiorna' per salvare le impostazioni.

Aggiungere un menu di navigazione verticale utilizzando l'editor completo del sito

Se stai utilizzando un tema basato su blocchi, puoi facilmente aggiungere il menu di navigazione verticale al tuo sito utilizzando l'editor completo del sito.

Per fare ciò, vai alla schermata Aspetto » Editor dalla tua bacheca di WordPress. Una volta nell'editor, fai clic sul menu di navigazione che appare nella parte superiore dell'intestazione del sito web.

Successivamente, fai clic sul pulsante 'Seleziona navigazione' nella barra degli strumenti.

Ora vedrai diverse opzioni per personalizzare il menu di navigazione nel pannello a destra.

Una di queste opzioni è se visualizzare il menu con un orientamento orizzontale o verticale. Fai semplicemente clic sulla freccia verso il basso per l'orientamento verticale per creare un menu verticale.

Per ulteriori informazioni, consulta la nostra guida su come aggiungere un menu di navigazione in WordPress.

Infine, fai clic sul pulsante 'Salva' per memorizzare le tue impostazioni. Ora hai aggiunto un menu di navigazione verticale al tuo sito.

Creare un menu di navigazione verticale utilizzando un plugin per la creazione di temi

SeedProd è il miglior costruttore di pagine WordPress e plugin per la creazione di temi personalizzati sul mercato. Ti consente di creare facilmente menu verticali ovunque sul tuo sito web WordPress.

Innanzitutto, devi installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida per principianti su come installare un plugin WordPress.

Dopo l'attivazione, dovrai inserire la tua chiave di licenza. Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd.

Dopodiché, puoi usare SeedProd per creare un tema WordPress personalizzato.

Creazione di un tema WordPress personalizzato

Troverai il theme builder di SeedProd navigando alla pagina SeedProd » Theme Builder. Qui, userai uno dei temi predefiniti di SeedProd come punto di partenza. Questo sostituirà il tuo tema WordPress esistente con un nuovo design personalizzato.

Puoi farlo cliccando sul pulsante 'Temi'.

Ti verrà quindi mostrato un elenco di temi progettati professionalmente per diversi tipi di siti web. Ad esempio, ci sono modelli chiamati 'Modern Business', 'Marketing Agency' e 'Mortgage Broker Theme'.

Dai un'occhiata alle opzioni e seleziona quella che meglio si adatta alle tue esigenze facendo clic sull'icona del segno di spunta.

Una volta scelto un tema, SeedProd genererà tutti i modelli di tema di cui hai bisogno. Puoi scoprire come personalizzare questi modelli nella nostra guida su come creare facilmente un tema WordPress personalizzato.

Aggiungere un menu di navigazione verticale ai modelli del tuo sito

Ora, puoi usare SeedProd per aggiungere un menu di navigazione verticale a uno qualsiasi dei tuoi modelli di tema. In questo tutorial, aggiungeremo un menu al modello di indice del blog.

Devi passare il mouse sopra quel modello e quindi fare clic sul link 'Modifica design'.

Questo aprirà il page builder drag-and-drop di SeedProd, dove vedrai un'anteprima del tuo sito web sulla destra e un pannello di blocchi sulla sinistra.

Da qui, scorri i blocchi fino a raggiungere la sezione Avanzate.

Una volta individuato il blocco Menu di navigazione, dovresti trascinarlo nella tua barra laterale o ovunque tu voglia visualizzare il menu di navigazione. Per impostazione predefinita, c'è solo una voce nel menu, 'Informazioni'.

Ora, dovrai modificare le impostazioni del menu. Per farlo, fai clic sul menu e le opzioni disponibili verranno visualizzate nella colonna di sinistra.

Attualmente, è selezionato il tipo di menu 'Semplice'. Questo ti permette di creare il tuo menu di navigazione in SeedProd.

Tuttavia, per questo tutorial, faremo clic sul tipo 'Menu WordPress' per utilizzare invece il menu di navigazione di WordPress.

Infine, devi fare clic sulla scheda 'Avanzate'. Qui troverai un'opzione per orientare il layout dell'elenco verticalmente o orizzontalmente.

Quando fai clic sul pulsante 'Verticale', noterai che l'anteprima cambia immediatamente in un menu di navigazione verticale.

Non dimenticare di fare clic sul pulsante 'Salva' in alto sullo schermo per memorizzare il tuo menu verticale.

Creare un menu di navigazione verticale reattivo per dispositivi mobili

Può essere difficile toccare un menu standard mentre si utilizza il piccolo schermo di uno smartphone. Ecco perché ti consigliamo di visualizzare l'anteprima della versione mobile del tuo sito WordPress per vedere come appare il tuo sito web sui dispositivi mobili.

I menu verticali sono molto più facili da navigare, specialmente quando si utilizza un menu responsive a schermo intero che si adatta automaticamente a diverse dimensioni dello schermo.

Per imparare come rendere il tuo menu di navigazione più facile da usare sui dispositivi mobili, consulta la nostra guida su come aggiungere un menu responsive a schermo intero in WordPress.

Crea un menu a discesa in WordPress

Un menu a discesa appare come un normale menu di navigazione orizzontale in alto sullo schermo. Ma quando passi il mouse sopra una delle voci, viene visualizzato un sottomenu verticale.

Se hai un sito web con molti contenuti, un menu a discesa ti consente di organizzare la struttura del menu per argomenti o gerarchia. Questo mostrerà più contenuti in uno spazio limitato.

Per visualizzare un menu di navigazione a discesa sul tuo sito web, dovrai scegliere un tema con supporto per menu a discesa. Dopodiché, dovrai creare il menu di navigazione e quindi aggiungere sotto-voci ad alcune delle voci del menu.

Puoi imparare come farlo passo dopo passo nella nostra guida per principianti su come creare un menu a discesa in WordPress.

Creare un mega menu in WordPress

Un mega menu elenca più menu verticalmente attraverso la pagina. Sono simili ai menu a discesa, tranne per il fatto che tutti i sottomenu vengono visualizzati contemporaneamente, consentendo agli utenti di trovare rapidamente e facilmente i tuoi contenuti migliori.

I mega menu sono molto coinvolgenti e interattivi perché combinano il meglio dei menu orizzontali e verticali per mostrare una panoramica utile dei contenuti del tuo sito web su un'unica schermata.

Abbiamo recentemente aggiunto un mega menu a WPBeginner per migliorare la reperibilità dei contenuti. Spieghiamo come abbiamo fatto nel nostro uno sguardo dietro le quinte del nostro nuovo design del sito.

Puoi saperne di più nella nostra guida su come aggiungere un mega menu al tuo sito WordPress.

Bonus: Crea un menu di navigazione fisso fluttuante in WordPress

Puoi anche creare un menu di navigazione fisso e fluttuante per il tuo sito web per migliorare il coinvolgimento degli utenti. Un menu fisso rimane visibile sullo schermo anche mentre gli utenti scorrono la pagina, rendendolo di facile accesso.

Per rendere fisso il tuo menu di navigazione, devi installare e attivare il plugin Sticky Menu & Sticky Header. Per i dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

Dopo l'attivazione, vai alla pagina Impostazioni » Menu Fisso e digita #main-navigation accanto all'opzione ‘Elemento Fisso (richiesto)’. In questo modo, puoi rendere fisso anche il tuo menu di navigazione verticale.

Una volta terminato, fai clic su ‘Salva modifiche’ per memorizzare le tue impostazioni. Per ulteriori istruzioni, puoi consultare il nostro tutorial su come creare un menu di navigazione fisso e fluttuante in WordPress.

Speriamo che questo tutorial ti abbia aiutato a imparare come creare un menu di navigazione verticale in WordPress. Potresti anche voler imparare come nascondere un menu mobile in WordPress o la nostra guida su come aggiungere icone immagine ai menu di navigazione in WordPress.

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