Perché dovrei pubblicare una pagina delle FAQ?

Perché è importante per organizzare le risposte ai quesiti che i tuoi utenti ti rivolgono più spesso, così non dovrai ogni volta rispondere a ognuno, ma ti basterà rimandarli alla pagina FAQ (ricordo che è l’acronimo per “Frequently Asked Questions”, ovvero “Domande Frequenti”) per fornire le principali informazioni.

Pensa, ad esempio, a un sito che offre un qualsiasi servizio online: una pagina dove, via via, vengono inserite le risposte ai quesiti più comuni rivolti dagli utenti è necessaria per almeno tre motivi:

  • Fa risparmiare tempo agli utenti: chi trova nelle FAQ la risposta alla propria domanda non avrà bisogno di scrivere mail, aprire ticket, telefonare o sperare che nella Live Chat ci sia qualcuno online.
  • Fa risparmiare tempo a te o al tuo staff che si occupa dell’assistenza: dovrà rispondere a meno mail, ticket, telefonate o chat e potrà dedicarsi agli utenti che hanno bisogno di assistenza personalizzata.
  • Diventa una pagina ricca di contenuti solitamente pertinenti ai servizi offerti: Google non potrà fare a meno di notarla.

Ne ho creata una anche su questo sito sfruttando gli strumenti che Divi ci mette a disposizione direttamente nel builder e seguendo la guida di questo tutorial di Divilover (in inglese), che spiega come usare le Blurb di Divi per fare delle Tab personalizzate. Non che io abbia tante FAQ da pubblicare, ma era un’ottima scusa per imparare qualcosa di nuovo!

Iniziamo impostando le Tab per le varie categorie di FAQ, così gli utenti potranno trovare più facilmente le informazioni che cercano.

Impostiamo i titoli per le categorie delle FAQ

Servono tante Blurb quante erano le categorie delle risposte alle domande più comuni, nel mio caso sono solo due (Extradivi e Divi). Mi sento di sconsigliare questa soluzione se hai molte categorie, perché la pagina potrebbe diventare poco leggibile, specie su mobile (potresti comunque pensare a una versione alternativa).

Per prima cosa, dobbiamo creare una sezione standard, con una riga a colonna singola. Nelle Opzioni della Sezione, andare su Avanzate e mettere “blurb-tabs”  come ID CSS.

impostazioni della sezione divi

Nelle Opzioni della Riga dobbiamo cambiare subito un paio di impostazioni: in Design/Dimensionamento, settare il valore della Spaziatura tra colonne a 1 e rendere la colonna a larghezza 100%.

blurb come tab su Divi

Inseriamo poi i moduli Blurb che ci servono e, per comodità, assegniamo loro dei nomi per distinguerli, usando l’apposito campo “etichetta”:

etichetta blurb divi

Otterremo una struttura di questo tipo:

Personalizzare i Blurb

Possiamo personalizzare graficamente le nostre blurb/tab come preferisci, in modo da rispecchiare la veste grafica del tuo sito; qui, a differenza del tutorial originale, non ho utilizzato icone, ma solo i nomi e dei colori differenti. L’importante è che a ogni Blurb tu assegni la classe CSS “tab-title” e che l’URL del link sia #tab1 per la prima tab, #tab2 per la seconda e così via se ne hai altre (#tab3, #tab4…), analogamente agli esempi sottostanti (clicca per ingrandire).

Un po’ di codice per sistemare i moduli

Ora dobbiamo sistemare i blurb per far sì che si dispongano in orizzontale e si adattino alle dimensioni dello schermo. Se sai utilizzare i CSS e Flexbox, il codice qui sotto ti risulterà comprensibile. Se invece per te è una cosa nuova, andiamo velocemente a vedere a cosa serve. Ho tradotto in italiano i commenti per far individuare più facilmente gli scopi delle varie porzioni.

Questa parte serve a dimensionarli e a disporli, dato che attualmente sono a tutta larghezza:

/* Flexbox per sistemare i blurb */
#blurb-tabs .et_pb_column {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}
#blurb-tabs .tab-title { width:25%; }

Questa parte serve per renderli adattabili ai dispositivi mobili e aggiusta l’allineamento dell’icona:

/* Adattamento per schermi mobile */

@media (max-width: 767px ) {
    #blurb-tabs .tab-title {
        width:50%;
    }
}
@media (max-width: 479px ) {
    #blurb-tabs .tab-title {
        width:100%;
    }
}

/* Titoli tab per mobile */
@media (max-width: 767px ) {
	#blurb-tabs .tab-title {
		width:50%;
	}
	#blurb-tabs .tab-title .et_pb_main_blurb_image {
		margin-bottom:10px; /* Riduce margine inferiore icona */
	}
}

@media (max-width: 479px ) {
	#blurb-tabs .tab-title {
		width:100%;
	}
	#blurb-tabs .tab-title .et_pb_blurb_content { /* Sposta icona a dx */
		display:flex;
		align-items:center;
		justify-content:flex-start;
	}
	#blurb-tabs .tab-title .et_pb_main_blurb_image { /* Fissa margini icona */
		margin-bottom:0;
		margin-right:30px;
	}
}

Il prossimo snippet di CSS fa cambiare il colore alle tab quando ci passiamo col mouse; dà un colore diverso anche alla tab attiva:

/* Stili titoli tab per Hover */
#blurb-tabs .tab-title {
    transition:all .3s ease-in-out;
}
#blurb-tabs .tab-title:hover {
    cursor:pointer; 
    background:#222; /* Colore di sfondo per Hover */
}
#blurb-tabs .tab-title.active-tab {
    background:#D9DFE2; /* Colore di sfondo per Active */
}
#blurb-tabs .tab-title.active-tab .et_pb_blurb_container h4 a {
    color:#000; /* Colore titolo tab per Active */
}
#blurb-tabs .tab-title.active-tab .et-pb-icon {
    color:#666!important; /* Colore icona tab per Active */
}

Inseriamo il nostro contenuto (le FAQ)

Ci serviranno tante sezioni quante sono le Tab che abbiamo predisposto; al loro interno potremo utilizzare i moduli Divi che vogliamo. in questo caso specifico ho inserito l’accordion, perché mi pare molto adatto per questo tipo di risorsa.

Bisogna assegnare a ogni sezione la classe CSS e l’ID giusto: la classe sarà per tutte “tab-content”, mentre gli ID saranno corrispondenti agli URL che abbiamo assegnato come link alle Tab, e cioè tab1, tab2, tab3 e tab4, senza il cancelletto.

divi opzioni avanzate css

Inseriamo l’accordion e poi, per far prima, copiamo il tutto tre volte: basterà cambiare l’ID CSS e avremo i contenitori pronti per accogliere le nostre FAQ.

Se vogliamo che una delle Sezioni sia aperta di default quando si visualizza la pagina, bisogna aggiungere una classe (tab-open) a quella Sezione specifica e, nel CSS, inserire una nuova regola dopo quella relativa alla classe “.tab-content”:

.tab-open {
    display:block;
}

Possiamo usare jQuery per aggiungere una classe “active-tab” al titolo di ogni blurb/tab quando essa viene cliccata (la tab attiva)  e mostrare la sezione con lo stesso ID dell’attributo href, nascontendo le altre. Ecco di seguito il codice:

jQuery(document).ready(function($) {
    /* Blurbs as Tabs */
    $('.tab-title').each(function () {	
        var section_id = $(this).find("a").attr("href");
        $(this).find("a").removeAttr("href");	
        $(this).click(function() {
            $(this).siblings().removeClass("active-tab");
                    $(this).addClass("active-tab");
            $('.tab-content').hide();
            $(section_id).show();
        });
    });
});

Poiché questo JavaScript serve solo qui e non su tutto il sito, ti suggerisco di dare un’occhiata al post che ti spega come utilizzare il Modulo codice di Divi per aggiungere codice alla pagina.

L’accordion

Ho visto che nel Divi builder è chiamato “accordino”, immagino abbiano fatto un errore 😉

La traduzione di “accordion” è “fisarmonica”, e in effetti questo modo di presentare i contenuti si comporta così, si apre e si chiude a seconda dell’intestazione che viene cliccata, con un’animazione.

Perché dovrei usare un accordion?

L’accordion (letteralmente “fisarmonica) è un sistema molto compatto per presentare le tue FAQ. Con le opzioni di design, puoi sbizzarrirti in tantissimi modi per creare la tua sezione dedicata alle domande frequenti.

Ma se la risposta a una domanda è molto lunga?

L’accordion si presta benissimo a ospitare anche contenuti un po’ “corposi”. Certo, per dare ai tuoi utenti informazioni utili e semplici da seguire, è meglio scrivere le nostre FAQ in maniera che ognuna risponda a una sola domanda nel modo più chiaro possibile.

Conclusione

A mio avviso, l’accordion è ottimo anche per pagine che ospitano parecchie FAQ poiché resta compatto, ed è semplice dividere le domande in categorie utilizzando più moduli, divisi magari da un titolo.