5 modi fantastici per modellare il modulo di testimonianza di Divi

L'unica cosa che i visitatori cercano sempre su un sito web sono le testimonianze. Rappresentano credibilità e influenzano il processo decisionale che i lead o i potenziali clienti hanno quando visitano il tuo sito web. Oltre ad assicurarti di avere testimonianze forti da condividere, anche renderle visivamente accattivanti gioca un ruolo importante. In questo post, ti mostreremo 5 fantastici modi in cui puoi modellare il modulo Testimonianze Divi utilizzando solo le opzioni integrate.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo un'occhiata al risultato finale su schermi di diverse dimensioni.

Desktop

Mobile

Ricrea l'esempio n. 1

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Partiamo dal primo esempio! Crea una nuova pagina e aggiungi una sezione normale.

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni di riga e apporta alcune modifiche alle impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Aggiungi modulo immagine alla colonna 1

Carica immagine

È ora di iniziare ad aggiungere moduli! Il primo modulo di cui avremo bisogno è un modulo immagine nella colonna 1. Vai avanti e carica un'immagine quadrata a tua scelta.

Filtri

Quindi, vai alle impostazioni dei filtri e gioca con i diversi effetti.

• Saturazione: 40%
• Contrasto: 126%

Aggiungi modulo pulsante alla colonna 1

Aggiungi copia

Il secondo e ultimo modulo di cui avremo bisogno nella colonna 1 è un modulo pulsante. Aggiungi qualche copia a tua scelta.

Impostazioni dei pulsanti

Quindi, vai alle impostazioni del pulsante e apporta alcune modifiche all'aspetto del tuo pulsante.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 14px
• Colore 1: #5400ff
• Colore 2: #00fff6
• Direzione del gradiente: 100 gradi
• Larghezza bordo pulsante: 0px
• Peso del carattere: Ultra grassetto
• Stile carattere: maiuscolo

Spaziatura

Aggiungi anche alcuni valori di spaziatura personalizzati.

• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px
• Imbottitura sinistra: 30px
• Imbottitura destra: 30px

Scatola ombra

E finisci con una sottile ombra a scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.3)

Aggiungi il modulo delle testimonianze alla colonna 2

Aggiungi contenuto

Nella seconda colonna, l'unico modulo di cui avremo bisogno è un modulo di testimonianza. Aggiungi del contenuto ai diversi campi e alla casella del contenuto.

Colore di sfondo

Quindi, aggiungi un colore di sfondo leggermente trasparente.

• Colore di sfondo: rgba (255,255,255,0.96)

Impostazioni icona preventivo

Modifica anche le impostazioni dell'icona della citazione.

• Colore icona citazione: #0c0c0c
• Colore di sfondo dell'icona della citazione: rgba(245,245,245,0)

Impostazioni del corpo del testo

Quindi, modifica le impostazioni del testo del corpo.

• Carattere del corpo: Verdana
• Altezza della linea del corpo: 1,7 em

Spaziatura

Continua aggiungendo diversi margini personalizzati e valori di riempimento nelle impostazioni di spaziatura.

• Margine superiore: 15vw (desktop e tablet), 0vw (telefono)
• Margine inferiore: 50 px (tablet e telefono)
• Margine sinistro: -10vw (desktop e tablet), 0vw (telefono)
• Margine destro: 5vw
• Imbottitura superiore: 70px
• Imbottitura inferiore: 70px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Frontiera

Aggiungi anche un bordo sinistro.

• Larghezza bordo sinistro: 7px
• Colore bordo sinistro: #5400ff

Scatola ombra

Infine, aggiungi un'ombra sottile per modellare il modulo Testimonianze.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -10px
• Colore ombra: rgba(0,0,0,0.49)

Clona entrambi i moduli e posiziona i duplicati nelle colonne 3 e 4

Dopo aver modificato i moduli nelle colonne 1 e 2, puoi clonare i moduli e posizionare i duplicati nelle due colonne rimanenti.

Cambia immagine

Non dimenticare di cambiare l'immagine della tua seconda testimonianza.

Cambia sfondo sfumato pulsante

Cambia anche lo sfondo sfumato del pulsante.

• Colore 1: #ff001d
• Colore 2: #3700ff
• Direzione del gradiente: 100 gradi

Cambia il colore del bordo della testimonianza

E abbina il colore del bordo al nuovo sfondo sfumato del pulsante.

• Colore bordo sinistro: #ff001d

Ricrea l'esempio n. 2

Aggiungi nuova sezione

Al secondo esempio! Aggiungi una nuova sezione regolare alla tua pagina.

Aggiungi nuova riga

Struttura della colonna

Senza apportare modifiche alla sezione, aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Continua aprendo le impostazioni della riga e apportando alcune modifiche alle impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Successivamente, aggiungi alcuni valori di riempimento personalizzati alla riga e alle colonne.

• Imbottitura sinistra: 200 pixel (desktop), 30 pixel (tablet), 25 pixel (telefono)
• Imbottitura destra: 200 px (desktop), 30 px (tablet), 25 px (telefono)
• Imbottitura sinistra colonna 1: 5px (desktop), 0px (tablet e telefono)
• Imbottitura destra colonna 1: 2,5 px (desktop), 0 px (tablet e telefono)
• Imbottitura sinistra colonna 2: 2,5 px (desktop), 0 px (tablet e telefono)
• Imbottitura destra colonna 2: 2,5 px (desktop), 0 px (tablet e telefono)
• Imbottitura sinistra della colonna 3: 2,5 px (desktop), 0 px (tablet e telefono)
• Imbottitura destra colonna 3: 5px (desktop), 0px (tablet e telefono)

Aggiungi modulo video alla colonna 1

Collegamento video

Il primo modulo di cui avremo bisogno nella colonna 1 è un modulo video. Collega questo video al tuo video di testimonianza.

Sovrapposizione immagine

Aggiungi anche una sovrapposizione di immagini.

Aggiungi il modulo delle testimonianze alla colonna 1

Aggiungi contenuto

Il secondo e ultimo modulo necessario nella colonna 1 è un modulo di testimonianza. Inizia aggiungendo i dettagli della testimonianza.

Disabilita icona preventivo

Quindi, disabilita l'icona della citazione nelle impostazioni degli elementi.

• Mostra icona preventivo: No

Colore di sfondo

Aggiungi uno sfondo bianco dopo.

• Colore di sfondo: #ffffff

Impostazioni del corpo del testo

Modifica anche le impostazioni del testo del corpo.

• Colore del corpo del testo: #000000
• Spaziatura delle lettere del corpo: -0,5 px
• Altezza della linea del corpo: 1,7 em

Spaziatura

E aggiungi alcuni margini personalizzati e valori di riempimento nelle impostazioni di spaziatura.

• Margine inferiore: 30 px (tablet e telefono)
• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px
• Imbottitura sinistra: 80px
• Imbottitura destra: 80px

Frontiera

Stiamo anche dando al modulo gli angoli arrotondati in basso a sinistra e a destra "30px".

Scatola ombra

E infine, per creare un po' di profondità, diamo al modulo testimonianze un'ombra sottile.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -10px
• Colore ombra: rgba(0,0,0,0.3)

Clona i moduli tre volte e posiziona i duplicati nelle colonne rimanenti

Dopo aver modificato entrambi i moduli nella colonna 1, clonali due volte e posiziona i duplicati nelle due colonne rimanenti.

Modifica collegamenti video, contenuti e sovrapposizioni di immagini

Non dimenticare di modificare il collegamento video, il contenuto e le sovrapposizioni di immagini delle tue nuove testimonianze.

Ricrea l'esempio n. 3

Aggiungi nuova sezione

Al terzo esempio! Aggiungi una nuova sezione regolare alla tua pagina.

Aggiungi nuova riga

Struttura della colonna

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

Colore di sfondo della colonna 1

Quindi, vai alle impostazioni dello sfondo e aggiungi un colore di sfondo alla prima colonna.

• Colore di sfondo della colonna 1: #f9f9f9

Colore di sfondo della colonna 2

La seconda colonna avrà bisogno di un colore di sfondo bianco.

• Colore di sfondo della colonna 2: #ffffff

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e rimuovi la larghezza della grondaia.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Aggiungi successivamente alcuni valori di spaziatura personalizzati.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura sinistra: 0px
• Imbottitura destra: 0px
• Imbottitura superiore colonna 1: 100 px
• Imbottitura inferiore colonna 1: 100 px
• Colonna 1 Imbottitura sinistra: 50 px
• Imbottitura destra colonna 1: 50 px
• Imbottitura superiore colonna 2: 100 px
• Imbottitura inferiore colonna 2: 100 px
• Imbottitura sinistra colonna 2: 50 px
• Imbottitura destra colonna 2: 50 px

