Scarica GRATUITAMENTE una sezione di animazione con schizzi colorati per Divi

Il modo in cui progetti la sezione degli eroi della tua pagina determina le aspettative per il resto della tua pagina. Se stai progettando una landing page che celebra qualcosa, che si tratti di un anniversario o di una vendita, può sicuramente aiutare a portare l'atmosfera festosa nel tuo design. Un modo per affrontarlo è aggiungere un'animazione a schizzi colorati allo sfondo della sezione degli eroi. L'attenzione rimarrà comunque sulla copia scritta e sulla CTA fornita. In questo tutorial, ti mostreremo come creare una bellissima sezione di animazione con schizzi colorati con le impostazioni integrate di Divi. Potrai anche scaricare gratuitamente il file JSON!

Andiamo 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 della sezione di The Spatter Animation Hero

Per mettere le mani sul layout della sezione dell'eroe dell'animazione a spruzzo 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!

Aggiungi nuova sezione

Sfondo sfumato

Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e applica uno sfondo sfumato a tua scelta.

• Colore 1: #070a49
• Colore 2: #6f00f7
• Tipo di gradiente: lineare
• Direzione del gradiente: 148 gradi

Dimensionamento

Passa alla scheda di progettazione della sezione e aggiungi un'altezza minima alle impostazioni di dimensionamento. Questo trasformerà la nostra sezione a schermo intero.

• Altezza minima: 100 vh

Spaziatura

Successivamente stiamo rimuovendo tutti i padding superiore e inferiore predefiniti.

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

Visibilità

E per assicurarci che nessuna barra di scorrimento orizzontale appaia nel nostro design, nasconderemo gli overflow della sezione.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiungi riga n. 1

Struttura della colonna

Una volta che le impostazioni della sezione sono a posto, aggiungi una prima riga utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di toccare entrambi i lati sinistro e destro del contenitore della sezione modificando le impostazioni di dimensionamento come segue:

• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Elemento principale CSS

E per assicurarci che i moduli appaiano uno accanto all'altro su schermi di dimensioni più piccole, aggiungeremo una riga di codice CSS all'elemento principale della riga.

display: flex;

Animazione colonna 1

Una volta impostate le impostazioni generali della riga, apri le impostazioni della colonna 1 e aggiungi l'animazione.

• Stile di animazione: Zoom
• Direzione dell'animazione: Centro
• Intensità animazione: 100%

Animazione colonna 2

Aggiungi l'animazione alla seconda colonna successiva.

• Stile di animazione: Zoom
• Direzione dell'animazione: Centro
• Ritardo animazione: 250 ms
• Intensità animazione: 100%

Animazione colonna 3

E stiamo usando l'animazione anche per la terza colonna.

• Stile di animazione: Zoom
• Direzione dell'animazione: Centro
• Ritardo animazione: 500 ms
• Intensità animazione: 100%

Aggiungi modulo immagine alla colonna 1

Carica immagine spruzzi

È ora di aggiungere moduli, iniziando con un modulo immagine nella colonna 1. Carica l'immagine dello spatter che puoi trovare nella cartella di download che hai potuto scaricare all'inizio di questo tutorial.

Dimensionamento

Passa alla scheda di progettazione del modulo e forza l'intera larghezza nelle impostazioni di dimensionamento.

• Forza intera larghezza: Sì

Filtri

Quindi, cambia i colori del modulo usando le impostazioni dei filtri.

• Tonalità: 303 gradi
• Saturazione: 200%

Trasforma scala

Stiamo ridimensionando l'immagine anche nelle impostazioni di trasformazione.

• Fondo: 150%
• Destra: 150%

Effetto scorrimento movimento verticale

Quindi, passa alla scheda Avanzate e abilita alcuni movimenti verticali.

