Editor de Wix: usar animaciones y efectos de desplazamiento en la versión móvil de tu sitio

4 min de lectura
Los efectos de animación y desplazamiento llaman la atención sobre elementos y contenidos importantes de tu sitio, a la vez que aportan una experiencia divertida para los visitantes. 
Las animaciones móviles se han seleccionado para tu sitio móvil y están optimizadas para adaptarse a tamaños y resoluciones de pantalla más pequeños, por lo que no tienes que preocuparte por el espaciado o la alineación de tu sitio. También puedes agregar efectos de desplazamiento geniales al fondo de tus franjas, columnas y secciones, para resaltar el contenido importante para los visitantes que entran a tu sitio desde dispositivos móviles.
En este artículo, aprenderás cómo hacer lo siguiente:
Importante:
Las animaciones de escritorio y móviles son funciones separadas. Esto significa que las animaciones que agregas a los elementos de tu sitio de escritorio no afectan a tu sitio móvil, y viceversa. Si no configuras una animación en tu sitio móvil, no se muestra ninguna animación. Más información sobre las animaciones en la versión de escritorio

Agregar una animación a tu sitio móvil

Agrega un efecto de animación a tus elementos para darles vida. Hay 14 efectos específicos para dispositivos móviles para elegir, por lo que puedes agregar una animación que se adapte a tu estilo.

Para agregar animación a un elemento:

  1. Haz clic en el elemento correspondiente en el Editor móvil.
  2. Selecciona el icono Animación  .
  3. Selecciona una animación de las opciones disponibles.
Consejos:
  • Pasa el cursor sobre un efecto en el panel para ver una vista previa de la animación.
  • Haz clic en Ninguno en el panel Animación para eliminar el efecto de animación de tu elemento.

Personalizar la animación en tu sitio móvil

Después de elegir una animación para tu elemento, personalízala para crear un efecto único que genere un impacto. Dependiendo de la animación que elijas, ajusta la configuración como el retraso, la dirección y el tiempo.

Para personalizar la animación:

  1. Haz clic en el elemento.
  2. Selecciona el icono Animación  .
  3. Haz clic en Personalizar y ajusta la animación:
    • Fuerza: elige la fuerza del efecto en el menú desplegable.
    • Dirección: selecciona la dirección desde la que entra la animación.
    • Duración: elige cuánto tiempo se reproduce la animación (en segundos).
    • Retraso: establece el retraso (en segundos) entre la carga de la página y la reproducción de la animación.
    • Solo animar la primera vez: haz clic en la palanca para elegir cuándo se reproduce la animación:
      • Activada: la animación solo se reproduce la primera vez que se carga la página.
      • Desactivada: la animación se reproduce cada vez que la página se carga desde la misma pestaña.
GIF que muestra el panel de opciones de animación en el Editor móvil. El cursor hace clic en el botón de reproducción para previsualizar la animación.
Consejo:
Haz clic en el icono Reproducir en la parte superior del panel para ver cómo se ve el efecto en tu sitio online.
¿Las animaciones no se reproducen en tu sitio online?
Tu dispositivo puede tener habilitada una función de movimiento reducido. Más información sobre la función de movimiento reducido y otras posibles causas de problemas de animación

Agregar efectos de desplazamiento a la versión móvil de tu sitio

Agrega efectos de desplazamiento llamativos a los fondos de las franjas, columnas y secciones de tu sitio móvil. Los efectos no aparecen en tu sitio de escritorio, por lo que puedes crear una experiencia personalizada para los visitantes de dispositivos móviles.

Para agregar un efecto de desplazamiento solo para dispositivos móviles:

  1. Haz clic en la franja, columna o sección en tu Editor móvil.
  2.  Haz clic en el icono de animación .
  3. (Para franjas y columnas) Selecciona Efecto de desplazamiento en el menú desplegable.
  4. Selecciona el efecto de desplazamiento elegido en el panel. Mira los efectos de desplazamiento disponibles
Debes tener en cuenta lo siguiente:
  • No es posible agregar tanto una animación como un efecto de desplazamiento de fondo a la vez a una franja o columna.
  • Solo es posible agregar efectos de desplazamiento de fondo a las secciones, ya que otros efectos de animación en las secciones no son compatibles.
  • No es posible agregar efectos a las franjas que contienen columnas. Sin embargo, puedes agregar una animación de entrada o un efecto de desplazamiento de fondo a las columnas.
Nota:
Las opciones de efectos de desplazamiento disponibles dependen del tipo de fondo (color, imagen o video).

¿Te ha sido útil?

|