Frontiera

E assegna a ciascuno dei bordi '20px'.

Scatola ombra

Ultimo ma non meno importante, dai alla tua riga un'ombra di scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px

Aggiungi il modulo delle testimonianze alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Il primo modulo di cui avremo bisogno nella colonna 1 è un modulo di testimonianza. Aggiungi il contenuto.

Carica immagine

Continua caricando un'immagine nelle impostazioni dell'immagine.

Disabilita icona preventivo

Quindi, disabilita l'icona della citazione.

• Mostra icona preventivo: No

Disattiva colore di sfondo

Disabilita anche il colore di sfondo.

• Usa colore di sfondo: No

Impostazioni del corpo del testo

Continua andando alla scheda Design e apporta alcune modifiche alle impostazioni del testo del corpo.

• Carattere del corpo: Abril Fatface
• Colore del corpo del testo: #000000
• Dimensione del testo del corpo: 20px

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Il secondo modulo di cui avremo bisogno nella colonna 1 è un modulo di testo. Aggiungi la copia della testimonianza alla casella del contenuto.

Spaziatura

Quindi, vai alla scheda Design e aggiungi un margine superiore e inferiore personalizzato.

• Margine superiore: 50 px
• Margine inferiore: 50 px

Aggiungi modulo immagine alla colonna 1

Carica logo aziendale

Il terzo e ultimo modulo di cui avremo bisogno nella prima colonna è un modulo immagine. Puoi utilizzare questo modulo per aggiungere il logo aziendale relativo alla testimonianza.

Clona tutti i moduli e posiziona i duplicati nella colonna 2

Una volta che hai finito di modificare tutti i moduli nella colonna 1, puoi andare avanti e clonarli. Una volta fatto, posiziona i duplicati nella seconda colonna.

Cambia immagine e copia testimonianza

Assicurati di modificare il contenuto della testimonianza insieme alle immagini.

Ricrea l'esempio #4

Aggiungi nuova sezione

Al quarto esempio! Aggiungi una nuova sezione alla tua pagina.

Aggiungi nuova riga

Struttura della colonna

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

Immagine di sfondo della colonna 1

Apri le impostazioni della riga e aggiungi un'immagine di sfondo alla prima colonna.

• Colonna 1 Immagine di sfondo Ripeti: nessuna ripetizione

Immagine di sfondo della colonna 3

Fai lo stesso per la terza colonna.

• Colonna 3 Ripetizione immagine di sfondo: nessuna ripetizione

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e apporta alcune modifiche.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Successivamente, rimuovi l'imbottitura superiore e inferiore predefinita.

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

Aggiungi il modulo delle testimonianze alla colonna 1

Aggiungi contenuto

Continua aggiungendo un Modulo Testimonianze alla prima colonna. Una volta fatto, aggiungi i dettagli della testimonianza.

Sfondo sfumato

Dai anche al modulo uno sfondo sfumato.

• Colore 1: #8b32ff
• Colore 2: #ff35ae
• Direzione del gradiente: 120deg

Impostazioni icona preventivo

Quindi, apportare alcune modifiche alle impostazioni dell'icona.

• Colore icona preventivo: #000000
• Colore di sfondo dell'icona di citazione: #ffffff

Impostazioni testo

E cambia il colore del testo nelle impostazioni del testo.

• Colore del testo: chiaro

Spaziatura

Per dare al modulo una forma quadrata, aggiungeremo un'imbottitura personalizzata nelle impostazioni di spaziatura.

• Imbottitura superiore: 100 px
• Imbottitura inferiore: 100 px
• Imbottitura sinistra: 100 px
• Imbottitura destra: 100 px

Scatola ombra

Dovrai anche aggiungere un po' di profondità alla testimonianza usando un'ombra sottile.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -10px
• Colore ombra: #ff35ae

Filtro predefinito

L'idea alla base di questa testimonianza è che una volta posizionata sopra, la testimonianza scompare e l'immagine viene visualizzata. Per ottenere questo effetto, utilizzeremo il filtro di opacità nelle impostazioni dei filtri. Assicurati che l'opacità predefinita sia "100%".

• Opacità: 100%

Filtro al passaggio del mouse

E rimuovi tutta l'opacità al passaggio del mouse.

• Opacità: 0%

Clona il modulo della testimonianza nella colonna 3

Dopo aver modificato il modulo Testimonianze nella colonna 1, clonalo e posiziona il duplicato nella terza colonna.

Cambia sfumatura di sfondo

Cambia lo sfondo sfumato del duplicato successivo.

• Colore 1: #32b0ff
• Colore 2: #89009e
• Direzione del gradiente: 120deg

Clona riga

E clona l'intera riga.

Rimuovi lo sfondo sfumato della testimonianza e cambia il colore di sfondo

La prossima cosa che dovrai fare è rimuovere lo sfondo sfumato dei moduli di testimonianza e utilizzare invece un colore di sfondo bianco.

• Colore di sfondo: #ffffff

Modifica le impostazioni del testo della testimonianza

Dopo aver rimosso lo sfondo sfumato, puoi modificare il colore del testo nelle impostazioni del testo.

• Colore del testo: scuro

Ricrea l'esempio n. 5

Aggiungi nuova sezione

Al prossimo e ultimo esempio di questo tutorial! Aggiungi una nuova sezione regolare alla tua pagina.

Colore di sfondo

Cambia il colore di sfondo della sezione.

• Colore di sfondo: #ededed

Aggiungi nuova riga

Struttura della colonna

Quindi, aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Apportare anche alcune modifiche alle impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 2

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Continua aggiungendo un modulo di testo alla prima colonna. Aggiungi la copia della testimonianza alla casella del contenuto.

Colore di sfondo

E cambia il colore di sfondo del modulo.

• Colore di sfondo: #ffffff

Impostazioni testo

Quindi, vai alla scheda Progettazione e modifica l'orientamento del testo nelle impostazioni del testo.

• Orientamento del testo: al centro

Spaziatura

Aggiungi anche alcuni valori di margine personalizzati.

• Margine sinistro: 50 px (desktop e tablet), 20 px (telefono)
• Margine destro: 50 px (desktop e tablet), 20 px (telefono)

Aggiungi il modulo delle testimonianze alla colonna 1

Aggiungi contenuto

Proprio sotto il modulo di testo, puoi andare avanti e aggiungere un modulo di testimonianza. Compila i campi del nome dell'autore, del titolo di lavoro e del nome dell'azienda.

Carica immagine

Carica anche un'immagine nelle impostazioni dell'immagine.

Sfondo sfumato

E aggiungi uno sfondo sfumato.

• Colore 1: #5b32ff
• Colore 2: #32e5f2
• Direzione del gradiente: 100 gradi

Impostazioni icona preventivo

Continua andando alla scheda Design e modificando le impostazioni dell'icona del preventivo.

• Colore icona preventivo: #000000
• Colore di sfondo dell'icona di citazione: #ffffff

Impostazioni testo

Modifica anche l'orientamento del testo nelle impostazioni del testo.

• Orientamento del testo: al centro
• Colore del testo: chiaro

Impostazioni del corpo del testo

Quindi, gioca con le impostazioni del testo del corpo.

• Peso del carattere del corpo: Ultra grassetto
• Stile del carattere del corpo: maiuscolo
• Dimensione del testo del corpo: 15px
• Spaziatura delle lettere del corpo: -0,5 px
• Altezza della linea del corpo: 2.1em

Spaziatura

Aggiungi un margine superiore negativo per creare la sovrapposizione tra questo modulo e il modulo di testo.

• Margine superiore: -25 px

Scatola ombra

E completa il design del testimonial dando al modulo Testimonial una sottile ombra di scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.3)

Clona entrambi i moduli due volte e posiziona i duplicati nelle colonne rimanenti

Dopo aver modificato i moduli nella colonna 1, puoi clonarli due volte e posizionare i duplicati nelle due colonne rimanenti.

Cambia il contenuto e le immagini della testimonianza

Assicurati di modificare il contenuto e le immagini utilizzate nei moduli.

Cambia gli sfondi sfumati della testimonianza

Insieme agli sfondi sfumati.

• Colore 1: # a632ff
• Colore 2: #f7a131

• Colore 1: #3281ff
• Colore 2: #2cf483

Anteprima

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

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato 5 fantastici modi in cui puoi modellare il modulo Testimonianze Divi. Ti abbiamo guidato attraverso il tutorial passo dopo passo e creato testimonianze che puoi utilizzare praticamente su qualsiasi sito web su cui stai lavorando. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto.