Come utilizzare le animazioni di Lottie in WordPress

Incorporare le animazioni nel tuo sito Web WordPress è un ottimo modo per ravvivare una pagina Web stanca e coinvolgere i tuoi visitatori per tutto il tempo sul tuo sito. Un modo semplice ed efficiente per farlo è utilizzare le animazioni lottie: animazioni leggere e di alta qualità.

Le animazioni di Lottie stanno diventando sempre più popolari per numerosi motivi e, se sei pronto a saltare sul carrozzone e abbellire il tuo sito Web, potrebbero fare al caso tuo.

Esistono diversi modi per creare queste animazioni e aggiungerle senza problemi al tuo sito WordPress.

Cosa sono le animazioni di Lottie?

Lottie è una libreria per Android, iOS, Web e Windows che esegue il rendering delle animazioni di After Effects e consente di esportare i dati dell'animazione come file JSON anziché come un tipico tipo di file immagine. In breve, possono facilmente sostituire una risorsa statica con qualcosa di divertente e coinvolgente.

Questa soluzione open source è stata introdotta per la prima volta dal team di AirBnB, ma sta rapidamente guadagnando popolarità tra designer e animatori in diversi mercati. Un grande vantaggio dell'utilizzo delle animazioni lottie nel tuo sito Web WordPress è che la dimensione del file è molto piccola rispetto all'animazione GIF o ai file mp4. Inoltre, il formato di animazione flessibile consente al browser di gestire il rendering.

Le molte possibilità di utilizzare le animazioni di lottie sono una delle ragioni per cui sono così popolari. Puoi utilizzare le animazioni di lottie come intestazioni animate, pulsanti, elementi grafici accattivanti e altro ancora. Puoi anche impostare l'animazione in modo che si attivi quando i visitatori scorrono, passano il mouse o fanno clic sulla pagina web. La loro versatilità e la facile implementazione per i siti Web B2C e B2B li rendono un modo rivoluzionario per migliorare la qualità e l'aspetto generale del tuo web design.

Creazione di animazioni Lottie

Quando consideri se aggiungere animazioni lottie al tuo sito, devi prima decidere se eseguire un approccio stock o personalizzato. Ognuno ha i suoi pro e contro, quindi è saggio considerare entrambe le opzioni prima di decidere.

Con qualsiasi tipo di animazione, meno è sempre di più. Quando incorpori un elemento animato nella riprogettazione di un sito web, considera il ruolo che l'animazione sta svolgendo nel percorso del cliente.

Animazioni Lottie personalizzate

Se stai cercando un'animazione lottie personalizzata per il tuo sito web, dovrai collaborare con un animatore o designer specializzato in Adobe After Effects e che abbia familiarità con questo tipo di animazione.

Molte animazioni di lotte utilizzano uno stile di illustrazione, quindi dovrai decidere se questo si adatta al marchio e allo stile del sito Web prima di procedere con esso. Dopo aver deciso gli elementi grafici e gli effetti di animazione, l'animatore dovrà creare le animazioni personalizzate in Adobe After Effects ed esportarle come animazioni lottie, utilizzando l'estensione After Effects. Questo renderà un'animazione di alta qualità che può essere facilmente implementata nel tuo sito.

Uno dei motivi per cui le animazioni di lottie sono di alta qualità è che il processo di creazione elimina qualsiasi necessità per uno sviluppatore o un ingegnere di ricreare l'animazione del designer in un formato web. Offre una soluzione pronta all'uso che semplifica più che mai l'implementazione delle animazioni.

Animazioni della lotteria di riserva

Le animazioni di stock lottie sono un'ottima opzione se vuoi accelerare il tuo nuovo design. Puoi cercare un'animazione di stock lottie esistente e, se necessario, personalizzarla per adattarla al tuo marchio.

Lottie Files è un sito Web di stock in cui puoi trovare un gran numero di animazioni di lottie gratuite ea pagamento. Il sito offre anche uno strumento di editing in cui è possibile modificare i colori dell'animazione prima del download. Se è necessario modificare un numero elevato di colori in un'animazione, un animatore o designer esperto può anche utilizzare Adobe After Effects per apportare tali modifiche in modo più efficiente ed esportare l'animazione.

Se stai cercando di implementare numerose animazioni su un sito, o se hai un'estetica del sito molto specifica, potrebbe essere difficile trovare più stock option nello stile giusto. In questo caso, puoi prendere in considerazione l'assunzione di un animatore per la creazione di più animazioni che si adattano al tuo sito e corrispondono alle stock option che hai già scelto.

