{"id":67915,"date":"2023-01-04T07:00:18","date_gmt":"2023-01-04T15:00:18","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=67915"},"modified":"2025-06-11T13:21:31","modified_gmt":"2025-06-11T20:21:31","slug":"come-aggiungere-animazioni-lottie-al-tuo-sito-it","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/","title":{"rendered":"Come Aggiungere Animazioni Lottie al Tuo Sito"},"content":{"rendered":"\n<p>Immagini e video accattivanti sono un ottimo modo per impressionare i visitatori online. Tuttavia, quasi ogni sito li utilizza per migliorare l&#8217;<a href=\"https:\/\/www.dreamhost.com\/blog\/what-is-user-experience\/\" target=\"_blank\" rel=\"noopener\">esperienza utente (UX)<\/a>. Quindi, aggiungere questi contenuti visivi standard alle tue pagine non \u00e8 pi\u00f9 sufficiente per distinguere il tuo sito dalla massa.<\/p>\n\n\n<p>Fortunatamente, puoi aggiungere animazioni Lottie al tuo sito per darti un vantaggio competitivo. <a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\">LottieFiles<\/a> offre una libreria gratuita di animazioni che puoi facilmente aggiungere al tuo sito web. Poi, puoi usarle per aumentare l&#8217;impegno degli utenti e migliorare <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-design-a-website\/\" target=\"_blank\" rel=\"noopener\">il design del tuo sito<\/a>.<\/p>\n\n\n<p>In questo post, daremo un&#8217;occhiata pi\u00f9 da vicino ad alcuni vantaggi chiave dell&#8217;uso delle animazioni Lottie sul tuo sito. Poi, ti mostreremo tre modi semplici per aggiungere questi elementi visivi. Iniziamo!<\/p>\n\n\n<h2 id=\"h-the-benefits-of-adding-lottie-animations-to-your-site\" class=\"wp-block-heading\"><b>I Vantaggi dell&#8217;Aggiunta di Animazioni Lottie al Tuo Sito<\/b><\/h2>\n\n\n<p>Mentre i video e le immagini possono rendere il tuo sito web pi\u00f9 coinvolgente, questo tipo di contenuti visivi si trovano ovunque su internet. D&#8217;altra parte, le animazioni possono darti un vantaggio unico.<\/p>\n\n\n<p>Inoltre, si prevede che il <a href=\"https:\/\/www.statista.com\/topics\/9725\/animation-industry\/#dossierKeyfigures\" target=\"_blank\" rel=\"noopener\">mercato globale per l&#8217;industria dell&#8217;animazione<\/a> aumenter\u00e0 del 60% nei prossimi nove anni. Ci\u00f2 significa che se inizi ad usarli ora, puoi anticipare una tendenza in crescita.<\/p>\n\n\n<p>Infatti, il 61% dei marketer ha utilizzato contenuti interattivi come tattica di coinvolgimento digitale l&#8217;anno scorso. Altre strategie includevano le GIF, che possono essere utilizzate anche per mostrare animazioni.<\/p>\n\n\n<p><a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\">Le animazioni Lottie<\/a> sono un&#8217;ottima scelta, principalmente a causa delle loro ridotte dimensioni dei file:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"954\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage.png\" alt=\"Homepage del sito web LottieFiles\" class=\"wp-image-38495 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage-300x143.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage-1024x489.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage-768x367.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage-1536x733.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-600x286.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-1200x573.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-730x348.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-1460x697.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-784x374.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-1568x748.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-877x419.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-1754x837.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/954;\" \/><\/figure><\/div>\n\n<p>In realt\u00e0, questi file sono <i>600%<\/i> pi\u00f9 piccoli dei GIF \u2013 Puoi aggiungerli al tuo sito senza appesantire nulla. Questo pu\u00f2 permetterti di preservare una UX positiva.<\/p>\n\n\n<p>Meglio ancora, le animazioni Lottie possono essere completamente personalizzate per adattarsi alla <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-create-brand-style-guide-website\/\" target=\"_blank\" rel=\"noopener\">tua identit\u00e0 di marca<\/a>. Inoltre, \u00e8 una soluzione economica poich\u00e9 LottieFiles offre la pi\u00f9 estesa biblioteca di animazioni gratuita. Avrai accesso a migliaia di elementi UI, personaggi e illustrazioni.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n<h2 id=\"h-how-to-add-lottie-animations-to-your-site-3-ways\" class=\"wp-block-heading\"><b>Come Aggiungere Animazioni Lottie al Tuo Sito (3 Modi)<\/b><\/h2>\n\n<p>Ora che conosci i vantaggi dell&#8217;utilizzo delle animazioni Lottie, vediamo tre modi per aggiungerle al tuo sito.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-method-1-add-your-animation-with-oembed\"><b>Metodo 1: Aggiungi La Tua Animazione Con oEmbed<\/b><\/h3>\n\n\n<p>Aggiungere le tue animazioni Lottie tramite oEmbed \u00e8 il metodo pi\u00f9 semplice in questa guida. L&#8217;unico svantaggio \u00e8 che non sarai in grado di modificare le impostazioni dell&#8217;animazione o configurarle per reagire alle interazioni degli utenti.<\/p>\n\n\n<p>Per iniziare con questo metodo, visita la <a href=\"https:\/\/lottiefiles.com\/featured\" target=\"_blank\" rel=\"noopener\">libreria di animazioni LottieFiles<\/a> per trovare l&#8217;animazione perfetta per il tuo sito. Una volta trovato un design che ti piace, clicca sull&#8217;animazione e semplicemente copia l&#8217;URL oEmbed (devi essere loggato in un account gratuito per farlo):<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1002\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url.jpg\" alt=\"Trova l'URL oEmbed in LottieFiles\" class=\"wp-image-38493 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url-300x150.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url-1024x513.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url-768x385.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url-1536x770.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-600x301.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-1200x602.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-730x366.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-1460x732.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-784x393.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-1568x786.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-877x440.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-1754x879.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1002;\" \/><\/figure><\/div>\n\n<p>Poi, vai su WordPress e apri la pagina o il post dove vuoi includere la tua animazione. Successivamente, aggiungi semplicemente un nuovo blocco Gutenberg <i>Embed<\/i>:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"828\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress.png\" alt=\"Blocco di incorporamento in WordPress\" class=\"wp-image-38485 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress-300x124.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress-1024x424.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress-768x318.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress-1536x636.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-600x249.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-1200x497.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-730x302.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-1460x605.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-784x325.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-1568x649.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-877x363.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-1754x727.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/828;\" \/><\/figure><\/div>\n\n<p>Ora, incolla l&#8217;URL oEmbed che hai copiato dal sito web di Lottie:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"616\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block.png\" alt=\"Incolla l'URL oEmbed Lottie nel blocco WordPress per l'incorporamento\" class=\"wp-image-38496 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-300x92.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1024x316.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-768x237.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1536x473.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-600x185.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1200x370.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-730x225.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1460x450.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-784x242.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1568x483.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-877x270.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1754x541.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/616;\" \/><\/figure><\/div>\n\n<p>Premi il pulsante <i>Embed<\/i> per confermare l&#8217;azione.<\/p>\n\n\n<p>A questo punto, dovresti vedere l&#8217;animazione apparire sulla tua pagina:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"838\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress.jpg\" alt=\"Incorpora la tua animazione Lottie in WordPress\" class=\"wp-image-38486 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress-300x126.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress-1024x429.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress-768x322.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress-1536x644.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-600x252.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-1200x503.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-730x306.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-1460x612.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-784x329.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-1568x657.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-877x368.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-1754x735.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/838;\" \/><\/figure><\/div>\n\n<p>Come abbiamo menzionato in precedenza, non potrai personalizzare l&#8217;animazione una volta che l&#8217;hai aggiunta alla tua pagina o post di WordPress. Pertanto, \u00e8 fondamentale che tu apporti tutte le modifiche che desideri in anticipo mentre sei ancora sul sito web di Lottie.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-method-2-add-your-animation-using-the-lottie-block-for-gutenberg-plugin\"><b>Metodo 2: Aggiungi La Tua Animazione Utilizzando il <\/b><a href=\"https:\/\/wordpress.org\/plugins\/lottiefiles\/\" target=\"_blank\" rel=\"noopener\"><b>Lottie Block per Gutenberg<\/b><\/a><b> Plugin<\/b><\/h3>\n\n\n<p>Anche se il metodo oEmbed \u00e8 il pi\u00f9 semplice, utilizzare il plugin Lottie block per Gutenberg \u00e8 altrettanto facile. Inoltre, ti permette di visualizzare immediatamente qualsiasi modifica apportata ai tuoi progetti.<\/p>\n\n\n<p>Per cominciare, vai su <i>Plugins <\/i>&gt; <i>Add New <\/i>per installare e attivare <a href=\"https:\/\/wordpress.org\/plugins\/lottiefiles\/\" target=\"_blank\" rel=\"noopener\">il plugin Lottie block per Gutenberg<\/a> in WordPress:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1857\" height=\"602\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin.png\" alt=\"Lottie block per il plugin Gutenberg\" class=\"wp-image-38490 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin.png.webp 1857w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin-300x97.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1024x332.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin-768x249.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1536x498.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-600x195.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1200x389.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-730x237.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1460x473.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-784x254.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1568x508.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-877x284.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1754x569.png.webp 1754w\" data-sizes=\"(max-width: 1857px) 100vw, 1857px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1857px; --smush-placeholder-aspect-ratio: 1857\/602;\" \/><\/figure><\/div>\n\n<p>Puoi quindi accedere al tuo account LottieFiles o creare un account gratuitamente.<\/p>\n\n\n<p>Successivamente, aggiungi un nuovo blocco nell&#8217;editor Gutenberg. Cerca il blocco <i>Lottie<\/i> e aggiungilo alla tua pagina:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"776\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block.png\" alt=\"Cerca il blocco Lottie in WordPress\" class=\"wp-image-38500 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block-300x116.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block-1024x398.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block-768x298.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block-1536x596.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-600x233.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-1200x466.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-730x283.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-1460x567.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-784x304.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-1568x609.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-877x340.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-1754x681.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/776;\" \/><\/figure><\/div>\n\n<p>Qui, troverai tre modi per inserire un&#8217;animazione Lottie in WordPress:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Clicca su <i>Discover animation <\/i>per sfogliare la libreria di LottieFiles (avrai bisogno di un account per farlo).<\/li>\n\n\n\n<li>Seleziona <i>Media Library <\/i>per trovare un&#8217;animazione che hai precedentemente caricato.<\/li>\n\n\n\n<li>Premi <i>Insert from url<\/i> per incollare un link JSON.<\/li>\n\n\n<\/ul>\n\n\n<p>Se scegli l&#8217;ultimo metodo, puoi trovare il link JSON sul sito web di Lottie:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1127\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url.jpg\" alt=\"Lottie JSON URL\" class=\"wp-image-38491 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-1024x577.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-768x433.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-1536x866.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1200x677.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-730x412.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1460x823.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-784x442.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1568x884.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-877x494.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1754x989.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1127;\" \/><\/figure><\/div>\n\n<p>Una volta aggiunta l&#8217;animazione alla tua pagina, puoi visualizzare l&#8217;anteprima del design in Gutenberg:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"836\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg.png\" alt=\"Anteprima dell'animazione del gufo viola in Gutenberg\" class=\"wp-image-38498 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg-300x125.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg-1024x428.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg-768x321.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg-1536x642.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-600x251.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-1200x502.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-730x305.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-1460x611.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-784x328.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-1568x656.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-877x367.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-1754x734.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/836;\" \/><\/figure><\/div>\n\n<p>Ora, nelle impostazioni del <i>Block<\/i>, puoi personalizzare la tua animazione. Ad esempio, puoi darle uno sfondo trasparente, cambiare le dimensioni o attivare l&#8217;animazione con diverse azioni. Puoi anche usare il plugin per <a href=\"https:\/\/www.youtube.com\/watch?v=i2LP34t__Yc\" target=\"_blank\" rel=\"noopener\">aggiungere un&#8217;animazione Lottie come sfondo di WordPress<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-method-3-add-your-animation-with-html-and-javascript\"><b>Metodo 3: Aggiungi La Tua Animazione con HTML e JavaScript<\/b><\/h3>\n\n\n<p>Aggiungere la tua animazione Lottie con HTML e JavaScript \u00e8 ancora abbastanza semplice, ma \u00e8 il metodo pi\u00f9 complesso. Inoltre, non puoi vedere gli aggiornamenti in tempo reale.<\/p>\n\n\n<p>Invece, devi passare tra Gutenberg e il tuo sito web per visualizzare in anteprima le modifiche. Tuttavia, potresti voler utilizzare questo metodo se sei <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-html\/\" target=\"_blank\" rel=\"noopener\">familiare con l&#8217;HTML<\/a> e cerchi opzioni di personalizzazione avanzate.<\/p>\n\n\n<p>Per iniziare con questo approccio, clicca sull&#8217;animazione nella libreria di LottieFiles e copia il link del file JSON di Lottie:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1127\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url.jpg\" alt=\"Lottie JSON URL\" class=\"wp-image-38491 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-1024x577.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-768x433.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-1536x866.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1200x677.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-730x412.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1460x823.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-784x442.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1568x884.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-877x494.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1754x989.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1127;\" \/><\/figure><\/div>\n\n<p>Successivamente, scorri verso il basso fino a vedere &#8220;Usa l&#8217;animazione in&#8230;&#8221; e seleziona <i>&lt;html&gt;<\/i>:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"852\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html.jpg\" alt=\"Incorpora animazione Lottie usando HTML\" class=\"wp-image-38487 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html-300x128.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html-1024x436.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html-768x327.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html-1536x655.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-600x256.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-1200x511.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-730x311.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-1460x622.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-784x334.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-1568x668.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-877x374.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-1754x748.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/852;\" \/><\/figure><\/div>\n\n<p>Questo ti porter\u00e0 al LottieFiles Web Player:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1016\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview.png\" alt=\"Anteprima del Lettore Web LottieFiles\" class=\"wp-image-38494 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview-300x152.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview-1024x520.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview-768x390.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview-1536x781.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-600x305.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-1200x610.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-730x371.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-1460x742.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-784x398.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-1568x797.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-877x446.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-1754x891.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1016;\" \/><\/figure><\/div>\n\n<p>Qui, puoi scegliere un colore di sfondo, determinare la dimensione e la velocit\u00e0 dell&#8217;animazione, e altro ancora.<\/p>\n\n\n<p>Ora, deseleziona la casella <i>Controls <\/i>e vedrai che \u00e8 stato generato del codice HTML nella parte inferiore dello schermo:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1082\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation.png\" alt=\"Codice HTML per la tua animazione LottieFiles\" class=\"wp-image-38488 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation-300x162.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation-1024x554.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation-768x416.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation-1536x831.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-600x325.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-1200x650.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-730x395.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-1460x790.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-784x424.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-1568x849.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-877x475.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-1754x949.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1082;\" \/><\/figure><\/div>\n\n<p>Copia la linea di codice che inizia con \u201c<span style=\"font-family: 'courier new', courier, monospace;\">&lt;lottie-player&gt;<\/span>\u201d e finisce con \u201c<span style=\"font-family: 'courier new', courier, monospace;\">&lt;\/lottie-player&gt;<\/span>\u201d. Poi, in WordPress, aggiungi un nuovo blocco <i>Custom HTML<\/i>:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"858\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor.png\" alt=\"Aggiunta di un nuovo blocco HTML personalizzato nell'editor di WordPress\" class=\"wp-image-38482 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor-300x129.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor-1024x440.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor-768x330.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor-1536x659.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-600x258.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-1200x515.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-730x313.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-1460x627.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-784x337.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-1568x673.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-877x376.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-1754x753.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/858;\" \/><\/figure><\/div>\n\n<p>Incolla l&#8217;HTML che hai copiato da LottieFiles e clicca su <i>Salva Bozza<\/i> nell&#8217;angolo in alto a destra:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"483\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block.png\" alt=\"Incolla il codice HTML di Lottie nel blocco HTML personalizzato di WordPress\" class=\"wp-image-38497 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-300x72.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1024x247.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-768x186.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1536x371.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-600x145.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1200x290.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-730x176.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1460x353.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-784x189.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1568x379.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-877x212.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1754x424.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/483;\" \/><\/figure><\/div>\n\n<p>La tua animazione non funzioner\u00e0 ancora. Prima, dovrai caricare il file JavaScript del Lottie Player in WordPress.<\/p>\n\n\n<p>Per fare questo, torna al LottieFiles Web Player e copia il tag script che inizia con \u201c<span style=\"font-family: 'courier new', courier, monospace;\">&lt;script&gt;<\/span>\u201d e termina con \u201c<span style=\"font-family: 'courier new', courier, monospace;\">&lt;\/script&gt;<\/span>\u201d:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"925\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file.png\" alt=\"File JavaScript del Lottie Player\" class=\"wp-image-38492 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file-300x139.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file-1024x474.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file-768x355.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file-1536x711.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-600x278.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-1200x555.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-730x338.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-1460x676.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-784x363.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-1568x726.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-877x406.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-1754x812.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/925;\" \/><\/figure><\/div>\n\n<p>Ora, vai su WordPress e installa il <a href=\"https:\/\/wordpress.org\/plugins\/custom-css-js\/\" target=\"_blank\" rel=\"noopener\">plugin Simple Custom CSS and JS<\/a>:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"585\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin.png\" alt=\"Installa il plugin Simple Custom CSS and JS\" class=\"wp-image-38499 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin-300x88.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin-1024x300.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin-768x225.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin-1536x450.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-600x176.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-1200x351.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-730x214.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-1460x427.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-784x229.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-1568x459.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-877x257.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-1754x513.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/585;\" \/><\/figure><\/div>\n\n<p>Una volta attivo, vai alla dashboard del plugin e scegli <i>Aggiungi Codice HTML<\/i>:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"573\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin.png\" alt=\"Aggiungi codice HTML con il plugin Simple Custom CSS and JS\" class=\"wp-image-38483 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-300x86.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1024x294.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-768x220.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1536x440.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-600x172.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1200x344.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-730x209.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1460x418.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-784x225.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1568x449.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-877x251.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1754x503.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/573;\" \/><\/figure><\/div>\n\n<p>Puoi dare un titolo al tuo codice come &#8220;Aggiunge Lottie Player&#8221;. Poi, incolla il tag script nell&#8217;editor e clicca su <i>Pubblica<\/i>:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"662\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html.png\" alt=\"Aggiungi il Lottie Player a WordPress con HTML personalizzato\" class=\"wp-image-38484 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html-300x99.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1024x339.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html-768x254.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1536x509.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-600x199.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1200x397.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-730x242.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1460x484.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-784x260.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1568x519.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-877x290.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1754x581.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/662;\" \/><\/figure><\/div>\n\n<p>Ora, torna alla pagina dove hai inserito il tuo codice HTML. Dovresti vedere la tua animazione Lottie quando passi all&#8217;anteprima:<\/p>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"846\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress.png\" alt=\"Animazione Lottie aggiunta a WordPress tramite HTML e JavaScript\" class=\"wp-image-38489 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress-300x127.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress-1024x433.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress-768x325.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress-1536x650.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-600x254.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-1200x508.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-730x309.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-1460x618.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-784x332.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-1568x664.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-877x371.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-1754x742.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/846;\" \/><\/figure><\/div>\n\n<p>Se l&#8217;animazione \u00e8 troppo grande o troppo piccola, puoi modificare i parametri predefiniti nel codice HTML dove dice <i><span style=\"font-family: 'courier new', courier, monospace;\">style= \u201cwidth: X; height: X;\u201d<\/span>.<\/i><\/p>\n\n\n<h2 id=\"h-add-lottie-animations-to-your-site-today\" class=\"wp-block-heading\"><b>Aggiungi Animazioni Lottie al Tuo Sito Oggi<\/b><\/h2>\n\n\n<p>Le immagini e i video appaiono su quasi tutti i siti web, quindi includerli nelle tue pagine probabilmente non far\u00e0 risaltare i tuoi design. Tuttavia, puoi aggiungere animazioni Lottie al tuo sito per impressionare i visitatori, riflettere il tuo marchio e migliorare l&#8217;interazione.<\/p>\n\n\n<p>Per riepilogare, ecco tre modi per aggiungere <a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\">animazioni Lottie<\/a> al tuo sito:<\/p>\n\n\n<ol class=\"wp-block-list\">\n<li>Aggiungi animazioni Lottie con oEmbed.<\/li>\n\n\n\n<li>Aggiungi animazioni Lottie usando il <a href=\"https:\/\/wordpress.org\/plugins\/lottiefiles\/\" target=\"_blank\" rel=\"noopener\">plugin Lottie block per Gutenberg<\/a>.<\/li>\n\n\n\n<li>Aggiungi animazioni Lottie con HTML e JavaScript.<\/li>\n\n\n<\/ol>\n\n\n<p>Un altro modo per distinguere il tuo sito web dagli altri \u00e8 progettare pagine personalizzate che siano uniche per il tuo marchio. Da DreamHost, possiamo costruirti un sito unico nel suo genere, <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-optimize-your-site-for-mobile\/\" target=\"_blank\" rel=\"noopener\">compatibile con i dispositivi mobili<\/a> e ottimizzato per i motori di ricerca. Scopri <a href=\"https:\/\/www.dreamhost.com\/pro-services\/design\/custom-web-design\/\" target=\"_blank\" rel=\"noopener\">i nostri piani di web design<\/a> oggi stesso!<\/p>\n\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Ottieni Un Sito Web Splendido Di Cui Vai Orgoglioso\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      I nostri designer creeranno un sito web splendido da zero per adattarsi perfettamente al tuo marchio.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/design\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Scopri Di Pi\u00f9                    <\/a>\n\n  <\/div>\n<\/div>\n\n<p><script src=\"https:\/\/unpkg.com\/@lottiefiles\/lottie-player@latest\/dist\/lottie-player.js\"><\/script><\/p>\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Immagini e video accattivanti sono un ottimo modo per impressionare i visitatori online. Tuttavia, quasi ogni sito web li utilizza per migliorare l&#8217;esperienza utente (UX). Pertanto, aggiungere questi elementi visivi standard alle tue pagine non \u00e8 pi\u00f9 sufficiente per far distinguere il tuo sito dalla massa. Fortunatamente, puoi aggiungere animazioni Lottie al tuo sito per [\u2026]<\/p>\n","protected":false},"author":1058,"featured_media":38502,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"I video e le immagini possono rendere le tue pagine coinvolgenti, ma le animazioni sono pi\u00f9 uniche. Ecco come aggiungere animazioni Lottie al tuo sito per impressionare i visitatori!","toc_headlines":"[[\"h-the-benefits-of-adding-lottie-animations-to-your-site\",\"I Vantaggi dell'Aggiunta di Animazioni Lottie al Tuo Sito\"],[\"h-how-to-add-lottie-animations-to-your-site-3-ways\",\"Come Aggiungere Animazioni Lottie al Tuo Sito (3 Modi)\"],[\"h-add-lottie-animations-to-your-site-today\",\"Aggiungi Animazioni Lottie al Tuo Sito Oggi\"]]","hide_toc":false,"footnotes":""},"categories":[15076,15068,15072],"tags":[],"class_list":["post-67915","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developer-central-it","category-website-design-it","category-wordpress-it"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Come Aggiungere Animazioni Lottie al Tuo Sito - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"I video e le immagini possono rendere le tue pagine coinvolgenti, ma le animazioni sono pi\u00f9 uniche. Ecco come aggiungere animazioni Lottie al tuo sito per impressionare i visitatori!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Aggiungere Animazioni Lottie al Tuo Sito\" \/>\n<meta property=\"og:description\" content=\"I video e le immagini possono rendere le tue pagine coinvolgenti, ma le animazioni sono pi\u00f9 uniche. Ecco come aggiungere animazioni Lottie al tuo sito per impressionare i visitatori!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-04T15:00:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T20:21:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come Aggiungere Animazioni Lottie al Tuo Sito - DreamHost Blog","description":"I video e le immagini possono rendere le tue pagine coinvolgenti, ma le animazioni sono pi\u00f9 uniche. Ecco come aggiungere animazioni Lottie al tuo sito per impressionare i visitatori!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/","og_locale":"en_US","og_type":"article","og_title":"Come Aggiungere Animazioni Lottie al Tuo Sito","og_description":"I video e le immagini possono rendere le tue pagine coinvolgenti, ma le animazioni sono pi\u00f9 uniche. Ecco come aggiungere animazioni Lottie al tuo sito per impressionare i visitatori!","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-01-04T15:00:18+00:00","article_modified_time":"2025-06-11T20:21:31+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","type":"image\/jpeg"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Come Aggiungere Animazioni Lottie al Tuo Sito","datePublished":"2023-01-04T15:00:18+00:00","dateModified":"2025-06-11T20:21:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/"},"wordCount":1205,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","articleSection":["Centro Sviluppatori","Design del Sito Web","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/","name":"Come Aggiungere Animazioni Lottie al Tuo Sito - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","datePublished":"2023-01-04T15:00:18+00:00","dateModified":"2025-06-11T20:21:31+00:00","description":"I video e le immagini possono rendere le tue pagine coinvolgenti, ma le animazioni sono pi\u00f9 uniche. Ecco come aggiungere animazioni Lottie al tuo sito per impressionare i visitatori!","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","width":900,"height":598,"caption":"How to Add Lottie Animations to Your Site"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/come-aggiungere-animazioni-lottie-al-tuo-sito-it\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Come Aggiungere Animazioni Lottie al Tuo Sito"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"it","translations":{"it":67915,"en":38481,"de":57473,"pt":57470,"es":38507,"pl":51785,"uk":57457,"ru":57494,"fr":69417,"nl":69439},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/67915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=67915"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/67915\/revisions"}],"predecessor-version":[{"id":67917,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/67915\/revisions\/67917"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/38502"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=67915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=67915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=67915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}