Come creare un'animazione di busta con gli effetti di scorrimento di Divi

Ogni volta che esce una nuova funzionalità Divi, cerchiamo di condividere alcuni tutorial interessanti e utili che ti aiuteranno a pensare fuori dagli schemi e a essere creativo con Divi. Il tutorial di oggi fa esattamente questo. Ti mostreremo come creare un'animazione a busta reattiva con gli effetti di scorrimento di Divi. Questo è un ottimo modo per enfatizzare un blocco di invito all'azione, ad esempio, ma puoi usarlo anche per altri scopi. 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

Iscriviti al nostro canale Youtube

Scarica GRATUITAMENTE il layout di animazione della busta

Per mettere le mani sul layout di animazione della busta gratuita, 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!

Ricrea la struttura dell'elemento

Aggiungi una nuova sezione al centro o alla fine della pagina

Colore di sfondo

Inizia aggiungendo una nuova sezione da qualche parte nel mezzo o in fondo alla tua pagina. Apri le impostazioni della sezione e cambia il colore di sfondo in bianco.

• Colore di sfondo: #FFFFFF

Spaziatura

Modificare le impostazioni di spaziatura successiva.

• Imbottitura superiore: 5vw
• Imbottitura inferiore: 0px

straripamenti

E nascondi gli overflow della sezione.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e cambia il colore di sfondo.

• Colore di sfondo: #FFFFFF

Dimensionamento

Passa quindi alla scheda di progettazione della riga e modifica le impostazioni di dimensionamento come segue:

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

Spaziatura

Quindi, aggiungi alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 14vw (desktop), 11vw (tablet e telefono)
• Imbottitura inferiore: 14vw (desktop), 11vw (tablet e telefono)
• Imbottitura sinistra: 20vw (desktop), 10vw (tablet e telefono)
• Imbottitura destra: 20vw (desktop), 10vw (tablet e telefono)

Frontiera

Aggiungi anche un raggio di bordo.

• Tutti gli angoli: 20px

Scatola ombra

Stiamo anche usando un'ombra sottile della scatola.

• Posizione verticale dell'ombra del riquadro: 38 px
• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba (0,0,0,0.08)

Indice Z

Completa le impostazioni della riga aumentando l'indice z nella scheda Avanzate.

• Indice Z: 11

Aggiungi il modulo di testo n. 1 alla colonna

Aggiungi contenuto H2

È ora di aggiungere moduli, iniziando con un primo modulo di testo. Inserisci alcuni contenuti H2 a tua scelta.

Impostazioni testo H2

Modificare le impostazioni del testo H2 del modulo come segue:

• Intestazione 2 Carattere: Poppins
• Titolo 2: Dimensione testo: 2vw (desktop), 4vw (tablet), 5vw (telefono)

Aggiungi il modulo di testo n. 2 alla colonna

Aggiungi contenuto

Aggiungi un altro modulo di testo proprio sotto il precedente e inserisci del contenuto descrittivo a tua scelta.

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo.

• Carattere del testo: Open Sans
• Dimensione del testo: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Altezza riga di testo: 2,6 em

Spaziatura

Aggiungi anche alcuni valori superiori e inferiori personalizzati su schermi di diverse dimensioni.

• Imbottitura superiore: 2vw (Desktop), 4vw (Tablet), 5vw (Telefono)
• Imbottitura inferiore: 2vw (desktop), 4vw (tablet), 5vw (telefono)

Aggiungi modulo pulsante alla colonna

Aggiungi copia

Il prossimo e ultimo modulo che collocheremo in questa riga è un modulo pulsante. Aggiungi una copia a tua scelta.

Impostazioni dei pulsanti

Quindi, modella il pulsante di conseguenza:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #0f33ff
• Larghezza bordo pulsante: 0px

• Raggio del bordo del pulsante: 100 px
• Carattere pulsante: Poppins

Spaziatura

E completa le impostazioni del modulo aggiungendo alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.

• Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
• Imbottitura inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Imbottitura sinistra: 2vw (Desktop), 4vw (Tablet), 6vw (Telefono)
• Imbottitura destra: 2vw (Desktop), 4vw (Tablet), 6vw (Telefono)

Aggiungi riga #2

Struttura della colonna

Ora che abbiamo posizionato la riga di invito all'azione, è il momento di iniziare a creare la forma della busta. Per fare ciò, aggiungi una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Consenti alla riga di occupare l'intera larghezza della sezione modificando le impostazioni di dimensionamento come segue:

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

Spaziatura

Rimuovi anche tutta l'imbottitura superiore e inferiore predefinita.

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

Schermo

E per assicurarci che le colonne appaiano una accanto all'altra su schermi di dimensioni più piccole, aggiungeremo una riga di codice CSS all'elemento principale della riga.

display: flex;

Aggiungi modulo immagine alla colonna 1

Lascia la casella immagine vuota

Aggiungi un modulo immagine alla colonna 1 e lascia vuota la casella dell'immagine.

Sfondo sfumato

Invece, stiamo usando uno sfondo sfumato.

• Colore 1: RGB (255,255,255,0)
• Colore 2: #e8e8e8
• Tipo di gradiente: lineare
• Direzione del gradiente: 150 gradi
• Posizione di partenza: 50%
• Posizione finale: 50%

Spaziatura

Modificare di conseguenza i valori di riempimento del modulo:

• Imbottitura superiore: 15vw
• Imbottitura inferiore: 15vw

Clona modulo immagine nella colonna 1 e posiziona il duplicato nella colonna 2

Una volta completato il modulo immagine nella colonna 1, puoi clonare l'intero modulo e posizionare il duplicato nella colonna 2.

Cambia sfumatura di sfondo

Cambia lo sfondo sfumato come segue:

• Colore 1: RGB (255,255,255,0)
• Colore 2: #efefef
• Tipo di gradiente: lineare
• Direzione del gradiente: 210deg
• Posizione di partenza: 50%
• Posizione finale: 50%

Aggiungi riga #3

Struttura della colonna

Per creare il fondo della busta, avremo bisogno di un'altra riga con la seguente struttura a colonne:

Dimensionamento

Apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:

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

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Schermo

E consenti a entrambe le colonne di apparire una accanto all'altra aggiungendo una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Indice Z

Completa le impostazioni della riga aumentando l'indice z nella scheda Avanzate.

• Indice Z: 12

Aggiungi modulo immagine alla colonna 1

Lascia la casella immagine vuota

Aggiungi un modulo immagine alla colonna 1 e, di nuovo, lascia vuota la casella dell'immagine.

Sfondo sfumato

Usa invece uno sfondo sfumato.

• Colore 1: RGB (255,255,255,0)
• Colore 2: #efefef
• Tipo di gradiente: lineare
• Direzione gradiente: 213°
• Posizione di partenza: 40%
• Posizione finale: 40%

Spaziatura

E aumenta le dimensioni del modulo aggiungendo un po' di imbottitura superiore e inferiore.

• Imbottitura superiore: 20vw
• Imbottitura inferiore: 20vw

Clona modulo immagine nella colonna 1 e posiziona il duplicato nella colonna 2

Una volta completato il modulo immagine nella colonna 1, puoi clonarlo e posizionare il duplicato nella colonna 2.

Cambia sfumatura di sfondo

Assicurati di cambiare lo sfondo sfumato del duplicato.

• Colore 1: RGB (255,255,255,0)
• Colore 2: #e8e8e8
• Tipo di gradiente: lineare
• Direzione gradiente: 147 gradi
• Posizione di partenza: 40%
• Posizione finale: 40%

Aggiungi movimento verticale alla riga n. 1

Ora, l'ultima parte per far funzionare l'animazione della busta è aggiungere un effetto di scorrimento del movimento verticale reattivo alla prima riga della sezione e il gioco è fatto!

• Abilita movimento verticale: Sì
• Compensazione iniziale:
  • Desktop: 0 (al 68%)
  • Compressa: 0,5 (al 61%)
  • Telefono: 0,5 (al 43%)
• Compensazione media:
  • Desktop: 6.5 (all'81%)
  • Tablet e telefono: 21,5 (all'82%)
• Scostamento finale:
  • Desktop: 16 (al 95%)
  • Tablet e telefono: 21,5 (all'82%)

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 gli effetti di scorrimento di Divi. Più specificamente, ti abbiamo mostrato come mettere insieme un'animazione di buste. Puoi usare questa animazione per molti tipi di cose, ad esempio per evidenziare il tuo blocco CTA. 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.