Editor X: agregar una interacción preestablecida | Centro de Ayuda

Editor X: agregar una interacción preestablecida

6 min de lectura

El Editor X está en proceso de transición hacia Wix Studio, nuestra nueva plataforma para agencias y freelancers.Más información sobre Wix Studio

Agrega interacciones para crear una experiencia animada a medida que los visitantes hacen clic o pasan el cursor sobre los elementos de tu sitio. ¿Necesitas una animación fácil y rápida? Usa uno de nuestros preajustes (por ejemplo, Agrandar, Mover, Fundir) y modifícalo a tu gusto.

La interacción permite animar el mismo elemento en el que los visitantes hacen clic o sobre el que pasan el cursor, o un elemento diferente de la página. De cualquier manera, tienes el control total del aspecto y de la sincronización, por lo que resulta realmente eficaz.

GIF que muestra cómo se ven las interacciones en un sitio online.

Paso 1 | Agregar un disparador (hacer clic o pasar el cursor)

Para comenzar, selecciona el elemento que activa la interacción. Este es el elemento sobre el que los visitantes pasan el cursor o en el que hacen clic antes de ver la animación. Luego, ve a la pestaña Interacciones en el panel Inspector profesional para agregar una nueva interacción.

Consejo:

Puedes agregar varias interacciones a un elemento, para que active una animación diferente al pasar el cursor o al hacer clic.

Para agregar un disparador:

Selecciona el elemento que debe activar la interacción.
Haz clic en el icono del Inspector profesional en la parte superior del Editor X.
(En el Inspector profesional) Haz clic en la pestaña Interacciones .
Haz clic en + Agregar debajo de Pasar el cursor/Hacer clic.

Captura de pantalla de la pestaña Interacciones en el panel Inspector profesional, donde puedes agregar una nueva interacción

Paso 2 | Configurar una interacción

Después de elegir un elemento y un disparador, configura la interacción. Selecciona una animación prediseñada, el elemento que debe mostrarla y qué sucede exactamente al pasar el cursor o al hacer clic.

Nota:

Las animaciones disponibles varían según el elemento que selecciones.

Para configurar la interacción:

(En el panel Interacción) Elige qué sucede al pasar el cursor o al hacer clic:
- Iniciar animación: al hacer clic o pasar el cursor sobre el elemento, se activa la animación elegida.
- Restablecer animación: al hacer clic o pasar el cursor sobre el elemento, se elimina cualquier animación que se haya aplicado previamente.
- Activar/desactivar: al hacer clic en el elemento, se activa la animación, y un segundo clic la elimina.
  Nota: Esta opción solo está disponible para interacciones de clic.
Selecciona el elemento animado:
- Hacer que el elemento active su propia animación: haz clic en el nombre del elemento (la palabra (mismo ítem) aparece junto a él).
- Animar un elemento diferente en la página: selecciona un elemento del menú desplegable o haz clic en Elegir en lienzo para seleccionarlo en la página.
  Consejo: Mantén pulsada la tecla Cmd/Ctrl para seleccionar un elemento secundario.
Selecciona una animación:
1. Haz clic en la pestaña Preajustes.
2. Elige una animación de la lista.

Captura de pantalla de los ajustes de la interacción en el Inspector profesional, donde se selecciona una animación preestablecida

Consejo:

Al configurar un elemento para que se muestre al hacer clic o al pasar el cursor, este aparece con una superposición de cuadros en el lienzo. Esto es para indicar que el elemento es inicialmente transparente.

Un botón configurado para aparecer al pasar el cursor, que aparece con una superposición de cuadros en el lienzo en el Editor X

Puedes desactivar esta indicación en cualquier momento. Haz clic en Ver en la barra superior y luego en Elementos transparentes.

Paso 3 | (Opcional) Ajustar la animación

Después de elegir la animación que deseas, personalízala para lograr el efecto deseado. Puedes controlar determinados ajustes, como la duración, el retraso y la suavidad, para que la animación sea realmente eficaz.

Para ajustar la animación:

(En el Inspector profesional) Haz clic en Ajustar animación en la parte inferior.
Personaliza a tu gusto los ajustes disponibles:
- Retraso: arrastra el control deslizante para agregar un retraso (en segundos) antes de que comience la animación.
- Duración: arrastra el control deslizante para establecer la duración de la animación (en segundos).
- Aceleración: en el menú desplegable, elige cómo se realiza la animación de entrada y de salida.
- Escalar: elige cuánto aumenta o disminuye el tamaño del elemento.
- Ángulo: cambia el ángulo de movimiento.
- Distancia: haz que el elemento se mueva más lejos o más cerca de su posición predeterminada en la página.
- Dirección: cambia la dirección en la que gira el elemento.
(Opcional) Haz clic en Previsualizar para saber cómo se ve tu animación y realizar ajustes, si es necesario.