Cerrar video

Cómo agregar animaciones de lottie files en sitio web creado con divi

por | Jul 25, 2020 | Tutorial gratuito, Tutorial premium | 9 Comentarios

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!

Este tutorial es premium

Accede a éste y más tutoriales exclusivos de la Academia OV DIVI por tan sólo $8.00 USD al mes y saca el máximo provecho del mejor tema y constructor visual para WordPress.

Tutoriales Relacionados

9 Comentarios

  1. Raul Meza

    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)

    Responder
    • Oscar Viedma

      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.. 😊

      Responder
  2. Leandro

    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

    Responder
    • Leandro

      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…

      Responder
      • Oscar Viedma

        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.

        Responder
  3. Lazaro

    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.

    Responder
    • Oscar Viedma

      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. ✌️

      Responder
      • Lazaro

        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.

        Responder
        • Oscar Viedma

          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.

          Responder

Trackbacks/Pingbacks

  1. Cómo crear un increíble efecto de glassmorfismo (glass morphism) con divi - OV DIVI - […] > Sitio web Lottie Files > Tutorial Lottie Files Divi > Tutorial Tilt.js […]

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest