Come progettare una maschera di testo con animazione di sfondo sullo scorrimento in Divi

I design delle maschere di testo sono sorprendentemente facili da creare utilizzando le opzioni integrate di Divi. Il builder ha tutti gli ingredienti per creare un effetto maschera di testo, comprese le opzioni per stili di testo, sfondi e modalità di fusione. In effetti, abbiamo già creato progetti di maschere di testo utilizzando i metodi di fusione. Ma, con gli effetti di scorrimento, possiamo portare i design delle maschere di testo a un livello completamente nuovo.

In questo tutorial, ti mostreremo come progettare una maschera di testo con animazione di sfondo sullo scorrimento in Divi. Il design è unico e l'effetto di scorrimento lo rende davvero vivo.

Iniziamo!

Sbirciata

Ecco una rapida occhiata ai design che costruiremo in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, 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 i file

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.

SCARICA

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!

Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Progettare una maschera di testo con animazione di sfondo in Divi

Aggiungi riga

Per iniziare, aggiungi una riga a due colonne alla sezione normale predefinita.

Aggiorna le impostazioni della sezione

Prima di aggiungere qualsiasi modulo, apri le impostazioni della sezione e aggiorna il colore di sfondo e il riempimento come segue:

• Colore di sfondo: #750046

• Imbottitura: 0px in alto, 0px in basso

Aggiorna impostazioni riga

Al termine delle impostazioni della sezione, apri le impostazioni per la riga e aggiorna le seguenti impostazioni di progettazione:

• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%
• Imbottitura: 0px in alto, 0px in basso

È importante impostare la larghezza della grondaia su 1 e la larghezza su 100% perché utilizzeremo l'unità di lunghezza vw per il nostro testo durante la creazione del design della maschera di testo. Poiché l'unità di lunghezza vw si basa sulla larghezza del browser, è importante che i contenitori padre (sezione e riga) abbiano la stessa larghezza del browser che è 100%.

Aggiorna le impostazioni della colonna 1

La nostra maschera di testo e l'immagine verranno aggiunte alla colonna di sinistra (colonna 1). Dobbiamo aggiungere un colore di sfondo alla colonna in modo che i metodi di fusione che aggiungiamo all'immagine e al testo mescolino/rivelino questo colore. Dobbiamo anche impostare l'overflow su nascosto in modo che quando animiamo l'immagine durante lo scorrimento, non vediamo l'immagine in overflow al di fuori della colonna.

Apri le impostazioni per la colonna 1 e aggiorna quanto segue:

• Colore di sfondo: #750046
• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Creazione della maschera di testo

Per creare la maschera di testo, aggiungi un modulo di testo alla colonna 1.

Il contenuto del testo

Quindi aggiungi la parola "divi" al contenuto del corpo. Stiamo usando una parola di 4 lettere in modo che si impili in modo uniforme per un design quadrato.

Sfondo del testo

Quindi, aggiungi un colore di sfondo bianco al modulo di testo.

• Colore di sfondo: #ffffff

Progettazione del testo

Quindi, nella scheda Progettazione, aggiorna quanto segue:

• Carattere del testo: Rubik Mono One
• Stile del carattere del testo: TT
• Colore del testo del testo: #000000
• Dimensione del testo del testo: 25vw (desktop), 50vw (tablet e telefono)
• Altezza riga di testo: 0,8 em
• Allineamento del testo: centro

• Imbottitura: 8vw superiore, 8vw inferiore

Modalità di fusione del testo

Per completare il design della maschera di testo, aggiungi la seguente modalità di fusione:

• Modalità di fusione: schermo

Finora, i quattro ingredienti chiave per questo effetto maschera di testo sono i seguenti:

1. Sfondo della colonna
2. Sfondo di testo bianco
3. Testo nero
4. Modalità di fusione dello schermo sul modulo di testo

La modalità di fusione dello schermo moltiplica i livelli e produce una versione più leggera del mix. Con la modalità di fusione dello schermo, il testo nero diventa completamente trasparente, rivelando cosa c'è dietro che in questo caso è un colore di sfondo.

Aggiungi immagine di sfondo

Per aggiungere l'immagine di sfondo alla maschera di testo, crea un nuovo modulo immagine e carica un'immagine di circa 1700 px per 2500 px. La dimensione dell'immagine è importante in modo che l'immagine copra l'altezza e la larghezza della colonna.

Disegno dell'immagine

Quindi aggiorna le seguenti impostazioni di progettazione:

• Forza intera larghezza: S
• Modalità di fusione: schermo

Questa modalità di fusione non è necessaria per l'effetto maschera di testo, ma fonde l'immagine con il colore di sfondo in modo che corrisponda meglio al design.

Posizione dell'immagine

Quindi, dai all'immagine una posizione assoluta e aggiorna l'indice Z in modo che si trovi dietro il modulo di testo.

• Posizione: Assoluta
• Indice Z: -1

Effetti di scorrimento immagine

Una volta che il design dell'immagine è pronto, vai alla scheda Avanzate e aggiorna le opzioni dell'effetto di scorrimento come segue:

Nella scheda Movimento verticale,

• Scostamento iniziale: -1 (allo 0%)
• Scostamento medio: 0 (al 50%)
• Scostamento finale: 1 (al 100%)

Nella scheda Movimento orizzontale,

• Compensazione iniziale: -0,5 (allo 0%)
• Scostamento medio: 0 (al 50%)
• Scostamento finale: 0,5 (al 100%)

Nella scheda Ridimensionamento su e giù,

• Scala iniziale: 110% (allo 0%)
• Scala media: 125% (al 50%)
• Scala finale: 140% (al 100%)

Risultato

Puoi aggiungere un margine superiore e inferiore alla sezione in modo da poter controllare il risultato finora.

Creazione del testo fittizio

Nella colonna di destra, aggiungi un nuovo modulo di testo.

Aggiorna il contenuto del corpo con quanto segue:

<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Quindi aggiorna l'annuncio delle impostazioni di progettazione del testo come segue:

• Colore del testo: chiaro
• Intestazione 2 Carattere: Rubik
• Intestazione 2 Dimensione del testo: 4vw
• Imbottitura (desktop): 16vw superiore, 5vw sinistra, 5vw destra
• Imbottitura (tablet): 16vw in alto, 16vw in basso, 5vw a sinistra, 5vw a destra

Risultato

Modifiche opzionali

Sfondo nero/testo bianco

Se desideri utilizzare uno sfondo nero per la maschera di testo, tutto ciò che devi fare è aggiornare le tre opzioni chiave che compongono l'effetto di mascheratura del testo.

Apri le impostazioni del modulo di testo e modifica quanto segue:

• Colore di sfondo: #000000 (nero)
• Testo Colore del testo: #ffffff (bianco)
• Modalità di fusione: Moltiplica

E questo è il risultato…

Immagine PNG rotante

E puoi cambiare l'immagine animata in una con uno sfondo trasparente (un PNG) per un altro effetto interessante. Ecco un esempio di un'immagine PNG che ho usato con l'aggiunta di un effetto di scorrimento rotante.

Risultati finali

Ecco un altro sguardo a tutti i design.

Pensieri finali

Si spera che questi modelli di maschere di testo con animazione di sfondo sullo scorrimento diano il vantaggio creativo di cui il tuo sito ha bisogno. Una volta che conosci gli ingredienti di base per creare l'effetto di mascheratura del testo, non avrai problemi a creare innumerevoli versioni di questo design per soddisfare le tue esigenze.

Non vedo l'ora di sentirti nei commenti.

Saluti!