Come strutturare le tue FAQ con schede personalizzate in Divi

Pubblicato: 2021-03-31

Quando stai progettando la pagina delle domande frequenti per il tuo sito web, è essenziale mantenere l'esperienza dell'utente in cima alla tua mente. I visitatori cercano risposte il più rapidamente possibile e il modo in cui progetti la tua pagina ha una grande influenza su di essa. Se le domande frequenti hanno un numero limitato, puoi facilmente mostrarle una sotto l'altra. Tuttavia, se hai molte domande che richiedono una risposta, raggrupparle potrebbe essere più vantaggioso. Nel tutorial Divi di oggi, ti mostreremo come strutturarli in schede cliccabili personalizzate. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

schede faq

Mobile

schede faq

Scarica il layout GRATUITAMENTE

Per mettere le mani sul layout gratuito, dovrai prima scaricarli utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file
Scarica gratis

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

1. Costruisci la struttura degli elementi

Aggiungi la sezione n. 1

Colore di sfondo

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e applica un colore di sfondo.

  • Colore di sfondo: #fffbf2

schede faq

Spaziatura

Passa alla scheda Design della sezione e rimuovi tutte le imbottiture inferiori predefinite.

  • Imbottitura inferiore: 0px

schede faq

Frontiera

Quindi, applica un bordo personalizzato.

  • Larghezza bordo: 1vw
  • Colore bordo: #fffbf2

schede faq

Scatola ombra

Includi anche un'ombra di scatola.

  • Posizione verticale dell'ombra del riquadro: 0px
  • Forza di diffusione dell'ombra della scatola: 1px
  • Colore ombra: #000000
  • Posizione dell'ombra nella scatola: Ombra interna

schede faq

Indice Z

E completa le impostazioni della sezione aumentando l'indice z nella scheda avanzate.

  • Indice Z: 12

schede faq

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

schede faq

Dimensionamento

Senza ancora aggiungere moduli, apri le impostazioni di riga e modifica le impostazioni di dimensionamento come segue:

  • Usa larghezza grondaia personalizzata: Sì
  • Larghezza grondaia: 1
  • Larghezza massima: 1380 px

schede faq

Spaziatura

Aggiungi successivamente alcuni valori di spaziatura personalizzati.

  • Margine superiore: 3%
  • Margine inferiore: 3%
  • Imbottitura sinistra: 1%
  • Imbottitura destra: 1%

schede faq

Aggiungi modulo di testo alla colonna

Aggiungi contenuto H1

È ora di aggiungere moduli, iniziando con un modulo di testo contenente alcuni contenuti H1 di tua scelta.

schede faq

Impostazioni testo H1

Modificare di conseguenza le impostazioni del testo H1 del modulo:

  • Carattere dell'intestazione: Cormorant Garamond
  • Peso del carattere dell'intestazione: grassetto
  • Dimensione del testo dell'intestazione:
    • Desktop: 60 px
    • Tablet: 42px
    • Telefono: 36px

schede faq

Aggiungi modulo divisore alla colonna

Visibilità

Il prossimo modulo che aggiungeremo è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

  • Mostra divisore: Sì

schede faq

Linea

Passa alla scheda di progettazione del modulo e cambia il colore della linea.

  • Colore linea: #000000

schede faq

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

  • Peso del divisore: 2px
  • Larghezza massima: 150 px
  • Altezza: 2px

schede faq

Spaziatura

E completa le impostazioni del modulo aggiungendo un margine superiore alle impostazioni di spaziatura.

  • Margine superiore: 4%

schede faq

Aggiungi riga #2

Struttura della colonna

Alla prossima riga. Utilizzare la seguente struttura a colonne:

schede faq

Dimensionamento

Senza ancora aggiungere moduli, apri le impostazioni di riga e modifica le impostazioni di dimensionamento come segue:

  • Usa larghezza grondaia personalizzata: Sì
  • Larghezza grondaia: 1
  • Larghezza massima: 1380 px

schede faq

Spaziatura

Rimuovi anche tutta l'imbottitura superiore e inferiore predefinita.

  • Imbottitura superiore: 0px
  • Imbottitura inferiore: 0px

schede faq

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto H3

Aggiungi un primo modulo di testo alla riga con alcuni contenuti H3 a tua scelta.

schede faq

Colore di sfondo

Aggiungi un colore di sfondo bianco.

  • Colore di sfondo: #ffffff

schede faq

Impostazioni testo H3

Quindi, modifica le impostazioni del testo H3 di conseguenza:

  • Titolo 3 Carattere: Karla
  • Intestazione 3 Peso del carattere: grassetto
  • Intestazione 3 Stile carattere: maiuscolo
  • Intestazione 3 Allineamento del testo: Centro
  • Intestazione 3 Dimensioni del testo: 15 px
  • Intestazione 3 spaziatura lettere: 4px

schede faq

Dimensionamento

Modifica anche la larghezza tra le diverse dimensioni dello schermo.

  • Larghezza:
    • Desktop: 22%
    • Tablet e telefono: 44%

schede faq

Spaziatura

Quindi, aggiungi alcuni valori di spaziatura personalizzati.

  • Margine destro: 1%
  • Imbottitura superiore: 30px
  • Imbottitura inferiore: 20px
  • Imbottitura sinistra: 5%
  • Imbottitura destra: 5%

schede faq

Frontiera

Aggiungi un bordo.

  • Larghezza bordo: 1px

schede faq

Scatola ombra

Includi anche un'ombra di scatola.

  • Posizione verticale dell'ombra del riquadro: 0px
  • Colore ombra: #fff3dd
  • Posizione dell'ombra nella scatola: Ombra interna

schede faq

Elemento principale CSS

E completa le impostazioni del modulo assegnando una proprietà di visualizzazione personalizzata all'elemento principale del modulo nella scheda Avanzate. Questo, in combinazione con la larghezza regolata, consentirà a diversi moduli di apparire uno accanto all'altro. 

display: inline-block;

schede faq

Clona modulo testo 3x

Una volta completato il primo modulo di testo, puoi clonarlo tre volte.

schede faq

Modifica contenuto

Assicurati di modificare il contenuto in ciascuno dei duplicati.

schede faq

Aggiungi sezione #2

Spaziatura

Aggiungi un'altra sezione proprio sotto la precedente, apri le impostazioni della sezione e applica un'imbottitura superiore e inferiore.

  • Imbottitura superiore: 100 px
  • Imbottitura inferiore: 100 px

schede faq

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

schede faq

Dimensionamento

Apri le impostazioni della riga, vai alla scheda Design e modifica le impostazioni di dimensionamento come segue:

  • Usa larghezza grondaia personalizzata: Sì
  • Larghezza grondaia: 2
  • Larghezza massima: 1380 px

schede faq

Aggiungi il modulo di commutazione n. 1 alla colonna

Aggiungi contenuto

Quindi, aggiungi un primo modulo di commutazione alla riga e utilizza alcuni contenuti a tua scelta.

schede faq

Impostazioni icona

Passa alla scheda di progettazione del modulo e modifica le impostazioni dell'icona.

  • Colore icona: #000000
  • Usa dimensione icona personalizzata: Sì
  • Dimensione carattere icona: 24 px

schede faq

Attiva/disattiva impostazioni

Modifica anche le impostazioni di commutazione.

  • Apri Toggle Colore di sfondo: #fffbf2
  • Chiuso Toggle Colore di sfondo: #ffffff

schede faq

Impostazioni del testo del titolo

Quindi, applica alcuni stili personalizzati al titolo.

  • Colore del testo del titolo aperto: #333333
  • Colore del testo del titolo: #333333
  • Livello titolo titolo: H4
  • Carattere del titolo: Cormorant Garamond
  • Peso del carattere del titolo: grassetto
  • Dimensione del testo del titolo:
    • Desktop: 36px
    • Tablet: 34px
    • Telefono: 28px

schede faq

Impostazioni del testo del titolo chiuso

Stiamo cambiando anche il colore del testo del titolo chiuso.

  • Colore del testo del titolo chiuso: #333333

schede faq

Impostazioni del corpo del testo

Quindi, modelleremo il corpo del testo.

  • Carattere del corpo: Karla
  • Dimensione del testo del corpo: 17px
  • Altezza della linea del corpo: 1,9 em

schede faq

Spaziatura

Aggiungeremo anche alcuni valori di spaziatura reattivi.

  • Imbottitura superiore:
    • Scrivania: 2%
    • Compressa: 4%
    • Telefono: 6%
  • Imbottitura inferiore:
    • Scrivania: 2%
    • Compressa: 4%
    • Telefono: 6%
  • Imbottitura sinistra: 5%
  • Imbottitura destra: 5%

schede faq

Frontiera

Successivamente, cambieremo il colore del bordo.

  • Colore bordo: #000000

schede faq

Attiva/disattiva contenuto CSS

E completeremo le impostazioni del modulo aggiungendo una riga di codice CSS all'area di attivazione/disattivazione del contenuto nella scheda Avanzate. 

