Come utilizzare i nuovi effetti di animazione di Divi

Benvenuto nella prima parte di questa serie di 6 parti che ti insegnerà come utilizzare le nuove opzioni di animazione di Divi per progettare fantastiche sezioni di pagina. Ti illustrerò come creare le diverse sezioni della nostra pagina demo dal vivo per mostrarti le tecniche per aggiungere animazioni al tuo sito web. Le funzioni di animazione sono davvero divertenti e facili da usare. E con Visual Builder, puoi vedere la tua creazione prendere vita in ogni fase del processo. Vieni e unisciti a me mentre esploriamo il potere dell'animazione Divi.

L'animazione può dare vita a una pagina. Se fatto in modo efficace, l'utente può diventare coinvolto e più incline a esplorare il contenuto della tua pagina. Se fatte male, le animazioni possono distrarre completamente l'utente e allontanarlo in uno stato di stordita delusione. La velocità, i tempi e l'intensità dell'animazione giocano tutti un ruolo significativo in questa sinfonia di movimento mentre l'utente scorre la pagina.

Le funzionalità di animazione avanzate di Divi ti consentono di aggiungere animazioni a qualsiasi elemento del tuo sito web. E puoi combinare questi elementi animati per creare innumerevoli combinazioni di movimento che danno vita alle tue sezioni.

Nella prima parte di questa serie, ti mostrerò come utilizzare il visual builder per costruire e animare le prime due sezioni della nostra pagina demo dal vivo che mostra la potenza delle funzionalità di animazione di Divi.

Iniziamo.

Ecco un'anteprima di ciò che costruiremo in questa serie

Parte 1 della serie

Sezione 1

Sezione 2

Parte 2 della serie

Sezione 3

Sezione 4

Parte 3 della serie

Sezione 5

Parte 4 della serie

Sezione 6

Parte 5 della serie

Sezione 7

Parte 6 della serie

Sezione 8

Sezione 9

Preparazione degli elementi di design

Per la prima sezione, avrai bisogno di due immagini. La prima è la tua immagine di sfondo a schermo intero con dimensioni intorno a 1280×800. Ecco quello che sto usando:

La seconda immagine è una versione modificata della stessa immagine che è stata capovolta verticalmente e sbiadita verso il basso. Questa seconda immagine servirà come sfondo per il titolo principale e dovrebbe essere di circa 800×400.

Per creare l'immagine capovolta, apri l'immagine in Anteprima e seleziona Strumenti > Capovolgi verticalmente oppure apri l'immagine in Photoshop, seleziona Immagine > Rotazione immagine > Capovolgi tela in verticale. Per aggiungere l'effetto dissolvenza alla parte inferiore dell'immagine, ho usato lo strumento gomma in modalità pennello con una dimensione di 800 px e 0% di durezza. Poi ho tenuto MAIUSC e ho trascinato il pennello lungo il bordo inferiore.

Assicurati di esportarlo come file png.

Se non hai Photoshop, puoi provare una soluzione di fotoritocco gratuita come gimpshop per realizzare molte delle stesse modifiche al design. Se non sai come usare un software di fotoritocco (e non ti interessa imparare a questo punto), sentiti libero di lasciare fuori la seconda immagine per ora, o usa quella qui sotto (fai clic e trascinala sul tuo desktop).

Per la seconda sezione, avrai bisogno di due immagini. Il primo dovrebbe essere intorno a 730×490 come questo.

E il secondo dovrebbe essere intorno a 525×660 come quello qui sotto.

Comprensione della terminologia dell'animazione

Se non l'hai già fatto, vai avanti e leggi il post di aggiornamento delle funzionalità che introduce animazioni avanzate. Alla fine del post, Nick fornisce un'utile definizione/descrizione di ciascuna delle funzionalità di animazione che troverai in tutto il builder. Capire cosa fanno effettivamente queste funzionalità di animazione è importante per il processo di creazione.

Una volta che hai compreso quali sono queste funzionalità di animazione, tuffiamoci dentro.

Come utilizzare i nuovi effetti di animazione di Divi

