Trasformazione di moduli di testo in descrizioni di persone uniche al passaggio del mouse con Divi

Alla ricerca di un modo creativo per aggiungere descrizioni alle immagini? Con le opzioni di passaggio del mouse integrate di Divi, ora è più facile che mai. Puoi utilizzare questo approccio per vari scopi sul tuo sito Web, dalle testimonianze alle descrizioni dei membri del team e altro ancora. In questo tutorial, esamineremo 4 diversi esempi che ti aiuteranno a ottenere un web design straordinario. Stiamo creando tutti e quattro gli esempi utilizzando solo le opzioni integrate di Divi.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial passo passo, diamo una rapida occhiata al risultato finale su schermi di diverse dimensioni.

Desktop

Mobile

Passaggi generali

Aggiungi nuova sezione

Per rendere questo tutorial più facile da seguire, inizieremo con alcuni passaggi generali. Successivamente, ci occuperemo dei passaggi che sono unici per ciascuno degli esempi. Inizia aggiungendo una nuova sezione normale a una pagina nuova o esistente.

Aggiungi riga

Struttura della colonna

Vai avanti e scegli la seguente struttura di colonne (puoi farlo funzionare anche con altre strutture di colonne):

Immagine di sfondo della colonna 1

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un'immagine di sfondo alla prima colonna.

• Colonna 1 Immagine di sfondo Ripeti: nessuna ripetizione

Dimensionamento

Continua modificando le impostazioni di dimensionamento della riga.

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

Spaziatura

E poi aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 150 px
• Imbottitura inferiore: 150 px

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Per mostrare la descrizione al passaggio del mouse, utilizzeremo un modulo di testo per ciascuno dei quattro esempi. Vai avanti e aggiungi questo modulo di testo alla stessa colonna a cui hai aggiunto un'immagine di sfondo.

Impostazioni di testo predefinite

Quindi, vai alle impostazioni del testo e apporta alcune modifiche.

• Colore del testo: rgba (255,255,255,0)
• Dimensione del testo: 0.7vw (desktop), 12px (tablet e telefono)
• Orientamento del testo: giustifica

Impostazioni testo al passaggio del mouse

Cambia il colore del testo al passaggio del mouse.

• Colore del testo: #000000

Impostazioni predefinite del testo dell'intestazione

Modifica anche le impostazioni del testo H3.

• Intestazione 3 Peso del carattere: Ultra grassetto
• Intestazione 3 Stile carattere: maiuscolo
• Intestazione 3 Colore del testo: rgba (255,255,255,0)
• Intestazione 3 Dimensioni testo: 2,5 vw (desktop), 40 px (tablet), 30 px (telefono)
• Intestazione 3 Altezza riga: 2,2 em

Impostazioni del testo dell'intestazione al passaggio del mouse

E applica un colore di testo H3 diverso al passaggio del mouse.

• Colore testo titolo 3: #000000

Clona riga 3 volte

Ora che abbiamo eseguito tutti i passaggi generali, possiamo andare avanti e clonare la riga che abbiamo creato tre volte, il che ci consentirà di avere una riga per ciascuno dei quattro esempi. Assicurati che all'inizio di ogni esempio, passi alla riga successiva.

Esempio 1

Modifica modulo testo

Colore di sfondo predefinito

Cominciamo con il primo esempio! Apri il modulo di testo nella prima colonna e aggiungi un colore di sfondo.

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

Colore di sfondo al passaggio del mouse

Cambia questo colore di sfondo al passaggio del mouse.

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

Spaziatura predefinita

Aggiungi un margine personalizzato e un'imbottitura successiva.

• Margine superiore: -500 px
• Margine inferiore: 500 px
• Imbottitura superiore: 250 px
• Imbottitura inferiore: 250 px
• Imbottitura sinistra: 70px
• Imbottitura destra: 70px

Spaziatura al passaggio del mouse

Modificare i valori al passaggio del mouse.

• Margine superiore: 0px
• Margine inferiore: 0px
• Imbottitura superiore: 100 px
• Imbottitura inferiore: 100 px

transizioni

Infine, crea una transizione graduale aumentando la durata della transizione nella scheda Avanzate.

• Durata della transizione: 1000 ms

Esempio #2

Modifica modulo testo

Colore di sfondo predefinito

Al prossimo esempio! Apri il modulo di testo nella prima colonna e aggiungi un colore di sfondo.

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

Colore di sfondo al passaggio del mouse

Cambia il colore di sfondo al passaggio del mouse.

• Colore di sfondo: rgba (226.246.255,0.85)

Spaziatura predefinita

Successivamente aggiungi alcuni margini personalizzati e valori di riempimento.

• Margine superiore: 100 px
• Margine inferiore: 100 px
• Imbottitura superiore: 150 px
• Imbottitura inferiore: 150 px
• Imbottitura sinistra: 70px
• Imbottitura destra: 70px

Spaziatura al passaggio del mouse

Modifica questi valori al passaggio del mouse.

