En este tutorial aprenderás a insertar animaciones o ilustraciones animadas en tu sitio web creado con divi de manera fácil con Lottie Files una librería para insertar animaciones en tu sitio web creado con divi.
Este tipo de animaciones últimamente están muy de moda que yo mismo me he subido al barco y la he implementado en la página de inicio de este sitio web.
Implementar este tipo de animación es muy fácil, bueno, lo difícil es animar la ilustración en after effects pero implementarla no es nada complicado.
Hay dos o tres maneras de implementar este tipo de animación, se puede a través de un plugin, a través de una librería solamente enlazando un código o bien se puede implementar de forma un poco mas manual. En mi sitio web yo lo he hecho de manera manual, porque a mi me gusta el código, amo el código, pero en este tutorial te mostraré la forma más fácil de implementarla y será a través de un sitio web llamado Lottie Files.
👉 Aquí tienes el enlace a Lottie Files. Es gratis pero debes crearte una cuenta.
👉 Este tutorial es gratis pero si quieres descargar la ilustración animada que he implementado en este sitio, la podrás descargar si te unes a los tutoriales exclusivos. No solo tendrás acceso a este recurso sino a muchos más tutoriales únicos de divi.
¡Así qué te espero dentro!
excelente, yo soy de las personas que trata de buscar tutoriales por toda la red, y sin duda estos han sido los mejores, estoy recien aprendiendo y llevo 5 proyectos de paginas web, debo felicitarlos, jamas escribo en ningun sitio ademas, pero sin duda esta pagina me ha ayudado mucho a realizar todas las paginas que llevo haciendo. muchas gracias.
(sabes lo que mas me gusta, es que primero muestra los resultados luego enseña como hacerlo, es simple pero muy pocos tutoriales lo hacen)
Hola Raúl, muchas gracias por las palabras, me alegra saber que los tutoriales te han resultado útiles, ojalá nunca dejes de seguirnos porque vendrán más y más.. 😊
Hola Amigo. Te saludo desde Argentina.
Te conocí hace muy poco y veo que tienes una calidad muy buena en tus tutoriales, no he visto muchos como tu, felicitaciones.
Ahora te pregunto que puede estar pasando ya que sigo tus instrucciones y no puedo lograr incrustar ninguna animación, desde la pagina de lottiefiles quiero cambiar algunos parámetros y no los cambia en el código, al pegar el código en el modulo me muestra el código en el modulo, no la animación, que puede estar pasando? Gracias por los tutoriales, son muy buenos
Encontré el problema, el traductor me tradujo algunas palabras al castellano y también me generaba espacios en el código, corregí todo esto y funciona perfectamente…
Nuevamente muchas gracias…
Genial Leandro, si muchas veces ocurre eso de las traducciones y nos coloca espacios y cambios de caracteres, por eso siempre es recomendable copiar el código en inglés para no tener problemas.
Qué bueno que lograste solucionarlo amigo. Te mando un abrazo hasta Argentina.
Hola Oscar:
Antes que nada quiero felicitarte por los excelentes tutoriales que realizas, la verdad tienes un don de maestro en la forma en la que eres capaz de trasmitir los conocimientos, realmente he aprendido mucho con tus tutoriales a pesar de ser relativamente nuevo en este mundo de WordPress y DIVI.
Yo tengo una pregunta que necesito me aclares respecto a este tutorial y es la siguiente: ¿ Cómo puedo insertar las animaciones de Lottie manualmente sin copiar el código HTML? esta pregunta deriva dos mas, la primera ¿Qué fichero(json, mp4 o gif) debo descargar para hacerlo de forma manual y como lo hago que no sea de la forma que lo haces en este tutorial? A mi también me gusta el código, amo el código.
Si serías tan amable al menos de explicarme un poco o algunos pasos a seguir.
Soy cubano y un fiel seguidor de tus tutoriales gratis que tienen tremenda calidad, no puedo acceder a los premium pues tengo limitaciones en cuanto a la forma de pago pues acá no usamos tarjetas de las que normalmente se usan para los pagos online.
Muchas gracias por compartir tus conocimientos y sepa que acá tiene un fiel seguidor.
Saludos desde mi Cuba.
Hola Lazaro que tal, muchas gracias y me alegra saber que los tutoriales te están siendo de ayuda.
Para agregar la animación de forma manual necesitamos integrar la librería de lottie js con nuestro sitio. Me podría llevar un tutorial completo explicarlo. Probablemente más adelante lo haga pero por ahora así cómo lo hacemos en este tutorial me parece una excelente forma de integrar la librería.
Pero no te preocupes, si quisieras integrarlo manualmente te recomiendo le des un vistazo a la documentación de esta librería.
Te mando un abrazo Lazaro y sigue adelante. ✌️
Gracias Oscar por tu respuesta. Voy a echar un vistazo al link que me dejaste, te lo agradezco de antemano. Te comento que estuve buscando y encontré que el plugin DIVI SUPREME tiene un módulo Lottie que permite insertar animaciones con solo tener el fichero JSON. De todas formas voy a estudiar la opción que me das. Muchas gracias nuevamente y espero continúes publicando tutoriales que son de gran ayuda para muchos como yo.
Genial Lazaro, seguiremos así. Y sí, divi supreme viene con un módulo para insertar animaciones pero en lo personal prefiero evitar plugins, pero es buena alternativa. Saludos.