Crea la Pagina Faq con un semplice Accordion Html e Css

 

Generalmente utilizzato per le Pagine FAQ (Frequently Asked Questions), un Accordion si può definire come una sorta di “contenitore di testo e/o immagini” che può essere espanso o collassato al click del mouse o al touch sul mobile. Realizzarlo è davvero semplicissimo: si tratta di utilizzare l’elemento html <summary> all’interno dell’elemento html <details> e di per sé funziona già così.

Può anche darsi che lo sviluppatore del tuo Tema WordPress abbia già inserito delle regole css sui due elementi html di cui sopra e che tu non debba fare nient’altro per cambiarne lo stile grafico perché, in teoria, la grafica è già in linea con la palette di colori del tuo Tema. In caso contrario, scorrendo l’articolo troverai degli esempi di codice css, da cui potrai prendere spunto per poter personalizzare il tuo Accordion Html e Css.

 

 

Anteprima Accordion

Veniamo subito all’esempio pratico. Qui di seguito puoi vedere all’opera l’Accordion che ho realizzato appositamente per quest’articolo e, credimi, ho impiegato non più di dieci minuti per farlo. Lo so, forse stai pensando che quei colori non fanno al caso tuo,  o che so, magari avresti preferito un bordo color cielo plumbeo o acqua cristallina. De gustibus… Ma niente panico, basta semplicemente cambiare i valori css e in breve potrai avere il tuo Accordion anche color cachi, se è questo il tuo genere.

Che cos’è un accordion?
Generalmente utilizzato per le pagine FAQ (Frequently Asked Questions), un accordion è una sorta di “contenitore” che può essere espanso o collassato al click del mouse o al touch del dito sul mobile.

Devo installare un plugin?
Nient’affatto! La nostra filosofia è liberarci il più possibile dai plugin superflui. Bastano appena due nozioni di html e css per avere un accordion nel proprio sito web. Se sai fare copia e incolla sei a cavallo!

Dove incollo l’html e il css?
Se usi (come immagino) WordPress, nell’editor a blocchi (Gutenberg) clicca sul menù in alto a destra e scegli “Editor del codice”; il codice css, invece, andando su “Personalizza” e poi su “Css Aggiuntivo”.

E se non uso WordPress?
Stiamo parlando di codice html e css, quindi l’accordion può essere incorporato su ogni tipo di piattaforma online che sia raggiungibile da un browser. Sia che tu usi un Cms o una semplice pagina web statica, avrai il tuo bell’accordion.

Posso cambiare i colori?
Sicuro! Puoi cambiare il colore del bordo e il relativo spessore; il colore del testo della domanda, del testo della risposta, del colore di sfondo (background) di entrambi; puoi cambiare la grandezza del testo, il font, la durata dell’animazione etc.

 
[Torna all’indice]

Codice Html

Qui di seguito riporto “paro paro” il codice html dell’esempio che vedi sopra. Come vedi il meccanismo è semplicissimo. Tutt’al più potresti provare a verificare se il tuo Tema ha già stilizzato l’Accordion e, nel caso, rimuovere le classi che ho assegnato (“gowp-accordion” e “gowp-accordion-text”).

 
[Torna all’indice]

Codice Css

Nel Codice Css che segue ho aggiunto dei commenti che ti facilitano a individuare quei valori che si possono cambiare per impostarli in base ai propri gusti o necessità. Riguardo ai colori ho inserito i nomi whitesmoke e blueviolet ma puoi anche impostare un valore esadecimale.

Per individuare il colore esadecimale, ti basterà ispezionare l’elemento con Google Chrome, scegliere il colore e copiare il relativo codice. Così:

Accordion Html Css - ispeziona elemento con google chrome

In alternativa cerca Pick Color su Google.

 
[Torna all’indice]

Accordion Minimal

In questo tipo Accordion Html e Css ho preferito uno stile minimal, limitando sia l’uso dell’html che del css. Ho solo aggiunto un bordo superiore di 1 pixel per distinguere le sezioni, ma se preferisci puoi anche eliminare il bordo (basta cancellare “border-top: 1px solid;“). E in aggiunta, se vuoi, puoi inserire una piccola animazione all’apertura dell’Accordion.

Anteprima

 

Lorem ipsum dolor?

Lorem ipsum dolor sit amet. Si vis pacem para bellum et cetera.

Lorem ipsum dolor?

Lorem ipsum dolor sit amet. Timeo danaos et dona ferentes.

Lorem ipsum dolor?

Lorem ipsum dolor sit amet. Par in parem non habet imperium.

Codice Html

Codice Css

Animazione Css

 
[Torna all’indice]

Accordion con Bootstrap

Se hai la fortuna (dipende dai punti di vista) di avere già presente nel tuo Tema il framework Bootstrap, ti basterà andare nella sezione “Components” e scegliere l’elemento Accordion. Di seguito il codice html di esempio basato su Bootstrap Versione 5

Ecco un’immagine di anteprima e il relativo codice html:

Accordion Html Css con Bootstrap

 

Sinceramente lo trovo più macchinoso delle precedenti soluzioni. L’unico aspetto positivo è che tu non debba occuparti di impostare le varie regole css e le animazioni, perché impostate di default. Per sicurezza ti segnalo anche l’Accordion per Bootstrap 4.3

Se non sai quale versione Bootstrap hai installata nel tuo Tema WordPress, puoi smanettare nei file del tema, puoi ispezionare il codice sorgente tra i vari <link rel=”stylesheet” href=”…” />, o al massimo chiedere allo sviluppatore del Tema.

 
[Torna all’indice]

Conclusioni

Spero di averti fornito sufficienti scelte e spunti per realizzare la tua Pagina Faq. Ogni sito (che si rispetti e) che offra o venda un prodotto/servizio, ha la sua bella Pagina Faq, che il più delle volte viene indicizzata da Google e mostrata nelle ricerche. Inoltre è indubbio che migliori la User Experience, ossia l’approccio degli utenti col tuo sito. In pratica la Pagina Faq è divenuta un must-have, uno standard per i siti professionali.

A proposito di Google, hai già letto Come integrare Analytics, Search Console, Speed e AdSense nel tuo sito web?

Condividi sui Social



Potrebbero interessarti anche...



Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *