Come creare animazioni sovrapposte in ritardo con Divi

Gran parte del successo del tuo sito web dipende dalla capacità o meno di impressionare i tuoi visitatori. Non solo con i tuoi prodotti o servizi, ma anche con il modo in cui comunichi e quanto è ben progettato il tuo sito web. Perché diciamocelo, i siti web sono spesso la prima impressione. E come qualsiasi altro tipo di prima impressione, vuoi che lasci un buon retrogusto.

Ora, se stai cercando un modo unico per mettere alcuni dei tuoi contenuti sotto i riflettori, la creazione di sottili animazioni sovrapposte potrebbe essere proprio quello che stai cercando. Queste sottili animazioni sovrapposte sono una specie di presentazione per i tuoi visitatori. Non devono scorrere o fare clic su nulla, il contenuto viene visualizzato in modo elegante.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Approccio

• Inizieremo aggiungendo tutti gli elementi di design di cui abbiamo bisogno in ordine verticale, senza sovrapposizioni
• Poiché stiamo aggiungendo tutti gli elementi di design, aggiungeremo anche animazioni personalizzate con un certo ritardo dell'animazione
• Questi ritardi dell'animazione avranno senso solo dopo aver completato l'ultima parte del tutorial che si concentra sulle sovrapposizioni
• Una parte importante di questo tutorial è l'utilizzo di moduli divisori sagomati con lo stesso colore di sfondo della sezione per far "scomparire" il contenuto della riga in ritardo
• Puoi applicare questa tecnica a qualsiasi tipo di design su cui stai lavorando una volta compresi i diversi passaggi necessari per far funzionare l'approccio

Iniziamo a creare!

Aggiungi nuova sezione

Colore di sfondo

Inizia creando una nuova pagina o aprendone una esistente e aggiungi una sezione normale. Apri le impostazioni della sezione e aggiungi uno sfondo.

• Colore di sfondo: #f3f3ec

Aggiungi riga n. 1

Struttura della colonna

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

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo. Il motivo per cui lo stiamo facendo è eliminare tutta la spaziatura dei pixel predefinita. Nei prossimi passaggi, aggiungeremo tutto lo spazio di cui abbiamo bisogno utilizzando invece un'unità di visualizzazione.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Aggiungi modulo di testo alla colonna

Aggiungi contenuto H2

Iniziamo ad aggiungere moduli! Il primo modulo di cui abbiamo bisogno è un modulo di testo con alcuni contenuti H2. Ricorda che questo modulo "scomparirà" dopo pochi secondi, quindi vorrai mantenerlo breve, pertinente e ricordabile.

Impostazioni testo H2

Quindi, vai alla scheda Design e modifica le impostazioni del testo H2.

• Intestazione 2 Carattere: Poppins
• Colore testo titolo 2: #333333
• Intestazione 2 Dimensione del testo: 5vw

Spaziatura

Crea lo spazio che desideri utilizzando un'imbottitura sinistra e destra nelle impostazioni di spaziatura.

• Imbottitura sinistra: 15vw
• Imbottitura destra: 39vw

Aggiungi modulo divisore alla colonna

Visibilità

Al modulo successivo, che è un modulo divisore. Stiamo usando questo modulo per far "scomparire" il modulo di testo. Ci sono quattro cose di cui avremo bisogno per questo; un colore di sfondo (che è dello stesso colore della sezione in modo che tu non possa notarlo), abbastanza padding (per assicurarti di poter sovrapporre tutto il contenuto nel modulo precedente), una sovrapposizione verticale (per coprire l'intero modulo area) e un ritardo dell'animazione (per dare al primo modulo il tempo di risplendere prima di prendere il sopravvento). Una volta aggiunto il modulo divisore, assicurati di disabilitare l'opzione "Mostra divisore".

• Mostra divisore: No

Colore di sfondo

Quindi, vai alle impostazioni dello sfondo e aggiungi un colore di sfondo. Assicurati di utilizzare lo stesso colore di sfondo utilizzato per la sezione per creare un effetto uniforme.

• Colore di sfondo: #f3f3ec

Spaziatura

Continua dando al modulo divisore una dimensione più grande aggiungendo un po' di imbottitura superiore e inferiore nelle impostazioni di spaziatura.

• Imbottitura superiore: 9vw
• Imbottitura inferiore: 9vw

Animazione

E completa le impostazioni del divisore aggiungendo un'animazione ritardata.

• Stile di animazione: diapositiva
• Direzione dell'animazione: su
• Durata dell'animazione: 1200 ms
• Ritardo animazione: 1500 ms
• Intensità animazione: 50%
• Opacità iniziale dell'animazione: 50%

Aggiungi riga #2

Struttura della colonna

In seconda fila! Seleziona 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.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Quindi, aggiungi un po' di imbottitura ai lati sinistro e destro della riga nelle impostazioni di spaziatura.

• Imbottitura sinistra: 10vw (desktop), 2vw (tablet e telefono)
• Imbottitura destra: 10vw (desktop), 2vw (tablet e telefono)

Schermo

Ci stiamo anche assicurando che le colonne appaiano una accanto all'altra su schermi di dimensioni più piccole aggiungendo una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Aggiungi modulo Blurb alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Aggiungi un modulo Blurb alla colonna 1 e inserisci alcuni contenuti a tua scelta.

Seleziona icona

Continua selezionando un'icona a tua scelta.

Impostazioni icona

Modifica l'aspetto della tua icona in seguito.

• Colore icona: #dbd6bd
• Icona del cerchio: Sì
• Icona del cerchio: #ffffff
• Posizionamento immagine/icona: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 2.5vw (desktop), 1.7vw (tablet), 1.9vw (telefono)

Impostazioni del testo del titolo

Modifica anche le impostazioni del testo del titolo.

• Carattere del titolo: Source Serif Pro
• Allineamento del testo del titolo: al centro
• Dimensione del testo del titolo: 1.7vw (desktop), 2.1vw (tablet), 2.5vw (telefono)
• Altezza della riga del titolo: 1,9 em

Impostazioni del corpo del testo

Insieme alle impostazioni del testo del corpo.

• Carattere del corpo: Open Sans
• Allineamento del corpo del testo: Centro
• Dimensioni del corpo del testo: 0.8vw (desktop), 1.2vw (tablet), 1.6vw (telefono)
• Altezza della linea del corpo: 2,5 em

Dimensionamento

Stiamo riducendo leggermente le dimensioni del modulo per assicurarci che ci sia spazio sufficiente tra questo modulo e i moduli che aggiungeremo alla seconda e alla terza colonna.

• Larghezza: 91,7%
• Allineamento del modulo: Centro

Spaziatura

Aggiungeremo anche spazio extra al modulo utilizzando valori di riempimento personalizzati.

• Imbottitura superiore: 2vw
• Imbottitura inferiore: 2vw
• Imbottitura sinistra: 1vw
• Imbottitura destra: 1vw

Frontiera

Quindi, vai alle impostazioni del bordo e aggiungi un bordo sottile per definire il modulo.

• Larghezza bordo: 1px
• Colore bordo: #333333

Animazione

Completa il design del modulo Blurb aggiungendo un'animazione ritardata. Come puoi notare, più elementi di design aggiungiamo, maggiore è il ritardo dell'animazione.

• Stile di animazione: diapositiva
• Ripetizione animazione: una volta
• Direzione dell'animazione: su
• Durata dell'animazione: 1000 ms
• Ritardo animazione: 2000 ms
• Intensità animazione: 16%
• Opacità iniziale dell'animazione: 0%

Clona il modulo Blurb due volte e posiziona i duplicati nelle colonne rimanenti

Una volta completato il design del modulo Blurb, puoi procedere e clonarlo due volte. Posiziona i duplicati nelle due colonne rimanenti della riga.

Cambia animazione del duplicato #1

Modifica il ritardo dell'animazione del primo duplicato.

• Ritardo animazione: 2200 ms

Cambia animazione del duplicato #2

Quindi, apri il secondo duplicato e modifica anche il ritardo dell'animazione.

• Ritardo animazione: 2400 ms

Aggiungi modulo divisore alla colonna 3

Visibilità

Il modulo successivo e ultimo di cui abbiamo bisogno in questa riga è un modulo divisore. Stiamo, ancora una volta, usando questo modulo per creare la sovrapposizione ritardata che aiuterà a far "scomparire" i moduli Blurb. Dopo aver aggiunto il modulo divisore alla colonna 3, assicurati che l'opzione "Mostra divisore" sia disabilitata.

• Mostra divisore: No

Colore di sfondo

Continua aggiungendo un colore di sfondo al divisore. Assicurati di utilizzare lo stesso colore utilizzato per lo sfondo della sezione.

• Colore di sfondo: #f3f3ec

Spaziatura

Quindi, andremo alle impostazioni di spaziatura e aumenteremo le dimensioni del modulo divisore in modo che, più avanti in questo post, possa sovrapporsi a tutti e tre i moduli Blurb.

• Margine sinistro: -60vw (desktop), -64vw (tablet e telefono)
• Imbottitura superiore: 17vw (desktop), 27vw (tablet), 30vw (telefono)
• Imbottitura inferiore: 17vw (desktop), 27vw (tablet), 34vw (telefono)

Animazione

Ultimo ma non meno importante, aggiungi un'animazione ritardata.

• Stile di animazione: diapositiva
• Ripetizione animazione: una volta
• Direzione dell'animazione: destra
• Durata dell'animazione: 650 ms
• Ritardo animazione: 4500 ms
• Intensità animazione: 24%
• Opacità iniziale dell'animazione: 0%

Clona riga #2

Una volta completata la seconda riga e tutti i suoi moduli, puoi procedere e clonarla.

Rimuovi modulo divisore in una nuova riga

Rimuovere il modulo divisore nella riga duplicata.

Modifica il ritardo dell'animazione del modulo Blurb n. 1

Quindi, apri il primo modulo Blurb e modifica il ritardo dell'animazione.

• Ritardo animazione: 5200 ms

Modifica il ritardo dell'animazione del modulo Blurb #2

Fai la stessa cosa per il Modulo Blurb nella colonna 2.

• Ritardo animazione: 5400 ms

Modifica il ritardo dell'animazione del modulo Blurb n. 3

E modifica anche il ritardo dell'animazione per il modulo Blurb nella colonna 3.

• Ritardo animazione: 5600 ms

Aggiungi sovrapposizioni

Aggiungi sovrapposizione al modulo divisore n. 1

Ora che abbiamo tutti gli elementi di design di cui abbiamo bisogno, possiamo iniziare a creare le sovrapposizioni! Queste sovrapposizioni daranno significato ai ritardi dell'animazione che abbiamo aggiunto durante il tutorial. Inizia con il modulo divisore nella prima riga che hai creato.

• Margine superiore: -15vw

Aggiungi sovrapposizione alla riga #2

Quindi, apri la seconda riga e aggiungi un margine superiore negativo.

• Margine superiore: -10vw

Aggiungi sovrapposizione ai moduli Blurb nella riga n. 2

Apri ciascuno dei moduli Blurb nella seconda riga e aggiungi alcuni valori di margine personalizzati.

• Margine superiore: -10vw
• Margine inferiore: 7vw

Aggiungi sovrapposizione al modulo divisore n. 2

Passa al Modulo Divisore che trovi nella terza colonna della seconda riga e crea la sovrapposizione.

• Margine superiore: -35vw (desktop), -47vw (tablet), -72vw (telefono)

Aggiungi sovrapposizione alla riga n. 3

Continua aprendo le impostazioni della terza riga e aggiungi un margine superiore negativo.

• Margine superiore: -10vw

Aggiungi sovrapposizione ai moduli Blurb nella riga n. 3

Ultimo ma non meno importante, aggiungi alcuni valori di margine personalizzati a ciascuno dei moduli Blurb nella terza riga. Una volta uscito da Visual Builder, potrai vedere l'animazione in tempo reale!

• Margine superiore: -22vw (desktop), -46vw (tablet), -70vw (telefono)
• Margine inferiore: 7vw

Pensieri finali

In questo post, ti abbiamo mostrato come creare sottili animazioni sovrapposte. Questo è un ottimo modo per guidare i visitatori attraverso il contenuto che stai condividendo e dare al tuo sito web un aspetto e una sensazione elevati. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!