Tutto quello che devi sapere sul modulo Lottie di Divi 5

Il modulo Lottie di Divi 5 porta animazioni dinamiche e leggere alle tue pagine, rendendo le tue pagine più coinvolgenti e interattive. Le immagini giuste sono fondamentali per attirare l'attenzione e mantenere i visitatori impegnati. Con il modulo Lottie, Divi 5 ti consente di aggiungere animazioni dall'aspetto professionale che sono anche adatti alle prestazioni.

In questo post, spiegheremo tutto ciò che devi sapere sul modulo Lottie, comprese le sue funzionalità, il processo di configurazione, le opzioni di personalizzazione e i modi per utilizzarlo. Saltiamo!

Cosa sono i file Lottie?

Le animazioni di Lottie sono una grafica leggera e basata su JSON che rendono vettori scalabili. Forniscono elementi visivi scalabili senza i file pesanti di video o gif. Grazie alla sua capacità di combinare prestazioni con flessibilità, Lottie ha guadagnato popolarità, rendendolo popolare per il web design moderno. A differenza delle animazioni tradizionali, i file Lottie utilizzano i dati JSON basati su vettori, garantendo visioni nitide e riproduzioni fluide su tutti i dispositivi e le dimensioni dello schermo.

Iscriviti al nostro canale YouTube

In Divi 5, il modulo Lottie integra perfettamente queste animazioni nel Visual Builder, consentendo agli utenti di aggiungere tocchi dinamici e moderni ai loro siti Web Divi in ​​pochi clic. Sia evidenziando un CTA o aggiungendo un talento a una sezione di eroi, il modulo Lottie rende le animazioni senza codifica complessa senza sforzo.

Con il modulo Lottie, Divi 5 trasforma il modo in cui porti movimento ai tuoi web design, rendendoli accattivanti ed efficienti.

Caratteristiche chiave

Il modulo Lottie in Divi 5 è uno strumento versatile pieno di funzionalità che semplificano la creazione di animazioni dinamiche e ottimizzate. Offre il controllo sul comportamento di animazione, permettendoti di modificare la velocità, la direzione, i grilletti e altro ancora. Diamo un'occhiata ad alcune delle sue caratteristiche chiave.

Facilità d'uso

Il modulo Lottie in Divi 5 è progettato pensando alla semplicità, rendendolo adatto ai principianti e accessibile agli utenti di tutti i livelli di abilità. Non è necessario essere un esperto di codifica per aggiungere animazioni professionali e accattivanti al tuo sito Web Divi.

Grazie al numero di risorse disponibili online, l'approvvigionamento di animazioni è facile. Piattaforme come Lottiefili e Lordicon offrono ampie biblioteche di animazioni Lottie gratuite e premium, che vanno da sottili icone di caricamento alla grafica vibrante.

Per coloro che cercano un tocco unico, è possibile creare animazioni personalizzate utilizzando strumenti come Adobe After Effects con il plug -in BodyMovin. Questo plugin esporta animazioni come file JSON compatibili con il modulo Lottie. Che tu scelga animazioni pre-fatte o personalizzate, il processo è semplice.

Opzioni di personalizzazione

Il modulo Lottie in Divi 5 offre opzioni di personalizzazione, dando il controllo su diversi aspetti del file Lottie. Per le esperienze interattive, utilizzare l'animazione del trigger per scegliere quando attivare l'animazione, ad esempio su caricamento, quando l'elemento entra in vista, hover, clic o scorrimento. È possibile abilitare l'animazione Loop per consentire il movimento continuo sul tuo file Lottie, regolare la velocità di animazione , selezionare la direzione (in avanti o indietro) e scegliere tra normale o rimbalzo nel campo della modalità di gioco .

Caricamento delle animazioni JSON

L'aggiunta di animazioni Lottie a Divi 5 richiede il caricamento di file JSON, il formato standard per i file Lottie. Tuttavia, WordPress non supporta nativamente i caricamenti JSON nella sua libreria multimediale, quindi dovrai fare ulteriori passaggi per assicurarti di poterlo caricarli.

La prima opzione è quella di creare un tema figlio e aggiungere uno snippet PHP al file Functions.php del tema del tuo bambino. Questo metodo è leggero e garantisce una gestione sicura dei file di animazione. In alternativa, è possibile utilizzare un plug-in come i tipi di caricamento dei file per consentire i caricamenti JSON senza toccare alcun codice, rendendolo ideale per gli utenti che preferiscono una soluzione plug-and-play. Per una guida passo-passo per l'implementazione di entrambi i metodi, consulta il nostro articolo di supporto, che ti guida attraverso il processo per impostare il tuo sito Web Divi 5 per i caricamenti JSON.

Come usare il modulo Lottie in Divi 5

L'aggiunta di un'animazione Lottie in Divi 5 è semplice. Crea o scarica un'animazione Lottie da una fonte come Lottiefiles o Lordicon. Trova e fai clic sul modulo Lottie nel Visual Builder per aggiungerlo alla tua pagina.

Carica il file JSON o individualo nella galleria multimediale di WordPress.

Scegli l' animazione del grilletto . È possibile impostarlo per animare su caricamento, visualizza, hover, clicca o scorrere per animare.

