Creazione di progetti di domande frequenti sulle colonne univoci con Divi

Pubblicato: 2019-10-04

Ogni sito web che comunica regolarmente con i clienti può beneficiare di una sezione FAQ. Quando crei il tuo sito web con Divi, ci sono molti modi per affrontare la progettazione della tua sezione FAQ. Ora, in questo post, creeremo una divertente sezione FAQ che si concentra sulla combinazione della colonna e del contenitore del modulo per creare un bel design. 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

Mobile

Scarica il design delle domande frequenti della colonna GRATUITAMENTE

Per mettere le mani sul design delle FAQ della colonna gratuita, dovrai prima scaricarlo 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

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!

Iscriviti al nostro canale Youtube

Iniziamo a ricreare

Aggiungi nuova sezione

Sfondo

Inizia aggiungendo una nuova sezione normale alla pagina su cui stai lavorando. Prima di aggiungere una riga, regola lo sfondo della sezione.

Sfondo: gradiente
Colore uno: Dark Aqua #50aebf
Colore due: acqua chiara #6bf2ff
Direzione: 180 gradi
Posizione di partenza: 21%

Spaziatura

Modifica anche i valori di riempimento della sezione.

Imbottitura superiore:
- Desktop: 4vw
- Tablet: 15vw
- Telefono: 24vw
Imbottitura inferiore: 2vw

Aggiungi nuova riga

Struttura della colonna

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

Impostazioni colonna

Spaziatura

Apri le impostazioni della colonna 1 e aggiungi del riempimento sinistro e destro.

Imbottitura sinistra e destra:
- Desktop: 1vw
- Tablet + Telefono: 3vw

Modulo Aggiungi testo

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Aggiungi un nuovo modulo di testo con un contenuto di H2 e paragrafo a tua scelta.

Testo

Passa alla scheda Design e modella il testo del paragrafo.

Carattere del testo: attore
Colore del testo: bianco sporco ##f6f6f6
Dimensione del testo:
- Desktop + Tablet: 1.5vw
- Telefono: 3.8vw
Spaziatura delle lettere del testo: 1px
Allineamento del testo: Centro

Testo dell'intestazione

Quindi, modella il testo dell'intestazione.

Livello del testo dell'intestazione: H2
Carattere H2: Verdana
Peso carattere H2: semi-grassetto
Colore carattere H2: bianco sporco: #f6f6f6
Dimensione carattere H2:
- Desktop: 3vw
- Tablet: 5vw
- Telefono: 6vw
Spaziatura lettere H2: 7px
Altezza linea H2:
- Desktop: 1.8 em
- Tablet: 1.6em
- Telefono: 1,5 em

Dimensionamento

Inoltre, regolare le dimensioni.

Larghezza: 100%

Spaziatura

Infine, regola la spaziatura.

Margine superiore:
- Desktop + Tablet: 1.5vw
Margine inferiore:
- Telefono: -5vw
Imbottitura inferiore: 0vw
Imbottitura sinistra + destra: 7vw

Aggiungi modulo divisore

Linea

Sotto il testo, aggiungi un modulo divisore e rendilo giallo.

Colore linea: giallo #ffe100

Dimensionamento

Quindi, regolare il peso e la larghezza.

Peso del divisore: 4px
Larghezza: 12%
Allineamento del modulo: Centro

Spaziatura

Infine, regola la spaziatura.

Margine superiore:
- Desktop + Tablet: -1vw
- Telefono: 10vw

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendone uno nuovo utilizzando la seguente struttura di colonne:

Dimensionamento

Prima di ogni altra cosa, regola la taglia.

Larghezza grondaia: 1
Larghezza: 100%
Larghezza massima: 100%

Spaziatura

Quindi regolare la spaziatura.

Margine superiore: 3vw
Margine inferiore: 11vw
Margine sinistro e destro: automatico
Imbottitura superiore: 0vw
Imbottitura inferiore: 11vw
Imbottitura sinistra e destra: 5vw

Impostazioni colonna 1

Sfondo al passaggio del mouse

Prima di aggiungere le altre colonne, modella lo sfondo della colonna 1 come segue:

Sfondo al passaggio del mouse: gradiente
Colore uno: giallo #ffe100
Colore due: trasparente
Tipo di gradiente: radiale
Direzione radiale: in alto a sinistra
Posizione iniziale e finale: 19%

Spaziatura

Aggiungi alcuni valori di spaziatura alla colonna successiva.

Imbottitura inferiore:
- Desktop + Tablet: 0vw
- Telefono: 4vw
Imbottitura sinistra e destra:
- Desktop: 1vw
- Tablet + Telefono: 3vw

Frontiera

Aggiungi anche alcuni angoli arrotondati alla colonna.

Angoli arrotondati: 1vw tutti e quattro gli angoli

Trasformare

