Hai mai visitato un sito Web e sei stato spazzato via dalle animazioni e dalla grafica interattiva? Potresti supporre che questo tipo di animazioni richieda molta codifica e competenze tecniche per creare, ma con le animazioni di Lottie, è più facile di quanto si possa pensare!
Le animazioni di Lottie sono animazioni basate su vettori che possono essere facilmente aggiunte al tuo sito Web utilizzando strumenti come WordPress e Element. Attraverso il plug -in WordPress Lottiefiles, puoi aggiungere rapidamente e personalizzare le animazioni nel sito WordPress utilizzando l'editor Gutenberg.
Andiamo attraverso i passaggi per aggiungere e usare le animazioni Lottie in WordPress e Elementor.
Comprensione delle animazioni di Lottie
Prima di immergerci nella nitidezza di aggiungere animazioni di Lottie a WordPress o Elementor, esaminiamo alcune basi delle animazioni di Lottie.
Per prima cosa, cosa sono esattamente le animazioni di Lottie ? Bene, Lottie è una biblioteca sviluppata da Airbnb che rende le animazioni After Effects in tempo reale e le esporta come file JSON. Questi file JSON possono essere facilmente utilizzati sul Web, rendendoli una scelta popolare per sviluppatori e designer Web che vogliono aggiungere un po 'di animazione e interattività ai loro siti Web.
Allora, dove puoi trovare animazioni di Lottie? Fortunatamente, ci sono un sacco di risorse là fuori per trovare e scaricare animazioni di Lottie. Una risorsa popolare è Lottiefiles.com , che ha un'enorme biblioteca di animazioni Lottie gratuite e pagate che puoi navigare e scaricare.
Un'altra opzione è quella di creare le tue animazioni Lottie utilizzando Adobe After Effects ed esportarle come file JSON.
Correlati: come convertire il design Adobe XD in sito Web WordPress?
Una volta che hai le tue animazioni di Lottie, il prossimo passo è scaricarle per l'uso in WordPress o Element. Questo è piuttosto semplice: scarica semplicemente il file JSON per l'animazione prescelta e salvalo sul tuo computer.
Perché dovresti aggiungere animazioni di Lottie al tuo sito web?
Ecco alcuni solidi motivi per cui non dovresti perdere l'animazione di Lottie per il tuo sito web:
Ottima esperienza dell'utente
Innanzitutto, le animazioni di Lottie possono aumentare la metrica di coinvolgimento e rendere il tuo sito Web più accattivante. Aggiungendo animazione e interattività al tuo sito Web, è possibile creare un'esperienza utente più dinamica che può aiutare a mantenere i visitatori sul tuo sito più a lungo.
Non influisce sulle prestazioni del sito Web
Oltre a migliorare l'esperienza dell'utente, le animazioni di Lottie possono anche essere più performanti della tradizionale grafica animata. Poiché le animazioni di Lottie sono basate su vettori, sono molto più piccole di dimensioni dei file rispetto alle GIF o ad altre animazioni tradizionali . Ciò significa che possono essere caricati più rapidamente e non rallentare le prestazioni del tuo sito Web.
Scalabile
Un altro vantaggio dell'utilizzo delle animazioni di Lottie è la loro scalabilità: possono essere ridimensionati o giù senza perdere qualità o risoluzione . Questo li rende un'opzione eccellente per il design reattivo , in cui hai bisogno di grafica per avere un bell'aspetto su una varietà di dimensioni dello schermo.
Personalizzabile
Infine, le animazioni di Lottie sono molto personalizzabili. È possibile regolare la velocità, le impostazioni del ciclo e altre proprietà della tua animazione per adattarsi alla progettazione e all'esperienza utente del tuo sito Web. E poiché le animazioni di Lottie sono create in Adobe After Effects, hai molto controllo sull'animazione stessa.
Tutto sommato, le animazioni di Lottie sono un ottimo modo per aggiungere un po 'di interesse visivo e interattività al tuo sito web. Se stai cercando di migliorare l'esperienza e le prestazioni utente del tuo sito Web, vale sicuramente la pena considerare l'uso di animazioni Lottie sul tuo sito.
Aggiunta di animazioni Lottie in WordPress
Ora che hai capito quali sono le animazioni di Lottie e perché dovresti usarle, capiamo come aggiungerle e usarle in WordPress
- Il primo passo è installare il plug -in Lottzziles. Puoi farlo navigando nella sezione " plug -in " della dashboard di WordPress e cercando "Lottiefili".
- Dopo aver trovato il plug -in, fai clic su "Installa" e quindi "attiva" per abilitare il plug -in sul tuo sito.
- Crea un nuovo post o pagina in WordPress usando l'editor Gutenberg.
- Aggiungi un nuovo blocco "Lottie" alla tua pagina facendo clic sul pulsante "Aggiungi blocco" e cercando "Lottie" nella libreria di blocchi.
- Nelle impostazioni del blocco Lottie, fai clic sul pulsante "Scopri Animazione" per sfogliare e selezionare un file di animazione Lottie dal tuo computer o dalla libreria Lottzziles.
- Dopo aver selezionato l'animazione, è possibile regolare la velocità di animazione, le impostazioni del ciclo e altre proprietà nelle impostazioni del blocco.
- Puoi anche aggiungere interazioni all'animazione Lottie utilizzando il pulsante "Aggiungi interazione" nelle impostazioni del blocco. Ciò consente di attivare un'azione specifica quando un utente fa clic o si libra sull'animazione.
Una volta che sei soddisfatto della tua animazione di Lottie, salva il tuo post o pagina e la tua animazione sarà in diretta sul tuo sito WordPress!
Aggiunta di animazioni di Lottie in Elementor
Se stai utilizzando Elementor come costruttore di siti Web, aggiungere animazioni Lottie è un gioco da ragazzi. widget Lottie dedicato che semplifica l'aggiunta di animazioni di Lottie alle tue pagine.
Per iniziare, basta trascinare e rilasciare il widget Lottie sulla tua pagina Element. Quindi, fai clic sul widget per aprire le impostazioni di Lottie.
Nelle impostazioni di Lottie, puoi caricare il tuo file Lottie dal tuo sistema o aggiungerlo tramite un collegamento esterno . Una volta caricato il tuo file Lottie, vedrai un'anteprima della tua animazione nel widget.
Da qui, puoi personalizzare l'animazione regolando la velocità di animazione, le impostazioni del loop e altro ancora. Puoi anche aggiungere interazioni all'animazione, come eventi Click o Hover, utilizzando la funzionalità di interazioni integrate di Element.
Conclusione
Congratulazioni, ora hai imparato ad aggiungere e usare le animazioni Lottie in WordPress e Element!
Seguendo i passaggi descritti in questo blog, è possibile aggiungere animazioni coinvolgenti e interattive al tuo sito Web senza aver bisogno di ampie conoscenze di codifica o competenza tecnica.
Quindi vai avanti e sperimenta l'aggiunta di animazioni Lottie al tuo sito WordPress o Element. Con l'animazione giusta, puoi migliorare l'esperienza dell'utente, comunicare informazioni importanti e aggiungere un tocco di interesse visivo al tuo sito Web.
Se stai lottando per aggiungere animazioni di Lottie al tuo sito WordPress o Element, non preoccuparti! Il servizio di sviluppo WordPress esperto di Seahawk può aiutare. Il nostro team ha anni di esperienza nella creazione di siti Web coinvolgenti e dinamici usando WordPress e possiamo aiutarti a dare vita alla tua visione.
