4 Novembre 2022
COME INSERIRE UN LOGO ANIMATO SUL TUO SITO WEB
- Gioia Santin
- Social - Web & Graphic Designer
Le animazioni fanno parte della nostra vita e ci circondano su ogni dispositivo o piattaforma, dagli e-commerce in cui facciamo shopping, alle esperienze interattive su Netflix o ai mille stickers e gif che inviamo ai nostri amici, facendo a gara a chi ne ha di più.
Inutile dire che ormai sono una tendenza ben consolidata e che, nel nostro caso, riescono a far apparire una pagina web più coinvolgente, dinamica ed interessante.
Non sempre però si conosce la procedura per inserirle su WordPress, soprattutto quando si è alle prime armi! La prima cosa che si è tentati di fare è provare ad inserirle tramite Gif, Video o addirittura con il codice (ogni riferimento a me stessa è puramente casuale).
Lo strumento da utilizzare non è la gif o un video ma bensì il Lottie! Cos’è?
Il Lottie è un formato di file di animazione basato su codice JSON e ha la particolarità di essere incredibilmente leggero, multipiattaforma e indipendente dalla risoluzione.
Insomma perfetto per il web.
È uno strumento nuovissimo!
Nasce appunto per semplificare il processo di inserimento delle animazioni sul web che, prima di Lottie, venivano ricostruite da zero dagli sviluppatori sottoforma di codice, con scarsi risultati.
Nel 2015, Hernan Torrisi ha l’idea illuminante di esportare un’animazione di After Effect in formato JSON e rilascia il primo plugin-in per farlo, chiamato Bodymovin.
Successivamente, nel 2017, gli sviluppatori di Airbnb vengono incuriositi dalla cosa e capendone l’incredibile potenziale, creano le prime librerie IOS e Android in grado di renderizzare questi JSON file a cui danno il nome di “Lottie”.
Nello stesso momento, viene lanciata anche LottieFiles, una piattaforma online dove testare e condividere le proprie animazioni in tempo reale.
Infine, nel 2020, nasce dot Lottie, l’estensione che aggrega più file Lottie in uno unico e che determinerà il futuro dell’animazione.
Bene, dopo aver raccontato questa cosa di cui probabilmente non vi interessa nulla, torniamo alla vera domanda dell’articolo! Hai animato il tuo logo aziendale e ora vuoi inserirlo sul web, come fare?
1
Scarica e installa il Plug-in di LottieFiles per After Effects dal sito originale: Clicca Qui
2
Quando hai terminato la tua animazione su After Effects clicca su Finestra>Estensioni>LottieFiles
3
Ti si aprirà il pannello del Plugin-In, dovrai fare il login e successivamente selezionare la composizione da renderizzare con la tua animazione.
4
A questo punto potrai modificare ed esportare la tua animazione direttamente da questo pannello oppure online su LottieFiles, la troverai fra i tuoi progetti.
5
Ora puoi inserirlo sul tuo sito WordPress e hai due modi per farlo: caricare il file JSON che hai esportato oppure copiare il link della tua animazione da LottieFiles.
6
Se utilizzi Elementor PRO puoi utilizzare il widget “Lottie” posizionarlo dove vuoi nella pagina ed inserire la tua animazione.
7
Per chi utilizza Gutenberg invece gli basterà scaricare l’apposito plugin, entrare nel proprio account LottieFiles e selezionare la propria animazione tra i progetti!
Spero che questo mini tutorial ti sia stato utile!
Se invece hai bisogno di animare il tuo logo e non ne vuoi sapere niente di queste cose da smanettoni contattaci!
Ultimi articoli
Il mio sito ha bisogno della SEO?
La risposta è “certo che sì!”. Leggi il mio articolo e scopri cos’è la SEO e perché è importante!
COME INSERIRE UN LOGO ANIMATO SUL TUO SITO WEB
Un piccolo tutorial sui passaggi che devi affrontare per inserire la tua animazione su WordPress.
Google-iamo?
Parliamo di Google e dintorni, senza farci mancare qualche trucco per fare ricerche professionali!
Iscriviti alla nostra newsletter!
Non perderti le novità del mondo della comunicazione digitale, guide, aggiornamenti normativi, tools, offerte speciali ed altre info utili.
Riguardo la tua iscrizione, puoi cambiare idea in ogni momento cliccando sul link di disiscrizione presente in fondo ad ogni mail che riceverai da noi. Usiamo Mailchimp come piattaforma di marketing. Iscrivendoti, acconsenti che le tue informazioni vengano trasferite a Mailchimp per il trattamento. Clicca qui per ulteriori informazioni sulla privacy policy di Mailchimp.
Caleidos Group S.r.l Unipersonale • Via Mario Cavallari 4 • 44124 Ferrara • P.Iva: 01501940389
Questo sito è protetto da Google reCAPTCHA v3, Privacy Policy e Terms of Service di Google.