Como insertar animaciones en Wordpress

Cómo insertar animaciones en WordPress

Una muy buena opción para dotar a tu web del dinamismo y enriquecer el diseño es mediante la inserción de animaciones. En este post te vamos a explicar cómo insertar animaciones en WordPress con y sin plugins. 

Índice de contenidos

Qué és lottie files

Lottie files es un banco de imágenes animadas en la que se nos permite personalizar e insertar las imágenes de diferentes formas. Algunas de las opciones de personalización que nos ofrece son las de definir la velocidad de reproducción, definir colores o diferentes formatos de inserción en nuestra página.

Aquí algunos ejemplos de las animaciones que podemos encontrar

Cómo añadir animaciones a WordPress sin plugin

Para nuestro ejemplo vamos a crear una estructura de columnas en la que haremos que la animación aparezca al lado de un texto.

Para ello accedemos a la página donde queremos insertar nuestra animación y creamos una estructura de 2 columnas al 50% del ancho y en la columna de la izquierda insertamos nuestro texto de ejemplo y en la derecha insertamos la animación.

Animaciones en WordPress
¿Cómo insertamos la animación? Pues lo prímero que debemos hacer es ir a la web lottiefiles.com , buscamos y seleccionamos la animación que nos interese y clicamos sobre la etiqueta HTML.
animaciones lottie html

Se nos abrirá una ventana nueva y en ella personalizaremos los ajustes de nuestra imagen animada.

  1. Play mode: Desde este ajuste definimos si la reproducción es normal o si al finalizar la reproducción debe reproducirla hacia atrás.
  2. Direction: Elige si quieres reproducirla de alante a hacia atrás o de atrás hacia adelante.
  3. Background color: Definimos el color del fondo
  4. Width y Height: Definimos el ancho y el alto de la animación en px o en porcentaje.
  5. Animation speed: Desde aquí ajustamos la velocidad de reproducción.
  6. Controls: Habilitaremos esta opción si queremos que aparezcan los controles de reproducción.
  7. Autoplay: Habilitaremos esta opción si queremos que la animación arranque al cargarse en la web.
  8. Hover: Habilitaremos esta opción si queremos que la animación arranque cuando el ratón pase por encima.
  9. Loop: Habilitaremos esta opción si queremos la reproducción de la animación sea infinita.

Una vez personalizado copiaremos el script que aparece al final de la página (recuadro rojo de la imagen) y nos volveremos a nuestra web.

lottiefiles WordPress

En nuestra columna de la derecha insertamos un bloque de html personalizado y pegamos el script, guardamos los cambios y ya tenemos insertada nuestra animación.

insertar animaciones lottie sin plugins

Puedes dar un repaso a todo lo que hemos explicado en el siguiente vídeo.

Cómo añadir animaciones lottie con Elementor pro

Una de las nueva funcionalidades que trae la última versión de Elementor pro es la inserción de animaciones lottie. En el siguiente vídeo te explicamos todos los pasos para insertarlas y personalizarlas.

Bien, pues ya te hemos explicado cómo insertar animaciones en WordPress con y sin plugins. Si tienes alguna duda puedes dejarla en comentarios.

¿Tienes interés en que creemos un tutorial sobre algún tema específico de Elementor?

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
Crear menú vertical con Wordpress

Cómo crear un menú vertical en WordPress con Astra

En ocasiones, ya sea por una cuestión de diseño o por una necesidad estructural de la web necesitamos alternativas a la típica estructura de menú. Una de esas opciones es la de estructurar nuestro menú de forma vertical. En este post os explicaremos cómo crear

efectos visuales para Elementor

Cómo crear 5 efectos visuales para Elementor

En el tutorial de hoy os vamos a explicar cómo crear 5 efectos visuales para Elementor, esperamos que os gusten. Índice de contenidos Efecto post-it con Elementor Para no confudiros y no caer en errores estar atentos en los ajustes de secciones y columnas. Las

Mejorar imágenes para Wordpress

Cómo optimizar imágenes para tu página web

Un elemento que da mucho valor a nuestras paginas o entradas de blog son las imágenes. Hacer uso de una buena imagen en nuestras publicaciones incorpora un número de características que le añaden un valor añadido: Mejoran el SEO: Mediante el uso de las etiquetas

Suscríbete a nuestro blog

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.

Deja un comentario

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

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Ir arriba