Editor de Wix Studio: agregar y personalizar archivos de animación de Lottie
5 min de lectura
Lottie Files es una excelente fuente de animaciones de alta calidad para agregar al sitio de tu cliente. Después de importar la animación a través de su URL, puedes modificar el tamaño según sea necesario y decidir si se reproduce o no en un bucle continuo.
En este artículo, aprende cómo hacer lo siguiente:
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 y pegarla directamente en el Editor de Wix Studio. La animación se agrega de inmediato 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.
Para agregar un elemento de animación de Lottie:
- Haz clic en Agregar elementos
a la izquierda del editor. - Haz clic en Incrustación y redes.
- Haz clic en Animaciones de 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 la animación guardada de tu cuenta de LottieFiles.
- Pega la URL de la animación en el editor:
- Haz clic en el elemento Animación de 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.
¿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 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 Animación Lottie.
- Haz clic en el icono Ajustes .
- Haz clic en la palanca junto a 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 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:
Las animaciones de Lottie se convierten automáticamente a archivos JSON cuando las importas a un sitio de Wix. Por razones técnicas, no es posible contener todos los campos del archivo. Por lo tanto, las animaciones de Lottie pueden verse ligeramente alteradas en un sitio Wix online (por ejemplo, mostrando un rango/cantidad de movimiento reducido).
¿Te ha sido útil?
|