Iscriviti al nostro canale Youtube

Aggiungi le tue nuove impostazioni di pagina

Dal dashboard di WordPress, vai su Pagine > Aggiungi nuovo. Quindi aggiungi un titolo alla tua pagina. Quindi, trova le impostazioni della pagina Divi nella casella in alto a destra della pagina e seleziona Navigazione punti "ON". Nella casella Attributi pagina, seleziona Pagina vuota per il modello di pagina. Infine, fai clic sul pulsante "Usa Divi Builder" e distribuisci Visual Builder per iniziare a creare il tuo layout.

Costruzione della sezione 1: design e animazione dell'intestazione a schermo intero

Questa sezione di intestazione si comporterà in modo molto simile a un modulo di intestazione a larghezza intera impostato su schermo intero. In altre parole, quando il sito viene caricato, la sezione riempirà l'intera larghezza e altezza della finestra del browser, indipendentemente dalle dimensioni della finestra. Ma invece di utilizzare il modulo di intestazione a larghezza intera, utilizzeremo una sezione standard e imposteremo l'altezza su 100vh. In questo modo possiamo aggiungere un modulo di testo al suo interno.

Utilizzando Visual Builder, fare clic per modificare le impostazioni della sezione della sezione standard già visualizzata per impostazione predefinita all'avvio del builder. Aggiorna quanto segue:

Nella scheda Contenuto...

Immagine di sfondo: [inserisci la tua immagine di sfondo 1280×800]
Usa effetto parallasse: S
Metodo di parallasse: vero parallasse

Nella scheda Progettazione...

Imbottitura personalizzata: 5% in alto, 0 px a destra, 5% in basso, 0 px a sinistra

Nella scheda Avanzate...

Aggiungi il seguente CSS personalizzato nella casella Elemento principale:

min-height: 100vh

Questa riga di css dice alla sezione di visualizzare il 100% dell'altezza della finestra.

Salva le impostazioni

Quindi inserisci una struttura a una colonna nella tua riga e aggiungi un modulo di testo alla colonna. Aggiorna le impostazioni del modulo di testo come segue:

Nella scheda Contenuto.. .

Aggiungi semplicemente la parola "Divi" all'interno della casella del contenuto.

Nella scheda Progettazione...

Carattere del testo: Oswald, maiuscolo (TT)
Dimensione carattere del testo: 14px
Colore del testo del testo: #08408e
Spaziatura tra lettere del testo: 1.5em (dovrai digitarlo)
Orientamento del testo: al centro
Margine personalizzato: 2%
Stile di animazione: Flip
Ripetizione animazione: una volta
Direzione dell'animazione: destra
Durata dell'animazione: 2000 ms
Ritardo animazione: 1100 ms
Intensità animazione: 100%
Opacità iniziale dell'animazione: 0%
Curva di velocità dell'animazione: facilità di entrata e uscita

Time Out... Fermiamoci per un minuto così posso mostrarti cosa ci vorrebbe per aggiungere manualmente questa animazione simile.

Ecco l'html con lo stile in linea necessario per l'animazione:

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

Ed ecco il CSS necessario per l'animazione:

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

E questo non include il codice necessario per attivare l'animazione quando diventa visibile nella finestra del browser. Ad ogni modo, tutto questo per dire che avere queste funzionalità di animazione integrate è un enorme risparmio di tempo. E poter vedere l'animazione dal vivo mentre modifichi le opzioni di animazione è un vantaggio considerevole.

Ora continuiamo con l'aggiornamento delle nostre impostazioni del modulo di testo:

Nella scheda Avanzate...

Aggiungi la seguente riga di CSS personalizzato alla casella Elemento principale:

text-indent: 1.5em

Salva le impostazioni

Quindi aggiungi un altro modulo di testo direttamente sotto quello appena creato e aggiorna le impostazioni come segue:

Nella scheda Contenuto...

Aggiungi il seguente codice html nella scheda di testo della casella del contenuto:

<p><span>Believing</span><br />is  Seeing</p>

Nella scheda Progettazione...