Se desideri che la tua animazione di Lottie abbia un elemento interattivo, usa la scorrimento del modulo per animare trigger.

L'uso di questo trigger offre un ottimo modo per creare esperienze utente dinamiche e coinvolgenti. Invece di usare l'animazione quando la pagina si carica, scorrere per animare i legami i progressi dell'animazione direttamente al comportamento a scorrimento dell'utente. Mentre l'utente scorre la pagina verso il basso, l'animazione avanza per frame. Questo rende l'animazione un elemento interattivo che rende l'esperienza più dinamica.

Se desideri che l'animazione si addicesse all'infinito, abilita l' animazione del loop . È inoltre possibile impostare la velocità di animazione , controllare la direzione ( in avanti o indietro ) e selezionare la normale o rimbalzare per la modalità di gioco .

Nella scheda Design , è possibile controllare il dimensionamento, l'allineamento, l'altezza, la spaziatura e altro ancora.

Sebbene non puoi cambiare i colori dei tuoi file Lottie all'interno di Divi 5, la maggior parte dei siti Web Lottie ti consente di scegliere colori specifici e larghezze della corsa prima di scaricarli.

Come puoi vedere, l'aggiunta di un file Lottie al tuo sito Web Divi 5 richiede secondi e aggiunge un po 'di talento alle pagine Web senza preoccuparsi delle prestazioni.

Esempi pratici che utilizzano il modulo Lottie

Il modulo Lottie in Divi 5 offre una vasta gamma di applicazioni, aggiungendo un tocco ai siti Web con animazioni dinamiche. Dal miglioramento delle pagine di contatto alle sezioni di eroi accattivanti, la sua flessibilità si adatta a tutti i tipi di design.

Con le sue opzioni di integrazione e personalizzazione senza soluzione di continuità, gli utenti Divi possono creare esperienze coinvolgenti e adatte alle prestazioni in tutto il loro sito Web.

Pagine di contatto

L'aggiunta di animazioni di Lottie può rendere le tue pagine di contatto più coinvolgenti. Ad esempio, posiziona i moduli Loop Lo

404 pagine

Trasforma frustranti 404 errori in momenti memorabili con animazioni giocose di Lottie. Aggiungi una bussola rotante o un'icona di ricerca animata alla tua pagina 404, abbinata a un breve messaggio.

Usa l'impostazione dell'animazione Loop per mantenere il movimento continuo e attivarlo al carico per attirare istantaneamente l'attenzione. Questo rende la pagina 404 meno simile a un vicolo cieco e più simile a un touchpoint creativo.

Prodotti in primo piano

Mostra i tuoi prodotti o categorie Woo preferiti con animazioni Lottie per evidenziare i prodotti in vendita. Ad esempio, posiziona un'animazione di badge di vendita in vendita accanto a un prodotto in primo piano per evidenziarlo.

Innanzitutto, impostare l'animazione su un attivazione su caricamento. Quindi, si attiva mentre gli utenti navigano, attirando gli occhi sui prodotti e aumentando il fascino visivo.

Sezioni dei servizi

Dai vita alla sezione dei tuoi servizi con animazioni Lottie che rappresentano visivamente le tue offerte. Ad esempio, usa animazioni di looping per la tua agenzia di marketing, regolando la velocità per abbinare il tono.

Inoltre, imposta il trigger di visualizzazione per attivare le animazioni mentre gli utenti esplorano, garantendo una presentazione dinamica e professionale.

Sezioni di eroi

Rendi le tue sezioni di eroe indimenticabili con animazioni in grassetto Lottie che danno il tono al tuo sito Web. Innanzitutto, aggiungi un'animazione di sfondo regolare usando il modulo Lottie di Divi. Quindi, posizionarlo dietro righe e moduli con le impostazioni della posizione di Divi.

Ad esempio, un'animazione moderna, moderna o un effetto particella sottile può aggiungere profondità al tuo sito con poco sforzo. Utilizzare il grilletto sul carico per un impatto immediato e regolare la modalità di riproduzione per rimbalzare per un effetto accattivante.

Scarica i file

Scarica gratuitamente

Unisciti alla newsletter Divi e ti invieremo una copia del pacchetto di layout della pagina di destinazione di Divi, oltre a tonnellate di altre risorse, suggerimenti e trucchi di Divi straordinari e gratuiti. Segui e sarai un Master Divi in ​​pochissimo tempo. Se sei già sottoscritto, digita semplicemente il tuo indirizzo email di seguito e fai clic su Download per accedere al pacchetto di layout.

SCARICAMENTO

Ti sei iscritto con successo. Controlla il tuo indirizzo email per confermare l'abbonamento e accedere ai pacchetti di layout Divi settimanali gratuiti!

Conclusione

In Divi 5, il modulo Lottie semplifica l'aggiunta di animazioni leggere e dinamiche ai siti Web. Insieme perfettamente nel Builder Visual, consente animazioni professionali con uno sforzo minimo. I controlli flessibili, la personalizzazione estesa e le piattaforme di file Lottie gratuite semplificano il miglioramento del tuo sito.

Pronto a provare il modulo Lottie? Condividi i tuoi pensieri o creazioni nei commenti o sui social media.