Come Aggiungere Animazioni Lottie al Tuo Sito

Immagini e video accattivanti sono un ottimo modo per impressionare i visitatori online. Tuttavia, quasi ogni sito li utilizza per migliorare l’esperienza utente (UX). Quindi, aggiungere questi contenuti visivi standard alle tue pagine non è più sufficiente per distinguere il tuo sito dalla massa.

Fortunatamente, puoi aggiungere animazioni Lottie al tuo sito per darti un vantaggio competitivo. LottieFiles offre una libreria gratuita di animazioni che puoi facilmente aggiungere al tuo sito web. Poi, puoi usarle per aumentare l’impegno degli utenti e migliorare il design del tuo sito.

In questo post, daremo un’occhiata più da vicino ad alcuni vantaggi chiave dell’uso delle animazioni Lottie sul tuo sito. Poi, ti mostreremo tre modi semplici per aggiungere questi elementi visivi. Iniziamo!

I Vantaggi dell’Aggiunta di Animazioni Lottie al Tuo Sito

Mentre i video e le immagini possono rendere il tuo sito web più coinvolgente, questo tipo di contenuti visivi si trovano ovunque su internet. D’altra parte, le animazioni possono darti un vantaggio unico.

Inoltre, si prevede che il mercato globale per l’industria dell’animazione aumenterà del 60% nei prossimi nove anni. Ciò significa che se inizi ad usarli ora, puoi anticipare una tendenza in crescita.

Infatti, il 61% dei marketer ha utilizzato contenuti interattivi come tattica di coinvolgimento digitale l’anno scorso. Altre strategie includevano le GIF, che possono essere utilizzate anche per mostrare animazioni.

Le animazioni Lottie sono un’ottima scelta, principalmente a causa delle loro ridotte dimensioni dei file:

In realtà, questi file sono 600% più piccoli dei GIF – Puoi aggiungerli al tuo sito senza appesantire nulla. Questo può permetterti di preservare una UX positiva.

Meglio ancora, le animazioni Lottie possono essere completamente personalizzate per adattarsi alla tua identità di marca. Inoltre, è una soluzione economica poiché LottieFiles offre la più estesa biblioteca di animazioni gratuita. Avrai accesso a migliaia di elementi UI, personaggi e illustrazioni.

Come Aggiungere Animazioni Lottie al Tuo Sito (3 Modi)

Ora che conosci i vantaggi dell’utilizzo delle animazioni Lottie, vediamo tre modi per aggiungerle al tuo sito.

Metodo 1: Aggiungi La Tua Animazione Con oEmbed

Aggiungere le tue animazioni Lottie tramite oEmbed è il metodo più semplice in questa guida. L’unico svantaggio è che non sarai in grado di modificare le impostazioni dell’animazione o configurarle per reagire alle interazioni degli utenti.

Per iniziare con questo metodo, visita la libreria di animazioni LottieFiles per trovare l’animazione perfetta per il tuo sito. Una volta trovato un design che ti piace, clicca sull’animazione e semplicemente copia l’URL oEmbed (devi essere loggato in un account gratuito per farlo):

Poi, vai su WordPress e apri la pagina o il post dove vuoi includere la tua animazione. Successivamente, aggiungi semplicemente un nuovo blocco Gutenberg Embed:

Ora, incolla l’URL oEmbed che hai copiato dal sito web di Lottie:

Premi il pulsante Embed per confermare l’azione.

A questo punto, dovresti vedere l’animazione apparire sulla tua pagina:

Come abbiamo menzionato in precedenza, non potrai personalizzare l’animazione una volta che l’hai aggiunta alla tua pagina o post di WordPress. Pertanto, è fondamentale che tu apporti tutte le modifiche che desideri in anticipo mentre sei ancora sul sito web di Lottie.

Metodo 2: Aggiungi La Tua Animazione Utilizzando il Lottie Block per Gutenberg Plugin

Anche se il metodo oEmbed è il più semplice, utilizzare il plugin Lottie block per Gutenberg è altrettanto facile. Inoltre, ti permette di visualizzare immediatamente qualsiasi modifica apportata ai tuoi progetti.

Per cominciare, vai su Plugins > Add New per installare e attivare il plugin Lottie block per Gutenberg in WordPress:

