Come aggiungere contenuti pieghevoli/espandibili in WordPress

Come aggiungere contenuti pieghevoli/espandibili in WordPress

Vi è mai capitato di scorrere una lunga pagina web, faticando a trovare l'informazione esatta di cui avete bisogno? È frustrante, vero? La soluzione sta nei contenuti pieghevoli ed espandibili, un modo semplice ma efficace per organizzare le informazioni.

Questa tecnica consente di presentare contenuti dettagliati mantenendo le pagine pulite e facili da navigare. Che si tratti di FAQ, descrizioni di prodotti o post di blog, le sezioni pieghevoli migliorano l'usabilità e il coinvolgimento.

La buona notizia? Non è necessario immergersi nella codifica per implementarla. Con WordPress, strumenti come il plugin Ultimate Blocks lo rendono incredibilmente semplice. Ultimate Blocks, un plugin specificamente progettato per gli utenti di Gutenberg, offre funzioni come il Toggle del contenuto e Espandi i blocchi per consentire la creazione di sezioni interattive e pieghevoli. 

Metodo 1: Utilizzo del plugin Ultimate Blocks

Passo 1: Installare il plugin Ultimate Blocks

Accedere alla dashboard di WordPress, andare alla sezione "Plugin" e fare clic su "Aggiungi nuovo". Tipo "Blocchi definitivi" nella barra di ricerca, individuare il plugin nei risultati, fare clic su "Installa ora". e poi "Attivare".

Installare il plugin Ultimate Blocks

Passo 2: Aggiungere il blocco Toggle del contenuto

Aprire il post o la pagina in cui si desidera aggiungere il contenuto pieghevole. Fare clic sul pulsante "Icona "+ nell'editor di WordPress per aggiungere un nuovo blocco, cercare "Content Toggle" e selezionarlo. 

Aggiungere il blocco Toggle Content

Una volta aggiunto il blocco, si vedrà il blocco toggle in posizione, ma in un formato chiuso. Fare clic sul segno della freccia per espanderlo, inserire il titolo del contenuto nel campo "Titolo del pannello" e, successivamente, il contenuto principale del file "Contenuto del pannello" scatola. 

Titolo e contenuto del luogo

Ora, se si ha bisogno di più di una sezione espandibile o pieghevole, fare clic sul pulsante + pulsante in fondo al blocco per inserire una nuova levetta. Allo stesso modo, se non si desidera alcun toggle specifico, fare clic sul pulsante x alla fine del blocco. 

Aggiungere nuove levette

Passo 3: personalizzare il blocco Toggle del contenuto

Una volta selezionato il blocco, il pannello delle impostazioni del blocco apparirà sulla destra della dashboard. Qui si trovano due schede separate: Impostazioni generali e stili.

Nel Impostazioni generali è possibile:

  • Regolare il Titolo del pannello per una corretta gerarchia.
  • Impostare lo stato di attivazione per controllare se i pannelli devono essere chiusi o aperti al caricamento della pagina.
  • Abilitazione Schema FAQ per migliorare la visibilità nei risultati dei motori di ricerca.
  • Utilizzo Controllo reattivo per nascondere o visualizzare il blocco su dispositivi specifici.
  • Aggiungere un Casella di ricerca per facilitare la navigazione delle FAQ. Tuttavia, questa funzione è limitata agli utenti Pro. 
Impostazioni generali

Ora, se si passa all'opzione Scheda StiliÈ possibile regolare i colori, attivare i bordi, impostare gli stili e le posizioni delle icone e regolare con precisione il padding e i margini.

Scheda Stili

Una volta soddisfatti, fare clic su "Pubblica" o "Aggiorna" per renderlo attivo.

Demo finale

Metodo 2: Utilizzo del blocco Espandi

Passo 1: Aggiungere il blocco Espandi

Passare alla pagina o al post in cui si desidera il contenuto pieghevole/espandibile. Fare nuovamente clic sull'icona "+" per aggiungere un nuovo blocco, cercare "Espandi" e selezionarlo. 

Aggiungere il blocco Espandi

Passo 2: Aggiungere contenuti al blocco

Il blocco fornirà due sezioni: una per il contenuto visibile (mostrato inizialmente) e un'altra per il contenuto nascosto (rivelato quando si fa clic). Aggiungere il contenuto che si desidera rimanga visibile nella prima sezione, sopra il simbolo "Mostra di più". Posizionare il resto del contenuto nella sezione nascosta sotto il testo "Mostra di più" testo. 

Contenuti visibili e nascosti

Fare clic sul pulsante + segno su ogni blocco, selezionare il blocco preferito e successivamente aggiungere contenuti ai blocchi. È possibile personalizzare il blocco "Mostra di più" e "Mostra meno" per adattare meglio i testi ai contenuti o al pubblico. È sufficiente fare clic sui testi predefiniti e sostituirli con le etichette desiderate.

Aggiungere contenuti e personalizzare i testi

Passo 3: personalizzare il blocco Espandi

La versione gratuita offre una personalizzazione limitata, comprese le impostazioni di scorrimento, il controllo della reattività e le regolazioni delle dimensioni nella scheda Stili. Ma se si passa alla versione pro, è possibile scegliere un effetto di dissolvenza per i contenuti ridotti a icona (disponibile nelle Impostazioni generali). È inoltre possibile personalizzare lo stile, il colore di sfondo, il bordo e il raggio del pulsante per ottenere un aspetto più curato.

Personalizzare il blocco

Quando si è soddisfatti del risultato, fare clic su "Pubblica" o "Aggiorna" per salvare e visualizzare le modifiche sul sito.

Demo finale

Conclusione

Lo scopo di questo articolo è quello di guidarvi nella creazione di contenuti pieghevoli ed espandibili in WordPress, mantenendo un layout pulito e facile da navigare. Gli Ultimate Blocks consentono di ottenere questo risultato senza bisogno di codifica e con semplicità sia nell'usabilità che nel design. Comprendere le esigenze del vostro pubblico è fondamentale, in quanto vi aiuta a implementare i contenuti pieghevoli dove forniscono il massimo valore e a garantire che tutto funzioni senza problemi per un'esperienza di navigazione ottimale. Tenete presente che piccoli cambiamenti come questi possono trasformare il modo in cui i visitatori interagiscono con il vostro sito.



Il team Tableberg