Scarica un layout di testimonianza di movimento GRATUITO per Divi
Pubblicato: 2020-04-30Non è un segreto che le testimonianze siano una parte cruciale di molte aziende e del loro sito web. Aggiungono un senso di credibilità ai servizi che offri o ai prodotti che offri. Prestare particolare attenzione al modo in cui mostri le tue testimonianze spesso ripaga. Con Divi, ci sono un sacco di modi in cui puoi modellare la tua sezione di testimonianze, c'è anche un modulo Testimonianze che è dedicato ad essa. Tuttavia, se stai cercando un modo unico per aggiungere interazione alle tue testimonianze, adorerai questo post. Stiamo condividendo un bellissimo layout di testimonianza del movimento personalizzato costruito con i nuovi effetti di scorrimento di Divi. Ricreeremo anche il design passo dopo passo!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica GRATUITAMENTE il layout della testimonianza di movimento
Per mettere le mani sul layout della testimonianza a mano libera, 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 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!
Iniziamo a ricreare!
Aggiungi nuova sezione
Colore di sfondo
Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e cambia il colore di sfondo in nero.
- Colore di sfondo: #000000
Spaziatura
Passa alla scheda di progettazione della sezione e aggiungi un'imbottitura superiore e inferiore personalizzata su diverse dimensioni dello schermo.
- Imbottitura superiore: 10% (Desktop), 20% (Tablet), 30% (Telefono)
- Imbottitura inferiore: 10% (Desktop), 20% (Tablet), 30% (Telefono)
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una prima riga utilizzando la seguente struttura a colonne:
Aggiungi modulo di testo alla colonna
Aggiungi contenuto H2
Il primo modulo di cui abbiamo bisogno nella colonna di questa riga è un modulo di testo con alcuni contenuti H2.
Impostazioni testo H2
Passa alla scheda di progettazione del modulo di testo e modifica le impostazioni del testo H2 di conseguenza:
- Intestazione 2: Carattere: Questrial
- Intestazione 2 Allineamento del testo: Centro
- Titolo 2: Dimensione testo: 85 px (desktop), 45 px (tablet), 35 px (telefono)
- Intestazione 2 Spaziatura lettere: 2px
- Altezza riga intestazione 2: 1.1em
Aggiungi modulo divisore alla colonna
Visibilità
Quindi, aggiungi un modulo divisore proprio sotto il modulo testo e assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: Sì
Impostazioni linea
Passa alla scheda di progettazione del modulo e modifica le impostazioni della linea come segue:
- Colore linea: #161616
- Stile linea: solido
- Posizione della linea: in alto
Dimensionamento
Modifica anche le impostazioni di dimensionamento.
- Peso del divisore: 14px
- Larghezza: 13% (Desktop), 20% (Tablet), 30% (Telefono)
- Allineamento del modulo: Centro
Aggiungi riga #2
Struttura della colonna
Alla prossima riga! Questa riga sarà dedicata al nostro primo testimonial. Utilizzare la seguente struttura a colonne:
Immagine di sfondo del desktop
Quindi, carica l'immagine di sfondo blu del desktop che puoi trovare nella cartella di download che sei riuscito a scaricare all'inizio di questo post.
- Dimensione immagine di sfondo: adatta
- Posizione immagine di sfondo: Centro
Immagine di sfondo per tablet e telefono
Stiamo utilizzando una versione ruotata dell'immagine di sfondo blu su schermi di dimensioni più piccole. Puoi trovare questa immagine di sfondo anche nella cartella dei download.
- Dimensione immagine di sfondo: adatta
- Posizione immagine di sfondo: Centro
Dimensionamento
Passa alla scheda Design della riga e modifica la larghezza massima nelle impostazioni di dimensionamento.
- Larghezza massima: 2000 px
Spaziatura
Apportare anche alcune modifiche alle impostazioni di spaziatura.
- Margine superiore: 100 px
- Imbottitura superiore: 15%
- Imbottitura inferiore: 15%
Effetto scorrimento movimento orizzontale
Quindi, vai alla scheda Avanzate e abilita il movimento orizzontale negli effetti di scorrimento.
- Abilita movimento orizzontale: Sì
- Compensazione iniziale: -4
- Scostamento medio: 0 (al 50%)
- Scostamento finale: 0
- Attivazione effetto movimento: parte superiore dell'elemento
Effetto di scorrimento in dissolvenza in entrata e in uscita
Aggiungeremo anche un effetto di scorrimento personalizzato in entrata e in uscita.
- Abilita dissolvenza in entrata e in uscita: Sì
- Opacità iniziale: 0% (al 19%)
- Opacità media: 100% (dal 25% all'88%)
- Opacità finale: 0% (al 93%)
- Effetto di attivazione del movimento: parte superiore dell'elemento
Aggiungi modulo di testo alla colonna
Aggiungi contenuto
Il primo modulo di cui abbiamo bisogno in questa riga è un modulo di testo. Inserisci il contenuto della testimonianza nella casella dei contenuti.
Impostazioni testo
Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Questrial
- Peso del carattere del testo: grassetto
- Colore del testo: #ffffff
- Dimensioni del testo: 50 px (desktop), 30 px (tablet), 25 px (telefono)
- Altezza riga di testo: 1,5 em
- Allineamento del testo: Centro
Dimensionamento
Quindi, modifica la larghezza tra le diverse dimensioni dello schermo nella scheda Design.
- Larghezza: 63% (desktop), 100% (tablet e telefono)
- Allineamento del modulo: Centro
Aggiungi modulo persona alla colonna
Aggiungi contenuto
Al modulo successivo, che è un modulo Persona. Aggiungi il nome, la posizione e i link ai social media.
Carica immagine
Carica un'immagine quadrata a tua scelta dopo.
Impostazioni icona
Passa alla scheda Design e cambia il colore dell'icona nelle impostazioni dell'icona.
- Colore icona: #2b302e
Immagine
Trasforma l'immagine in un cerchio aggiungendo alcuni angoli arrotondati.
- Tutti gli angoli: 100 px
Impostazioni del testo del titolo
Quindi, modifica le impostazioni del testo del titolo come segue:
- Carattere del titolo: Questrial
- Peso del carattere del titolo: grassetto
- Colore del testo del titolo: #ffffff
- Dimensione del testo del titolo: 24px
Impostazioni del corpo del testo
Apporta anche alcune modifiche alle impostazioni del testo del corpo.
- Carattere del corpo: Questrial
- Colore del corpo del testo: #ffffff
- Dimensione del testo del corpo: 15px
Impostazioni testo posizione
Stiamo anche modificando le impostazioni del testo di posizione.
- Carattere posizione: Questrial
- Posizione del colore del testo: #1b66ff
- Dimensione testo posizione: 17px
Dimensionamento
Insieme alla larghezza su diverse dimensioni dello schermo.
- Larghezza: 25% (desktop), 100% (tablet e telefono)
- Allineamento del modulo: Centro
Spaziatura
Passa alle impostazioni di spaziatura successiva e aggiungi un margine superiore.
- Margine superiore: 100 px
Elemento principale
Per assicurarci che tutto il contenuto sia allineato nel nostro Modulo Persona, andremo alla scheda Avanzate e aggiungeremo due righe di codice CSS all'elemento principale del modulo.
display: flex; align-items: center;
Immagine del membro
Utilizzeremo una larghezza personalizzata per l'elemento dell'immagine del membro anche su schermi di dimensioni più piccole.
Tavoletta:
width: 20% !important;
Telefono:
width: 30% !important; margin-right: 5%;
Clona riga #2
Una volta completata la riga contenente la testimonianza, puoi clonare l'intera riga una volta.
Cambia le immagini di sfondo della riga
Avremo bisogno di apportare alcune modifiche a questa riga duplicata, iniziando con le immagini di sfondo sul desktop e le dimensioni dello schermo più piccole. Puoi trovare le versioni rosse delle immagini di sfondo nella cartella dei download.
Cambia la spaziatura delle righe
Aggiungi un margine superiore negativo alla riga successiva.
- Margine superiore: -15%
Cambia il colore del testo della posizione del modulo persona
E completa le impostazioni della riga duplicata modificando il colore del testo della posizione nelle impostazioni del modulo persona.
- Colore testo posizione: #ff233e
Clona ultima riga
Una volta completata la riga della testimonianza duplicata, puoi clonarla.
Cambia le immagini di sfondo della riga
Modifica le immagini di sfondo della riga utilizzando le versioni gialle che trovi nella cartella dei download.
Cambia i colori del testo della posizione del modulo persona
Modifica anche il colore del testo di posizione nelle impostazioni del modulo Persona e il gioco è fatto!
- Colore testo posizione: #ffbc1b
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, abbiamo condiviso un bellissimo layout di testimonianza del movimento che hai potuto scaricare gratuitamente! Abbiamo utilizzato sfondi personalizzati e siamo stati in grado di evidenziare ogni singola testimonianza con gli effetti di scorrimento di Divi. Abbiamo anche ricreato il design, passo dopo passo! Se hai domande o suggerimenti, 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.