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.
Se nos abrirá una ventana nueva y en ella personalizaremos los ajustes de nuestra imagen animada.
- Play mode: Desde este ajuste definimos si la reproducción es normal o si al finalizar la reproducción debe reproducirla hacia atrás.
- Direction: Elige si quieres reproducirla de alante a hacia atrás o de atrás hacia adelante.
- Background color: Definimos el color del fondo
- Width y Height: Definimos el ancho y el alto de la animación en px o en porcentaje.
- Animation speed: Desde aquí ajustamos la velocidad de reproducción.
- Controls: Habilitaremos esta opción si queremos que aparezcan los controles de reproducción.
- Autoplay: Habilitaremos esta opción si queremos que la animación arranque al cargarse en la web.
- Hover: Habilitaremos esta opción si queremos que la animación arranque cuando el ratón pase por encima.
- 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.
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.
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.
