Animaciones web: Lottiefiles tutorial

Hola, hoy quiero enseñarte como poner animaciones en una página web de una manera muy sencilla, muy rápida, con la ayuda de una página de animación gratis y los cursos de diseñador web con los que me formé.

Es la que yo utilizo siempre para crear páginas con animaciones, no obstante, si todavía no la has visto puedes echar un vistazo a esta divertida página web.

Índice de contenidos

1.¿Qué son las animaciones web?

2. 3 ventajas de usar animaciones web de LottieFiles.

  • 2.1. Insertar animaciones web en WordPress.
  • 2.2. Es de las mejores páginas de animaciones gratis.
  • 2.3. Es una página de animaciones web fácil de usar.

3.¿Cómo poner animaciones en una página web? Paso a paso

  • 3.1. Lottie free
  • 3.2. Animaciones de Lottie free
  • 3.3. Como usar la animación elegida
  • 3.4. Animación web en HTML

4. ¿Cómo poner animaciones en WordPress con Divi?

5. Consejo y tutorial en vídeo (Con sorpresa extra)

¿Qué son las animaciones web?

Las animaciones web son efectos visuales que crean una sensación de movimiento. Aunque estamos acostumbrados a verlas en diferentes elementos dentro de numerosas páginas web, ya sea en botones, sliders, imágenes…

Pero en este tutorial de Lotties Files en español vamos a ir un paso más allá, porque este tipo de animaciones te permiten contar historias, incluso sirviendo de guía para que el usuario tenga una navegación fácil y divertida dentro de tu web.

3 ventajas de usar animaciones web de Lottie Files

En primer lugar debes saber que seguramente existan muchas otras ventajas de Lottie files, y dependiendo del caso de cada uno, pues valoraremos unas cosas u otras.

Yo he querido compartir contigo tres, que para mí, han sido fundamentales para interesarme por esta herramienta de trabajo.

animaciones movimiento gratis

1. Insertar animaciones web en WordPress

En primer lugar, debes saber que funciona muy bien con nuestro querido WordPress, y también con el tema Divi de elegant themes, que es con el que te mostraré la manera de insertar animaciones dentro de tu página.

2. Es de las mejores páginas de animaciones gratis

Lottie files tienen miles de animaciones gratuitas y también animaciones premium, incluso puedes contratar animadores que crearán animaciones personalizadas para ti.

Puedes elegir animaciones destacadas, populares, recientes, como por ejemplo, imágenes animadas COVID-19.

3. Es una página de animaciones web fácil de usar

Una de las cosas por las que me encanta Lottie files es por ser una página web intuitiva, de fácil navegación y por supuesto se puede traducir al español ¡¡¡No se puede pedir más!!!

¿Cómo poner animaciones en una página web?

Hay varias maneras para poner animaciones en una página web. Puede ser a través de un plugin, a través de una librería enlazando un código, o como vamos a hacer en este tutorial Lottie files, de forma un poco más manual.

Ahora que ya sabes lo que es una animación para páginas web y también como insertarlas, vamos a comenzar con la práctica.

1. Lottie free:

lottiefiles.com – discovery (pestaña superior del menú) – free animations

animaciones gratis lottiefiles wordpress

2. Animaciones de Lottie free

Simplemente haz clic en la animación web que más te guste.

pagina animaciones gratis lottiefiles

3. Como usar la animación elegida

Haz scroll – clic en HTML

codigo html lottiefiles

4. Animación web en HTML

Haz scroll (hasta dónde te indico en la imagen) – desactiva controls – copia código HTML

pagina web lottiefiles

En mi caso desactivo siempre “controls” para que no aparezca la barra que ves debajo de la animación en la imagen. Este paso por supuesto es opcional.

¿Cómo poner animaciones en WordPress con Divi?

Por último, para hacer animaciones en tu WordPress con Divi, tienes que seguir unos sencillos pasos, que no te llevarán más de un minuto.

1. Elige el módulo código de Divi.

2. Pega el código que copiaste anteriormente en la página Lottie files.

3. Guardar cambios y salir del constructor visual.

De esta forma tan sencilla podrás poner animaciones dentro de tu sitio. Por último, debes tener en cuenta que para ver la animación debes salir del constructor visual, no podrás verlo mientras estés dentro del constructor visual de Divi.

modulo codigo divi animaciones lottiefiles

Consejo de amigo

Un último consejo antes de terminar con el tutorial Lottie file y es que no te vuelvas loc@ poniendo animaciones en cada sitio de tu página . En mi caso, he insertado una animación cómo máximo en cada página de mi web.

Te recomiendo

Los mejores cursos

cursos diseñador web
cursos diseñador web

Diseña webs con Divi

Divi WordPress Theme

El mejor hosting

logo siteground

Contacto

disenador creando con david
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad
WhatsApeame
1
Pide presupuesto
¿Estás pensando en crear una web? Me encantaría ayudarte, ¿Hablamos?