Con qualsiasi tipo di animazione o grafica stock, tieni presente i requisiti di licenza per le animazioni stock e assicurati di contribuire con l'animazione al designer originale, se necessario.

Aggiunta di animazioni Lottie in WordPress

È un processo abbastanza semplice per aggiungere animazioni lottie a un sito Web WordPress. Puoi utilizzare un widget HTML personalizzato per aggiungere il codice di animazione al sito o utilizzare un plug-in WordPress per aggiungere l'animazione.

Widget HTML personalizzato

Uno sviluppatore WordPress esperto può utilizzare una piccola libreria JavaScript e un widget HTML personalizzato per aggiungere le animazioni della lotteria al sito. Inizierai caricando lo script lottie.min.js insieme al file di animazione .json e qualsiasi risorsa immagine nella cartella del tema. Poi c'è un piccolo frammento di JS da aggiungere al widget per avviare lo script Lottie, che carica il file di animazione .json nel contenitore div desiderato.

Questo approccio semplificato può essere perfetto per la maggior parte dei siti WordPress perché evita di appesantire il sito con plug-in WordPress aggiuntivi. Quando aggiungi le animazioni della lottie, puoi anche controllare se l'animazione si ripete, quante volte si ripete e cosa può attivare l'elemento animato sulla pagina.

La maggior parte dei plug-in per l'aggiunta di animazioni lottie senza l'assistenza di uno sviluppatore richiede il page builder Elementor, quindi l'approccio HTML personalizzato tende a funzionare meglio se si utilizza un plug-in di temi o page builder diverso da Elementor.

L'aggiunta di elementi al sito senza un plug-in è anche migliore per la velocità e le prestazioni del sito Web poiché l'aggiunta di un numero sempre maggiore di plug-in appesantisce il sito.

Opzioni del plugin di WordPress

Se non vuoi utilizzare uno sviluppatore per farlo in modo personalizzato, un'altra opzione per aggiungere widget Lottie al tuo sito è utilizzare un plugin per WordPress.

Elementor Pro – Widget Lottie

Elementor è un generatore di pagine per WordPress con funzionalità di trascinamento della selezione e la licenza Elementor Pro include il widget Lottie. Con questo widget puoi aggiungere animazioni lottie senza codice e personalizzare le dimensioni e il comportamento dell'animazione. Questo plug-in si collega comodamente al sito Web delle azioni di Lottie Files, quindi puoi facilmente selezionare le opzioni di animazione delle azioni direttamente dal sito o caricare le tue creazioni.

Blocchi Gutenberg – Componenti aggiuntivi definitivi

Se stai utilizzando l'editor Gutenberg sul tuo sito, il plug-in Ultimate Addon per Gutenberg può essere una buona scelta per aggiungere animazioni di lotte con l'aiuto di un plug-in. L'editor Gutenberg fa parte del core di WordPress sin dalla versione 5.0 di WordPress, tuttavia non è il più popolare. Molti siti utilizzano ancora l'editor classico o altri page builder come Site Origin, Elementor o Beaver Builder, solo per citarne alcuni.

Tuttavia, è un'opzione praticabile. The Ultimate Addons for Gutenberg è un plugin ben recensito e offre molte fantastiche funzionalità, inclusa l'opzione per aggiungere animazioni lottie e controllare opzioni avanzate, come la velocità e il trigger dell'animazione.

Plugin WordPress aggiuntivi

Sono disponibili plug-in aggiuntivi nella directory di WordPress per aggiungere e personalizzare le animazioni delle lotterie. Tieni presente che alcuni plug-in richiedono che il tuo sito sia costruito e utilizzi Elementor, come Premium Addons per Elementor e Elementskit Addon per Elementor. Ci sono anche plugin pensati per altri temi e builder WordPress, come il tema Divi o i blocchi Gutenberg.

È ora di fare animazione

Le animazioni di Lottie sono estremamente accessibili a chiunque abbia un sito WordPress. Che tu voglia animazioni personalizzate o animazioni stock, animazioni di eroi o a scorrimento, le risorse sono a portata di mano.

Puoi essere creativo nel modo in cui vuoi che appaiano le tue animazioni e cosa vuoi che facciano, e quando inizi a esplorare le possibilità delle animazioni di lottie, inizierai a capire quanto possono aggiungere alla qualità del tuo sito web .