Come creare sovrapposizioni al passaggio del mouse uniche per le testimonianze con Divi
Pubblicato: 2018-11-14Le testimonianze sono un enorme affare per molti siti web. Mostrano competenza e i visitatori di solito vanno a cercarli se vogliono capire quanto sia credibile un'azienda o una persona. Ecco perché è importante pensare al modo in cui presenti visivamente le testimonianze sul tuo sito web.
Con Divi, puoi visualizzare le tue testimonianze esattamente come desideri. Per ispirarti, ti mostreremo come creare un modo straordinario e unico per mostrare le testimonianze utilizzando le sovrapposizioni al passaggio del mouse.
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial, diamo un'occhiata al risultato finale.
Aggiungi nuova sezione
Iniziamo! Aggiungi una nuova pagina o aprine una esistente e aggiungi una nuova sezione regolare.
Aggiungi nuova riga 1
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento.
- Rendi questa riga a larghezza intera: Sì
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
Spaziatura
Aggiungi anche alcuni valori di spaziatura personalizzati.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
- Colonna 2 Imbottitura sinistra: 2vw (desktop), 3vw (tablet e telefono)
- Imbottitura destra colonna 2: 11vw (desktop), 3vw (tablet e telefono)
Aggiungi modulo immagine alla colonna 1
Carica immagine
È ora di iniziare ad aggiungere i vari moduli! Inizia con un modulo immagine nella prima colonna. Carica un'immagine verticale a tua scelta.
Allineamento dell'immagine
Apri le impostazioni dell'immagine e modifica l'allineamento dell'immagine.
- Allineamento immagine: a sinistra
Dimensionamento
Modificare le impostazioni di dimensionamento successivo.
- Larghezza: 78% (desktop), 70% (tablet e telefono)
- Allineamento del modulo: a sinistra
Aggiungi il modulo di testo sovrapposto al passaggio del mouse alla colonna 1
Aggiungi contenuto
Proprio sotto il modulo immagine, aggiungi un modulo di testo. Inserisci i dettagli della persona nella casella del contenuto.
Sfondo predefinito
Procedi aggiungendo un colore di sfondo.
- Colore di sfondo: rgba (255,255,255,0)
Sfondo al passaggio del mouse
Aggiungi un altro colore di sfondo al passaggio del mouse.
- Colore di sfondo: #0f1bff
Impostazioni di testo predefinite
Quindi, modifica le impostazioni del testo.
- Colore del testo: #ffffff
- Dimensione del testo: 0px
- Altezza riga di testo: 0px
Impostazioni testo al passaggio del mouse
Apportare alcune modifiche alle impostazioni del testo al passaggio del mouse.
- Dimensione del testo: 19px
- Altezza riga di testo: 2em
Impostazioni predefinite del testo dell'intestazione
Anche le impostazioni del testo dell'intestazione devono essere modificate.
- Intestazione 3 Peso del carattere: Ultra grassetto
- Intestazione 3 Stile carattere: maiuscolo
- Colore testo titolo 3: #ffffff
- Intestazione 3 Dimensione del testo: 0px
- Intestazione 3 Altezza riga: 0em
Impostazioni del testo dell'intestazione al passaggio del mouse
Aggiungi valori diversi al passaggio del mouse.
- Intestazione 3 Dimensioni del testo: 35 px
- Intestazione 3 Altezza riga: 1.1em
Spaziatura
Quindi, vai alle impostazioni di spaziatura e aggiungi alcuni valori.
- Margine superiore: -100 px
- Margine sinistro: 50 px
- Margine destro: 50 px
- Imbottitura superiore: 40px
- Imbottitura inferiore: 60 px
Cambia l'orientamento del testo
Torna alle impostazioni del testo e modifica l'orientamento del testo.
- Orientamento del testo: al centro
Ombra casella predefinita
Quindi, aggiungi un'ombra di casella predefinita al modulo di testo. Questa ombra scatola farà parte del design generale.
- Posizione orizzontale dell'ombra della scatola: 1000 px
- Posizione verticale dell'ombra del riquadro: -400 px
- Forza sfocatura ombra scatola: 0px
- Forza di diffusione dell'ombra della scatola: 250 px
- Colore ombra: rgba (175,175,175,0.13)
Ombra del riquadro al passaggio del mouse
Per creare lo speciale effetto di sovrapposizione al passaggio del mouse, aggiungi anche un'ombra del riquadro al passaggio del mouse.
- Posizione orizzontale dell'ombra del riquadro: -73 px
- Posizione verticale dell'ombra del riquadro: -49 px
- Forza sfocatura ombra scatola: 0px
- Forza di diffusione dell'ombra della scatola: 10 px
- Colore ombra: rgba (255,182,12,0,53)
transizioni
Per creare una transizione graduale, modifica la durata della transizione nella scheda Avanzate.
- Durata della transizione: 1000 ms
Aggiungi il modulo di testo della testimonianza alla colonna 2
Aggiungi contenuto
Nella seconda colonna, la prima cosa di cui avremo bisogno è un titolo Modulo di testo. Vai avanti e aggiungi un riassunto della testimonianza.
Impostazioni del testo dell'intestazione
Quindi, modifica le impostazioni del testo dell'intestazione.
- Intestazione 3 Font: Goudy Bookletter 1911
- Intestazione 3 Allineamento del testo: a sinistra
- Titolo 3: Dimensione testo: 3.5vw (desktop), 40px (tablet), 30px (telefono)
- Intestazione 3 Altezza riga: 1.1em
Spaziatura
Continua aggiungendo alcuni valori di spaziatura personalizzati.
- Margine superiore: 7vw (Desktop), 100px (Tablet), 50px (Telefono)
Aggiungi il modulo di testo descrittivo alla colonna 2
Aggiungi contenuto
Aggiungi un altro modulo di testo con l'intera testimonianza proprio sotto il titolo Modulo di testo.
Impostazioni testo
Dopo aver aggiunto la testimonianza, vai avanti e modifica le impostazioni del testo.
- Altezza riga di testo: 2,2 em
- Orientamento del testo: a sinistra
Spaziatura
Aggiungi anche un margine superiore personalizzato.
- Margine superiore: 4vw (desktop), 50px (tablet e telefono)
Aggiungi nuova riga
Struttura della colonna
Ora che abbiamo terminato la prima riga, aggiungiamo la seconda utilizzando la seguente struttura a colonne:
Dimensionamento
Apri le impostazioni della riga e modifica le impostazioni di dimensionamento.
- Rendi questa riga a larghezza intera: Sì
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
Spaziatura
Aggiungi successivamente alcuni valori di spaziatura personalizzati.
- Margine superiore: 100 px
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
- Imbottitura sinistra della colonna 1: 11vw (desktop), 3vw (tablet e telefono)
- Imbottitura destra colonna 1: 2vw (desktop), 3vw (tablet e telefono)
Clona i moduli di testo della riga precedente e posiziona nella colonna 1
Torna alla riga precedente e clona entrambi i moduli nella colonna 2. Una volta fatto, posiziona i duplicati nella prima colonna della nuova riga.
Cambia l'orientamento del testo
Modificare l'orientamento del testo di entrambi i moduli.
- Orientamento del testo: a destra
Aggiungi modulo immagine alla colonna 2
Carica immagine
Quindi, aggiungi un modulo immagine alla seconda colonna e carica una nuova immagine verticale.
Allineamento dell'immagine
Modificare l'allineamento dell'immagine del modulo.
- Allineamento immagine: a destra
Dimensionamento
Continua modificando le impostazioni di dimensionamento.
- Larghezza: 78% (desktop), 70% (tablet e telefono)
- Allineamento del modulo: a destra
Spaziatura
Aggiungi anche alcuni valori di spaziatura personalizzati.
- Margine superiore: 50 px (tablet e telefono)
Aggiungi il modulo di testo sovrapposto al passaggio del mouse alla colonna 2
Aggiungi contenuto
L'ultimo modulo di cui abbiamo bisogno per completare questo progetto è un modulo di testo sotto il modulo immagine. Aggiungi i dettagli della persona nella casella del contenuto.
Sfondo predefinito
Quindi, aggiungi un'immagine di sfondo al modulo.
- Colore di sfondo: rgba (255,255,255,0)
Sfondo al passaggio del mouse
Cambia il colore di sfondo al passaggio del mouse.
- Colore di sfondo: #690cff
Impostazioni di testo predefinite
Modifica le impostazioni del testo in seguito.
- Colore del testo: #ffffff
- Dimensione del testo: 0px
- Altezza riga di testo: 0px
- Orientamento del testo: al centro
Impostazioni testo al passaggio del mouse
Apportare alcune modifiche al passaggio del mouse.
- Dimensione del testo: 19px
- Altezza riga di testo: 2em
Impostazioni predefinite del testo dell'intestazione
Modifica anche le impostazioni del testo dell'intestazione.
- Intestazione 3 Peso del carattere: Ultra grassetto
- Colore testo titolo 3: #ffffff
- Intestazione 3 Dimensione del testo: 0px
- Intestazione 3 Altezza riga: 0em
Impostazioni del testo dell'intestazione al passaggio del mouse
Con alcune piccole modifiche al passaggio del mouse.
- Intestazione 3 Dimensioni del testo: 35 px
- Intestazione 3 Altezza riga: 1.1em
Spaziatura
Continua andando alle impostazioni di spaziatura e aggiungi alcuni valori personalizzati.
- Margine superiore: -80 px
- Margine sinistro: 50 px
- Margine destro: 50 px
- Imbottitura superiore: 40px
- Imbottitura inferiore: 60 px
Ombra casella predefinita
Aggiungi un'ombra di casella predefinita al modulo di testo.
- Posizione orizzontale dell'ombra del riquadro: -1000px
- Posizione verticale dell'ombra del riquadro: -420 px
- Forza sfocatura ombra scatola: 0px
- Forza di diffusione dell'ombra della scatola: 250 px
- Colore ombra: rgba (175,175,175,0.13)
Ombra del riquadro al passaggio del mouse
E cambia l'ombra della scatola al passaggio del mouse.
- Posizione orizzontale dell'ombra del riquadro: -73 px
- Posizione verticale dell'ombra del riquadro: -49 px
- Forza sfocatura ombra scatola: 0px
- Forza di diffusione dell'ombra della scatola: 10 px
- Colore ombra: rgba (12,255,238,0,53)
transizioni
Ultimo ma non meno importante, crea una transizione graduale modificando la durata della transizione.
- Durata della transizione: 1000 ms
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'occhiata finale al risultato finale!
Pensieri finali
Speriamo che questo post ti abbia ispirato a creare straordinarie sezioni di testimonianze utilizzando le sovrapposizioni al passaggio del mouse! Ti aiutano davvero ad aggiungere un'altra dimensione al tuo sito web senza dover passare molto tempo a programmare o capire le cose. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!