Come fare una pagina FAQ con Divi è fra le domande più gettonate dei nostri utenti. Chiunque voglia connettersi con i propri navigatori affronta subito il problema di creare un contenuto dedicato che risponda alle domande più frequenti. L’articolo a cui ci siamo ispirati è stato redatto da Orana Velarde di Elegant Themes, a cui vanno i nostri ringraziamenti e il merito di aver risposto a tutti coloro che vogliono fare una pagina FAQ con Divi. Apporteremo comunque alcune modifiche per i nostri fan italiani, in modo che possano realizzare qualcosa di unico, dinamico e speciale.
Sommario
Anteprima
Prima di scoprire il contenuto di questa guida, vediamo insieme quale sarà il risultato finale, sia per quanto riguarda la versione Desktop sia per quella Mobile.
Scarica GRATIS il Layout della Pagina FAQ con Divi
Sezioni e righe: inizia da qui
Come sempre, iniziamo ad aggiungere una sezione per la nostra pagina. Prima di aggiungere la riga, modifichiamo subito alcune delle voci che riguardano lo sfondo:
- Tipo di sfondo: Gradiente
- Colore Uno: #6487ef
- Colore Due: #00e9ff
- Direzione: 180deg
- Posizione iniziale: 21%
Nella scheda Spaziatura, aggiungiamo invece due valori per il padding:
- In Cima: 4vw (Desktop), 15vw (Tablet), 24vw (Mobile)
- In Fondo: 2vw (per tutti i device)
Passiamo quindi alla prima riga, scegliendo il design da un singolo box e inserendo il padding a destra e a sinistra:
- 1vw (Desktop), 3vw (Tablet), 3vw (Mobile)
Titolo e sottotitolo
Adesso possiamo inserire un modulo di testo e fare delle modifiche in Disegno/Testo:
- Font: Actor
- Colore: #f6f6f6
- Dimensione: 1.5vw (Desktop), 1.5vw (Tablet), 3.8vw (Mobile)
- Spazio fra lettere: 1px
- Allineamento: Centro
Adesso modifichiamo anche lo stile dell’H2, ovvero del sottotitolo che abbiamo scelto:
- Font: Verdana
- Luce: Semi Bold
- Color: #f6f6f6
- Dimensione: 3vw (Desktop), 5vw (Tablet), 6vw (Mobile)
- Interlinea: 1.8em (Desktop), 1.6em (Tablet), 1.5em (Mobile)
Il risultato è quello che vedi nell’immagine qui sotto.
Modifichiamo anche la dimensione del modulo, rimanendo nella scheda Design e andando alla voce Dimensionamento. Il valore è 100%. Per il margine e il padding invece andiamo su Spaziatura:
- In Cima: 1.5vw per Desktop e Tablet (niente per Mobile)
- In fondo: -5vw per Mobile (niente per Desktop e Tablet)
- Padding: 0vw
- Padding destra e sinistra: 7vw
Al di sotto del testo, aggiungiamo un altro modulo nella stessa riga, un Modulo Separatore. In Design/Linea cambiamo il colore con #ffe100. Rimaniamo nella stessa scheda e cambiamo i valori del Dimensionamento:
- Spessore Linea Divisore: 4px
- Larghezza Massima (il primo): 12%
- Allineamento Testo: centrale
E poi della Spaziatura:
- Margine In Cima: -1vw per Desktop e Tablet, 10vw per Mobile
Seconda riga
Adesso possiamo inserire una seconda riga con un unico box. Prima di aggiungere qualsiasi modulo, aggiustiamo la dimensione. Per farlo, clicchiamo sulla scheda Design, poi Dimensionamento e attiviamo Personalizzate Grondaia Larghezza. La spaziatura Colonne dovrà essere 1, mentre Larghezza Massima e Larghezza massima (ovvero le prime due voci dopo Eguaglia Altezze delle Colonne) dovranno essere entrambe al 100%.
Aggiustiamo la Spaziatura:
- Margine In Cima: 3vw
- Margine In Fondo: 11vw
- Margine Destra e Sinistra: auto
- Padding In Cima: 0vw
- Padding In Fondo: 11vw
- Padding Destra e Sinistra: 5vw
La prima colonna
Abbiamo seguito soltanto i primi step per scoprire come fare una FAQ Page con DIVI. Adesso è arrivato il momento di lavorare alla prima colonna, che andremo poi a clonare per le altre tre. Se hai seguito passo passo la nostra guida, ti sarà sorto un dubbio: la riga che ho creato prevede un solo modulo, come mai adesso mi parli di quattro colonne?
La risposta è molto semplice: prima di modificare la struttura della riga, abbiamo dovuto cambiare alcuni valori. Adesso possiamo cambiare struttura e passare a tre colonne. Adesso quando apriremo le impostazioni della riga, ci verranno mostrate quattro voci Colonna nella scheda Contenuti. Clicchiamo sulla rotellina del primo box, andiamo sullo Sfondo e clicchiamo la freccia presente a destra della voce per attivare il sottomenu con Hover (Librarsi) e facciamo queste modifiche:
- Sfondo Hover: gradiente
- Colore Uno: #ffe100
- Colore Due: Trasparente
- Tipo Gradiente: Radiale
- Direzione Radiale: In alto a sinistra
- Posizione iniziale: 19%
- Posizione finale: 19%
Cambiamo anche la Spaziatura:
- Padding in Fondo: 0vw (Desktop e Tablet), 4vw (Mobile)
- Destra e Sinistra: 1vw (Desktop), 3vw (Tablet e Mobile)
Questa volta però renderemo più evidente anche il Bordo, che dovrà essere di 1vw per tutti e quattro gli angoli. In trasformare, concentriamoci sulla seconda scheda, Trasformare Traduci. Modifichiamo l’asse delle y, ovvero quello a destra, in 4vw per il Desktop e 0vw per Hover, Tablet e Mobile. Adesso ritorna su contenuti. Vicino alla voce Colonna, trovi il cestino e tre pallini. Clicca su questi per aprire un menu secondario, dove dovrai selezionare Estendi e poi Questa riga.
Clona e modifica
Se hai saltato il precedente passaggio e non hai cambiato la struttura della riga da 1 a quattro, puoi sempre farlo ora. Su Contenuti, duplica la colonna altre tre volte e il gioco è fatto! Adesso clicca sulla rotella della seconda colonna per modificare alcuni parametri in Design/Trasformare: il valore delle y dovrà essere 2vw invece dell’attuale 4vw. Il resto rimane invariato. Ritorna in Contenuti, clicca sui tre pallini alla fine della terza colonna e dai il Reset degli stili. La quarta ed ultima colonna invece dovrà avere in Trasformare gli stessi valori della seconda, ovvero 2vw per il solo Desktop.
Prima colonna: il Toggle
Purtroppo aver agito sull’altezza delle colonne precedenti implica l’impossibilità di lavorare sulla prima. Se stai avendo delle difficoltà a creare un modulo Toggle, puoi sempre lavorare sulla seconda colonna e poi spostare il modulo sulla prima. Ad ogni modo, creato il modulo Toggle, scegliamo titolo e testo a nostro piacere.
Prima di proseguire, assicuriamoci che lo Stato sia su chiuso, in modo che la risposta alla domanda venga mostrata solo una volta cliccato sul titolo. Lo Sfondo invece dovrà essere un’immagine, a cui attribuiamo Fit in Dimensione dell’Immagine di Sfondo e Luce Soffusa in Fondi Immagine Sfondo.
Nella scheda Design/Icona, cambiamo il colore del simbolo più da grigio al giallo (#ffe100). Attiva Usa dimensioni icone personalizzate e cambia la grandezza dell’icona in 34px per il Desktop e 20px per Tablet e Mobile. Nella scheda Toggle che troviamo sempre in Design, inseriamo il colore #0092af per il Colore Sfondo Sezione Aperta. Per la sezione chiusa scegliamo #f7f7f7 e #0092af per l’Hover (librarsi).
Il testo: titolo e body
Saltiamo la voce Testo e andiamo alla successiva, Titolo Testo. Per il colore del titolo aperto scegliamo sempre il bianco sporco (#f7f7f7) che useremo anche per l’hover del Titolo Colore Testo (voce successiva). Per il Desktop della seconda voce inseriamo un verde molto scuro, #3a3a3a. Andando poco più sotto, troviamo Aggiungi titolo 3. Clicchiamo su H5 e modifichiamo i parametri come nell’elenco seguente:
- Font: Actor
- Allineamento: Sinistra
- Titolo, dimensioni: 1.5vw (Desktop), 3vw (Tablet), 4.5vw (Mobile)
Saltiamo alla voce successiva, Titolo chiuso Testo:
- Colore: #3a3a3a
- Font: Actor
- Allineamento: Sinistra
- Dimensione: 1.5vw (Desktop), 3vw (Tablet), 4.5vw (Mobile)
Concludiamo la creazione del testo con i parametri ideali per il Body:
- Font: Actor
- Allineamento: Sinistra
- Colore: #f7f7f7
- Dimensioni: 0.9vw (Desktop), 2vw (Tablet), 3vw (Mobile)
- Interlinea 1.8em
Dimensioni, bordo e ombra
Saltiamo Dimensionamento e apriamo il tab di Spaziatura:
- Top Margin: 1vw (Desktop + Tablet)
- Padding In Cima e In Fondo: 2vw (Desktop), 3vw (Tablet), 5vw (Mobile)
- Padding Sinistra: 2vw (Desktop), 4vw (Tablet), 5vw (Mobile)
- Padding Destra: 2vw (Desktop), 3vw (Tablet), 4vw (Mobile)
Bordo:
- Rettangolo Arrotondato: 1vw per i 4 angoli
- Spessore bordo: 0px
Box Shadow:
- Seleziona la sesta opzione
- Forza della Sfocatura: 18px (Desktop e Tablet), 9px (Mobile)
- Forza di diffusione: -4px
- Colore: rgba(0,0,0,0.21)
Adesso puoi duplicare il modulo Toggle, per un totale di quattro, e spostare ogni box nell’apposita colonna.
Conclusioni
Abbiamo terminato la nostra guida su come creare una FAQ page con Divi, dinamica e speciale. L’unica cosa che dovrai ricordarti di fare riguarda il contenuto di ogni box: a seconda delle tue esigenze dovrai modificare titolo e corpo.
