Un menu laterale a scomparsa è un ottimo modo per fornire un facile accesso a collegamenti e contenuti importanti, mantenendo al contempo il design del tuo sito web pulito e organizzato.
Questa funzionalità consente agli utenti di espandere e comprimere il menu, dando loro il controllo sulla loro esperienza di navigazione.
Abbiamo notato che molti siti web di grandi dimensioni, negozi di eCommerce e siti con layout più complessi lo utilizzano per semplificare la navigazione.
In questo articolo, ti mostreremo come creare facilmente un menu laterale a scomparsa in WordPress.
Cos'è un menu laterale a scomparsa? (E quando usarne uno)
I menu più user-friendly forniscono un facile accesso a tutti i collegamenti di cui i visitatori hanno bisogno. Tuttavia, questo può essere complicato per i siti WordPress che hanno molte pagine o un layout più complesso.
Pensa a un grande negozio di eCommerce che ha tonnellate di categorie di prodotti e sottocategorie, come Amazon.
Visualizzare ogni singola categoria di prodotto in un menu standard non sarebbe una buona idea. Gli acquirenti probabilmente dovrebbero scorrere il menu per trovare la categoria di loro interesse.
È qui che entrano in gioco i menu a scomparsa. Questi menu organizzano i contenuti secondo un approccio 'genitore-figlio'. Ciò significa che se il visitatore fa clic su un elemento genitore in un menu a scomparsa, questo si espanderà per visualizzare tutti i contenuti figli di quell'elemento genitore.
Un esempio di ciò è la testata giornalistica Guardian, che utilizza un menu a scomparsa per il suo sito mobile.
I menu laterali a scomparsa sono talvolta chiamati anche menu espandibili. Questo perché le loro diverse sezioni si espandono quando un visitatore fa clic su di esse.
Per impostazione predefinita, i menu a scomparsa nascondono molti contenuti e complessità ai visitatori. Questo è molto più facile da usare rispetto allo scorrimento di un lungo elenco di categorie e sottocategorie sul tuo blog WordPress.
Detto questo, diamo un'occhiata a come puoi creare facilmente un menu laterale a scomparsa sul tuo sito WordPress.
Come creare un menu laterale collassabile in WordPress
Puoi creare un menu laterale a scomparsa in WordPress utilizzando il plugin Bellows Accordion Menu.
Fornisce uno shortcode utile per inserire il tuo menu a scomparsa in qualsiasi pagina, post o area widget, inclusa la barra laterale.
Innanzitutto, dovrai installare e attivare il plugin Bellows Accordion Menu. Se hai bisogno di aiuto, consulta la nostra guida per principianti su come installare un plugin WordPress.
🚨 Disclaimer: Tieni presente che il plugin non è stato aggiornato con le ultime tre versioni di WordPress. Tuttavia, lo abbiamo testato sul nostro sito Web e abbiamo scoperto che funziona bene. Per i dettagli, consulta la nostra guida su l'uso di plugin WordPress obsoleti.
Dopo l'attivazione, visita la pagina Aspetto » Menu nella tua bacheca di WordPress.
Per iniziare, digita un nome per il tuo menu nel campo 'Nome Menu'. Tieni presente che i visitatori del tuo sito non vedranno questo nome poiché è solo per tuo riferimento.
Puoi quindi fare clic sul pulsante ‘Crea menu’.
Successivamente, scegli le pagine che desideri aggiungere al menu a scomparsa della barra laterale. Per impostazione predefinita, WordPress visualizza solo le tue pagine più recenti.
Se desideri visualizzare un elenco di tutte le pagine del tuo sito web, fai clic sulla scheda ‘Visualizza tutto’.
In alternativa, puoi fare clic su ‘Seleziona tutto’. Questo aggiungerà tutte le tue pagine al menu a scomparsa.
Una volta soddisfatto della tua selezione, fai clic sul pulsante ‘Aggiungi al menu’. Puoi anche selezionare post e categorie del blog o aggiungere collegamenti personalizzati. Per maggiori dettagli, consulta la nostra guida su come aggiungere un menu di navigazione in WordPress.
Dopo aver aggiunto tutte le tue diverse pagine web al menu, puoi spostarle trascinandole e rilasciandole. Questo cambierà l'ordine in cui queste pagine appaiono nel tuo menu comprimibile.
I menu comprimibili riguardano le relazioni padre-figlio.
Quando un visitatore fa clic su una voce padre nel tuo menu comprimibile, questo si espanderà per rivelare tutti i contenuti figli.
Per creare questa relazione, usa semplicemente il trascinamento per disporre tutte le pagine dei tuoi figli sotto il loro genitore.
Successivamente, prendi ogni figlio e trascinalo un po' verso destra. Puoi quindi rilasciare questa pagina. Questo indentirà l'elemento e lo trasformerà in una sottopagina.
Non dimenticare di fare clic sul pulsante 'Salva menu' quando hai finito.
Ora, vogliamo aggiungere questo menu comprimibile alla barra laterale di WordPress. Per fare ciò, useremo alcuni shortcode che Bellows Accordion crea automaticamente.
Per ottenere lo shortcode, vai alla pagina Aspetto » Menu Bellows dalla dashboard di WordPress. Se non è già selezionata, assicurati di selezionare la scheda 'Mostra tutto'.
Ora puoi fare clic sulla casella Shortcode, che dovrebbe evidenziare tutto il codice. Ora, copia questo codice usando la scorciatoia da tastiera Command + c o Ctrl + c.
Il passo successivo è incollare questo shortcode in un widget, quindi vai alla pagina Aspetto » Widget dall'area di amministrazione.
Questo visualizzerà tutte le aree widget all'interno del tuo tema corrente. Le opzioni che vedi possono variare, ma la maggior parte dei temi WordPress moderni presenta una barra laterale.
Una volta trovata l'area della barra laterale, fai clic su di essa. Questa sezione si espanderà ora.
Per aggiungere un blocco, fai clic sull'icona + e inizia a digitare 'Shortcode'. Quando appare, seleziona il blocco 'Shortcode'.
Ora, incolla semplicemente il tuo shortcode del menu a scomparsa in questo blocco. Per pubblicare il tuo menu, dovrai fare clic sul pulsante 'Aggiorna' nella parte superiore dello schermo.
Ora, quando visiti il tuo sito, dovresti vedere un nuovo menu laterale a scomparsa.
Il plugin Bellows Accordion rende anche super facile personalizzare questo menu predefinito. Ad esempio, potresti cambiare il suo schema di colori per riflettere meglio il branding del tuo sito.
Se vuoi modificare il menu predefinito, vai semplicemente alla pagina Aspetto » Bellows Menu nella tua bacheca di WordPress.
Questo menu ha tutte le impostazioni necessarie per personalizzare il tuo menu a scomparsa. Ci sono molte impostazioni da esplorare. Tuttavia, potresti voler iniziare andando su Configurazione principale » Configurazione di base.
Qui, puoi passare da diversi colori del menu. Puoi anche scegliere se i visitatori possono espandere più sottomenu contemporaneamente utilizzando le impostazioni 'Accordion Folding'.
Per cambiare l'allineamento e la larghezza del menu, fai clic sulla scheda 'Layout e posizione'.
Se preferisci visualizzare in anteprima le tue modifiche in tempo reale, puoi modificare il menu laterale a scomparsa nel Personalizzatore di WordPress.
Per fare ciò, vai alla pagina Aspetto » Personalizza dall'area di amministrazione e seleziona la scheda 'Bellows' dalla colonna di sinistra.
Qui troverai molte impostazioni diverse per la tua barra laterale. Queste includono la modifica della sua larghezza, allineamento e il colore del tuo menu laterale a scomparsa.
Bonus: Trucchi per la barra laterale di WordPress per ottenere risultati massimi
Una volta creato un menu laterale a scomparsa, puoi utilizzare altri suggerimenti per generare più lead con l'aiuto della tua barra laterale.
Ad esempio, puoi rendere il tuo widget della barra laterale fisso in modo che sia visibile sulla pagina anche mentre l'utente scorre verso il basso.
Oltre a ciò, puoi aggiungere un modulo di contatto o un modulo di iscrizione via email nella tua barra laterale per creare la tua lista di email. Per fare ciò, puoi usare WPForms, che è il miglior plugin per moduli di contatto sul mercato.
Su WPBeginner, lo usiamo per creare moduli di contatto e sondaggi annuali, e ci piace molto. Per saperne di più, consulta la nostra recensione completa di WPForms.
Dovrai semplicemente creare un modulo e poi aggiungerlo alla tua barra laterale usando il blocco WPForms nel menu dei blocchi.
Per maggiori dettagli, puoi consultare il nostro tutorial su come creare un modulo di contatto in WordPress.
Inoltre, puoi visualizzare i tuoi post più popolari nella barra laterale, aggiungere immagini, mostrare icone dei social media e visualizzare la riprova sociale. Questo incoraggerà gli utenti a esplorare ulteriormente il tuo sito e aumenterà le tue conversioni.
Per altri suggerimenti, puoi consultare il nostro elenco dei migliori trucchi per la barra laterale di WordPress per ottenere i massimi risultati.
Tutorial video
Se non preferisci istruzioni scritte, guarda il nostro video tutorial.
Speriamo che questo articolo ti abbia aiutato a imparare come creare un menu a barra laterale collassabile in WordPress. Per altri suggerimenti sulla modifica del design del tuo sito WordPress, puoi anche consultare le nostre guide su come personalizzare l'intestazione di WordPress e i widget WordPress più utili per il tuo sito.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Mrteesurez
Grazie per questa guida, se ho capito bene, ciò significa che il plugin genererà uno shortcode che potrà essere inserito ovunque nel sito, anche all'interno di un post?
Commenti WPBeginner
Sebbene tu possa provare a utilizzare lo shortcode in altre posizioni, anche se funziona, potrebbe o potrebbe non essere visualizzato in modo utile.
Jiří Vaněk
L'ho provato, e sì, la tua idea è corretta. Funziona davvero. Tuttavia, vale la pena considerare come lo userai alla fine. Perché nel mio caso, non ho trovato nessun altro uso se non nella barra laterale. Ma forse il tuo sito web è diverso e troverai un uso. Quindi, la risposta alla tua domanda è sì, funziona come hai descritto.
Jiří Vaněk
Per i siti web che hanno molte categorie, questa è l'opzione perfetta per rendere chiara la barra laterale. Ora ho circa 15 categorie sul sito e sto pensando a qualcosa di simile all'fisarmonica. Grazie per l'ispirazione.
Tamie
Grazie per questo. Come si può regolare lo spazio tra le sottocategorie? Ho molte categorie e avere quello che sembra uno spazio a doppia riga tra di esse rende i menu molto lunghi.
Supporto WPBeginner
Dipenderebbe dal tuo tema specifico per le impostazioni richieste. Dovresti iniziare controllando il supporto per il tuo tema specifico. Altrimenti, potresti usare Ispeziona Elemento per trovare cosa deve essere modificato. Abbiamo una guida qui sotto che mostra come usare Ispeziona Elemento per aiutarti con questo:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Amministratore