• Abilita movimento verticale: Sì
• Compensazione iniziale: 0
• Compensazione media:
  • Desktop: 0 (al 50%)
  • Compressa: 0 (al 70%)
  • Telefono: 0 (all'85%)
• Scostamento finale: 2
• Attivazione effetto movimento: parte inferiore dell'elemento

Effetto scorrimento movimento orizzontale

Stiamo anche usando un movimento orizzontale.

• Abilita movimento orizzontale: Sì
• Compensazione iniziale:
  • Scrivania: -10
  • Tablet e telefono: 0
• Compensazione media: 0
• Scostamento finale: 4
• Attivazione effetto movimento: parte inferiore dell'elemento

Ridimensionamento dell'effetto di scorrimento verso l'alto e verso il basso

Insieme a un effetto di ridimensionamento su e giù.

• Abilita ridimensionamento su e giù: Sì
• Scala iniziale: 100%
• Scala media: 150%
• Scala finale: 200%
• Attivazione effetto movimento: parte inferiore dell'elemento

Clona il modulo immagine due volte e posiziona i duplicati nelle colonne rimanenti della riga

Una volta completato il primo modulo immagine, puoi clonare l'intero modulo due volte e posizionare i duplicati nelle colonne rimanenti della riga.

Modifica modulo immagine nella colonna 2

Spaziatura

Apri il modulo immagine nella colonna 2 e aggiungi un margine superiore su tablet e telefono.

• Margine superiore: 50% (solo tablet e telefono)

Filtri

Cambia anche la tonalità nelle impostazioni dei filtri.

• Tonalità: 55 gradi

Cambia modulo immagine nella colonna 3

Filtri

Quindi, apri il Modulo immagine nella terza colonna e modifica le impostazioni dei filtri di conseguenza:

• Tonalità: 309 gradi
• Luminosità: 0%

Aggiungi riga #2

Struttura della colonna

Alla prossima riga. Utilizzare la seguente struttura a colonne:

Posizione

Apri le impostazioni della riga e modifica le impostazioni della posizione della riga nella scheda Avanzate.

• Posizione: Assoluta
• Posizione: Centro

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto H1

È ora di aggiungere moduli, iniziando con un modulo di testo contenente alcuni contenuti H1 di tua scelta.

Impostazioni testo H1

Modificare le impostazioni del testo H1 del modulo come segue:

• Carattere dell'intestazione: Rubik
• Colore del testo dell'intestazione: #ffffff
• Dimensione del testo dell'intestazione: 80 px (desktop), 50 px (tablet), 35 px (telefono)

• Lunghezza verticale dell'ombra del testo dell'intestazione: 0,08 em
• Intensità sfocatura ombra testo titolo: 0em
• Colore ombra testo intestazione: #1a005b

Aggiungi il modulo di testo n. 2 alla colonna

Aggiungi contenuto

Quindi, aggiungi un altro modulo di testo con alcuni contenuti descrittivi.

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Muli
• Colore del testo: #dddddd
• Dimensione del testo: 15px (desktop), 14px (tablet e telefono)
• Altezza riga di testo: 2.1em

• Colore ombra del testo: #1a005b

Dimensionamento

Modifica successivamente la larghezza del modulo.

• Larghezza: 60% (desktop), 100% (tablet e telefono)

Spaziatura

E completa le impostazioni del modulo aggiungendo un margine superiore e inferiore su diverse dimensioni dello schermo.

• Margine superiore: 6% (Desktop), 10% (Tablet), 14% (Telefono)
• Margine inferiore: 6% (Desktop), 10% (Tablet), 14% (Telefono)

Aggiungi modulo pulsante alla colonna

Aggiungi copia

L'ultimo modulo di cui abbiamo bisogno nella nostra colonna è un modulo pulsante. Aggiungi una copia a tua scelta.

Impostazioni dei pulsanti

Quindi, passa alla scheda Design e modella il pulsante come segue:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 17 px
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #ea01a6
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 100 px

• Carattere pulsante: Rubik
• Peso del carattere del pulsante: grassetto
• Stile carattere pulsante: maiuscolo

Spaziatura

Aggiungi anche alcuni valori di riempimento personalizzati nelle impostazioni di spaziatura.

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

Scatola ombra

E completa le impostazioni del modulo aggiungendo un'ombra di scatola.

• Posizione orizzontale dell'ombra del riquadro: 5px
• Posizione verticale dell'ombra del riquadro: 5px
• Colore ombra: #30005b

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 essere creativo con l'animazione integrata di Divi e gli effetti di scorrimento. Più specificamente, ti abbiamo mostrato come creare una colorata sezione di animazione con schizzi di eroe per una pagina di destinazione che stai configurando per un'occasione speciale. Quell'occasione potrebbe essere, ma non è limitata a, l'anniversario della tua azienda o una vendita speciale. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a 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.