Editor de Wix Studio: agregar y personalizar archivos de animación de Lottie
5 min
En este artículo
- Importar animaciones desde LottieFiles
- Cambiar la animación de Lottie
- Configurar la animación para que se reproduzca en bucle
- Agregar texto alternativo a una animación de Lottie
LottieFiles es una excelente fuente de animaciones de alta calidad que puedes agregar a los sitios de tus clientes. Después de importar la animación a través de su URL de JSON, puedes cambiarle el tamaño según sea necesario y decidir si se reproduce en un bucle continuo o no.
Antes de comenzar:
Para importar una animación, debes tener una cuenta de LottieFiles.
Importar animaciones desde LottieFiles
Agrega tantas animaciones de Lottie como necesites para darle vida a tu diseño. Después de guardar una animación en tu espacio de trabajo en LottieFiles, puedes copiar la URL de JSON y pegarla directamente en el Editor de Wix Studio. La animación se agrega al instante como un nuevo elemento de la página.
De manera alternativa, puedes agregar un nuevo elemento de animación de Lottie y pegar la URL correspondiente en el panel de Ajustes.
Importante:
Wix solo es compatible con las URL de Lottie en formato JSON.
Para agregar un elemento de animación de Lottie:
- Haz clic en Agregar elementos a la izquierda del editor.
- Haz clic en Multimedia.
- Haz clic en Lottie.
- Haz clic en el icono Agregar al sitio junto a Animación de Lottie.
- (En una pestaña separada del navegador) Copia la URL de JSON de la animación guardada de tu cuenta de LottieFiles.
- Pega la URL de la animación en el editor:
- Haz clic en el elemento Lottie en el editor.
- Haz clic en el icono Ajustes .
- Pega la URL en ¿Cuál es la URL de la animación?
- Pulsa Enter en tu teclado.
a la izquierda del editor.
junto a Animación de Lottie.
.¿Cuál es el siguiente paso?
Haz clic en Previsualizar animación en la parte superior del panel Ajustes para ver cómo se ve la animación antes de publicarla.
Trabajar con breakpoints:
Puedes personalizar el tamaño de la animación de Lottie por breakpoint, para que se vea ideal en todas las pantallas.
Cambiar la animación de Lottie
Si deseas cambiar a una animación de Lottie diferente, puedes hacerlo fácilmente pegando la nueva URL en el panel de Ajustes del elemento.
Para cambiar la animación:
- Selecciona el elemento de animación Lottie.
- Haz clic en el icono Ajustes .
- Pega la URL de la nueva animación en ¿Cuál es la URL de la animación?
Configurar la animación para que se reproduzca en bucle
Puedes elegir cómo se reproduce la animación de Lottie en el sitio de tu cliente: solo una vez o en un bucle continuo.
Para configurar cómo se reproduce la animación:
- Selecciona el elemento de animación Lottie.
- Haz clic en el icono Ajustes .
- Haz clic en la palanca Repetición continua para activarla o desactivarla.
Agregar texto alternativo a una animación de Lottie
Desde el panel Ajustes, agrega texto alternativo para describir brevemente la animación o el sitio. Esto puede contribuir a mejorar el ranking de SEO a la vez que ayuda a los usuarios con lectores de pantalla a entender lo que muestra la animación.
Para agregar texto alternativo a la animación:
- Selecciona el elemento de animación Lottie.
- Haz clic en el icono Ajustes .
- Desplázate hacia abajo hasta Texto de la animación.
- Ingresa la descripción del texto en Escribe texto alternativo para tu animación.
- Pulsa Enter en tu teclado.
Debes saber lo siguiente:
Solo los archivos de Lottie en formato JSON son compatibles con los sitios de Wix. Por razones técnicas, no se pueden contener todos los campos de los archivos JSON. Por lo tanto, las animaciones de Lottie pueden verse ligeramente diferentes en un sitio Wix online (por ejemplo, se muestra un rango/cantidad de movimiento reducidos).