Editor de Wix: agregar y personalizar una animación
5 min
En este artículo
- Agregar animación a un elemento
- Personalizar una animación
- Agregar animaciones al sitio móvil
Usa animaciones para darle vida a tu sitio. Ofrecemos distintas animaciones para cada aspecto de tu diseño: efectos de entrada, de desplazamiento, de bucle e incluso del cursor.
Puedes personalizar la animación para que se vea exactamente como la imaginaste. Por ejemplo, ajusta la distancia, la duración, el retraso y mucho más. Nuestras animaciones móviles están diseñadas para adaptarse a pantallas más pequeñas, de modo que puedas sorprender a los visitantes en cualquier dispositivo.
Puedes aplicar diferentes animaciones y efectos al mismo elemento.
¿Problemas con la animación?
Sigue nuestros pasos para asegurarte de que funcionen como es de esperar 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 del navegante por la página.
- Efectos del cursor: la animación comienza a moverse cuando el cursor del visitante pasa sobre el elemento.
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.
- Velocidad: arrastra el control deslizante para cambiar la velocidad del efecto; cuanto menor sea el número, más rápido será el efecto.
- Eje de movimiento: determina si el elemento se mueve horizontalmente, verticalmente o en ambos ejes.
- Tipo de animación: elige entre el tipo de animación de entrada, de salida o en bucle al desplazarse.
- Eje del pivote: elige el punto de referencia desde el que el elemento comienza a moverse.
- Estilo de movimiento: selecciona la intensidad del movimiento, como suave o moderado.
Consejo de accesibilidad:
Si este elemento es puramente decorativo, lo que significa que no incluye información importante para los lectores de pantalla, selecciona la casilla de verificación Decorativo en Ajustes 
panel.
panel.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 a tu 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.