margin-top: 30px;

schede faq

Clona il modulo di attivazione tutte le volte che vuoi

Una volta completato il primo modulo Toggle, puoi clonarlo tutte le volte che vuoi.

schede faq

Modifica contenuto

Assicurati di modificare tutti i contenuti duplicati.

schede faq

Modifica lo stato del modulo di commutazione n. 1

Quindi, apri nuovamente il primo modulo di commutazione e cambia lo stato in "Apri".

  • Stato: Aperto

schede faq

Clona intera riga 3x

Ora che abbiamo il nostro primo set di moduli Toggle, possiamo clonare l'intera riga tre volte. In totale, ora avremo 4 righe contenenti moduli di attivazione/disattivazione. Corrisponde al numero di moduli di testo nella seconda riga della sezione #1.

schede faq

Modifica contenuto

Assicurati di modificare il contenuto in ogni riga duplicata.

schede faq

Aggiungi funzionalità

Aggiungi ID CSS consecutivi ai moduli di testo nella riga n. 2 della sezione n. 1

Ora che abbiamo tutti gli elementi a posto, è il momento di applicare la funzionalità. Faremo in modo che una volta che si fa clic su un modulo di testo nella riga n. 2 della sezione n. 1, vengano visualizzati gli interruttori corrispondenti alle domande frequenti. Apri ciascuno dei moduli di testo singolarmente e utilizza i seguenti ID CSS consecutivi:

  • Modulo di testo n. 1: faq-item-1
  • Modulo di testo n. 2: faq-item-2
  • Modulo di testo n. 3: faq-item-3
  • Modulo di testo n. 4: faq-item-4

schede faq

Aggiungi ID CSS consecutivi alle righe nella sezione #2

Successivamente, applicheremo gli ID CSS a ciascuna riga contenente Toggle Modules. Stiamo seguendo lo stesso ordine consecutivo.

  • Prima riga: faq-tab-1
  • Seconda riga: faq-tab-2
  • Terza riga: faq-tab-3
  • Quarta riga: faq-tab-4

schede faq

Aggiungi modulo codice alla riga n. 1 della sezione n. 1

Per far funzionare la funzionalità, utilizzeremo del codice CSS e JQuery personalizzato. Per aggiungere il codice alla nostra pagina, inseriremo un nuovo modulo di codice nella riga n. 1 della sezione n. 1, proprio sotto il modulo divisore. Assicurati di aggiungere in anticipo tag di stile e script.

schede faq

schede faq

Aggiungi codice CSS

Quindi, copia incolla il seguente codice CSS tra i tag di stile: 

[id*="faq-item"] {
cursor: pointer; 
}

[id*="faq-tab"]{  
position: absolute!important;
top: 0px;
bottom: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
}


.active-faq-item {
color: #6b63dd !important;
background-color: #fff;
}

.hide-faq-tab{  
visibility: hidden;
opacity: 0;  
}

.show-faq-tab{
visibility: visible !important;
opacity: 1 !important;
z-index: 12;
  
position: relative !important;
left: 0 !important;
transform: translateX(0%) !important;
}
  
.faq-item-active {
background-color: #000 !important;
color: #fff !important;
}

.faq-item-active h3{
color: #fff !important;
}

schede faq

Aggiungi codice JQuery

E completa il tutorial utilizzando le seguenti righe di codice JQuery tra i tag di script: 

jQuery(document).ready(function($){

$('#faq-item-1').addClass('faq-item-active');
$('#faq-tab-1').addClass('show-faq-tab');
$('[id*="faq-tab"]').not('#faq-tab-1').addClass('hide-faq-tab');
 
$('[id*="faq-item"]').click(function() {
 
var selector = $(this).attr('id').replace('item', 'tab');
var $faqSelect  = $('#' + selector);

$('[id*="faq-tab"]').removeClass('show-faq-tab');
$('[id*="faq-tab"]').addClass('hide-faq-tab');
$faqSelect.addClass('show-faq-tab');
 
$('[id*="faq-item"]').removeClass('faq-item-active');
$(this).addClass('faq-item-active');
   
});
});

schede faq

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

schede faq

Mobile

schede faq

Pensieri finali

In questo post, ti abbiamo mostrato come migliorare l'esperienza utente della pagina delle domande frequenti. Più specificamente, ti abbiamo mostrato come strutturare le domande in diverse schede per tipo. Questo approccio ti aiuterà a organizzare le tue domande frequenti, che a loro volta aiuteranno i tuoi visitatori a trovare le risposte alle loro domande più rapidamente. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.