Colore del testo: chiaro
Carattere del testo: Oswald, maiuscolo (TT)
Dimensione carattere del testo: 8vw (devi digitarlo; questo rende la dimensione del carattere l'8% della larghezza della finestra)
Colore del testo del testo: rgba (255,255,255,0.79)
Altezza riga di testo: 1,4 em
Orientamento del testo: centro
Stile di animazione: piega
Direzione dell'animazione: su
Durata dell'animazione: 1800 ms
Ritardo animazione: 0 ms
Intensità animazione: 60%

Salva le impostazioni

Questo effetto di animazione rivelerà il titolo principale piegandolo (o alzandolo) da una posizione apparentemente piatta. Ora che abbiamo finito con il nostro testo principale del titolo, aggiungiamo la nostra immagine di sfondo capovolta alla riga.

Ora vai alle Impostazioni riga della riga contenente i due moduli di testo appena creati e aggiorna le Impostazioni come segue:

Nella scheda Contenuto...

Immagine di sfondo: [inserisci la tua immagine 800×440]
Dimensione immagine di sfondo: adatta
Posizione immagine di sfondo: in alto al centro
Ripetizione immagine di sfondo: nessuna ripetizione

Nella scheda Progettazione...

Usa larghezza personalizzata: S
Unità: %
Larghezza personalizzata: 50%
Imbottitura personalizzata: 12% in alto, 0% a destra, 5% in basso, 0% a sinistra
Stile di animazione: diapositiva
Direzione dell'animazione: su
Ritardo animazione: 300 ms
Intensità animazione: 20%

Questo effetto di animazione fa scorrere l'immagine verso l'alto, quasi come se si alzasse da dietro le montagne.

Questo è tutto per la prima sezione. Diamo un'occhiata al nostro design finale e all'animazione.

I tre elementi animati qui includono la riga (che scorre verso l'alto), il modulo di testo con il testo "Credere è vedere" (che si apre dal suo centro) e il modulo di testo con il testo "Divi" (che è ritardato per aprirsi a destra dopo che gli altri elementi si sono fermati). La combinazione coinvolge davvero il visitatore rivelando diversi contenuti in modo mirato e tempestivo.

Edificio Sezione 2

Questa seconda sezione della nostra pagina demo di animazione mostra un modo sottile, ma estremamente interessante, per rivelare il contenuto della tua pagina. In effetti è quasi impossibile riconoscere tutti i movimenti a prima vista.

Per costruire la seconda sezione, aggiungi una sezione normale sotto la sezione precedente. Nella sezione aggiungi una riga a due colonne (metà metà).

Nella colonna di sinistra, aggiungi un modulo di testo con le seguenti impostazioni:

Nella scheda Contenuto...

Inserisci il seguente codice html nella scheda di testo della casella del contenuto:

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

Nella scheda Progettazione...

Colore del testo: chiaro
Carattere del testo: Montserrat
Dimensione carattere del testo: 18px
Altezza riga di testo: 1,8 em
Carattere dell'intestazione: Montserrat, grassetto (B), maiuscolo (TT)
Dimensione carattere intestazione: 39 px (desktop)
Altezza della riga di intestazione: 2,2 em
Margine inferiore: 50px
Stile di animazione: diapositiva
Direzione dell'animazione: su
Intensità animazione: 10%

Questo effetto di animazione rivelerà il blocco di testo facendolo scorrere verso l'alto in vista.

Salva le impostazioni

Quindi aggiungi un modulo pulsante sotto il modulo Testo appena creato. Aggiorna le impostazioni del modulo pulsanti come segue:

Nella scheda Contenuto...

Testo del pulsante: Ulteriori informazioni
URL del pulsante: # (o qualunque cosa tu voglia che sia)

Nella scheda Progettazione...

Allineamento dei pulsanti: a sinistra
Colore del testo: chiaro
Usa stili personalizzati per il pulsante: S
Dimensione del testo del pulsante: 15 px
Raggio del bordo del pulsante: 0
Spaziatura delle lettere dei pulsanti: 3px
Carattere pulsante: Montserrat, grassetto (B), maiuscolo (TT)
Mostra icona pulsante: S
Imbottitura personalizzata: 10 pixel in alto, 30 pixel a destra, 10 pixel in basso, 30 pixel a sinistra
Stile di animazione: diapositiva
Direzione animazione: Giù
Ritardo animazione: 100 ms
Intensità animazione: 10%

Per controbilanciare l'effetto del testo precedente sopra, questo effetto di animazione rivelerà il pulsante facendolo scorrere verso il basso in vista con un leggero ritardo.

Non puoi ancora vedere il tuo testo e il tuo pulsante perché al momento è testo bianco su sfondo bianco. Va bene. Aggiungeremo presto il nostro background.

Quindi aggiungi un modulo divisore alla colonna di destra.

Quindi aggiorna le impostazioni come segue:

Nella scheda Progettazione...

Altezza: 260 px

Nella scheda Avanzate...

Disabilita la visibilità sul desktop

L'aggiunta di un divisore qui aiuterà l'immagine di sfondo a rimanere visibile sui dispositivi mobili.

Salva le impostazioni

Ora aggiungiamo i nostri sfondi a ciascuna delle nostre colonne. Vai alle Impostazioni riga e aggiorna quanto segue:

Nella scheda Contenuto...

Colori sfumati di sfondo della colonna 1: #fe8840, rgba (238,78,78,0.9)
Colonna 1 Direzione gradiente: 135 gradi
Immagine di sfondo della colonna 2: [inserisci la tua immagine 730×490]
Colonna 2 Posizione immagine di sfondo: in alto a sinistra
Colonna 2 Ripetizione immagine di sfondo: nessuna ripetizione

Nella scheda Progettazione...

Usa larghezza personalizzata: S
Larghezza personalizzata: 1366 px
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 1
Equalizza le altezze delle colonne: S
Imbottitura personalizzata: 0px in alto, 0px a destra, 0px in basso, 0px a sinistra
Imbottitura personalizzata colonna 1: 5% in alto, 7% a destra, 5% in basso, 7% a sinistra
Stile di animazione: piega
Direzione dell'animazione: su
Durata dell'animazione: 800 ms

Questo effetto di animazione rivelerà l'intera riga piegandola (o alzandola) in vista.

Nella scheda Avanzate...

Aggiungi il seguente CSS personalizzato alla casella Elemento principale:

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

Salva le impostazioni

Quindi aggiungi una riga a due colonne (un terzo due terzi) sotto la riga che hai appena finito di creare.

Nella colonna di sinistra aggiungi un modulo divisore e aggiorna le impostazioni come segue:

Nella scheda Progettazione...

Altezza: 400 px

Nella scheda Avanzate...

Disabilita la visibilità sul desktop

L'aggiunta di un divisore qui aiuterà l'immagine di sfondo a rimanere visibile sui dispositivi mobili.

Salva le impostazioni

Per risparmiare tempo, vai avanti e fai clic con il pulsante destro del mouse e copia il modulo di testo nella colonna di sinistra della riga sopra contenente il testo "Il tempo è denaro". Quindi incollalo nella colonna di destra (due terzi) della riga sottostante.

Aggiorna le nuove impostazioni del modulo di testo come segue:

Nella scheda Contenuto...

Cambia il testo dell'intestazione h1 in "Commute Like a Pro" nella casella del contenuto.

Nella scheda Progettazione...

Colore del testo del testo: #a8a8a8
Colore del testo dell'intestazione: #414159
Stile di animazione: diapositiva
Direzione animazione: Giù
Intensità animazione: 10%

Questo effetto di animazione rivela il blocco di testo facendolo scorrere verso il basso in vista.

Ora fai clic con il pulsante destro del mouse e copia il modulo pulsante nella colonna di sinistra della riga sopra e incollalo sotto il modulo di testo che hai appena finito di modificare.

Aggiorna le impostazioni del modulo pulsanti come segue:

Colore del testo del pulsante: #ff4823
Colore bordo pulsante: #ff4823
Colore del testo al passaggio del mouse del pulsante: #ff2323

Salva le impostazioni

Per l'ultimo passaggio, modifica le impostazioni della riga aggiornando quanto segue:

Nella scheda Contenuto...

Colore di sfondo: #ffffff
Immagine di sfondo della colonna 1: [inserisci la tua immagine 525×660]
Colonna 1 Posizione immagine di sfondo: in alto a sinistra
Colonna 1 Immagine di sfondo Ripeti: nessuna ripetizione
Colori sfumati di sfondo della colonna 2: rgba (255,255,255,0.91), #ffffff
Direzione gradiente colonna 2: 135 gradi

Nella scheda Progettazione...

Usa larghezza personalizzata: S
Larghezza personalizzata: 1040 px
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 1
Equalizza le altezze delle colonne: S
Imbottitura personalizzata: 0px in alto, 0px a destra, 0px in basso, 0px a sinistra
Imbottitura personalizzata colonna 2: 5% in alto, 7% a destra, 5% in basso, 7% a sinistra
Stile di animazione: piega
Direzione animazione: Giù
Durata dell'animazione: 800 ms

Questo effetto di animazione rivelerà l'intera riga piegandola in vista.

Nella scheda Avanzate...

Aggiungi il seguente CSS personalizzato nella casella Elemento principale:

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

Questo è tutto per questa sezione. Controlla i tuoi risultati.

Poiché l'animazione e gli elementi di design di questa sezione sono sottili, penso che sia un ottimo esempio del tipo di design e animazione che potrebbe essere utilizzato nella maggior parte delle pagine. Le righe superiore e inferiore si aprono come se si guardasse un libro che si apre da dietro. Il testo e i pulsanti si spostano leggermente verso l'alto nella riga superiore e verso il basso nella riga inferiore. Una grande combinazione.

Bonus: scarica queste sezioni per una facile importazione

Come vantaggio bonus abbiamo impacchettato le sezioni integrate nel tutorial di oggi in un download gratuito che puoi ottenere utilizzando il modulo di attivazione e-mail di seguito. Inserisci semplicemente la tua email e apparirà il pulsante di download. Non preoccuparti di "ri-iscriverti" se fai già parte della nostra Newsletter Divi. Reinserire la tua email non comporterà più email o duplicati. Rivelerà semplicemente il download.

Divertiti!

Scarica il pacchetto di layout

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!

Per utilizzare questi download, inizia individuando il file compresso chiamato Animation_Effects_Part_1.zip nella nostra cartella dei download. Decomprimilo per rivelare le seguenti importazioni.

Effetti di animazione Parte 1 (sezione 1).json

Effetti di animazione Parte 1 (sezione 2).json

Naviga nel tuo pannello di amministrazione di WordPress su Divi > Libreria Divi > Importa ed esporta. Quando viene visualizzata la modalità di portabilità, fai clic sulla scheda di importazione e sul pulsante con l'etichetta scegli file.

Seleziona il file json che preferisci e fai clic su "Importa layout Divi Builder". Una volta completata l'importazione, vai al post o alla pagina a cui desideri aggiungere una delle sezioni precedenti.

Attiva il visual builder. Passa alla parte della pagina a cui desideri aggiungere una delle sezioni precedenti. Quando fai clic sull'icona Aggiungi nuova sezione, ti verrà presentata l'opzione "Aggiungi dalla libreria". Scegli questa opzione e seleziona il layout che desideri.

Avvolgendo

Spero che queste due sezioni servano da ispirazione per le build future utilizzando le funzionalità di animazione di Divi. I concetti di design da soli sono fantastici e i layout possono essere facilmente adattati a qualsiasi sito Web con poche modifiche minori. Resta sintonizzato perché tratteremo molto di più in questa serie.

in arrivo

Nella parte successiva di questa serie continuerò la nostra esplorazione delle funzionalità di animazione avanzate di Divi costruendo le sezioni 3 e 4 della nostra pagina demo di animazione.

Ecco cosa puoi aspettarti di costruire.

Sezione 3:

Sezione 4:

Si prega di lasciare eventuali commenti che hai qui sotto.

Saluti!