Creazione di titoli animati utilizzando le opzioni al passaggio del mouse di Divi

Ogni settimana ti forniamo pacchetti di layout Divi nuovi e gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di layout, condividiamo anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo. Questa settimana, come parte della nostra iniziativa di progettazione Divi in ​​corso, ti mostreremo come creare titoli animati utilizzando le opzioni al passaggio del mouse di Divi e il pacchetto di layout della scuola guida. Questo è un ottimo approccio per mettere sotto i riflettori diverse parti della tua copia e innescare l'azione.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato.

Carica la pagina di destinazione della scuola per autisti

Per creare questo tutorial, utilizzeremo la pagina di destinazione di Driver School Layout Pack. Quindi vai avanti e aggiungi una nuova pagina, abilita il Visual Builder e scegli la pagina di destinazione dai tuoi layout predefiniti.

Crea il titolo animato n. 1

Cambia sfondo sfumato sezione

Iniziamo a costruire il primo esempio! Stiamo aggiungendo questo titolo animato alla sezione degli eroi della nostra pagina. Ma prima di arrivarci, apri le impostazioni della tua sezione eroe e cambia i colori di sovrapposizione dello sfondo sfumato.

• Colore 1: RGBA(0,0,0,0.94)
• Colore 2: RGBA (12,12,12,0.63)

Rimuovi le ultime due righe nella sezione Eroe

Continua rimuovendo le ultime due righe della sezione.

Modificare l'allineamento del divisore

Manteniamo la fila che è ancora lì. L'unica cosa che dobbiamo cambiare è l'allineamento del modulo del Divider Module.

• Allineamento del modulo: Centro

Aggiungi nuova riga

Struttura della colonna

Proprio sotto la riga precedente, vai avanti e aggiungi una nuova riga usando la seguente struttura di colonne:

Spaziatura

Rimuovi il riempimento personalizzato predefinito della riga successiva.

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

Aggiungi modulo di testo alla colonna

Aggiungi contenuto

L'unico modulo di cui avremo bisogno è un modulo di testo. Utilizziamo due diversi tipi di testo: un'intestazione e un collegamento al paragrafo. Vai avanti e aggiungi la tua copia preferita e assicurati che la copia appaia in due righe premendo Maiusc + Invio nel mezzo di ogni frase.

Colore di sfondo predefinito

Quindi, vai alle impostazioni dello sfondo e aggiungi un colore di sfondo predefinito al modulo di testo.

• 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: #ffa53b

Impostazioni di testo predefinite

Quindi, cambia l'orientamento del testo nelle impostazioni generali del testo.

• Orientamento del testo: al centro

Impostazioni predefinite del testo del collegamento

Passa alla scheda del collegamento e apporta alcune modifiche all'aspetto della copia del collegamento.

• Peso del carattere del collegamento: Ultra grassetto
• Stile carattere collegamento: corsivo, maiuscolo, sottolineato
• Colore sottolineatura collegamento: rgba (255,255,255,0.3)
• Dimensione del testo del collegamento: 0px
• Altezza della linea di collegamento: 0em

Impostazioni collegamento al passaggio del mouse

Apportare alcune modifiche al passaggio del mouse successivo.

• Dimensione del testo del collegamento: 40 px
• Altezza della linea di collegamento: 1,8 em

Impostazioni predefinite del testo dell'intestazione

Apporta anche alcune modifiche alle impostazioni del testo dell'intestazione.

• Peso del carattere dell'intestazione: Ultra grassetto
• Stile carattere intestazione: maiuscolo
• Colore del testo dell'intestazione: #ffffff
• Dimensione del testo dell'intestazione: 70 px (desktop), 40 px (tablet), 30 px (telefono)
• Altezza della linea di prua: 1,4 em

Impostazioni del testo dell'intestazione al passaggio del mouse

Con alcune piccole modifiche al passaggio del mouse.

• Colore del testo dell'intestazione: rgba (255,255,255,0)
• Dimensione del testo dell'intestazione: 0px

Spaziatura predefinita

Continua andando alle impostazioni di spaziatura e aggiungendo alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 40px
• Imbottitura inferiore: 0px
• Imbottitura sinistra: 20px
• Imbottitura destra: 20px

Spaziatura al passaggio del mouse

I valori di riempimento personalizzato differiscono leggermente al passaggio del mouse.