Puoi quindi accedere al tuo account LottieFiles o creare un account gratuitamente.

Successivamente, aggiungi un nuovo blocco nell’editor Gutenberg. Cerca il blocco Lottie e aggiungilo alla tua pagina:

Qui, troverai tre modi per inserire un’animazione Lottie in WordPress:

• Clicca su Discover animation per sfogliare la libreria di LottieFiles (avrai bisogno di un account per farlo).
• Seleziona Media Library per trovare un’animazione che hai precedentemente caricato.
• Premi Insert from url per incollare un link JSON.

Se scegli l’ultimo metodo, puoi trovare il link JSON sul sito web di Lottie:

Una volta aggiunta l’animazione alla tua pagina, puoi visualizzare l’anteprima del design in Gutenberg:

Ora, nelle impostazioni del Block, puoi personalizzare la tua animazione. Ad esempio, puoi darle uno sfondo trasparente, cambiare le dimensioni o attivare l’animazione con diverse azioni. Puoi anche usare il plugin per aggiungere un’animazione Lottie come sfondo di WordPress.

Metodo 3: Aggiungi La Tua Animazione con HTML e JavaScript

Aggiungere la tua animazione Lottie con HTML e JavaScript è ancora abbastanza semplice, ma è il metodo più complesso. Inoltre, non puoi vedere gli aggiornamenti in tempo reale.

Invece, devi passare tra Gutenberg e il tuo sito web per visualizzare in anteprima le modifiche. Tuttavia, potresti voler utilizzare questo metodo se sei familiare con l’HTML e cerchi opzioni di personalizzazione avanzate.

Per iniziare con questo approccio, clicca sull’animazione nella libreria di LottieFiles e copia il link del file JSON di Lottie:

Successivamente, scorri verso il basso fino a vedere “Usa l’animazione in…” e seleziona <html>:

Questo ti porterà al LottieFiles Web Player:

Qui, puoi scegliere un colore di sfondo, determinare la dimensione e la velocità dell’animazione, e altro ancora.

Ora, deseleziona la casella Controls e vedrai che è stato generato del codice HTML nella parte inferiore dello schermo:

Copia la linea di codice che inizia con “<lottie-player>” e finisce con “</lottie-player>”. Poi, in WordPress, aggiungi un nuovo blocco Custom HTML:

Incolla l’HTML che hai copiato da LottieFiles e clicca su Salva Bozza nell’angolo in alto a destra:

La tua animazione non funzionerà ancora. Prima, dovrai caricare il file JavaScript del Lottie Player in WordPress.

Per fare questo, torna al LottieFiles Web Player e copia il tag script che inizia con “<script>” e termina con “</script>”:

Ora, vai su WordPress e installa il plugin Simple Custom CSS and JS:

Una volta attivo, vai alla dashboard del plugin e scegli Aggiungi Codice HTML:

Puoi dare un titolo al tuo codice come “Aggiunge Lottie Player”. Poi, incolla il tag script nell’editor e clicca su Pubblica:

Ora, torna alla pagina dove hai inserito il tuo codice HTML. Dovresti vedere la tua animazione Lottie quando passi all’anteprima:

Se l’animazione è troppo grande o troppo piccola, puoi modificare i parametri predefiniti nel codice HTML dove dice style= “width: X; height: X;”.

Aggiungi Animazioni Lottie al Tuo Sito Oggi

Le immagini e i video appaiono su quasi tutti i siti web, quindi includerli nelle tue pagine probabilmente non farà risaltare i tuoi design. Tuttavia, puoi aggiungere animazioni Lottie al tuo sito per impressionare i visitatori, riflettere il tuo marchio e migliorare l’interazione.

Per riepilogare, ecco tre modi per aggiungere animazioni Lottie al tuo sito:

1. Aggiungi animazioni Lottie con oEmbed.
2. Aggiungi animazioni Lottie usando il plugin Lottie block per Gutenberg.
3. Aggiungi animazioni Lottie con HTML e JavaScript.

Un altro modo per distinguere il tuo sito web dagli altri è progettare pagine personalizzate che siano uniche per il tuo marchio. Da DreamHost, possiamo costruirti un sito unico nel suo genere, compatibile con i dispositivi mobili e ottimizzato per i motori di ricerca. Scopri i nostri piani di web design oggi stesso!