Come creare colori di sfondo animati con Divi

Le opzioni di animazione di Divi possono trasformare rapidamente anche una pagina già bella in una coinvolgente. Ormai ci siamo abituati tutti alle diverse animazioni che sono integrate nei vari elementi di design che Divi ti fornisce. Ma sapevi che puoi usare queste animazioni anche per evidenziare un'opzione di design specifica?

In questo tutorial, ci concentreremo sulla creazione di colori di sfondo animati. Per ottenere il risultato desiderato, utilizzeremo un modulo divisore per il colore di sfondo e posizioneremo sopra un modulo di testo. Speriamo che questo tutorial ti ispiri ad aggiungere colori di sfondo animati ai prossimi progetti di web design.

Arriviamo 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 del colore di sfondo animato

Per mettere le mani sul layout del colore di sfondo animato gratuito, 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!

Iniziamo a ricreare!

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Spaziatura

La prima cosa che devi fare è aggiungere una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e aggiungi alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 5vw
• Imbottitura inferiore: 17vw

Aggiungi nuova riga

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 consenti alla riga di occupare l'intera larghezza dello schermo.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Aggiungi il modulo divisore n. 1 alla colonna

Visibilità

È ora di iniziare ad aggiungere i vari moduli di cui abbiamo bisogno, iniziando con un modulo divisore. Questo modulo divisore verrà utilizzato per il colore di sfondo, le dimensioni e l'animazione. Assicurati che l'opzione "Mostra divisore" sia disabilitata.

• Mostra divisore: No

Colore di sfondo

Vai alle impostazioni dello sfondo e aggiungi il seguente colore di sfondo:

• Colore di sfondo: #212121

Spaziatura

Passa alle impostazioni di spaziatura e dai al tuo modulo la forma desiderata utilizzando l'unità di altezza della finestra.

• Imbottitura superiore: 30vh
• Imbottitura inferiore: 30vh

Animazione

Stiamo consentendo l'animazione del colore di sfondo aggiungendo un'animazione personalizzata con un ritardo dell'animazione.

• Stile di animazione: diapositiva
• Ripetizione animazione: una volta
• Direzione dell'animazione: destra
• Ritardo animazione: 1000 ms
• Intensità animazione: 88%
• Opacità iniziale dell'animazione: 100%

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto

Il prossimo modulo di cui abbiamo bisogno è un modulo di testo. Aggiungi del contenuto H2 e del paragrafo a tua scelta.

Impostazioni testo

Quindi, vai alle impostazioni del testo e modifica i valori di conseguenza:

• Carattere del testo: Didact Gothic
• Colore del testo: #ffffff
• Dimensione del testo: 1.1vw (desktop), 1.7vw (tablet), 2.5vw (telefono)
• Altezza riga di testo: 2.1em
• Orientamento del testo: giustifica

Impostazioni testo intestazione 2 predefinite

Successivamente, apporta alcune modifiche alle impostazioni del testo di H2.

• Carattere titolo 2: Abril Fatface
• Colore testo titolo 2: #1c1c1c
• Titolo 2: Dimensione testo: 3vw (desktop), 5vw (tablet), 7vw (telefono)
• Altezza della linea di intestazione 2: 1,8 em

Passa il mouse su Intestazione 2 Impostazioni testo

Stiamo anche modificando il colore del testo al passaggio del mouse.

• Colore testo titolo 2: #ffffff

Clona entrambi i moduli

Una volta che hai finito di aggiungere e personalizzare entrambi i moduli, puoi clonarli. Nei prossimi passaggi di questo post, modificheremo tutti e quattro i moduli per creare un'animazione del colore di sfondo proveniente da entrambi i lati. Aggiungeremo anche una sovrapposizione ai moduli di testo per far sembrare che i moduli divisori e i moduli di testo siano creati nello stesso contenitore.

Modifica modulo divisore duplicato

Cambia colore di sfondo

Apri il modulo divisore duplicato e cambia il colore di sfondo.

• Colore di sfondo: #0bbfa1

Cambia animazione

Per far apparire l'animazione di sfondo dall'altra parte, stiamo cambiando la direzione dell'animazione. Aggiungeremo anche un ritardo dell'animazione leggermente più alto per ottenere il risultato desiderato.

• Direzione animazione: Sinistra
• Ritardo animazione: 1500 ms

Modifica modulo di testo duplicato

Modifica contenuto

Continua aprendo il modulo di testo duplicato e modificando il contenuto.

Modifica le impostazioni del testo dell'intestazione 2

Passa alla scheda Design e modifica anche le impostazioni del testo H2.

• Titolo 2: Allineamento del testo: a destra
• Colore testo titolo 2: #0cc9ad

Posizionamento del divisore

Modulo divisore n. 1

Per consentire la visualizzazione di uno spazio bianco sul lato destro del primo modulo divisore, aggiungeremo un margine destro utilizzando l'unità di larghezza della finestra.

• Margine destro: 20vw

Modulo divisore #2

Apri anche il secondo modulo divisore e lascia che venga occupato lo stesso spazio, ma sul lato sinistro della pagina.

• Margine superiore: 2vw
• Margine sinistro: 20vw

Aggiungi sovrapposizioni

Modulo di testo n. 1

Ora che abbiamo personalizzato tutti i moduli della nostra riga, possiamo iniziare a creare le sovrapposizioni, partendo dal primo modulo di testo. Aggiungi i seguenti valori di margine personalizzati alle impostazioni di spaziatura del modulo:

• Margine superiore: -49 vh
• Margine destro: 20vw (desktop), 15vw (tablet), 10vw (telefono)

Modulo di testo #2

Utilizzare i seguenti valori di margine personalizzati anche per il modulo di testo duplicato:

• Margine superiore: -49 vh
• Margine sinistro: 20vw (desktop), 15vw (tablet), 10vw (telefono)

Esci da Visual Builder per visualizzare il risultato

Una volta create le sovrapposizioni, dovrai uscire da Visual Builder per visualizzare il risultato!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

Siamo sempre alla ricerca di modi per aiutarti a superare i limiti nel web design e creare siti web belli e coinvolgenti. In questo post, abbiamo combinato in modo creativo diversi elementi di design e sovrapposizioni per creare colori di sfondo animati. Questo è un ottimo modo per aggiungere una dimensione extra a qualsiasi pagina su cui stai lavorando e per far sì che il tuo sito web corrisponda perfettamente alle attuali tendenze di design. Se hai domande o suggerimenti, assicurati di 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.