Inicio

Tu regalo

Cursos

Servicios

Blog

Contacto

Llámame

608283891

Escríbenos

info@creandocondavid.com

Sígueme

Hola, hoy quiero enseñarte como poner animaciones una página web de una manera muy sencilla, muy rápida, con la ayuda de una página de animación gratis.

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

Página wen de animaciones

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

2. Animaciones de Lottie free:

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

Imágenes populares lottiifiles

3. Como usar la animación elegida:

Haz scroll – clic en HTML

Elección en HTML

4. Animación web en HTML:

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

Copiar código HTML de animación

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.

Módulo código de Divi

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.

Dime tu mejor email para enviarte tu regalo

* Para cumplir con la nueva Ley de Protección de Datos y que tus datos estén a salvo, debes leer y aceptar mis condiciones legales.

Responsable: David Gómez Jaime
Finalidad de los datos: Responderte al mensaje que me envíes a través del formulario.
Legitimación: Tu consentimiento de que quieres comunicarte conmigo.
Almacenamiento de los datos: Base de datos alojada en Siteground
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

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 sus datos para estos propósitos. Más información
Privacidad
Abrir chat
1
¡HOLA! soy David, consúltame y te ayudaré encantado.