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.
Indice Argomenti
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?
Devo installare un plugin?
Dove incollo l’html e il css?
E se non uso WordPress?
Posso cambiare i colori?
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”).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!-- GoWp Accordion 1 --> <details> <summary class="gowp-accordion">Che cos'è un accordion?</summary> <div class="gowp-accordion-text"> 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 <i>touch</i> del dito sul mobile. </div> </details> <!-- GoWp Accordion 2 --> <details> <summary class="gowp-accordion">Devo installare un plugin?</summary> <div class="gowp-accordion-text"> 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! </div> </details> <!-- GoWp Accordion 3 --> <details> <summary class="gowp-accordion">Dove incollo l'html e il css?</summary> <div class="gowp-accordion-text"> 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". </div> </details> <!-- GoWp Accordion 4 --> <details> <summary class="gowp-accordion">E se non uso WordPress?</summary> <div class="gowp-accordion-text"> 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. </div> </details> <!-- GoWp Accordion 5 --> <details> <summary class="gowp-accordion">Posso cambiare i colori?</summary> <div class="gowp-accordion-text"> 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. </div> </details> |
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ì:
In alternativa cerca Pick Color su Google.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/* Start Css Accordion */ .gowp-accordion { background: whitesmoke; /* colore di sfondo */ color: blueviolet; /* colore del titolo */ border: 5px solid blueviolet; /* colore del bordo */ /* list-style: none; */ /* Nascondi il triangolino a sx */ border-radius: 5px; /* Bordo arrotondato */ font-weight: 700; margin: 0; padding: 10px 20px; cursor: pointer; transition: all 0.7s ease-in-out; /* Durata Animazione */ } .gowp-accordion:hover {padding-left: 25px;} /* Animaz. al passaggio mouse */ .gowp-accordion details[open] > summary:before {transform: rotate(90deg);} /* Ruota il triangolo all'apertura */ .gowp-accordion-text { background: whitesmoke; /* sfondo del testo faq*/ color: blue; /* colore del testo faq */ margin: 10px; padding: 10px 20px; border-radius: 5px; text-align: justify; } /* End Css Accordion */ |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<details> <summary>Lorem ipsum dolor?</summary> <p style="text-align: justify;">Lorem ipsum dolor sit amet. Si vis pacem para bellum et cetera.</p> </details> <details> <summary>Lorem ipsum dolor?</summary> <p style="text-align: justify;">Lorem ipsum dolor sit amet. Timeo danaos et dona ferentes.</p> </details> <details> <summary>Lorem ipsum dolor?</summary> <p style="text-align: justify;">Lorem ipsum dolor sit amet. Par in parem non habet imperium.</p> </details> |
Codice Css
1 2 3 4 5 6 |
summary{ cursor: pointer; border-top: 1px solid; padding: 10px; margin: 0; } |
Animazione Css
1 2 3 4 5 6 7 8 9 |
details[open] > summary:before { transform: rotate(90deg); } details[open] summary ~ * { animation: sweep 0.5s ease-in-out; } @keyframes sweep { 0% {opacity: 0; transform: translateX(-10px)} 100% {opacity: 1; transform: translateX(0)} } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Accordion Item #3 </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> </div> |
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.
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?