Animazioni Lottie in Elementor per WordPress

Vuoi ravvivare il tuo sito web con grafiche vivaci e in movimento? Con le animazioni di Lottie puoi aumentare l'attrattiva visiva del tuo sito WordPress e offrire ai tuoi visitatori un'esperienza coinvolgente. In questa guida imparerai come utilizzare Lottie in Elementor per integrare facilmente delle animazioni sorprendenti.

Principali punti chiave

• Lottie consente di utilizzare grafiche in movimento in Elementor.
• Le animazioni possono essere scaricate in formato JSON o incorporate esternamente.
• L'interfaccia utente di Elementor offre semplici opzioni per personalizzare le impostazioni delle animazioni.

Guida passo passo

Passo 1: Aggiungi l'elemento Lottie

Per prima cosa devi aggiungere l'elemento Lottie in Elementor. Vai all'editor di Elementor della tua pagina. Cerca l'elemento "Lottie" nella barra laterale e trascinalo nella posizione desiderata sulla tua pagina. Troverai Lottie relativamente in basso nella versione Pro di Elementor.

Passo 2: Scarica le animazioni da LottieFiles

Per trovare un'animazione adatta, puoi visitare la piattaforma LottieFiles. Qui puoi registrarti gratuitamente e sfogliare la vasta gamma di animazioni. Inserisci nella barra di ricerca ciò che stai cercando, ad esempio ho cercato "Apple".

Passo 3: Seleziona l'animazione desiderata

Una volta trovata un'animazione che ti piace, clicca sulla preview. Avrai la possibilità di scaricare l'animazione in formato JSON o GIF. Scegli l'opzione che più si adatta a te - se vuoi utilizzare l'animazione in Elementor, scaricala come file JSON.

Passo 4: Carica le animazioni

Torna ora su Elementor. Puoi caricare direttamente il file JSON scaricato tramite il campo di upload nell'elemento Lottie. Assicurati di attivare prima il file, poiché il file JSON non viene visualizzato in Elementor senza attivazione.

Passo 5: Genera URL esterni

Se il download non funziona, puoi anche utilizzare direttamente l'URL dell'animazione. Incolla l'URL nel campo corrispondente. Elementor recupererà automaticamente l'animazione e la visualizzerà.

Passo 6: Personalizza le impostazioni delle animazioni

Ora puoi personalizzare le impostazioni dell'animazione. Hai la possibilità di definire la velocità di riproduzione e il colore di sfondo. Assicurati di attivare la funzione di loop, in modo che l'animazione venga ripetuta continuamente.

Passo 7: Imposta trigger interattivi

Scegli il trigger per l'animazione, decidendo se far partire l'animazione con un clic o passandoci sopra. Nelle impostazioni puoi impostare l'interazione desiderata - questo ti dà controllo sull'esperienza utente.

Passo 8: Effettua ulteriori personalizzazioni

Puoi modificare le impostazioni di frequenza delle animazioni e definire punto di inizio e di fine dell'animazione per ottenere l'effetto desiderato. Queste personalizzazioni garantiscono che l'animazione sia accuratamente adattata alle tue esigenze.

Passo 9: Personalizza stile e design

Le animazioni di Lottie offrono anche opzioni di personalizzazione per stile e design. Qui puoi impostare altezza, larghezza e opacità dell'animazione. Inoltre, puoi aggiungere filtri CSS e definire tempi di transizione per garantire un aspetto professionale.

Passo 10: Testare e salvare l'animazione

Dopo aver effettuato le impostazioni desiderate, salva le tue modifiche. Controlla l'animazione nell'anteprima del tuo editor Elementor per assicurarti che tutto funzioni come desiderato. Il risultato dovrebbe essere un'animazione accattivante che mostri effetti reattivi al passaggio del mouse o al clic.

Riepilogo

Inserire le animazioni Lottie in Elementor è facile e ti permette di dare al tuo sito un design dinamico e moderno. Con i passaggi descritti, puoi personalizzare le animazioni, migliorare l'esperienza dell'utente e gestire in modo creativo i tuoi contenuti.