Volete creare un menu laterale pieghevole in WordPress?
Un menu pieghevole può offrire ai visitatori del sito web un modo semplice per accedere a molti link senza ingombrare la barra laterale. È perfetto per i siti web di grandi dimensioni, per i negozi di e-commerce o per qualsiasi sito con un layout più complesso.
In questo articolo vi mostreremo come creare facilmente un menu laterale pieghevole in WordPress.
Cos’è un menu laterale pieghevole? (E quando usarlo)
I menu più facili da usare consentono di accedere facilmente a tutti i link di cui i visitatori hanno bisogno. Tuttavia, questo può essere difficile per i siti WordPress che hanno molte pagine o un layout più complesso.
Pensate a un grande negozio di e-commerce con molte categorie e sottocategorie di prodotti, come Amazon.
Visualizzare ogni singola categoria di prodotto in un menu standard non sarebbe una buona idea. Gli acquirenti dovrebbero probabilmente scorrere il menu per trovare la categoria di loro interesse.
È qui che entrano in gioco i menu pieghevoli. Questi menu organizzano il loro contenuto in una relazione genitore-figlio. Se il visitatore fa clic su un elemento genitore in un menu pieghevole, questo si espande per visualizzare tutti i contenuti figli del genitore.
Il Guardian utilizza un menu pieghevole per il suo sito mobile.
I menu delle barre laterali pieghevoli sono talvolta chiamati anche menu espandibili. Questo perché le diverse sezioni si espandono quando il visitatore fa clic su di esse.
Per impostazione predefinita, i menu pieghevoli nascondono ai visitatori molti contenuti e complessità. È molto più facile da usare che scorrere un lungo elenco di categorie e sottocategorie sul vostro blog WordPress.
Detto questo, vediamo come creare facilmente un menu laterale pieghevole sul vostro sito WordPress.
Video tutorial
Se preferite le istruzioni scritte, continuate a leggere.
Come creare un menu laterale pieghevole in WordPress
È possibile creare un menu laterale pieghevole in WordPress utilizzando il plugin Bellows Accordion Menu.
Bellows Accordion Menu fornisce un pratico shortcode per posizionare il vostro menu pieghevole su qualsiasi pagina, post o area widget, compresa la barra laterale.
Per prima cosa, è necessario installare e attivare il plugin Bellows Accordion Menu. Se avete bisogno di aiuto, consultate la nostra guida per principianti su come installare un plugin di WordPress.
Dopo l’attivazione, visitare la pagina Aspetto ” Menu nella dashboard di WordPress.
Per iniziare, digitate un nome per il vostro menu nel campo “Nome del menu”. I visitatori del sito non vedranno il nome, poiché è solo un riferimento per voi.
È quindi possibile fare clic sul pulsante “Crea menu”.
Quindi, scegliere le pagine che si desidera aggiungere al menu della barra laterale pieghevole. Per impostazione predefinita, WordPress visualizza solo le pagine più recenti.
Se si desidera visualizzare un elenco di tutte le pagine del sito, fare clic sulla scheda “Visualizza tutto”.
In alternativa, è possibile fare clic su “Seleziona tutto”. In questo modo tutte le pagine verranno aggiunte al menu pieghevole.
Una volta soddisfatti della selezione, fare clic sul pulsante “Aggiungi al menu”. È anche possibile selezionare i post e le categorie del blog o aggiungere collegamenti personalizzati. Per maggiori dettagli, consultate la nostra guida su come aggiungere un menu di navigazione in WordPress.
Dopo aver aggiunto tutte le pagine web al menu, è possibile spostarle trascinandole e rilasciandole. In questo modo si cambierà l’ordine di visualizzazione delle pagine nel menu pieghevole.
I menu pieghevoli si basano sulle relazioni genitore-figlio.
Quando un visitatore fa clic su un elemento principale del menu pieghevole, questo si espande per rivelare tutti i contenuti secondari.
Per creare questa relazione, è sufficiente usare il drag and drop per disporre tutte le pagine del bambino sotto il suo genitore.
Quindi, afferrare ogni bambino e trascinarlo un po’ verso destra. È quindi possibile rilasciare la pagina. In questo modo l’elemento verrà rientrato e trasformato in una pagina figlia.
Non dimenticate di fare clic sul pulsante “Salva modifiche” quando avete finito.
Ora vogliamo aggiungere questo menu pieghevole alla barra laterale di WordPress. Per farlo, utilizzeremo alcuni shortcode che Bellows Accordion crea automaticamente.
Per prendere lo shortcode, andare alla pagina Aspetto ” Menu a soffietto dalla dashboard di WordPress. Se non è già selezionato, assicurarsi di selezionare la scheda “Mostra tutto”.
Ora è possibile fare clic sulla casella Shortcode, che dovrebbe evidenziare tutto il codice. A questo punto, copiare il codice utilizzando la scorciatoia da tastiera Command + c o Ctrl + c.
Il passo successivo consiste nell’incollare questo shortcode in un widget, quindi andate alla pagina Aspetto ” Widget dall’area di amministrazione.
In questo modo verranno visualizzate tutte le aree per i widget del tema corrente. Le opzioni visualizzate possono variare, ma la maggior parte dei temi WordPress moderni presenta una barra laterale.
Una volta trovata l’area della barra laterale, fare clic su di essa. Questa sezione si espanderà.
Per aggiungere un blocco, fare clic sull’icona + e iniziare a digitare Shortcode. Quando appare, selezionare il blocco Shortcode.
A questo punto, è sufficiente incollare il codice breve del menu pieghevole in questo blocco. Per pubblicare il menu, è necessario fare clic sul pulsante “Aggiorna” nella parte superiore dello schermo.
Ora, quando si visita il sito, si dovrebbe vedere un nuovo menu laterale pieghevole.
Il plugin Bellows Accordion consente inoltre di personalizzare con estrema facilità questo menu predefinito. Ad esempio, si può cambiare la combinazione di colori per riflettere meglio il marchio del sito.
Se si desidera modificare il menu predefinito, è sufficiente andare alla pagina Aspetto “ Menu a soffietto nella dashboard di WordPress.
Questo menu contiene tutte le impostazioni necessarie per personalizzare il vostro menu pieghevole. Ci sono molte impostazioni da esplorare. Tuttavia, si consiglia di iniziare andando a Configurazione principale ” Configurazione di base.
Qui è possibile scegliere tra diversi colori di menu. È inoltre possibile scegliere se i visitatori possono espandere più sottomenu contemporaneamente, utilizzando le impostazioni della piegatura a fisarmonica.
Per modificare l’allineamento e la larghezza del menu, fare clic sulla scheda “Layout e posizione”.
Se preferite visualizzare un’anteprima delle modifiche in tempo reale, potete modificare il menu della barra laterale pieghevole nel Customizer di WordPress.
Per farlo, andare alla pagina Aspetto ” Personalizzazione dall’area di amministrazione e selezionare la scheda “Soffietti” dalla colonna di sinistra.
Qui si trovano molte impostazioni diverse per la barra laterale. Tra queste, la modifica della larghezza, dell’allineamento e del colore del menu della barra laterale pieghevole.
Bonus: Trucchi per la barra laterale di WordPress per ottenere i massimi risultati
Una volta creato il menu della barra laterale pieghevole, potete utilizzare altri suggerimenti per generare più contatti con l’aiuto della vostra barra laterale.
Ad esempio, è possibile rendere il widget della barra laterale appiccicoso, in modo che sia visibile sulla pagina anche quando l’utente scorre verso il basso.
Oltre a questo, potete aggiungere un modulo di contatto o di iscrizione via e-mail nella vostra barra laterale per costruire la vostra lista di e-mail. Per farlo, potete utilizzare WPForms, il miglior plugin per moduli di contatto sul mercato.
Dovrete semplicemente creare un modulo e poi aggiungerlo alla vostra barra laterale usando il blocco WPForms nel menu dei blocchi.
Per maggiori dettagli, potete consultare il nostro tutorial su come creare un modulo di contatto in WordPress.
Inoltre, è possibile visualizzare i post più popolari nella barra laterale, aggiungere immagini, mostrare le icone dei social media e mostrare la prova sociale. Ciò incoraggerà gli utenti a esplorare maggiormente il vostro sito e aumenterà le conversioni.
Per ulteriori suggerimenti, potete consultare il nostro elenco dei migliori trucchi per la barra laterale di WordPress per ottenere i massimi risultati.
Speriamo che questo articolo vi abbia aiutato a capire come creare un menu laterale pieghevole in WordPress. Potete anche consultare la nostra guida su come monitorare i visitatori del vostro sito web e il miglior software di notifica push per aumentare il vostro traffico.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
For websites that have many categories, this is the perfect option to make the sidebar clear. I now have about 15 categories on the site and am thinking about something similar to the accordion as well. Thanks for the inspiration.
Tamie says
Thank you for this. How can you adjust the spacing between the subcategories? I have a lot of categories and having what looks like a double line space in between make the menus very long.
WPBeginner Support says
It would depend on your specific theme for the settings required. You would want to start by checking with the support for your specific theme. Otherwise, you could use Inspect Element to find what needs to be modified. We have a guide below that shows how to use Inspect Element to help with this:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin