Come aggiungere effetti di animazione a sezioni/righe in Divi

Nel tutorial Divi di oggi, ti mostreremo come aggiungere effetti di animazione a sezioni e righe in Divi. Il tema Divi stesso fornisce alcuni effetti di animazione rilevanti che ti aiutano a portare un ulteriore livello di interazione al tuo sito web. Questi effetti sono facili da assegnare a un'immagine all'interno di Divi Builder nella sottocategoria Animazione della scheda Avanzate.

Tuttavia, se stai cercando un modo per aggiungere questi effetti di animazione ad altri moduli, sezioni o righe del tuo sito web, anche questo è possibile. In questo post, ti mostreremo esattamente come farlo. Oltre a mostrarti come aggiungere gli effetti di animazione incorporati, ti mostreremo anche come integrare wow.js e animate.css nel tuo sito Divi.

Alla fine di questo post, sarai in grado di aggiungere simpatici effetti sia alle righe che alle sezioni. Per aiutarti a visualizzare il processo, vorremmo condividere il seguente esempio (che ti mostreremo come ottenere alla fine di questo post):

Animazioni Divi o Wow.js e Animate.css?

Probabilmente ti starai chiedendo in quali casi dovresti considerare l'utilizzo delle animazioni Divi e in quali casi wow.js e animate.css farebbero il lavoro meglio. Sebbene l'utilizzo dell'animazione integrata Divi sia la soluzione più semplice se non stai cercando di creare alcuni effetti di animazione avanzati, gli effetti wow.js e animate.css porteranno sicuramente un grande valore aggiunto anche al tuo sito web.

Quando usare le animazioni Divi?

Ci sono cinque effetti di animazione disponibili in Divi che puoi usare:

• La dissolvenza in entrata
• La diapositiva in basso
• La diapositiva di sinistra
• Il giusto slide-in
• Il top slide-in

Sebbene ci siano solo cinque possibilità, sono anche quelle più utilizzate. Sono semplici e al punto. Se vuoi dare un bel effetto extra al tuo sito web, senza fare troppi sforzi, gli effetti di animazione Divi sono la strada da percorrere. Ognuno di questi effetti viene attivato dal momento in cui scorri e hai una vista del modulo, riga o sezione a cui hai aggiunto l'effetto. In questo modo, ad esempio, i tuoi visitatori non perderanno gli effetti che si trovano nella parte inferiore della pagina.

Per integrare gli effetti di animazione Divi, non è necessario caricare un tema figlio sul tuo sito web. Puoi facilmente aggiungere questi effetti mentre lavori ancora sul tema principale.

Quando usare Wow.js e Animate.css

L'integrazione di wow.js e animate.css nel tuo sito Web è qualcosa che probabilmente ti piacerà molto a causa delle numerose opzioni che hai. Ci sono 14 categorie di effetti di animazione che contengono diversi effetti rilevanti per quella categoria. Le categorie tra cui è possibile scegliere sono le seguenti:

• Cercatori di attenzione
• Ingressi rimbalzanti
• Uscite rimbalzanti
• Ingressi in dissolvenza
• Uscite in dissolvenza
• pinne
• Velocità della luce
• Ingressi Rotanti
• Uscite rotanti
• Ingressi Scorrevoli
• Uscite scorrevoli
• Ingressi Zoom
• Zoom uscite
• Speciali

È possibile visualizzare tutti gli effetti disponibili facendo clic sul collegamento seguente. Questi effetti di animazione vengono visualizzati anche durante lo scorrimento.

Come aggiungere effetti di animazione a sezioni/righe in Divi

Iscriviti al nostro canale Youtube

Usa gli effetti di animazione incorporati

La prima possibilità che ti mostreremo sono gli effetti di animazione incorporati. Ti mostreremo come applicare gli effetti sia a una sezione che a una riga. Apri la pagina in cui desideri apportare le modifiche.

Nel nostro esempio, aggiungeremo gli effetti di animazione alla prima sezione e riga della nostra pagina. L'aggiunta dell'animazione per la sezione o la riga è in entrambi i casi la stessa. I codici di classe CSS per i diversi effetti di animazione sono i seguenti:

• Classe CSS dissolvenza in entrata : et-waypoint et_pb_animation_fade_in
• Classe CSS a scorrimento inferiore: et-waypoint et_pb_animation_bottom
• Classe CSS slide-in sinistra: et-waypoint et_pb_animation_left
• Slide-in di destra: Classe CSS: et-waypoint et_pb_animation_right
• Classe CSS slide-in superiore: et-waypoint et_pb_animation_top

Aggiungi l'effetto di animazione alla riga

Per aggiungere l'animazione a una determinata riga, apri le impostazioni di quella riga e vai alla scheda Avanzate. All'interno della scheda Avanzate, posiziona la classe CSS dell'effetto di animazione nel campo Classe CSS. In questo caso, ti mostreremo come aggiungere l'animazione di dissolvenza in entrata.

Aggiungi un effetto di animazione alla sezione

Lo stesso metodo per aggiungere un effetto di animazione a una riga si applica anche a una sezione. Vai alla scheda Avanzate e posiziona la classe CSS dell'effetto di animazione di tua scelta nel campo Classe CSS. In questo esempio, ti mostreremo come aggiungere l'effetto di animazione slide-in superiore.

Il risultato

Dopo aver aggiunto gli effetti alla sezione e alla riga, vedrai che il seguente risultato è a posto:

Aggiungi Wow.js e Animate.css al tema del tuo bambino

In questa parte successiva, ti mostreremo come aggiungere wow.js e animate.css al tuo sito Web WordPress e come utilizzarlo in tutto il tuo tema Divi.

Prima di tutto, voglio ringraziare Jeremy Cookson per questo post su come integrare wow.js e animate.css in WordPress. In questa parte del post, ti mostreremo esattamente come realizzare l'integrazione per un sito Web WordPress creato con il tema Divi.

Per aggiungere wow.js e animate.css alla tua pagina web, dovrai utilizzare un tema figlio sul tuo sito web. Se ti stai chiedendo come creare un tema figlio, dai un'occhiata a questo post. Dopo aver creato i file principali del tema figlio, dovrai aggiungere altri due file per completare il tema figlio con gli effetti di animazione.

Scarica i file e aggiungili al tema del tuo bambino

Tieni il tema del tuo bambino a portata di mano e scarica i seguenti due file nel frattempo facendo clic sui seguenti due collegamenti:

• animare.min.css
• wow.min.js

Una volta scaricati i due file, crea delle sottocartelle all'interno del tuo tema figlio. Nominane uno CSS e l'altro JS. Successivamente, posiziona animate.min.css nella cartella CSS e wow.min.js nella cartella JS.

Carica tema figlio

La prossima cosa che devi fare è caricare e attivare il tema figlio a cui hai appena aggiunto wow.js e animate.css. Vai alla dashboard di WordPress > Aspetto > Temi > e fai clic su "Aggiungi nuovo" nella parte superiore della pagina.

Aggiungi codice PHP al tuo file Functions.php

Una volta caricato il tema figlio, aggiungi le seguenti righe di codice PHP al file functions.php del tuo tema figlio:

//* Accoda Animate.CSS e WOW.js
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.min.css' );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), ”, true );
}
//* Accoda lo script per attivare WOW.js
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
function sk_wow_init_in_footer() { add_action( 'print_footer_scripts', 'wow_init' );}
//* Aggiungi JavaScript prima di </body>function wow_init() { ?>
<script type="text/javascript">
nuovo WOW().init(); </script><?php }

Aggiungi animazioni a righe e sezioni

Il sistema per aggiungere gli effetti wow.js e animate.css a righe e sezioni è lo stesso degli effetti di animazione Divi. Dovrai aprire le impostazioni della riga o della sezione a cui vuoi aggiungere l'effetto di animazione. Successivamente, puoi inserire la classe CSS assegnata all'animazione nel campo Classe CSS della tua sezione o riga.

Aggiungi animazione alla riga

Per l'esempio che ti mostreremo con la riga, stiamo usando l'effetto fadeInRight che abbiamo trovato nell'elenco degli effetti di animazione. Vai alla scheda Avanzate delle impostazioni della riga e aggiungi "wow fadeInRight" al campo Classe CSS. Ogni volta che vuoi aggiungere un effetto a una parte del tuo sito web, assicurati di mettere "wow" davanti all'effetto che stai utilizzando.

Risultato

Quando hai aggiunto la classe CSS e hai visualizzato in anteprima la pagina su cui stai lavorando, dovresti aver ottenuto il seguente risultato:

Aggiungi animazione alla sezione

Lo stesso metodo si applica all'aggiunta di un effetto di animazione a una sezione. Vai alla scheda Avanzate e aggiungi la classe CSS 'wow bounceInDown' al campo Classe CSS della tua sezione.

Risultato

Se hai seguito correttamente tutti i passaggi, dovresti ottenere il seguente risultato:

Opzioni avanzate

Nel caso in cui desideri aggiungere alcune specifiche aggiuntive alla tua animazione, puoi farlo anche tu. Puoi, ad esempio, aggiungere un tempo di ritardo a uno dei tuoi effetti di animazione. Questo potrebbe tornare utile quando combini un'animazione di sezione con un'animazione di riga all'interno della stessa sezione. In questo modo, ti assicuri che gli effetti di animazione non si sovrappongano l'uno all'altro.

Per mostrarti come aggiungere questo tempo di ritardo, combineremo i due effetti che abbiamo usato nella parte precedente di questo post. Un effetto di animazione è assegnato alla sezione e l'altro alla riga. Per assicurarci che l'effetto di animazione della riga non vada perso, aggiungeremo un tempo di ritardo di 2 secondi.

Apri le impostazioni della riga e torna alla scheda Avanzate. All'interno del campo Classe CSS, aggiungi un'altra classe chiamata "ritardo". Questa classe non esiste ancora, ma stiamo per aggiungerla nel prossimo passaggio.

Ora aggiungi la classe CSS di ritardo alle impostazioni della pagina su cui stai lavorando facendo clic sul seguente pulsante:

Quindi, aggiungi la classe CSS con le righe di codice CSS al campo CSS personalizzato. Se vuoi aggiungere un ritardo di 2 secondi, come faremo in questo esempio, avrai bisogno delle seguenti righe di codice CSS:

.delay {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
-o-animation-delay: 2s;
}

Risultato

Una volta aggiunto il tempo di ritardo, il risultato dovrebbe essere simile a questo:

Pensieri finali

In questo post, ti abbiamo mostrato come aggiungere effetti di animazione al tuo sito web Divi. Ti abbiamo fornito due possibilità. Il primo mostra come utilizzare gli effetti di animazione standard forniti da Divi. La seconda possibilità permette di integrare wow.js e animate.css. L'uso di effetti di animazione sul tuo sito web può aiutarti a enfatizzare il contenuto che desideri condividere con i tuoi visitatori. Oltre a questo, sembra anche fantastico. Se hai domande o suggerimenti; assicurati di lasciare un commento nella sezione commenti qui sotto.

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!

Immagine in evidenza di Stocker top / shutterstock.com