Infine, applica un valore di traduzione della trasformazione personalizzata alla colonna.

Transform Translate: 4vw y-axis (desktop), 0vw (hover, tablet e telefono)

Duplica colonna 1 quattro volte

Ora, duplica la prima colonna quattro volte.

Impostazioni colonna 2

Trasformare

Quindi, regolare i valori di trasformazione. Primo, colonna 2.

Transform Translate: 2vw asse y (desktop), 0vw (hover, tablet e telefono)

Impostazioni colonna 3

Trasformare

Quindi, reimpostare il valore di trasformazione nella colonna 3.

Trasforma Traduci: Ripristina

Impostazioni colonna 4

Trasformare

Inoltre, regola il valore di trasformazione nella colonna 4.

Transform Translate: 2vw asse y (desktop), 0vw (hover, tablet e telefono)

Impostazioni colonna 5

Trasformare

Infine, rivedi i valori di trasformazione nella colonna 5.

Transform Translate: 4vw y-axis (desktop), 0vw (hover, tablet e telefono)

Aggiungi modulo di commutazione alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Aggiungi un modulo di commutazione alla prima colonna con alcuni contenuti a tua scelta.

Titolo
Corpo

Stato

Quindi, seleziona "Chiudi" come stato del modulo.

Stato: Chiuso

Sfondo

E aggiungi un'immagine trasparente di un punto interrogativo come sfondo.

Immagine di sfondo
Miscela immagine di sfondo: luce soffusa

Icona

Nella scheda Design, dai uno stile all'icona.

Colore icona: giallo #ffe100
Dimensione dell'icona:
- Desktop: 34px
- Tablet + Telefono: 20px

Attiva/disattiva

Quindi, modella gli sfondi di commutazione per statico e al passaggio del mouse.

Apri Toggle Colore di sfondo: Teal #0092af
Chiuso Toggle Colore di sfondo: Bianco sporco: #f7f7f7
- Al passaggio del mouse: Teal #0092af

Testo del titolo

Continua modellando il testo del titolo.

Colore del testo del titolo aperto: bianco sporco: # f7f7f7
Colore del testo del titolo: grigio molto scuro #3a3a3a
- Al passaggio del mouse: Bianco sporco: #f7f7f7
Livello titolo titolo: H5
Carattere H5: attore
Allineamento H5: Sinistra
Dimensione del testo H5:
- Desktop: 1.5 vw
- Tablet: 3 vw
- Telefono: 4.5 vw

Testo del titolo chiuso

Stile anche il testo chiuso.

Colore del testo del titolo chiuso: grigio molto scuro #3a3a3a
Carattere del titolo chiuso: attore
Allineamento: Sinistra
Dimensione del testo chiuso:
- Desktop: 1.5vw
- Tablet: 3vw
- Telefono: 4.5vw

Corpo del testo

Non dimenticare il corpo del testo.

Carattere del corpo: attore
Allineamento del corpo del testo: a sinistra
Colore del corpo del testo: bianco sporco: #f7f7f7
Dimensione del testo del corpo:
- Desktop: 0.9vw
- Tablet: 2vw
- Telefono: 3vw
Altezza della linea del corpo: 1,8 em

Spaziatura

Dopo lo stile del testo, aggiungi alcuni valori di spaziatura.

Margine superiore:
- Desktop + Tablet: 1vw
Imbottitura superiore + inferiore:
- Desktop: 2vw
- Tablet: 3vw
- Telefono: 5vw
Imbottitura sinistra:
- Desktop: 2vw
- Tablet: 4vw
- Telefono: 5vw
Imbottitura destra:
- Desktop: 2vw
- Tablet: 3vw
- Telefono: 4vw

Frontiera

Aggiungi alcuni angoli arrotondati e rimuovi il bordo predefinito di 1 pixel.

Angoli arrotondati: 1vw tutti e quattro gli angoli
Bordo: 0px

Scatola ombra

Infine, aggiungi un'ombra interna alla scatola.

Box Shadow: 6a opzione
Forza della sfocatura dell'ombra della scatola:
- Desktop + Tablet: 18px
- Telefono: 9px
Forza di diffusione dell'ombra della scatola: -4px
Colore ombra: rgba(0,0,0,0.21)

Duplica modulo di commutazione 4 volte

Duplica il modulo di commutazione con stile quattro volte e trascina i nuovi nelle colonne vuote.

Modifica contenuto

Modifica le domande e le risposte nei moduli di commutazione duplicati e il gioco è fatto!

Anteprima

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

Desktop

Mobile

Conclusione

In questo post, ti abbiamo mostrato come creare un design unico delle FAQ per le colonne. Abbiamo aggiunto alcune opzioni al passaggio del mouse per dare al design un interessante effetto angolo giallo. Speriamo che questo design ti ispiri a creare interessanti progetti di FAQ come parte dei tuoi progetti Divi. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto!