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
Cómo crear un menu vertical con Elementor

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

Una de las características que caracteriza a WordPress es su gran versatilidad para llevar a cabo una tarea. Si en nuestro anterior post explicábamos la creación de un menú vertical con Astra pro y Ultimate addons for Elementor, hoy os enseñaremos cómo crear un menú

booster for woocommerce

Booster for Woocommerce, el jetpack para tu tienda online

Con más de 50.000 instalaciones activas, Booster for Woocommerce se presenta como uno de los paquetes más completos para añadir funciones a tu tienda online. Booster for Woocommerce es un plugin freemium que podrás encontrar en el repositorio oficial de WordPress y ofrece la posibilidad

Cómo crear perfiles de usuariosen Wordpress

Cómo crear perfiles de usuarios en WordPress

Una de las situaciones más comunes en las que nos podemos encontrar teniendo una página web es que la gestión de ella misma sea llevada por un grupo de personas con diferentes tareas asignadas. No es necesario que todos los usuarios tengan acceso a todo el

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