Editor de Wix Harmony: agregar y personalizar una animación
5 min
En este artículo
- Agregar una animación a un elemento
- Personalizar una animación
- Agregar animaciones a la versión de tu sitio para dispositivos móviles
Este artículo hace referencia al nuevo Editor de Wix Harmony, lanzado en enero de 2026. Si no tienes la certeza de si estás usando el Editor de Wix Harmony o el Editor de Wix, obtén más información aquí.
Dale vida a tu sitio con animaciones que añadan movimiento y dinamismo a tu diseño. Elige entre opciones como efectos de entrada en la ventana gráfica, de desplazamiento, de bucle y efectos del cursor, según cuándo quieras que aparezca la animación.
Personaliza cada animación para crear el diseño exacto que deseas, ajustando opciones como la distancia, la duración y el retraso para que concuerden con tu visión. Todas las animaciones para dispositivos móviles están diseñadas para pantallas más pequeñas, por lo que tu sitio se verá impresionante en cualquier dispositivo.
¿Sabías lo siguiente?
Puedes aplicar diferentes animaciones y efectos al mismo elemento.
Agregar una animación a un elemento
Agrega movimiento y energía a tu sitio al aplicar animaciones a tus elementos. Elige entre una variedad de efectos para darle vida a cada parte de tu página y crear una experiencia inolvidable para quienes visitan tu sitio.
Para agregar una animación:
- Ve a tu editor.
- Haz clic en el elemento correspondiente.
- Haz clic en el icono Animación
en la barra de acciones. - Selecciona una animación de las opciones disponibles.
- Entrada: la animación presenta un elemento en la pantalla y solo se reproduce una vez, cuando el elemento aparece por primera vez.
- Bucle: la animación se reproduce en un bucle continuo.
- Desplazar: la animación se reproduce cuando alguien se acerca al elemento mientras se desplaza hacia arriba y hacia abajo por la página.
- Efectos del cursor: la animación se activa cuando el cursor de quien visita la página pasa sobre el elemento.
Nota:
Los elementos del encabezado se animarán solo una vez, la primera vez que la persona visita la página.
Personalizar una animación
Una vez que hayas agregado una animación a un elemento, personalízala para que coincida con el diseño de tu sitio. Ajusta opciones como la fuerza, la dirección y el retraso para crear el efecto exacto que deseas y lograr generar interés en tu contenido.
Nota:
Las opciones de personalización disponibles dependen de la animación que elijas.
Para personalizar la animación:
- Ve a tu editor.
- Selecciona el elemento correspondiente.
- Haz clic en el icono Animación en la barra de acciones.
- (Si aún no lo has hecho) Selecciona una animación de las opciones disponibles.
- Haz clic en Personalizar para ajustar la animación elegida:
- Fuerza: haz clic en el menú desplegable para seleccionar qué tan fuerte 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 de finalización del efecto.
- Duración: usa el control deslizante para ajustar durante cuánto tiempo quieres que se reproduzca la animación.
- Retraso: usa el control deslizante para aumentar o disminuir el retraso entre la carga de la página y el inicio de la animación.
- Velocidad: arrastra el control deslizante para cambiar la velocidad del efecto; cuanto menor sea el valor, más rápido será el efecto.
- Eje de movimiento: decide si el elemento se mueve horizontalmente, verticalmente o en ambos ejes.
- Tipo de animación: elige entre el tipo de animación de entrada, salida o al desplazarse.
- Pivote: elige el punto de referencia desde el cual el elemento comienza a moverse.
- Estilo de movimiento: selecciona la intensidad del movimiento, como suave o moderado.
Agregar animaciones a la versión de tu sitio para dispositivos móviles
Puedes agregar animaciones a la versión de tu sitio para dispositivos móviles, al igual que en la versión para dispositivos de escritorio, para que quienes lo visiten disfruten de una experiencia atractiva desde cualquier tipo de dispositivo. Las animaciones para dispositivos móviles están diseñadas especialmente para pantallas y resoluciones más pequeñas, de modo que todo encaje perfectamente sin necesidad de configuraciones complejas adicionales.
Nota:
Las animaciones que agregues para dispositivos de escritorio también aparecerán en tu sitio para dispositivos móviles, pero puedes elegir una animación diferente para dispositivos móviles (o desactivarla) sin cambiar la animación de los dispositivos de escritorio.
Para agregar una animación en dispositivos móviles:
- Ve a tu editor.
- Haz clic en el icono Móvil
en la esquina superior derecha de la página. - Haz clic en el elemento correspondiente.
- Haz clic en el icono Animación
en la barra de acciones. - Selecciona una animación de las opciones disponibles.
