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 Files: 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 scaricare le immagini animate da Lottie Files
Per scaricare le animazioni devi accedere a lottiefiles.com ed iscriverti. Qui troverai una serie di animazioni alcune gratuite altre a pagamento.
Clicca su Discover animations ed accedi alla lista completa di animazioni.
Scegli quella che soddisfa le tue esigenze e il click aprirà una finestra dalla quale potrai vedere alcuni dettagli dell'animazione e soprattutto la possibilità di aggiungerla al tuo workspace.
Una volta aggiunta puoi prendere il codice da embeddare sul tuo sito, il link json o scaricare direttamente il json.
Come aggiungere un'animazione Lottie alla tua pagina
Per aggiungere un'animazione Lottie alla tua pagina WordPress, puoi utilizzare diverse tecniche a seconda dell'editor che preferisci, come Gutenberg, HTML puro, o Elementor. Ogni metodo ha i suoi vantaggi e può essere scelto in base al tuo workflow e preferenze personali. Ecco come procedere per ciascuna opzione:
1. File Lottie con Gutenberg (Blocco Personalizzato)
Per aggiungere un'animazione Lottie usando l'editor Gutenberg, il modo più diretto è utilizzare un plugin che fornisce un blocco dedicato.
Supponiamo che tu stia utilizzando il plugin LottieFiles Plugin for WordPress:
- Installa il Plugin: Prima di tutto, installa e attiva il plugin LottieFiles per WordPress.
- Aggiungi il Blocco: Crea un nuovo post o una pagina, e usa l'opzione "Aggiungi blocco" per cercare il blocco Lottie.
- Configura l'Animazione: Carica il tuo file JSON di Lottie o scegli un'animazione dal repository di LottieFiles. Configura le opzioni come autoplay, loop, e controlli.
- Pubblica: Una volta soddisfatto delle impostazioni, pubblica o aggiorna la tua pagina.
2. File Lottie con HTML Embed
Se preferisci incorporare direttamente l'animazione senza usare plugin, puoi farlo utilizzando il player di LottieWeb. Ecco come:
- Carica il File JSON: Assicurati che il tuo file JSON di Lottie sia accessibile da un URL pubblico.
- Includi Lottie Player: Aggiungi questo codice nella sezione `<head>` del tuo sito o in una parte specifica della tua pagina:
<script src="https://cdn.lottiefiles.com/lottie-player.js"></script> - Embed dell'Animazione: Nel punto dove vuoi che appaia l'animazione, inserisci:
<lottie-player src="URL_DEL_TUO_FILE.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player> - Sostituisci `URL_DEL_TUO_FILE.json` con il percorso del tuo file JSON.
3. File Lottie con Elementor
Se utilizzi Elementor, il processo è altrettanto semplice grazie ai widget dedicati:
1 - Installa Elementor: Assicurati che Elementor sia installato e attivo.
2 - Trova il Widget Lottie: Apri l'editor di Elementor nella pagina dove desideri aggiungere l'animazione. Cerca il widget "Lottie" e trascinalo nella sezione desiderata.
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.
3 - Configura il Widget: Carica il tuo file JSON direttamente o inserisci l'URL del file. Configura le opzioni come dimensione, loop, autoplay e altre impostazioni di animazione.
4 - Pubblica: Una volta configurato tutto, pubblica o aggiorna la pagina.
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,