Come creare un menu laterale pieghevole in WordPress (in modo semplice)

Un menu a barra laterale pieghevole è un ottimo modo per fornire un facile accesso a link e contenuti importanti, mantenendo il design del sito web pulito e organizzato.

Questa caratteristica permette agli utenti di espandere e comprimere il menu, dando loro il controllo sulla loro esperienza di navigazione. È perfetta 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 web WordPress che hanno molte pagine o un layout più complesso.

Chi siamo, pensiamo a un grande e-commerce con tonnellate di categorie e sottocategorie di prodotti, come ad esempio 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 i contenuti con un approccio “figlio/bambino”. Ciò significa che se il visitatore fa clic su una voce di menu collassabile, questa si espande per visualizzare tutti i contenuti figlio/bambino di quell’elemento.

Ne è un esempio l’agenzia di stampa Guardian, che 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

Subscribe to WPBeginner

Se preferite le istruzioni scritte, continuate a leggere.

Come creare un menu laterale pieghevole in WordPress

È possibile creare un menu a barra 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”. Si noti che i visitatori del sito non vedranno questo nome, poiché è solo un referer.

È 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, cliccate sul pulsante “Aggiungi al menu”. Potete anche selezionare categorie di post e blog o aggiungere link personalizzati. Per maggiori dettagli, consultate la nostra guida su come add-on 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 collassabili sono caratterizzati da relazioni figlio/bambino.

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 menu” 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 ottenere lo shortcode, accedere 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, cliccare 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. È anche possibile scegliere se i visitatori possono espandere più sottomenu contemporaneamente, utilizzando le impostazioni “Piegatura a fisarmonica”.

Per modificare l’allineamento e la larghezza del menu, fare clic sulla scheda “Layout e posizione”.

Se preferite vedere l’anteprima delle modifiche in tempo reale, potete modificare il menu della barra laterale pieghevole nel Personalizzatore 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 imparare come creare un menu a barra laterale pieghevole in WordPress. Per ulteriori suggerimenti sulla modifica del design del vostro sito WordPress, potete anche consultare le nostre guide su come personalizzare l’header di WordPress e sui widget WordPress più utili per il vostro sito.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.