• Imbottitura superiore: 40px
• Imbottitura inferiore: 40 px
• Imbottitura sinistra: 20px
• Imbottitura destra: 20px

Frontiera

Stiamo anche usando un confine.

• Larghezza bordo: 10px
• Colore bordo: #ffa53b

transizioni

E aggiungi una transizione veloce modificando la durata della transizione nella scheda Avanzate.

• Durata della transizione: 0 ms

Crea titolo animato #2

Aggiungi nuova sezione

Colore di sfondo

Al prossimo esempio! Aggiungi una nuova sezione proprio sotto la sezione degli eroi e aggiungi un colore di sfondo.

• Colore di sfondo: #efefef

Spaziatura

Quindi, vai alle impostazioni di spaziatura e gioca con i diversi valori di margine e padding.

• Margine inferiore: 100 px
• Margine destro: 200 px (desktop), 100 px (tablet), 50 px (telefono)
• Imbottitura superiore: 54px
• Imbottitura inferiore: 54px

Scatola ombra

Per abbinare questa sezione al pacchetto di layout, stiamo aggiungendo anche un'ombra sottile della scatola.

• Posizione orizzontale dell'ombra del riquadro: 30 px
• Posizione verticale dell'ombra del riquadro: 30 px
• Forza di diffusione dell'ombra della scatola: -10px
• Colore ombra: #ffa53b

Aggiungi nuova riga

Struttura della colonna

La riga che stiamo aggiungendo a questa sezione necessita della seguente struttura a colonne:

Modulo Aggiungi testo

Aggiungi contenuto

Aggiungi il contenuto di tua scelta utilizzando ancora una volta un collegamento di intestazione e paragrafo. Stiamo anche utilizzando un elenco che aiuterà i visitatori a navigare facilmente tra le diverse parti del sito web.

Impostazioni predefinite del testo del collegamento

Vai alle impostazioni del testo del collegamento e apporta alcune modifiche all'aspetto della copia del collegamento.

• Stile carattere collegamento: sottolineato
• Colore del testo del collegamento: #000000
• Dimensione del testo del collegamento: 0 px (desktop), 20 px (tablet), 13 px (telefono)
• Altezza della linea di collegamento: 0px (desktop), 1.8em (tablet e telefono)

Passa il mouse sulle impostazioni del testo del collegamento

Apporta alcune piccole modifiche al passaggio del mouse.

• Dimensione del testo del collegamento: 30px
• Altezza della linea di collegamento: 2,8 em

Impostazioni predefinite del testo dell'intestazione

Anche l'intestazione che hai scelto deve essere modificata.

• Peso carattere titolo 2: Ultra grassetto
• Stile carattere titolo 2: maiuscolo
• Titolo 2: Dimensioni testo: 30 px (desktop e tablet), 20 px (telefono)
• Intestazione 2 Spaziatura lettere: 1px

Impostazioni del testo dell'intestazione al passaggio del mouse

Modifica la dimensione del testo al passaggio del mouse.

• Intestazione 2 Dimensione del testo: 0px

Spaziatura predefinita

Continua andando alle impostazioni di spaziatura e aggiungendo alcuni margini personalizzati e valori di riempimento.

• Margine sinistro: 0px (desktop, tablet e telefono)
• Imbottitura superiore: 40px
• Imbottitura sinistra: 50 px

Spaziatura al passaggio del mouse

Modifica il margine sinistro al passaggio del mouse.

• Margine sinistro: 200 px

Bordo predefinito

Quindi, aggiungi un bordo sinistro al modulo di testo.

• Larghezza bordo sinistro: 5px
• Colore bordo sinistro: #ffa53b

Confine al passaggio del mouse

Rimuovi tutta la larghezza del bordo al passaggio del mouse.

• Larghezza bordo sinistro: 0px

transizioni

Ultimo ma non meno importante, crea una transizione graduale utilizzando una durata di transizione leggermente superiore.

• Durata della transizione: 500 ms

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'occhiata finale al risultato finale.

Pensieri finali

In questo post sui casi d'uso, ti abbiamo mostrato come creare titoli animati al passaggio del mouse utilizzando solo le opzioni integrate di Divi. Questo è un ottimo modo per mettere sotto i riflettori parti specifiche della tua copia e attivare l'azione dei visitatori in modo creativo. Se hai domande, assicurati di lasciare un commento nella sezione commenti qui sotto!