Come aggiungere immagini animate su WordPress con Lottie

Come aggiungere immagini animate su WordPress con Lottie

Usare immagini animate su WordPress può dare un valore aggiunto alle tue pagine rendendole più dinamiche, interessanti e simpatiche.

Il metodo più usato per inserire immagini animate è l'uso di immagini GIF queste però hanno un grande difetto, sono molto pesanti e pertanto rallentano il caricamento della pagina. Un altro modo è implementare codice javascript ma anche questo è complicato e non alla portata di tutti.

Fortunatamente c'è un'alternativa a tutto questo: le animazioni lottie scaricabili da Lottiefiles.com

Lottie: cos’è e come funziona?

Lottie è una libreria che esegue il rendering delle animazioni di After Effects in tempo reale.

Lottiefiles.com è il portale che mette a disposizione le animazioni per il download. Le animazioni possono essere scaricate in formato JSON o come GIF, ovviamente per quanto detto in apertura ora vediamo come usare i file JSON per ottenere un risultato simile a questo che vedi di seguito.

Come aggiungere un'animazione lottie alla tua pagina

Ti indico due modi per aggiungere un'animazione lottie alla tua pagina, il primo prevede l'installazione di un plugin specifico per questo scopo, il secondo prevede l'utilizzo di Elementor Pro. Ma prima di tutto vediamo come scaricare le immagini animate.

Come scaricare le immagini animate

Per scaricare le animazioni devi accedere a lottiefiles.com ed iscriverti. Qui troverai una serie di animazioni alcune gratuite altre a pagamento.

Cliccando su quella che soddisfa le tue esigenze si aprirà una finestra dalla quale potrai personalizzare alcuni aspetti dell'animazione e scaricare il file JSON, come puoi vedere dall'immagine qui sotto.

Il click sulla voce "Lottie JSON" avvia il download del file. Adesso siamo pronti per aggiungere l'animazione alla nostra pagina.

1# metodo - Utilizzo plugin WP Bodymovin

Per aggiungere l'immagine animata scelta ho usato il plugin, WP Bodymovin, lo trovi nel repository dei plugin di WordPress e puoi scaricarlo gratuitamente.

L'utilizzo è molto semplice, dopo aver installato il plugin (se non sai come fare o non sai cos'è un plugin leggi Plugin di WordPress, cosa sono, a cosa servono e come installarli) avrai sul menu laterale del pannello di amministrazione la voce "Animations" clicca sul "Add new" per caricare la tua prima animazione.

Diamo un nome all'animazione, carichiamo il file JSON precedentemente scaricato e impostiamo le varie opzioni tra cui la grandezza il loop e l'allineamento. Mentre fai questo vedrai che in basso lo shortcode si modificherà di conseguenza.

Non resta altro che copiare lo shortcode e incollarlo sulla tua pagina. Il risultato del mio esempio è quello che vedi qui sotto.

Io ho usato questo sistema su un articolo fatto con Thrive Architect ma puoi usarlo con qualsiasi tema. Se invece usi Elementor Pro la procedura cambia e non hai necessità di installare ulteriori plugin.

2# metodo - Utilizzo Elementor Pro

Se usi Elementor Pro hai la situazione ideale per caricare le immagini animate di lottie, infatti dalla versione 2.10 è stato aggiunto un widget dedicato che ti permette di gestire le animazioni in modo molto più completo rispetto al plugin visto in precedenza.

Vediamo come funziona.

Il widget si chiama "Lottie" pertanto sarà semplicissimo trovarlo.

Una volta trascinato nella pagina puoi caricare il file JSON scelto. Tra le opzioni è possibile aggiungere un link, un titolo o una didascalia e dal menu impostazioni definire quando avviare l'animazione. Quest'ultima opzione è molto interessante perché permette di animare le immagini in base a determinati eventi, come lo scroll o l'on hover.

Come in tutti i widget di Elementor è poi possibile configurare lo stile e le impostazioni avanzate. La gestione delle animazioni risulta veramente molto semplice e non ti resta altro che provare per capirne a pieno le potenzialità.

Immagini animate su WordPress - Considerazioni Finali

Se nono conoscevi le animazioni di Lottie sono sicuro che hai trovato questo articolo molto interessante. Adesso hai un elemento in più per arricchire le tue pagine con fantastiche immagini animate e renderle più simpatiche e attraenti. Tutto questo migliorerà l'esperienza che offrirai all'utente quando accede sul tuo sito web.

Se vuoi approfondire su Elementor puoi leggere Recensione Elementor: uno dei migliori content builder per WordPress.

Come sempre ti invito a scrivermi nei commenti cosa ne pensi e ad iscriverti al gruppo di supporto Facebook,

Roberto Delisio

Sono più di 15 anni che lavoro alla realizzazioni di applicativi e siti web. Metto la mia esperienza a disposizione di chi ha necessità di sviluppare o gestire il proprio sito in Wordpress.

>
8 Shares
Share8
Tweet
Share
Pin
WhatsApp