• Margine superiore: 200 px
• Margine inferiore: -200 px
• Margine sinistro: 50 px
• Imbottitura superiore: 100 px
• Imbottitura inferiore: 100 px

Bordo predefinito

Continua aggiungendo un bordo al modulo di testo.

• Larghezza bordo sinistro: 0px
• Colore bordo sinistro: #ffffff

Confine al passaggio del mouse

E cambia la larghezza del bordo al passaggio del mouse.

• Larghezza bordo sinistro: 8px

transizioni

Ultimo ma non meno importante, aumenta la durata della transizione per una transizione graduale.

• Durata della transizione: 500 ms

Esempio #3

Clona modulo testo

Al terzo esempio! Per questo esempio, dovremo creare una versione separata per schermi di dimensioni inferiori. Clona il modulo di testo nella prima colonna.

Aggiungi sfondo sfumato colonna 1

Quindi, apri le impostazioni della riga e aggiungi uno sfondo sfumato alla prima colonna utilizzando le seguenti impostazioni:

• Colore 1: RGB (43,135,218,0)
• Colore 2: #ffffff
• Colonna 1 Tipo di gradiente: radiale
• Colonna 1 Direzione radiale: Centro
• Colonna 1 Posizione iniziale: 59%
• Posizione finale della colonna 1: 59%
• Colonna 1 Posiziona il gradiente sopra l'immagine di sfondo: Sì

Modifica modulo di testo n. 1

Sfondo sfumato

Apri il primo modulo di testo nella colonna 1. Questa sarà la descrizione che apparirà sul desktop. Aggiungi uno sfondo sfumato.

• Colore 1: rgba (239,239,239,0.65)
• Colore 2: RGB (255,255,255,0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 70%
• Posizione finale: 71%

Spaziatura predefinita

Quindi, aggiungi alcuni margini personalizzati e valori di riempimento.

• Margine superiore: 6vw
• Margine inferiore: 6vw
• Imbottitura superiore: 9vw
• Imbottitura inferiore: 9vw
• Imbottitura sinistra: 2vw
• Imbottitura destra: 2vw

Spaziatura al passaggio del mouse

Modificare i valori dei margini al passaggio del mouse.

• Margine sinistro: 15vw
• Margine destro: -15vw

Visibilità

E disabilita il modulo su tablet e telefono.

transizioni

Aumenta anche la durata della transizione.

• Durata della transizione: 500 ms

Modifica modulo testo #2

Sfondo sfumato

Il secondo modulo nella colonna 1 è la descrizione che apparirà su schermi di dimensioni più piccole. Inizia aggiungendo uno sfondo sfumato.

• Colore 1: rgba (239,239,239,0.65)
• Colore 2: RGB (255,255,255,0)
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 70%
• Posizione finale: 71%

Spaziatura predefinita

Successivamente aggiungi alcuni margini personalizzati e valori di riempimento.

• Margine superiore: 95 px
• Margine inferiore: 95 px
• Imbottitura superiore: 170 px
• Imbottitura inferiore: 170 px
• Imbottitura sinistra: 20px
• Imbottitura destra: 20px

Spaziatura al passaggio del mouse

Modificare i valori dei margini al passaggio del mouse.

• Margine superiore: 250 px
• Margine inferiore: -200 px

Visibilità

E disabilita il modulo sul desktop.

Modifica l'orientamento del testo di entrambi i moduli di testo

Ultimo ma non meno importante, assicurati di modificare anche l'orientamento del testo di entrambi i moduli per ottenere il risultato desiderato.

• Orientamento del testo: al centro

Esempio #4

Modifica modulo testo

Colore di sfondo predefinito

Al quarto e ultimo esempio! Aggiungi il seguente colore di sfondo al modulo di testo nella colonna 1:

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

Colore di sfondo al passaggio del mouse

Cambia questo colore di sfondo al passaggio del mouse.

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

Spaziatura predefinita

Vai alle impostazioni di spaziatura successiva e aggiungi alcuni margini personalizzati e valori di riempimento lì.

• Margine sinistro: -200 px
• Margine destro: 200 px
• Imbottitura superiore: 250 px
• Imbottitura inferiore: 250 px
• Imbottitura sinistra: 70px
• Imbottitura destra: 70px

Spaziatura al passaggio del mouse

Modifica questi valori al passaggio del mouse.

• Margine sinistro: 0px
• Margine destro: 0px
• Imbottitura superiore: 300 px
• Imbottitura inferiore: 300 px

transizioni

Ultimo ma non meno importante, aumenta la durata della transizione per una transizione graduale.

• Durata della transizione: 1200 ms

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, ti abbiamo mostrato come puoi utilizzare in modo creativo le opzioni al passaggio del mouse di Divi per mostrare le descrizioni delle persone al passaggio del mouse. Con questi quattro esempi, sei pronto per trasformare qualsiasi testimonianza o descrizione di un membro del team in un elemento di design interattivo sulla tua pagina. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!