{"id":38507,"date":"2023-01-04T07:00:38","date_gmt":"2023-01-04T15:00:38","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=38507"},"modified":"2025-01-16T13:02:53","modified_gmt":"2025-01-16T21:02:53","slug":"como-agregar-animaciones-lottie","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/","title":{"rendered":"C\u00f3mo A\u00f1adir Animaciones Lottie A Tu Sitio (3 Maneras)"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">Con videos e im\u00e1genes llamativos impresionar\u00e1s a tus visitantes en l\u00ednea. Sin embargo, casi cada sitio web los usa para mejorar la <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/que-es-experiencia-de-usuario\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">experiencia de usuario (UX)<\/span><\/a><span style=\"font-weight: 400;\">. As\u00ed que solo a\u00f1adir estos elementos visuales a tus p\u00e1ginas, no es suficiente para que tu sitio resalte.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Afortunadamente, puedes agregar animaciones Lottie a tu sitio para tener una ventaja competitiva. <\/span><a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">LottieFiles<\/span><\/a><span style=\"font-weight: 400;\"> tiene una biblioteca gratuita de animaciones que f\u00e1cilmente podr\u00e1s a\u00f1adir a tu sitio web. Entonces, podr\u00e1s usarlas para potenciar la interacci\u00f3n de tus usuarios y mejorar <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/diseno-web-6-consejos\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">el dise\u00f1o de tu sitio<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Aqu\u00ed veremos m\u00e1s de cerca algunos beneficios clave de usar animaciones Lottie en tu sitio. Luego ver\u00e1s tres simples maneras de a\u00f1adir estos elementos visuales. \u00a1Comencemos!<\/span><\/p>\n\n\n\n<h2 id=\"h-los-beneficios-de-anadir-animaciones-lottie-a-tu-sitio\" class=\"wp-block-heading\"><b>Los Beneficios de A\u00f1adir Animaciones Lottie a Tu Sitio<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Mientras videos e im\u00e1genes pueden dar m\u00e1s interacciones a tu sitio, estos tipos de archivos est\u00e1n por todo el internet. Por otro lado, las animaciones le dar\u00e1n un toque \u00fanico.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Adem\u00e1s, la predicci\u00f3n de <\/span><a href=\"https:\/\/www.statista.com\/topics\/9725\/animation-industry\/#dossierKeyfigures\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">mercado global para la industria de la animaci\u00f3n<\/span><\/a><span style=\"font-weight: 400;\"> es que habr\u00eda un crecimiento durante los pr\u00f3ximos nueve a\u00f1os, de un 60%. Esto implica que si empiezas a emplearlas ahora, podr\u00e1s estar a la vanguardia de una tendencia creciente.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">De hecho, un 61% de los expertos en mercadeo utilizaron contenido interactivo el a\u00f1o pasado, como t\u00e1ctica de interacci\u00f3n digital. Otras estrategias incluyeron GIFs, que tambi\u00e9n pueden emplearse para visibilizar animaciones.<\/span><\/p>\n\n\n\n<p><a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Las animaciones Lottie<\/span><\/a><span style=\"font-weight: 400;\"> son una elecci\u00f3n excelente, m\u00e1s que todo por los peque\u00f1os tama\u00f1os de sus archivos:&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"430\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Pagina-inicio-Lottie-Files.jpg\" alt=\"P\u00e1gina de inicio del sitio web de LottieFiles.\" class=\"wp-image-38510 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Pagina-inicio-Lottie-Files.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Pagina-inicio-Lottie-Files-300x143.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Pagina-inicio-Lottie-Files-768x367.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Pagina-inicio-Lottie-Files-600x287.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Pagina-inicio-Lottie-Files-730x349.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Pagina-inicio-Lottie-Files-784x375.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Pagina-inicio-Lottie-Files-877x419.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/430;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">En este orden de ideas, estos archivos son un 600% m\u00e1s peque\u00f1os que los GIFs. Es m\u00e1s, puedes a\u00f1adirlos a tu sitio sin necesidad de reducirlos de tama\u00f1o. Esto te ayudar\u00e1 a preservar una experiencia de usuario (UX) positiva.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Mejor a\u00fan, las animaciones Lottie pueden personalizarse completamente para encajar con <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/como-crear-guia-estilo-marca-website\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">tu identidad de marca<\/span><\/a><span style=\"font-weight: 400;\">. Como si fuera poco, es una soluci\u00f3n econ\u00f3mica, dado que LottieFiles provee la biblioteca m\u00e1s extensa de animaciones gratuitas. Tendr\u00e1s acceso a miles de elementos de interfaz de usuario (UI), caracteres e ilustraciones.<\/span><\/p>\n\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\n\n<h2 id=\"h-como-anadir-animaciones-lottie-a-tu-sitio-3-maneras\" class=\"wp-block-heading\"><b>C\u00f3mo A\u00f1adir Animaciones Lottie a Tu Sitio (3 Maneras)<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Ahora que conoces los beneficios de usar animaciones Lottie, veamos tres maneras de a\u00f1adirlas a tu sitio.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-metodo-1-anade-tu-animacion-con-oembed\"><b>M\u00e9todo 1: A\u00f1ade Tu Animaci\u00f3n con oEmbed<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">A\u00f1adir tus animaciones Lottie con oEmbed es el m\u00e9todo m\u00e1s simple de esta gu\u00eda. La \u00fanica desventaja es que no podr\u00e1s editar las configuraciones de animaci\u00f3n o configurarlas para reaccionar ante las interacciones de los usuarios.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Para llevar a cabo este m\u00e9todo, inicia sesi\u00f3n en la biblioteca de animaciones LottieFiles, creando una cuenta gratuita, o ingresando a la que ya tengas. Luego, navega por la <\/span><a href=\"https:\/\/lottiefiles.com\/featured\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">biblioteca de animaciones LottieFiles<\/span><\/a><span style=\"font-weight: 400;\"> para encontrar la animaci\u00f3n perfecta para tu sitio. Una vez halles un dise\u00f1o que te guste, haz clic en la animaci\u00f3n y simplemente copia la URL oEmbed:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"611\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/URL-oEmbed-LottieFiles.jpg\" alt=\"Encuentra la URL oEmbed en LottieFiles.\" class=\"wp-image-38511 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/URL-oEmbed-LottieFiles.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/URL-oEmbed-LottieFiles-300x204.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/URL-oEmbed-LottieFiles-768x521.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/URL-oEmbed-LottieFiles-600x407.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/URL-oEmbed-LottieFiles-730x496.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/URL-oEmbed-LottieFiles-784x532.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/URL-oEmbed-LottieFiles-877x595.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/611;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Luego, dir\u00edgete a WordPress y abre la p\u00e1gina o publicaci\u00f3n en que quieras incluir tu animaci\u00f3n. Despu\u00e9s, solo a\u00f1ade un nuevo bloque <\/span><i><span style=\"font-weight: 400;\">Embed<\/span><\/i><span style=\"font-weight: 400;\"> Gutenberg:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"355\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Bloque-Embed-WordPress.jpg\" alt=\"Bloque Embed en WordPress.\" class=\"wp-image-38512 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Bloque-Embed-WordPress.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Bloque-Embed-WordPress-300x118.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Bloque-Embed-WordPress-768x303.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Bloque-Embed-WordPress-600x237.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Bloque-Embed-WordPress-730x288.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Bloque-Embed-WordPress-784x309.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Bloque-Embed-WordPress-877x346.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/355;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Ahora, pega la URL oEmbed que copiaste desde el sitio web de Lottie:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"343\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Pegando-una-URL-oEmbed-Lottie-bloque-Embed-WordPress.jpg\" alt=\" Pega la URL oEmbed de Lottie en el bloque Embed de WordPress.\" class=\"wp-image-38513 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Pegando-una-URL-oEmbed-Lottie-bloque-Embed-WordPress.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Pegando-una-URL-oEmbed-Lottie-bloque-Embed-WordPress-300x114.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Pegando-una-URL-oEmbed-Lottie-bloque-Embed-WordPress-768x293.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Pegando-una-URL-oEmbed-Lottie-bloque-Embed-WordPress-600x229.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Pegando-una-URL-oEmbed-Lottie-bloque-Embed-WordPress-730x278.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Pegando-una-URL-oEmbed-Lottie-bloque-Embed-WordPress-784x299.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Pegando-una-URL-oEmbed-Lottie-bloque-Embed-WordPress-877x334.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/343;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Haz clic en el bot\u00f3n \u2018<\/span><b>Incrustar<\/b><b><i>\u2019<\/i><\/b><span style=\"font-weight: 400;\"> para confirmar la acci\u00f3n.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">A estas alturas, deber\u00edas ver ya la animaci\u00f3n apareciendo en tu p\u00e1gina:&nbsp;<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"349\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Insertar-animacion-Lottie-WordPress.jpg\" alt=\"Inserta tu animaci\u00f3n Lottie en WordPress.\" class=\"wp-image-38514 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Insertar-animacion-Lottie-WordPress.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Insertar-animacion-Lottie-WordPress-300x116.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Insertar-animacion-Lottie-WordPress-768x298.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Insertar-animacion-Lottie-WordPress-600x233.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Insertar-animacion-Lottie-WordPress-730x283.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Insertar-animacion-Lottie-WordPress-784x304.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Insertar-animacion-Lottie-WordPress-877x340.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/349;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Como mencion\u00e1bamos previamente, no podr\u00e1s personalizar la animaci\u00f3n una vez la a\u00f1adas a tu p\u00e1gina o publicaci\u00f3n de WordPress. Por eso, es importante que hagas todas las ediciones que desees de antemano, mientras est\u00e1s a\u00fan en el sitio web de Lottie.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-metodo-2-anade-tu-animacion-usando-el-plugin-de-bloque-de-lottie-para-gutenberg\"><b>M\u00e9todo 2: A\u00f1ade Tu Animaci\u00f3n Usando el Plugin de <\/b><a href=\"https:\/\/wordpress.org\/plugins\/lottiefiles\/\" target=\"_blank\" rel=\"noopener\"><b>Bloque de Lottie para Gutenberg<\/b><\/a><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Aunque el m\u00e9todo oEmbed es el m\u00e1s sencillo, usar el plugin de bloque Lottie en Gutenberg tambi\u00e9n es muy sencillo. Adem\u00e1s, te permite previsualizar todo cambio que hagas a tus dise\u00f1os, inmediatamente.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">En primer lugar, ve a \u2018<\/span><b>Plugins &gt; A\u00f1adir Nuevo\u2019<\/b> <span style=\"font-weight: 400;\">para instalar y activar el plugin <\/span><a href=\"https:\/\/es.wordpress.org\/plugins\/lottiefiles\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">bloque Lottie para Gutenberg<\/span><\/a><span style=\"font-weight: 400;\"> en WordPress:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"292\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/plugin-lottie-pata-gutenberg.jpg\" alt=\"Plugin Lottie block para Gutenberg\" class=\"wp-image-38515 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/plugin-lottie-pata-gutenberg.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/plugin-lottie-pata-gutenberg-300x97.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/plugin-lottie-pata-gutenberg-768x249.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/plugin-lottie-pata-gutenberg-600x195.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/plugin-lottie-pata-gutenberg-730x237.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/plugin-lottie-pata-gutenberg-784x254.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/plugin-lottie-pata-gutenberg-877x285.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/292;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Podr\u00e1s ingresar a tu cuenta de LottieFiles, o crearla gratuitamente, si a\u00fan no tienes una.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">A continuaci\u00f3n, a\u00f1ade un nuevo bloque en el editor de Gutenberg. Busca el bloque de <\/span><i><span style=\"font-weight: 400;\">Lottie<\/span><\/i><span style=\"font-weight: 400;\"> y a\u00f1\u00e1delo a tu p\u00e1gina:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"356\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/bloque-lottie-gutenberg.jpg\" alt=\"Buscando el bloque Lottie en WordPress.\" class=\"wp-image-38516 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/bloque-lottie-gutenberg.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/bloque-lottie-gutenberg-300x119.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/bloque-lottie-gutenberg-768x304.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/bloque-lottie-gutenberg-600x237.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/bloque-lottie-gutenberg-730x289.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/bloque-lottie-gutenberg-784x310.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/bloque-lottie-gutenberg-877x347.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/356;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Encontrar\u00e1s tres maneras de insertar una animaci\u00f3n Lottie en WordPress:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Haz clic en \u2018<\/span><b><i>Discover animation\u2019<\/i><\/b> <span style=\"font-weight: 400;\">para navegar la biblioteca LottieFiles (necesitar\u00e1s una cuenta para hacer esto).<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Selecciona <\/span><i><span style=\"font-weight: 400;\">Media Library <\/span><\/i><span style=\"font-weight: 400;\">para encontrar una animaci\u00f3n que ya hayas usado antes.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Pulsa \u2018<\/span><b><i>Insert from url<\/i><\/b><i><span style=\"font-weight: 400;\">\u2019<\/span><\/i><span style=\"font-weight: 400;\"> para pegar un enlace JSON.\u00a0<\/span><\/li>\n\n\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Si seleccionas el m\u00e9todo final, podr\u00e1s encontrar el enlace JSON en el sitio web de Lottie:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"504\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/URL-JSON-Lottie.jpg\" alt=\"URL de JSON en Lottie \" class=\"wp-image-38517 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/URL-JSON-Lottie.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/URL-JSON-Lottie-300x168.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/URL-JSON-Lottie-768x430.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/URL-JSON-Lottie-600x336.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/URL-JSON-Lottie-730x409.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/URL-JSON-Lottie-784x439.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/URL-JSON-Lottie-877x491.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/504;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Una vez que has a\u00f1adido la animaci\u00f3n a tu p\u00e1gina, previsualiza el dise\u00f1o en Gutenberg:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"378\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/pevisulizacion-imagen-lottie.jpg\" alt=\" Previsualizaci\u00f3n de animaci\u00f3n Old man Loading, en Gutenberg.\" class=\"wp-image-38518 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/pevisulizacion-imagen-lottie.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/pevisulizacion-imagen-lottie-300x126.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/pevisulizacion-imagen-lottie-768x323.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/pevisulizacion-imagen-lottie-600x252.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/pevisulizacion-imagen-lottie-730x307.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/pevisulizacion-imagen-lottie-784x329.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/pevisulizacion-imagen-lottie-877x368.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/378;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">En configuraciones de bloque, podr\u00e1s personalizar tu animaci\u00f3n. Por ejemplo, puedes ponerle fondo transparente, cambiar sus dimensiones, o iniciarla con acciones diferentes. Puedes usar tambi\u00e9n el plugin para <\/span><a href=\"https:\/\/www.youtube.com\/watch?v=i2LP34t__Yc\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">que una animaci\u00f3n Lottie sea tu fondo de WordPress<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-metodo-3-anade-tu-animacion-con-html-y-javascript\"><b>M\u00e9todo 3: A\u00f1ade Tu Animaci\u00f3n con HTML y JavaScript<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">A\u00f1adir tu animaci\u00f3n Lottie con HTML y JavaScript es tambi\u00e9n sencillo, aunque sea el m\u00e9todo m\u00e1s complejo de los tres. Adem\u00e1s, no podr\u00e1s ver actualizaciones en tiempo real.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">En cambio, tendr\u00e1s que cambiar entre Gutenberg y tu sitio web para previsualizar cada cambio. Sin embargo, si est\u00e1s <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/aprender-html\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">familiarizado con HTML<\/span><\/a><span style=\"font-weight: 400;\"> y buscas opciones avanzadas de personalizaci\u00f3n, este m\u00e9todo te va a gustar.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Para comenzar, haz clic en la animaci\u00f3n que deseas en la biblioteca LottieFiles y copia el enlace JSON Lottie:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"429\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Enlace-JSON-Lottie-Files.jpg\" alt=\"Enlace JSON en Lottie Files.\" class=\"wp-image-38519 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Enlace-JSON-Lottie-Files.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Enlace-JSON-Lottie-Files-300x143.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Enlace-JSON-Lottie-Files-768x366.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Enlace-JSON-Lottie-Files-600x286.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Enlace-JSON-Lottie-Files-730x348.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Enlace-JSON-Lottie-Files-784x374.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Enlace-JSON-Lottie-Files-877x418.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/429;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Luego, baja hasta ver \u201cUse animation in\u2026\u201d y selecciona <\/span><i><span style=\"font-weight: 400;\">&lt;html&gt;<\/span><\/i><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"323\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Insertando-animacion-Lottie-usando-HTML.jpg\" alt=\"Insertar animaci\u00f3n Lottie usando HTML\" class=\"wp-image-38520 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Insertando-animacion-Lottie-usando-HTML.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Insertando-animacion-Lottie-usando-HTML-300x108.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Insertando-animacion-Lottie-usando-HTML-768x276.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Insertando-animacion-Lottie-usando-HTML-600x215.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Insertando-animacion-Lottie-usando-HTML-730x262.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Insertando-animacion-Lottie-usando-HTML-784x281.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Insertando-animacion-Lottie-usando-HTML-877x315.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/323;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Esto te llevar\u00e1 al Reproductor Web de LottieFiles:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"374\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/previsualizacion-imagenes-lottie-reproductor-web.jpg\" alt=\" Previsualizaci\u00f3n en el Reproductor Web de LottieFiles.\" class=\"wp-image-38521 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/previsualizacion-imagenes-lottie-reproductor-web.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/previsualizacion-imagenes-lottie-reproductor-web-300x125.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/previsualizacion-imagenes-lottie-reproductor-web-768x319.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/previsualizacion-imagenes-lottie-reproductor-web-600x249.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/previsualizacion-imagenes-lottie-reproductor-web-730x303.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/previsualizacion-imagenes-lottie-reproductor-web-784x326.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/previsualizacion-imagenes-lottie-reproductor-web-877x364.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/374;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Aqu\u00ed podr\u00e1s elegir un color de fondo y determinar el tama\u00f1o y velocidad de la animaci\u00f3n, entre m\u00e1s opciones.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Ahora, deselecciona la casilla <\/span><i><span style=\"font-weight: 400;\">Controls <\/span><\/i><span style=\"font-weight: 400;\">y ver\u00e1s c\u00f3digo HTML en la parte baja de la pantalla:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"394\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/codigo-HTML-animacion-Lottie.jpg\" alt=\"C\u00f3digo HTML para tu animaci\u00f3n LottieFiles.\" class=\"wp-image-38522 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-HTML-animacion-Lottie.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/codigo-HTML-animacion-Lottie-300x131.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/codigo-HTML-animacion-Lottie-768x336.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-HTML-animacion-Lottie-600x263.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-HTML-animacion-Lottie-730x320.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-HTML-animacion-Lottie-784x343.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-HTML-animacion-Lottie-877x384.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/394;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\"> <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Copia la l\u00ednea de c\u00f3digo que comienza con \u201c&lt;lottie-player\u201d y termina con &lt;\/lottie-player&gt;\u201d. Luego, en WordPress, a\u00f1ade un nuevo bloque <\/span><i><span style=\"font-weight: 400;\">HTML<\/span><\/i> <i><span style=\"font-weight: 400;\">Personalizado<\/span><\/i><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"377\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Nuevo-bloque-HTML-personalizado-editor-WordPress.jpg\" alt=\"A\u00f1adiendo un nuevo bloque HTML personalizado en el editor de WordPress.\" class=\"wp-image-38523 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Nuevo-bloque-HTML-personalizado-editor-WordPress.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Nuevo-bloque-HTML-personalizado-editor-WordPress-300x126.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Nuevo-bloque-HTML-personalizado-editor-WordPress-768x322.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Nuevo-bloque-HTML-personalizado-editor-WordPress-600x251.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Nuevo-bloque-HTML-personalizado-editor-WordPress-730x306.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Nuevo-bloque-HTML-personalizado-editor-WordPress-784x328.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Nuevo-bloque-HTML-personalizado-editor-WordPress-877x367.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/377;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Pega el HTML de LottieFiles y haz clic en \u2018<\/span><b>Guardar Borrador<\/b><i><span style=\"font-weight: 400;\">\u2019,<\/span><\/i><span style=\"font-weight: 400;\"> en la esquina derecha superior:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"262\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Codigo-HTML-Lottie-bloque-en-WordPress.jpg\" alt=\"Pega el c\u00f3digo HTML Lottie en el bloque HTML en WordPress.\" class=\"wp-image-38524 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Codigo-HTML-Lottie-bloque-en-WordPress.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Codigo-HTML-Lottie-bloque-en-WordPress-300x87.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Codigo-HTML-Lottie-bloque-en-WordPress-768x224.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Codigo-HTML-Lottie-bloque-en-WordPress-600x175.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Codigo-HTML-Lottie-bloque-en-WordPress-730x213.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Codigo-HTML-Lottie-bloque-en-WordPress-784x228.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Codigo-HTML-Lottie-bloque-en-WordPress-877x255.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/262;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Ten en cuenta que solo esto no har\u00e1 que tu animaci\u00f3n funcione. Necesitas cargar el archivo Lottie Player JavaScript en WordPress. Para hacerlo, vuelve al Reproductor Web de LottieFiles y copia la etiqueta de script, que comienza en \u201c&lt;script\u201d y termina con \u201c&lt;\/script&gt;\u201d:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"394\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/codigo-HTML-animacion-Lottie-1.jpg\" alt=\"Archivo Lottie Player JavaScript.\" class=\"wp-image-38526 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-HTML-animacion-Lottie-1.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/codigo-HTML-animacion-Lottie-1-300x131.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/codigo-HTML-animacion-Lottie-1-768x336.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-HTML-animacion-Lottie-1-600x263.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-HTML-animacion-Lottie-1-730x320.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-HTML-animacion-Lottie-1-784x343.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-HTML-animacion-Lottie-1-877x384.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/394;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Ahora, dir\u00edgete a WordPress e instala el <\/span><a href=\"https:\/\/es.wordpress.org\/plugins\/custom-css-js\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Plugin: Simple Custom CSS and JS<\/span><\/a><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"259\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Simple-Custom-CSS-and-JS-plugin.jpg\" alt=\"Instalar el Plugin: Simple Custom CSS and JS.\" class=\"wp-image-38527 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Simple-Custom-CSS-and-JS-plugin.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Simple-Custom-CSS-and-JS-plugin-300x86.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Simple-Custom-CSS-and-JS-plugin-768x221.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Simple-Custom-CSS-and-JS-plugin-600x173.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Simple-Custom-CSS-and-JS-plugin-730x210.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Simple-Custom-CSS-and-JS-plugin-784x226.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Simple-Custom-CSS-and-JS-plugin-877x252.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/259;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Una vez est\u00e9 activo, ve al escritorio del plugin y elige <\/span><i><span style=\"font-weight: 400;\">A\u00f1adir CSS y JS Personalizado<\/span><\/i><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"194\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/codigo-personalizado-Simple-Custom-CSS-and-JS-plugin.jpg\" alt=\"A\u00f1adir c\u00f3digo HTML con el plugin Simple Custom CSS and JS.\" class=\"wp-image-38528 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-personalizado-Simple-Custom-CSS-and-JS-plugin.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/codigo-personalizado-Simple-Custom-CSS-and-JS-plugin-300x65.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/codigo-personalizado-Simple-Custom-CSS-and-JS-plugin-768x166.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-personalizado-Simple-Custom-CSS-and-JS-plugin-600x129.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-personalizado-Simple-Custom-CSS-and-JS-plugin-730x157.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-personalizado-Simple-Custom-CSS-and-JS-plugin-784x169.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/codigo-personalizado-Simple-Custom-CSS-and-JS-plugin-877x189.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/194;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Puedes dar un t\u00edtulo a tu c\u00f3digo como \u201cAgrega Lottie Player\u201d. Luego, pega la etiqueta script en el editor y haz clic en <\/span><i><span style=\"font-weight: 400;\">Publicar<\/span><\/i><span style=\"font-weight: 400;\">:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"306\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Lottie-player-CSS.jpg\" alt=\"A\u00f1adir Lottie Player en WordPress con HTML personalizado.\" class=\"wp-image-38529 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Lottie-player-CSS.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Lottie-player-CSS-300x102.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Lottie-player-CSS-768x261.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Lottie-player-CSS-600x204.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Lottie-player-CSS-730x248.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Lottie-player-CSS-784x267.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Lottie-player-CSS-877x298.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/306;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Ahora, vuelve a la p\u00e1gina donde insertaste tu c\u00f3digo HTML. Deber\u00edas ver tu animaci\u00f3n Lottie cuando cambies a previsualizaci\u00f3n:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"379\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Lottie-con-HTML.jpg\" alt=\"Animaci\u00f3n Lottie a\u00f1adida a WordPress via HTML y JavaScript.\" class=\"wp-image-38530 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Lottie-con-HTML.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Lottie-con-HTML-300x126.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Lottie-con-HTML-768x323.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Lottie-con-HTML-600x253.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Lottie-con-HTML-730x307.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Lottie-con-HTML-784x330.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/Lottie-con-HTML-877x369.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/379;\" \/><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400;\">Si la animaci\u00f3n es muy grande o muy peque\u00f1a, podr\u00e1s cambiar sus par\u00e1metros por defecto en el c\u00f3digo HTML, donde dice <\/span><i><span style=\"font-weight: 400;\">style= \u201cwidth: X; height: X;\u201d.<\/span><\/i><\/p>\n\n\n\n<h2 id=\"h-anade-animaciones-lottie-a-tu-sitio\" class=\"wp-block-heading\"><b>A\u00f1ade Animaciones Lottie a Tu Sitio<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Dado que las im\u00e1genes y videos aparecen por todas partes, incluirlos en tus p\u00e1ginas puede no ser la v\u00eda para que tus dise\u00f1os destaquen entre el mont\u00f3n. Sin embargo, puedes a\u00f1adir animaciones Lottie a tu sitio para impresionar a tus visitantes, reflejar tu marca y mejorar las interacciones.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Para recapitular, hay tres maneras de a\u00f1adir <\/span><a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">animaciones Lottie<\/span><\/a><span style=\"font-weight: 400;\"> a tu sitio:<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">A\u00f1adir animaciones Lottie con oEmbed.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">A\u00f1adir animaciones Lottie usando el plugin <\/span><a href=\"https:\/\/es.wordpress.org\/plugins\/lottiefiles\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Bloque de Lottie para Gutenberg<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">A\u00f1adir animaciones Lottie con HTML y JavaScript.<\/span><\/li>\n\n\n<\/ol>\n\n\n\n<p><span style=\"font-weight: 400;\">Otra manera de hacer que tu sitio web destaque del resto, es dise\u00f1ando p\u00e1ginas personalizadas que sean tan \u00fanicas como tu marca. En DreamHost, podemos construirte un sitio \u00fanico en su especie, <\/span><a href=\"https:\/\/www.dreamhost.com\/blog\/es\/como-optimizar-tu-sitio-dispositivos-moviles\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">amistoso para m\u00f3viles<\/span><\/a><span style=\"font-weight: 400;\">, y optimizado para motores de b\u00fasqueda. \u00a1Revisa ahora nuestros <\/span><a href=\"https:\/\/www.dreamhost.com\/es\/servicios-profesionales\/diseno\/diseno-web-personalizado\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">planes de dise\u00f1o web personalizado<\/span><\/a><span style=\"font-weight: 400;\">!<\/span><span style=\"font-weight: 400;\"><\/span><\/p>\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      Un Hermoso Sitio Web del Cual Est\u00e9s Orgulloso\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Nuestros dise\u00f1adores crear\u00e1n un hermoso sitio web desde cero para que se ajuste perfectamente a tu marca.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/es\/servicios-profesionales\/diseno\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Adquirir Hoy                    <\/a>\n\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Con videos e im\u00e1genes llamativos impresionar\u00e1s a tus visitantes en l\u00ednea. Sin embargo, casi cada sitio web los usa para mejorar la experiencia de usuario (UX). As\u00ed que solo a\u00f1adir estos elementos visuales a tus p\u00e1ginas, no es suficiente para que tu sitio resalte. Afortunadamente, puedes agregar animaciones Lottie a tu sitio para tener una [&hellip;]<\/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":"\u00bfSabes como volver tus p\u00e1ginas m\u00e1s atractivas para tus visitantes? Conoce 3 m\u00e9todos efectivos y f\u00e1ciles de a\u00f1adir animaciones Lottie a tu sitio.","toc_headlines":"[[\"h-los-beneficios-de-anadir-animaciones-lottie-a-tu-sitio\",\"Los Beneficios de A\u00f1adir Animaciones Lottie a Tu Sitio\"],[\"h-como-anadir-animaciones-lottie-a-tu-sitio-3-maneras\",\"C\u00f3mo A\u00f1adir Animaciones Lottie a Tu Sitio (3 Maneras)\"],[\"h-anade-animaciones-lottie-a-tu-sitio\",\"A\u00f1ade Animaciones Lottie a Tu Sitio\"]]","hide_toc":false,"footnotes":""},"categories":[12896,11683],"tags":[],"class_list":["post-38507","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-wordpress-es"],"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>C\u00f3mo A\u00f1adir Animaciones Lottie A Tu Sitio (3 Maneras) - DreamHost<\/title>\n<meta name=\"description\" content=\"\u00bfSabes como volver tus p\u00e1ginas m\u00e1s atractivas para tus visitantes? Conoce 3 m\u00e9todos efectivos y f\u00e1ciles de a\u00f1adir animaciones Lottie a tu sitio.\" \/>\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\/es\/como-agregar-animaciones-lottie\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo A\u00f1adir Animaciones Lottie A Tu Sitio (3 Maneras)\" \/>\n<meta property=\"og:description\" content=\"\u00bfSabes como volver tus p\u00e1ginas m\u00e1s atractivas para tus visitantes? Conoce 3 m\u00e9todos efectivos y f\u00e1ciles de a\u00f1adir animaciones Lottie a tu sitio.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/\" \/>\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:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-16T21:02:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-ES.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\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=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo A\u00f1adir Animaciones Lottie A Tu Sitio (3 Maneras) - DreamHost","description":"\u00bfSabes como volver tus p\u00e1ginas m\u00e1s atractivas para tus visitantes? Conoce 3 m\u00e9todos efectivos y f\u00e1ciles de a\u00f1adir animaciones Lottie a tu sitio.","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\/es\/como-agregar-animaciones-lottie\/","og_locale":"en_US","og_type":"article","og_title":"C\u00f3mo A\u00f1adir Animaciones Lottie A Tu Sitio (3 Maneras)","og_description":"\u00bfSabes como volver tus p\u00e1ginas m\u00e1s atractivas para tus visitantes? Conoce 3 m\u00e9todos efectivos y f\u00e1ciles de a\u00f1adir animaciones Lottie a tu sitio.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-01-04T15:00:38+00:00","article_modified_time":"2025-01-16T21:02:53+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-ES.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":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"C\u00f3mo A\u00f1adir Animaciones Lottie A Tu Sitio (3 Maneras)","datePublished":"2023-01-04T15:00:38+00:00","dateModified":"2025-01-16T21:02:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/"},"wordCount":1417,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","articleSection":["Dise\u00f1o Web","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/","name":"C\u00f3mo A\u00f1adir Animaciones Lottie A Tu Sitio (3 Maneras) - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","datePublished":"2023-01-04T15:00:38+00:00","dateModified":"2025-01-16T21:02:53+00:00","description":"\u00bfSabes como volver tus p\u00e1ginas m\u00e1s atractivas para tus visitantes? Conoce 3 m\u00e9todos efectivos y f\u00e1ciles de a\u00f1adir animaciones Lottie a tu sitio.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/es\/como-agregar-animaciones-lottie\/#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\/es\/como-agregar-animaciones-lottie\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo A\u00f1adir Animaciones Lottie A Tu Sitio (3 Maneras)"}]},{"@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":"es","translations":{"es":38507,"en":38481,"de":57473,"pt":57470,"pl":51785,"uk":57457,"ru":57494,"it":67915,"fr":69417,"nl":69439},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/38507","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=38507"}],"version-history":[{"count":9,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/38507\/revisions"}],"predecessor-version":[{"id":63133,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/38507\/revisions\/63133"}],"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=38507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=38507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=38507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}