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.
💡Risposta rapida: Come aggiungere un menu a scomparsa nella barra laterale di WordPress
Il modo più semplice per aggiungere un menu a scomparsa nella barra laterale è utilizzare il plugin Bellows Accordion Menu.
Ti consente di progettare un menu multilivello nella tua bacheca e aggiungerlo alla tua barra laterale utilizzando uno semplice shortcode.
Cos'è un menu laterale a scomparsa? (E quando usarne uno)
Un menu a scomparsa nella barra laterale (o menu espandibile) è un elenco di navigazione che nasconde le sotto-voci finché un visitatore non fa clic per rivelarle. Organizza i link in una struttura ‘genitore-figlio’, mantenendo il design del tuo sito pulito.
Raccomandiamo spesso l'uso di menu a scomparsa per siti web di grandi dimensioni o negozi di e-commerce. Ecco perché sono efficaci:
- Organizza layout complessi: Ti aiutano a ordinare centinaia di categorie o pagine senza sopraffare l'utente.
- Risparmia spazio sullo schermo: Nascondendo le voci figlie, mantieni la barra laterale corta e ordinata.
- Migliora l'esperienza mobile: Impediscono agli utenti mobili di dover scorrere elenchi infiniti di collegamenti.
Ad esempio, la testata giornalistica Guardian utilizza un menu a scomparsa per il suo sito mobile per gestire le sue numerose categorie di notizie.
Ora, diamo un'occhiata a come puoi creare facilmente un menu a scomparsa nella barra laterale 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 pratico che ti consente di inserire il tuo menu collassabile in qualsiasi pagina, post o area widget, inclusa la tua barra laterale.
Nota: Questo plugin è progettato per essere utilizzato con i temi classici.
Passaggio 1: Installa e attiva il plugin Bellows Accordion
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.
Passaggio 2: Crea un nuovo menu
Dopo l'attivazione, visita la pagina Aspetto » Menu nella tua bacheca di WordPress.
Digita un nome per il tuo menu nel campo 'Nome menu'. Quindi, fai clic sul pulsante 'Crea menu'.
Passaggio 3: Aggiungi e organizza le voci del menu
Successivamente, scegli le pagine che desideri aggiungere dalla colonna di sinistra e fai clic su 'Aggiungi al menu'.
Se desideri vedere un elenco di tutte le pagine del tuo sito web, fai clic sulla scheda 'Visualizza tutto'. Per maggiori dettagli, consulta la nostra guida su come aggiungere un menu di navigazione in WordPress.
Per creare l'effetto collassabile, devi organizzare gli elementi in una relazione genitore-figlio. Trascina semplicemente una voce di pagina leggermente a destra sotto una voce genitore.
Trascinala verso destra finché non vedi che il contorno tratteggiato si sposta verso l'interno. Questo conferma che l'elemento è ora una sotto-voce, che sarà nascosta finché non si fa clic sul genitore.
Ora, quando un visitatore fa clic su una voce genitore nel tuo menu collassabile, si espanderà per rivelare tutto il contenuto figlio.
Non dimenticare di fare clic sul pulsante 'Salva menu' quando hai finito.
Passaggio 4: Ottieni lo shortcode del menu
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 utilizzando la scorciatoia da tastiera Command + C o Ctrl + C.
Passaggio 5: Aggiungi il menu alla tua barra laterale
Ora dobbiamo aggiungere il menu al layout del tuo sito. Vai alla pagina Aspetto » Widget dall'area di amministrazione di WordPress.
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.
Trova l'area widget della barra laterale e fai clic sull'icona '+' per aggiungere un nuovo blocco.
Cerca ‘Shortcode’ e seleziona il blocco.
Incolla il tuo shortcode copiato nel blocco e fai clic su ‘Aggiorna’. Quando visiti il tuo sito, dovresti vedere il tuo nuovo menu collassabile.
Sui dispositivi mobili, questa barra laterale apparirà tipicamente in fondo alla pagina, dove la funzione collassabile aiuta a risparmiare prezioso spazio di scorrimento verticale.
Passaggio 6: Personalizza il tuo menu comprimibile
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.
Domande frequenti sui menu laterali comprimibili in WordPress
Ecco alcune domande che i nostri lettori hanno posto frequentemente prima di aggiungere un menu laterale comprimibile ai loro siti web:
Come comprimere un menu in WordPress?
Puoi comprimere un menu utilizzando un plugin come Bellows Accordion Menu. Per impostazione predefinita, i menu di WordPress non hanno questa funzionalità sugli schermi desktop. Un plugin aggiunge il codice necessario per far espandere e nascondere gli elementi quando vengono cliccati.
Come aggiungo una sezione comprimibile in WordPress?
Il modo più semplice è utilizzare il blocco predefinito di WordPress 'Dettagli'. Questo blocco ti consente di racchiudere il contenuto all'interno di una riga di riepilogo cliccabile. Per uno stile più avanzato all'interno dei tuoi post, puoi utilizzare un plugin dedicato per fisarmoniche.
Come creare un menu a discesa in WordPress?
Puoi creare un menu a discesa visitando Aspetto » Menu nella tua bacheca. Trascina semplicemente una voce di menu leggermente a destra sotto un link padre. Questa indentazione indica a WordPress di visualizzare quella voce all'interno di un elenco a discesa.
Per maggiori dettagli, dai un'occhiata al nostro tutorial su come creare un menu a discesa in WordPress.
Come mettere gli elementi uno accanto all'altro in WordPress?
Puoi mettere gli elementi uno accanto all'altro utilizzando il blocco Colonne. Nell'editor a blocchi, seleziona 'Colonne' e scegli il tuo layout preferito. Quindi, aggiungi semplicemente il tuo testo o le tue immagini in ogni colonna.
Cos'è il plugin per blocchi fisarmonica per WordPress?
Un plugin per blocchi fisarmonica ti consente di aggiungere sezioni di contenuto comprimibili ai tuoi post. Aiuta a organizzare contenuti lunghi nascondendo il testo sotto le intestazioni. Gli utenti cliccano semplicemente sull'intestazione per leggere le informazioni di cui hanno bisogno.
Se vuoi aggiungere fisarmoniche al tuo sito, dai un'occhiata alle nostre migliori scelte per i migliori plugin fisarmonica per WordPress.
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