Come applicare animazioni in collisione agli elementi di design con Divi

L'aggiunta di animazioni agli elementi di design sulla tua pagina può sicuramente aiutarti ad aumentare il coinvolgimento. Ci sono molte opzioni di animazione disponibili in Visual Builder di Divi e sono abbastanza semplici da usare. Ma puoi anche essere creativo con queste animazioni e usarle in un modo unico. In questo post, tratteremo tre esempi di animazioni in collisione che ricreeremo passo dopo passo, utilizzando solo le opzioni integrate di Divi.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata ai tre esempi che ricreeremo all'interno di questo tutorial.

Esempio n. 1: testo in conflitto

Esempio n. 2: Divisori in collisione

Esempio n. 3: griglia in collisione

Passa il mouse

Iscriviti al nostro canale Youtube

Ricrea l'esempio n. 1: testo in collisione

Aggiungi sezione speciale

Struttura

Cominciamo con il primo esempio! Apri una pagina nuova o esistente e aggiungi una nuova sezione specialistica utilizzando la seguente struttura:

Dimensionamento

Senza aggiungere moduli o righe, apri le impostazioni della sezione e abilita l'opzione "Rendi questa sezione a larghezza intera" nelle impostazioni di dimensionamento.

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una riga alla sezione specialità:

Dimensionamento

Apri le impostazioni della riga e apporta alcune modifiche alle impostazioni di dimensionamento.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Modifica anche i valori di riempimento personalizzato nelle impostazioni di spaziatura.

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

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Continua aggiungendo un modulo di testo alla prima colonna della riga e aggiungi del contenuto.

Impostazioni del testo dell'intestazione

Modificare le impostazioni del testo dell'intestazione successivamente.

• Carattere dell'intestazione: Montserrat
• Peso del carattere dell'intestazione: leggero
• Dimensione del testo dell'intestazione: 4.4vw (desktop), 8.2vw (tablet), 40 px (telefono)
• Altezza della linea di prua: 0,7 em

Aggiungi modulo divisore alla colonna 1

Visibilità

Il secondo modulo necessario nella colonna 1 è un modulo divisore. Assicurati che il divisore venga visualizzato abilitando l'opzione "Mostra divisore".

• Mostra divisore: Sì

Colore

Passa alla scheda Design e cambia il colore del divisore.

• Colore: #000000

Dimensionamento

Diminuire anche la larghezza del divisorio.

• Larghezza: 91%

Spaziatura

E aggiungi un margine superiore per creare spazio tra il modulo divisore e il modulo testo.

• Margine superiore: 30px

Animazione

Infine, aggiungi un'animazione sottile al modulo divisore.

• Stile di animazione: diapositiva
• Direzione animazione: Sinistra

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Passa alla seconda colonna e aggiungi il secondo modulo di testo con alcuni contenuti a scelta.

Impostazioni del testo dell'intestazione

Modificare le impostazioni del testo dell'intestazione successivamente.

• Carattere dell'intestazione: Montserrat
• Peso del carattere dell'intestazione: leggero
• Colore del testo dell'intestazione: #3f46ff
• Dimensione del testo dell'intestazione: 3,8 vw (desktop), 6,5 vw (tablet), 40 px (telefono)
• Altezza della linea di prua: 0,8 em

Animazione

E aggiungi anche un'animazione a questo modulo.

• Stile di animazione: diapositiva
• Direzione animazione: Sinistra
• Ritardo animazione: 600 ms
• Intensità animazione: 10%

Aggiungi riga #2

Struttura della colonna

Continua aggiungendo un'altra riga alla sezione utilizzando la seguente struttura a colonne:

Aggiungi moduli rimanenti

Aggiungi gli altri moduli che vuoi mostrare in questa nuova riga e modificali secondo le tue esigenze.

Ricrea l'esempio n. 2: divisori in collisione

Aggiungi sezione speciale

Struttura

Al prossimo esempio! Aggiungi una nuova sezione specialistica utilizzando la seguente struttura:

Dimensionamento

Senza aggiungere righe o moduli, apri le impostazioni della sezione e abilita l'opzione "Rendi questa sezione a larghezza intera".

• Rendi questa sezione a tutta larghezza: Sì

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Spaziatura

Apri le impostazioni della riga e modifica le impostazioni di riempimento personalizzate.

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

Modulo Aggiungi testo

Aggiungi contenuto

Quindi, aggiungi un modulo di testo alla riga con alcuni contenuti a scelta.

Impostazioni del testo dell'intestazione

Passa alla scheda Design e modifica le impostazioni del testo dell'intestazione.

• Carattere dell'intestazione: Montserrat
• Peso del carattere dell'intestazione: leggero
• Dimensione del testo dell'intestazione: 70 px (desktop), 50 px (tablet), 40 px (telefono)
• Altezza della linea di prua: 0,8 em

Aggiungi riga #2

Struttura della colonna

Continua aggiungendo un'altra riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento.

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 53% (desktop), 100% (tablet e telefono)

Spaziatura

Modifica anche i valori di riempimento personalizzato.

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

Aggiungi modulo divisore alla colonna 1

Visibilità

Una volta che hai finito di modificare le impostazioni della riga, vai avanti e aggiungi un modulo divisore alla prima colonna e assicurati che il divisore venga visualizzato abilitando l'opzione "Mostra divisore".

• Mostra divisore: Sì

Colore

Cambia il colore del divisore successivo.

• Colore divisore: #3f46ff

Stili

E cambia lo stile del divisore nelle impostazioni degli stili.

• Stile divisore: doppio

Dimensionamento

Aumentare il peso del divisore anche nelle impostazioni di dimensionamento.

• Peso del divisore: 8px

Animazione

Infine, aggiungi un'animazione al Modulo divisore.

• Stile di animazione: diapositiva
• Direzione dell'animazione: destra

Clona modulo divisore e posiziona nella colonna 2

Una volta che hai finito di modificare le impostazioni del modulo divisore, vai avanti e clona il modulo. Posiziona il duplicato nella seconda colonna della riga.

Cambia animazione

Per creare un effetto di collisione, cambia la direzione dell'animazione del modulo divisore duplicato.

• Stile di animazione: diapositiva
• Direzione animazione: Sinistra

Aggiungi riga #3

Struttura della colonna

Continua aggiungendo un'altra riga utilizzando la seguente struttura di colonne:

Aggiungi moduli rimanenti

E aggiungi tutti i moduli che desideri per completare il design della sezione.

Ricrea l'esempio n. 3: griglia in collisione

Aggiungi nuova sezione

Spaziatura

Al prossimo e ultimo esempio! Aggiungi una sezione normale e apri le impostazioni. Vai alle impostazioni di spaziatura e aggiungi alcuni valori di riempimento personalizzati:

• Imbottitura superiore: 300 px
• Imbottitura inferiore: 200 px

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Aggiungi modulo immagine alla colonna

Carica sovrapposizione immagine sagomata

Salva la seguente sovrapposizione di immagini sagomate sul desktop facendo clic con il pulsante destro del mouse:

Dopo aver salvato la sovrapposizione dell'immagine sagomata, torna al tuo sito web Divi e aggiungi un modulo immagine alla riga. Carica il file di sovrapposizione dell'immagine sagomata che puoi trovare nella cartella dei download.

Sfondo sfumato

Quindi, aggiungi uno sfondo sfumato al modulo.

• Colore 1: #aa2bff
• Colore 2: #09f7eb

Allineamento

Modifica anche l'allineamento dell'immagine.

• Allineamento immagine: centro

Dimensionamento

E abilita l'opzione "Forza larghezza intera" nelle impostazioni di dimensionamento.

• Forza intera larghezza: Sì

Spaziatura

Aggiungi anche un margine personalizzato al modulo.

• Margine sinistro: 200 px
• Margine destro: 200 px

Animazione

Infine, aggiungi un'animazione al modulo.

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

Aggiungi riga #2

Struttura della colonna

Alla seconda fila. Utilizzare la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e apporta alcune modifiche alle impostazioni di dimensionamento.

• Usa larghezza personalizzata: Sì
• Unità: PX
• Larghezza personalizzata: 944 px
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Aggiungi modulo Blurb alla colonna 1

Aggiungi contenuto

Continua aggiungendo un modulo Blurb alla prima colonna. Inserisci alcuni contenuti a tua scelta.

Icona

Seleziona un'icona successiva.

Colore di sfondo

E aggiungi anche un colore di sfondo al modulo.

• Colore di sfondo: rgba (255,255,255,0.83)

Impostazioni icona

Passa alla scheda Design e modifica le impostazioni dell'icona.

• Colore icona: #000000
• Posizionamento delle icone: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 73 px

Impostazioni del testo del titolo

Modifica anche le impostazioni del testo del titolo.

• Carattere del titolo: Open Sans
• Peso del carattere del titolo: semi grassetto
• Allineamento del testo del titolo: al centro
• Dimensione del testo del titolo: 15px
• Spaziatura delle lettere del titolo: -1px
• Altezza della riga del titolo: 1,8 em

Dimensionamento

E diminuire la larghezza del contenuto nelle impostazioni di dimensionamento.

• Larghezza contenuto: 183 px

Spaziatura

Aggiungeremo anche un'imbottitura superiore e inferiore personalizzata.

• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px

Scatola ombra

Continua dando al modulo Blurb un'ombra sottile.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.3)

transizioni

E aumenta la durata della transizione nella scheda Avanzate.

• Durata della transizione: 600 ms

Clona modulo Blurb 8 volte e posiziona 3 duplicati in ogni colonna rimanente

Ora, una volta che hai finito di modificare il primo modulo Blurb, puoi andare avanti e clonarlo 8 volte. Metti tre duplicati nella seconda colonna e tre nella terza. Nella parte successiva di questo tutorial, apporteremo modifiche uniche a ciascuno dei moduli Blurb. Per fare ciò, seguiremo la numerazione seguente:

Modifica modulo Blurb n. 1

Spaziatura

Apri il primo modulo Blurb e aggiungi un margine superiore negativo.

• Margine superiore: -340 px (desktop), 0 px (tablet e telefono)

Spaziatura al passaggio del mouse

Modificare i valori dei margini al passaggio del mouse.

• Margine superiore: -380 px
• Margine inferiore: 40 px
• Margine sinistro: -40px
• Margine destro: 40 px

Angoli arrotondati

Continua aggiungendo "30px" nell'angolo in alto a sinistra del modulo.

Animazione

E aggiungi un'animazione.

• Stile di animazione: diapositiva
• Direzione animazione: Sinistra
• Ritardo animazione: 200 ms

Modifica modulo Blurb #2

Colore di sfondo

Apri il secondo modulo Blurb e cambia il colore di sfondo.

• Colore di sfondo: rgba (255,255,255,0.93)

Spaziatura

Continua aggiungendo un margine superiore negativo al modulo.

• Margine superiore: -340 px (desktop), 0 px (tablet e telefono)

Spaziatura al passaggio del mouse

Modifica questi valori di margine al passaggio del mouse.

• Margine superiore: -380 px
• Margine inferiore: 40 px

Animazione

E aggiungi un'animazione al modulo.

• Stile di animazione: diapositiva
• Direzione animazione: Sinistra
• Ritardo animazione: 400 ms

Modifica modulo Blurb n. 3

Spaziatura

Al terzo modulo Blurb. Aggiungi un margine superiore negativo.

• Margine superiore: -340 px (desktop), 0 px (tablet e telefono)

Spaziatura al passaggio del mouse

Modifica i valori dei margini al passaggio del mouse.

• Margine superiore: -380 px
• Margine inferiore: 40 px
• Margine sinistro: 40 px
• Margine destro: -40px

Angoli arrotondati

Aggiungi anche "30px" nell'angolo in alto a destra del modulo.

Animazione

E aggiungi un'animazione.

• Stile di animazione: diapositiva
• Direzione animazione: Sinistra
• Ritardo animazione: 600 ms

Modifica modulo Blurb #4

Colore di sfondo

Al quarto modulo. Apri le impostazioni e cambia il colore di sfondo.

• Colore di sfondo: rgba (255,255,255,0.93)

Spaziatura al passaggio del mouse

Aggiungi successivamente alcuni valori di margine al passaggio del mouse.

• Margine sinistro: -40px
• Margine destro: 40 px

Animazione

E aggiungi anche un'animazione.

• Stile di animazione: dissolvenza
• Ritardo animazione: 800 ms

Modifica modulo Blurb #5

Animazione

Al quinto modulo. L'unica cosa che devi fare qui è aggiungere un'animazione.

• Stile di animazione: dissolvenza
• Ritardo animazione: 1000 ms

Modifica modulo Blurb n. 6

Colore di sfondo

Continua aprendo il sesto modulo e cambia il colore di sfondo.

• Colore di sfondo: rgba (255,255,255,0.93)

Spaziatura al passaggio del mouse

Modifica anche i valori di spaziatura al passaggio del mouse.

• Margine sinistro: 40 px
• Margine destro: -40px

Animazione

E aggiungi un'animazione.

• Stile di animazione: dissolvenza
• Ritardo animazione: 1200 ms

Modifica modulo Blurb #7

Spaziatura al passaggio del mouse

Al settimo modulo. Aggiungi alcuni valori di margine al passaggio del mouse alle impostazioni di spaziatura.

• Margine superiore: 40 px
• Margine sinistro: -40px
• Margine destro: 40 px

Angoli arrotondati

Continua aggiungendo "30 px" di raggio del bordo nell'angolo in basso a sinistra del modulo.

Animazione

E aggiungi un'animazione.

• Stile di animazione: diapositiva
• Direzione dell'animazione: destra
• Ritardo animazione: 1400 ms

Modifica modulo Blurb n. 8

Colore di sfondo

Continua aprendo l'ottavo modulo e cambia il colore di sfondo.

• Colore di sfondo: rgba (255,255,255,0.93)

Spaziatura al passaggio del mouse

Aggiungi un margine personalizzato al passaggio del mouse al modulo successivo.

• Margine superiore: 40 px

Animazione

Aggiungi anche un'animazione a questo modulo Blurb.

• Stile di animazione: diapositiva
• Direzione dell'animazione: destra
• Ritardo animazione: 1600 ms

Modifica modulo Blurb n. 9

Spaziatura al passaggio del mouse

Al nono ed ultimo modulo! Vai alle impostazioni di spaziatura e aggiungi alcuni valori di margine al passaggio del mouse personalizzati.

• Margine superiore: 40 px
• Margine sinistro: 40 px
• Margine destro: -40px

Angoli arrotondati

Aggiungi "30 px" di raggio del bordo anche nell'angolo in basso a destra.

Animazione

E aggiungi un'animazione.

• Stile di animazione: diapositiva
• Direzione dell'animazione: destra
• Ritardo animazione: 1800 ms

Aggiungi margine inferiore negativo al modulo immagine nella riga n. 1

Ora, per far collidere il cerchio che abbiamo creato nella prima parte di questo esempio e la griglia, daremo al modulo immagine (contenente la sovrapposizione dell'immagine sagomata) un margine inferiore negativo.

• Margine inferiore: -520 px

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato che abbiamo ottenuto.

Esempio n. 1: Divisori in collisione

Esempio n. 2: testo in conflitto

Esempio n. 3: griglia in collisione

Passa il mouse

Pensieri finali

L'aggiunta di animazioni alle tue pagine può aiutare a creare una maggiore interazione tra i tuoi visitatori e te. Naturalmente, puoi semplicemente utilizzare le impostazioni di animazione che hai all'interno di Visual Builder, ma puoi anche fare un ulteriore passo avanti applicando animazioni in collisione agli elementi di progettazione che ti aiuteranno a ottenere risultati sorprendenti. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!