Come aggiungere animazioni Lottie in WordPress (4 semplici passaggi)

Usare le animazioni di Lottie in WordPress può essere un ottimo modo per abbellire le tue pagine. In genere sono leggeri e personalizzabili e possono quindi aiutarti a creare contenuti accattivanti senza danneggiare la tua esperienza utente (UX). Tuttavia, potresti cercare un modo senza stress per aggiungerli al tuo sito.

Fortunatamente, il processo è più semplice di quanto si possa pensare. Utilizzando un plug-in come Otter Blocks, puoi aggiungere e personalizzare le tue animazioni Lottie con pochi clic. Potrai anche impostare le condizioni di visibilità in modo che giochino al momento giusto.

Un'introduzione alle animazioni di Lottie

Lottie è un formato di file open source per le animazioni web. Ti consente di creare animazioni personalizzate per il tuo marchio e utilizzarle sul tuo sito web:

Certo, puoi sempre optare per le GIF, ma questi file possono appesantire il tuo sito. Le animazioni di Lottie sono molto più piccole delle GIF. Pertanto, possono aiutarti a rendere il tuo sito più interessante preservando la tua UX e offrendo tempi di caricamento rapidi.

Inoltre, le animazioni di Lottie sono dotate di molte opzioni di personalizzazione. La libreria stessa è ampia e fornisce l'accesso a migliaia di elementi, personaggi e illustrazioni. Tuttavia, puoi anche scambiare i colori, modificare le impostazioni di visualizzazione e aggiungere condizioni di visibilità.

Le animazioni personalizzate possono aiutarti a stupire i tuoi visitatori. Inoltre, possono rendere il tuo sito fresco e unico.

Come aggiungere le animazioni di Lottie a WordPress (in 4 passaggi)

Ora che sai qualcosa in più su Lottie Animations, diamo un'occhiata a come aggiungerli al tuo sito Web WordPress:

Passaggio 1: installa e attiva Otter Blocks

Esistono molti modi per aggiungere animazioni Lottie in WordPress. Ad esempio, puoi utilizzare HTML e JavaScript. Tuttavia, questo metodo può essere abbastanza complesso.

In alternativa, puoi utilizzare il plug-in di animazioni Lottie, anche se potrebbe non essere compatibile con tutti i page builder. Inoltre, non offre molte opzioni stilistiche.

Il modo più semplice per aggiungere Lottie Animations al tuo sito è con un plugin come Otter Blocks:

Questo plug-in aggiunge nuovi blocchi di contenuti e modelli al tuo sito, incluso un blocco per le animazioni di Lottie. Espande inoltre le funzionalità dell'Editor blocchi con CSS personalizzati, animazioni, condizioni di visibilità e altro ancora. Pertanto, ti aiuta a progettare le tue pagine in modo più efficiente e riduce la necessità di costruttori di pagine.

Se esegui l'upgrade a Otter Blocks Pro, avrai accesso a funzionalità avanzate come speciali blocchi WooCommerce e impostazioni stilistiche aggiuntive. Tuttavia, non è necessaria la versione Pro per utilizzare la funzione di animazione di Lottie.

Se desideri utilizzare la versione gratuita, vai su Plugin > Aggiungi nuovo nella dashboard di WordPress e cerca "Otter Blocks:"

Quindi, fai clic su Installa > Attiva . Ora dovresti vedere una selezione di nuovi blocchi nell'Editor blocchi.

Passaggio 2: scegli un'animazione dalla libreria Lottie

Ora che hai impostato Otter Blocks sul tuo sito web, puoi andare alla libreria Lottie per scegliere un'animazione. Per accedere ai design, dovrai creare un account gratuito.

Dopo aver creato il tuo profilo, vai su Scopri e seleziona Animazioni gratuite pronte all'uso :

Qui puoi sfogliare una libreria di elementi Lottie che possono essere utilizzati su siti Web, applicazioni e social media:

Quando trovi un'animazione che desideri utilizzare, fai clic sul design. Apparirà un pop-up in cui puoi apportare alcune modifiche all'aspetto dell'animazione:

