Editor X: agregar y personalizar archivos de animación de Lottie
4 min de lectura
El Editor X está en proceso de transición hacia Wix Studio, nuestra nueva plataforma para agencias y freelancers.Más información sobre Wix Studio
Lottie Files es una amplia fuente de animaciones de alta calidad que puedes agregar a tu sitio del Editor X. Después de importar la animación a través de su URL, puedes cambiar su tamaño según sea necesario y decidir si se reproduce en un bucle continuo.
En este artículo, aprenderás a hacer lo siguiente:
Antes de comenzar:
Para importar una animación, necesitas tener una cuenta de LottieFiles.
Importar animaciones de LottieFiles
Puedes importar tantas animaciones de Lottie como necesites para darle vida a tu diseño. Una vez que agregues un elemento de animación de Lottie al Editor X, pega la URL de la animación en el panel de Opciones para ver cómo se ve en tu página.
Para importar una animación de Lottie:
- Haz clic en Agregar elementos
en la parte superior del Editor X. - Haz clic en Redes e incrustaciones.
- Haz clic en Animación de Lottie.
- Arrastra el elemento de Lottie Embed a la ubicación deseada en tu página.
- (En una pestaña separada) Copia la URL de la animación de LottieFiles:
- Inicia sesión en tu cuenta de LottieFiles.
- Selecciona la animación elegida.
- Haz clic en el icono Copiar
en Lottie Animation URL.
- Pega la URL de la animación en el Editor X:
a. Haz clic en el elemento Lottie Animation en tu Editor.
b. Haz clic en el icono Opciones.
c. Pega la URL en ¿Cuál es la URL de la animación?.
d. Pulsa Enter en tu teclado.
¿Cuál es el próximo paso?
Mira cómo se reproduce tu animación haciendo clic en Previsualizar animación en la parte superior del panel de Opciones.
Trabajar con breakpoints:
Puedes personalizar el tamaño de la animación de Lottie por breakpoint, para que se vea de la mejor forma en cada pantalla.
Cambiar la animación de Lottie
Si deseas cambiar la animación de Lottie, puedes hacerlo fácilmente pegando la nueva URL en el panel de Opciones del elemento.
Para cambiar la animación:
- Haz clic en la animación de Lottie en el Editor X.
- Haz clic en el icono Opciones
. - 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: solo una vez o en un bucle continuo.
Para configurar cómo se reproduce la animación:
- Haz clic en la animación de Lottie en el Editor X.
- Haz clic en el icono Opciones .
- Haz clic en la palanca junto a Reproducción continua para activarla o desactivarla.
Agregar texto alternativo a la animación de Lottie
Desde el panel de Opciones, agrega texto alternativo para describir brevemente la animación de Lottie. Esto puede mejorar el ranking SEO de tu sitio a la vez que ayudas a los usuarios con lectores de pantalla a entender lo que se muestra en la animación.
Para agregar texto alternativo a la animación:
- Haz clic en la animación de Lottie en el Editor X.
- Haz clic en el icono Opciones .
- Escribe o pega la descripción del texto en el campo debajo de Escribe texto alternativo para tu animación.
- Pulsa Enter en tu teclado.
¿Te ha sido útil?
|