Formattare il blocco di Faq di Yoast

Come formattare il blocco di FAQ di Yoast, renderlo più accattivante e user friendly

Ho cercato come formattare il blocco di FAQ di Yoast e renderlo più user friendly ed ora ho trovato la soluzione.

Cercavo inizialmente una soluzione che permettesse di rendere più fruibile ed interessante il blocco delle FAQ di Yoast perché così com’è sembra un po’ anonimo e, diciamocelo, bruttino, non adatto ad un blog di viaggi.

Ho cercato sul sito di Yoast e grazie ad un loro interessante articolo sulle Faq che potete recuperare qui: https://yoast.com/developer-blog/theming-gutenberg-the-faq-block/ ho provato a fare delle ricerche diverse su CodePen.

In prima battuta ho pensato di usare una soluzione che mi permettesse di mostrare solamente domande del blocco Faq e di aprire la parte relativa alle risposte con un click oppure al passaggio del mouse.

Apertura delle Faq al click del mouse

L’apertura delle Faq di Yoast al click del mouse ritengo sia la soluzione più fruibile (a parte quella che non prevede nessuna azione), ma per quanto sono riuscito a vedere ed a provare, prevede l’esecuzione di un Javascript. Questo ha sicuramente un impatto sulla velocità del sito, ma se per il vostro caso è trascurabile potete trovare un esempio qui postato da @sheriar-butt.

E questo è un esempio di personalizzazione del CSS sulla base del modulo (in arancio i colori che potete personalizzare). collegandovi all’indirizzo sopra, potete vedere le modifiche in anteprima.

body{
  max-width: 800px;
  margin: 0 auto;
}
/*
	Yoast FAQ CSS
*/
body .wp-block-yoast-faq-block .schema-faq-section{
    border: 2px solid #029292;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: rgba(00, 66, 00, 0.2) 0px 2px 8px 0px;
}
body .schema-faq-question {
    position: relative;
    background: #ffe7d8;
    display: block;
    cursor: pointer;
    padding: 20px 65px 20px 20px;
    font-weight: bold;
    font-size: 20px;
}
body .schema-faq-question:after {
    position: absolute;
    background: #ffffff;
    content: "+";
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid #029292;
    line-height: 1;
    border-radius: 50%;
    font-size: 25px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #335548;
}
body .schema-faq-section.active .schema-faq-question:after {
    content: "-";
    align-items: normal;
    font-size: 30px;
    line-height: 17px;
}
body .schema-faq-question:hover{
    background: #029292;
    border-radius: 8px;
}
body .schema-faq-section.active .schema-faq-question{
  background: #029292;
  color:#ffffff;
  border-radius: 0;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;  
}
body .schema-faq-answer {
    display: none;
    margin: 20px 0 20px;
    padding: 0 20px;
}

Apertura delle Faq al passaggio del mouse

L’apertura delle Faq al passaggio del mouse è un’altra soluzione interessante, sempre fruibile, anche se continuo a preferire il clic del mouse, ma sicuramente più leggera, in quanto non si tratta di javascript, ma è realizzabile tramite l’aggiunta di CSS

Il codice è stato pubblicato per la prima volta su CodePen da @RolandFarkas (potete vedere e modificare l’originale da qui: https://codepen.io/rolandfarkas/pen/Jjrmjyz)

Qui sotto invece la mia personalizzazione visibile nell’immagine.

body {
  font-family: default;
  font-size: 18px;
}
.schema-faq {
  width: 80%;
  padding: 10;
  margin: 0 auto;
}
.schema-faq-question {
  position: relative;
  background: #ffffff;
  color: #029292;
  margin: 10;
  padding: 15px 15px 15px 15px;
  border-width: 1px;
  border-style: solid;
  border-color: #a0e0e0;
  display: block;
  width:100%;
  cursor: pointer;
}
.schema-faq-answer {
  padding: 0px 15px;
  margin: 5px 0;
  width:100%!important;
  height: 0;
  overflow: hidden;
  z-index: -1;
  position: relative;
  opacity: 0;
  -webkit-transition: .5s ease;
  -moz-transition: .5s ease;
  -o-transition: .5s ease;
  transition: .5s ease;
}
.schema-faq-question:hover ~ .schema-faq-answer {
  height: auto;
  opacity: 1;
  padding: 15px;
}
.schema-faq-answer:hover ~ .schema-faq-answer {
  height: auto;
  opacity: 1;
  padding: 15px;
}
.schema-faq-question::after {
  position: absolute;
  content: "+";
  right: 20px;
}
.schema-faq-question:hover::after {
  position: absolute;
  content: "-";
  right: 20px;
}

La mia personalizzazione con Faq sempre visibili

La mia scelta dopo accurate ricerche, è stata quella di utilizzare le Faq sempre visibili, personalizzate con un a piccola aggiunta di codice CSS in maniera da non aggiungere troppo codice alle pagine ed allo stesso tempo fornire un impatto visivo migliore e coerente con i colori e lo stile del mio sito.

Le faq appaiono come quelle in fondo all’articolo, personalizzate con il codice qui sotto. Il tema in uso è NewsPaper di TagDiv, ma le FAQ non sono quelle di Yoast, perché nel frattempo sono passato a RankMath (e non me ne pento).

.schema-faq-question {
  position: relative;
  color: #029292 !important;
  padding: 5px 5px 5px 5px;
  border-top-width: 1px;
  border-left: 1px;
  border-top: solid;
  border-color: #029292;
}

Immagine di copertina di pressfoto su Freepik

Faq di Yoast

Scopri cosa puoi fare

Leggi tutti gli articoli che ti aiutano ad aprire un blog di viaggi da zero.

Scopri come acquistare uno spazio dove ospitare il tuo sito e come muovere i primi passi con WordPress.

Pian piano ti accompagno in questo fantastico mondo, ogni mese guide trucchi e consigli.

Se invece stai programmando un viaggio controlla cosa mettere in valigia: la lista da stampare per il viaggio perfetto. Puoi anche stamparla e compilarla offline!

Clicca qui e risparmia oltre il 60% con l’hosting di SiteGround (è quello che uso io)

Arrivederci presto!