Ad esempio, puoi regolare la velocità dell'animazione e cambiare il colore di sfondo. Se fai clic su Modifica colori livello , verrai indirizzato all'editor Lottie:

Qui puoi personalizzare il colore di qualsiasi parte del disegno. Fai semplicemente clic su una sezione dell'elemento che desideri modificare, vai a Tutti i colori e usa il selettore di colori per applicare una nuova tonalità:

Se apporti una modifica che non ti piace, fai clic sulla freccia Annulla in alto a sinistra dello schermo.

Passaggio 3: incolla l'URL dell'animazione Lottie nel tuo Otter Block o carica il file Lottie

Una volta che sei soddisfatto del tuo design, hai due opzioni per aggiungerlo a WordPress:

1. Puoi copiare l'URL di Lottie Animation per aggiungere la versione dal server di LottieFiles al tuo sito. Lo troverai nel pop-up dell'animazione, appena sotto il design.
2. Puoi scaricare il LottieFile finito sul tuo computer facendo clic sul pulsante Download nell'angolo in alto a destra e selezionando il formato dotLottie . Questo ti permetterà di ospitare il file sul tuo server.

Quindi, torna al tuo sito WordPress e apri la pagina o il post in cui desideri inserire la tua animazione.

Fai clic per aggiungere un nuovo blocco e cerca "Animazioni Lottie:"

Aggiungi il blocco alla tua pagina. Quindi, scegli una di queste opzioni:

• Inserisci da URL : usalo se vuoi inserire il collegamento al file Lottie sui server di LottieFiles. Tutto quello che devi fare è incollare il link dell'URL di Lottie Animation che hai copiato dal sito web di LottieFiles.
• Carica : usalo se hai scaricato il file dotLottie effettivo da LottieFiles. Puoi quindi caricare quel file sul tuo sito WordPress.

Successivamente, premi Invio e l'animazione apparirà sulla pagina:

Ora puoi salvare le modifiche e passare al passaggio finale.

Step 4: Personalizza la tua animazione con Otter Blocks

Ora che hai aggiunto le tue animazioni Lottie in WordPress, sei pronto per personalizzare il design e il layout. Nelle impostazioni del blocco, vedrai una selezione di opzioni di visualizzazione.

In TRIGGER , puoi scegliere tra riproduzione automatica , scorrimento , passaggio del mouse o clic . L'animazione non verrà riprodotta fino al completamento di una di queste azioni nella pagina:

Hai anche la possibilità di attivare o disattivare la riproduzione dell'animazione in loop. Inoltre, puoi regolare la velocità della tua animazione utilizzando il cursore, invertire la direzione e modificare la larghezza del disegno.

Se desideri modificare il colore di sfondo, fai clic sulla scheda Sfondo . Qui puoi selezionare una delle opzioni Solide predefinite, utilizzare il selettore colore o scegliere uno sfondo sfumato:

Se vai su Condizioni di visibilità , sarai in grado di configurare la tua animazione in modo che appaia solo in determinate circostanze:

Ad esempio, potresti volere che il blocco sia visibile solo agli utenti che hanno effettuato l'accesso o che venga visualizzato in una data specifica. Per fare ciò, fare clic su Aggiungi gruppo di regole . Quindi, seleziona la freccia per aprire le impostazioni:

In CONDITION , utilizza il menu a discesa per configurare le impostazioni di visibilità. Puoi aggiungere più di una condizione e creare ulteriori gruppi di regole.

Inizia con le animazioni di Lottie in WordPress

Per ricapitolare, ecco quattro passaggi per aggiungere le animazioni di Lottie in WordPress:

Per ulteriori modi per migliorare l'editor nativo di WordPress, puoi dare un'occhiata alla nostra raccolta completa dei migliori plugin per blocchi di WordPress.

Hai domande sull'aggiunta di Lottie Animations in WordPress? Fatecelo sapere nella sezione commenti qui sotto!