Editor de Wix: agregar y personalizar una animación
4 min de lectura
Usa animaciones para darle vida a tu sitio. Agrega efectos como "Flotar" y "Expandir" para crear páginas creativas e impactantes. Puedes elegir cómo y cuándo se reproducen las animaciones: solo una vez, al desplazarse, en bucle y más.
Puedes aplicar animaciones a una variedad de elementos e incluso usar diferentes efectos en un mismo elemento tanto en la versión de escritorio de tu sitio como en la versión móvil. Nuestras animaciones para dispositivos móviles están diseñadas para adaptarse a pantallas más pequeñas, por lo que puedes sorprender a tus visitantes en cualquier dispositivo.
En este artículo, aprenderás cómo hacer lo siguiente:
¿Problemas con la animación?
Sigue nuestros pasos para asegurarte de que funcionen como se espera en tu sitio online.
Agregar animación a un elemento
Haz que tu sitio se vea dinámico y resulte atractivo al agregar una animación a los elementos. Cada animación tiene su propio efecto diferente, por lo que puedes combinarlas con diferentes elementos y crear un efecto impactante.
Consejo:
Puedes agregar animación a un grupo de elementos, para ello selecciona el grupo y luego selecciona el icono Animación 
.
.Para agregar animación:
- Haz clic en el elemento correspondiente en el editor.
- Haz clic en el icono de Animación .
- Selecciona una animación de las opciones disponibles.
- Entrar en la ventana gráfica: la animación solo se reproduce una vez cuando el elemento seleccionado aparece en la pantalla.
- Bucle: la animación se reproduce continuamente en bucle.
- Desplazar: la animación se reproduce cuando el elemento se muestra debido al desplazamiento.
Nota:
Los elementos del encabezado se animarán solo una vez, durante la primera visita a la página.
Personalizar una animación
Después de agregar animación a un elemento, puedes personalizarlo para que se comporte como quieras y se adapte a la sensación del sitio.
Ajusta las opciones como la fuerza, la dirección y el retraso para causar impacto y atraer a los visitantes.
Nota:
Las opciones de personalización disponibles dependen de la animación que elijas.
Para personalizar la animación:
- Haz clic en el elemento correspondiente en el editor.
- Haz clic en el icono de Animación .
- Haz clic en Personalizar y usa las opciones para ajustar tu animación:
- Fuerza: haz clic en el menú desplegable para seleccionar qué tan potente es la animación cuando se reproduce.
- Dirección: selecciona desde qué dirección entra la animación (por ejemplo, en el sentido de las agujas del reloj, desde la derecha).
- Distancia: usa el control deslizante para cambiar la distancia entre el punto de inicio y el punto final del efecto.
- Duración: arrastra la barra para ajustar la cantidad de tiempo que deseas que se reproduzca la animación.
- Retraso: arrastra el control deslizante para aumentar o disminuir el retraso entre la carga de la página y el comienzo de la animación.
- Tipo de animación: elige entre el tipo de animación de entrada, de salida o en bucle al desplazarse.
- Estilo de movimiento: selecciona la intensidad del movimiento, como suave o moderado.
Agregar animaciones al sitio móvil
Además de agregar animación a los elementos de la versión web del sitio, también puedes agregarlos a la versión móvil para que tus visitantes obtengan una excelente experiencia de navegación desde todos sus dispositivos.
Las animaciones para dispositivos móviles se han diseñado específicamente para resoluciones y tamaños de pantalla más pequeños, por lo que no tienes que preocuparte por el espacio.
Nota:
Los efectos de animación que agregas en la versión de escritorio no se transfieren a la versión móvil del sitio, ya que están optimizadas para diferentes tamaños de pantalla. Si quieres que un elemento también tenga animación en la versión móvil, sigue los pasos a continuación.
Para agregar animación en la versión móvil:
- Ve al editor móvil.
- Haz clic en el elemento correspondiente.
- Haz clic en el icono Animación .
- Selecciona una animación de las opciones disponibles.
Nota importante para Velo:
Si estás usando Velo (código) para ocultar o mostrar un elemento, su animación también debe configurarse a través de Velo.
¿Te ha sido útil?
|