Editor de Wix: agregar y personalizar una animación
4 min de lectura
Usa animaciones para darle vida al sitio. Agrega efectos como "Float-in" y "Expand-in" para crear páginas imaginativas y llamativas, y así, atraer la atención de los visitantes hacia el contenido.
Puedes aplicar animaciones a una variedad de elementos e incluso aplicar diferentes efectos al mismo elemento, tanto en la versión de escritorio como en la versión móvil. La animación en tu sitio móvil está configurada para adaptarse a pantallas más pequeñas, para que puedas seguir sorprendiendo a tus visitantes. Más información sobre los efectos de animación en tu sitio para dispositivos móviles
En este artículo, aprenderás cómo hacer lo siguiente:
Agregar animación a un elemento
Agrega animación a los elementos para conseguir que el sitio sea dinámico y atractivo. Cada animación tiene su propio efecto, por lo que puedes mezclarlos con diferentes elementos y dejar una gran impresión en los visitantes.
Para agregar animación:
- Selecciona el elemento correspondiente en el Editor.
- Selecciona el icono Animación
. - Selecciona una animación de las opciones disponibles.
Nota:
Para eliminar los efectos de animación de los elementos, selecciona Animación 
en el elemento y luego selecciona Ninguno 
.
en el elemento y luego selecciona Ninguno .Consejo:
Puedes agregar animación a un grupo de elementos, para ello selecciona el grupo y luego selecciona el icono Animación .
.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.
Para personalizar la animación:
- Selecciona el elemento correspondiente en el Editor.
- Selecciona el icono Animación .
- Selecciona Personalizar y usa las opciones para ajustar tu animación:
- Fuerza: selecciona el menú desplegable y elige la fuerza de la animación cuando se reproduce.
- Dirección: selecciona la dirección desde la que entra la animación, como en el sentido de las agujas del reloj o desde la derecha.
- Distancia: usa el control deslizante para aumentar o disminuir la distancia entre el punto de inicio y finalización 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.
- Solo animar la primera vez: arrastra la palanca para habilitar/deshabilitar que la animación sólo se muestre la primera vez que se cargue la página.
Nota:
Las opciones de personalización disponibles dependen de la animación que elijas.
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:
Si deseas que un elemento esté animado tanto en la versión de escritorio como en la versión móvil de tu sitio, debes agregar el efecto en ambos editores. Los efectos de animación que has agregado en la versión de escritorio no se transfieren a tu sitio móvil, ya que están optimizados para diferentes tamaños de pantalla.
Para agregar animación en la versión móvil:
- Ve al Editor móvil.
- Selecciona el elemento correspondiente.
- Selecciona el icono Animación .
- Selecciona una animación de las opciones disponibles.
Importante:
- Las animaciones agregadas a los elementos en el encabezado solo se muestran cuando el elemento se carga por primera vez.
- Si un elemento se oculta o se muestra con Velo, sus animaciones también deben configurarse a través de Velo. Más información sobre los elementos de Velo (enlace en inglés)
¿Problemas con la animación?
Sigue estos pasos para asegurarte de que funcionan en tu sitio online como es de esperar.
¿Te ha sido útil?
|