Da vida a las
cajas, a los
repetidores y a los elementos al agregar interacciones con efecto cursor. Estos son efectos que los visitantes ven al pasar el cursor sobre los elementos que eliges.
Haz que los elementos aparezcan o desaparezcan, agrega efectos y cambia los colores pasando el cursor por encima. También puedes controlar el tiempo de los efectos para maximizar su potencial.
Paso 1 | Agregar y diseñar un elemento
Las interacciones con efecto cursor agregan diversión y movimiento a tu sitio web. Para comenzar, agrega una caja o un repetidor desde el panel Agregar.
Haz clic en una de las siguientes opciones para obtener más información sobre cómo agregar cada elemento:
- Haz clic en el icono Agregar
a la izquierda del Editor. - Haz clic en Cajas.
- Haz clic o arrastra una caja para agregarla a la página.
Consejo: Si prefieres usar una caja interactiva prediseñada, haz clic en Cajas + efecto cursor y selecciona la que te guste. - (Opcional) Diseña tu caja y agrega elementos según sea necesario.
- Haz clic en el icono Agregar a la izquierda del Editor.
- Haz clic en Listas.
- Haz clic en Repetidores.
- Arrastra o haz clic sobre un repetidor para agregarlo a la página.
- (Opcional) Diseña tu repetidor y agrega elementos según sea necesario.
Paso 2 | Acceder al modo Efecto cursor
Después de agregar y modificar el elemento, accede al modo Efecto cursor para comenzar a agregar interacciones. Aquí es donde controlas lo que ven los visitantes mientras pasan el cursor sobre la caja o el repetidor.
- Selecciona tu caja/repetidor en el Editor.
- Dependiendo de tu elemento, haz lo siguiente para acceder al modo al pasar el cursor:
- Caja: haz clic en el icono Interacción con efecto cursor añadida
. - Repetidor: haz clic en cualquier contenedor del repetidor y selecciona el icono Interacción con efecto cursor añadida .
- Haz clic en Empieza.
Paso 3 | Agrega interacciones con efecto cursor a tu elemento
Desde el modo Efecto cursor, puedes hacer que los elementos aparezcan o desaparezcan, y agregar efectos geniales. Todo sucede simultáneamente cuando los visitantes pasan el cursor sobre la caja o el elemento del repetidor.
Elige qué acción deseas realizar:
Agregar elementos que aparecen al pasar el cursor
- Haz clic en el icono Agregar en el efecto cursor
en la parte superior izquierda para agregar elementos que aparezcan al pasar el cursor. - Haz clic en el elemento que deseas agregar a la caja o al repetidor.
Nota: No todos los elementos están disponibles para ser agregados al modo Efecto cursor.
Ocultar elementos al pasar el cursor
Para hacer que un elemento desaparezca cuando los visitantes pasan el cursor sobre él:
- Selecciona el elemento y presiona Eliminar en tu teclado o haz clic en el icono Ocultar
.
Nota: Puedes ocultar elementos específicos, u ocultar la caja o el repetidor de forma completa. - Haz clic en el icono Ocultar en el efecto cursor
en la parte superior izquierda, para acceder y administrar la lista de elementos ocultos.
Elige un efecto al pasar el cursor para un elemento
Puedes agregar un efecto a cualquier elemento de tu caja o elemento repetidor, incluido el elemento de caja/repetidor en sí. Haz que los elementos crezcan, se reduzcan, giren o se desvíen hacia un lado.
Para elegir un efecto:
- Selecciona la caja o el repetidor en el Editor.
- Haz clic en Elegir efecto.
- Selecciona un efecto de las opciones disponibles.
Consejo: Elige el efecto Combo para combinar varios efectos. Por ejemplo, puedes hacer que el elemento crezca y gire al mismo tiempo. - (Opcional) Haz clic en Personalizar para adaptar el efecto a tus necesidades.
Después de seleccionar un efecto para un elemento, configura el tiempo en el que deseas que aparezca.
Para configurar el tiempo:
- Selecciona el elemento en el Editor.
- Haz clic en Sincronización icono
. - Usa las opciones disponibles para establecer el tiempo del efecto:
- Duración: arrastra el control deslizante para elegir la duración (en segundos) del efecto después de que los visitantes pasen el cursor sobre el elemento.
- Demora: arrastra el control deslizante para seleccionar cuánto tiempo demora (en segundos) el efecto en mostrarse desde el momento en que los visitantes pasan el cursor por encima del elemento.
- Aceleración: elige la forma en que el elemento debe pasar de su estado normal al efecto, después de que los visitantes pasen el cursor sobre él (por ejemplo, que entre y salga del efecto de forma lenta).
Cambiar el diseño de una caja al pasar el cursor
Puedes editar el diseño de la caja en el modo Efecto cursor para cambiar el color del fondo, el borde, las esquinas y la sombra.
Nota: Esto está disponible solo para cajas contenedoras y no para los repetidores.
Para editar el diseño de la caja al pasar el cursor:
- Haz clic en la caja en el Editor para seleccionarla.
- Haz clic en la pestaña Efecto cursor en la parte superior de la caja.
- Haz clic en el icono Diseño
. - Selecciona la pestaña correspondiente a la izquierda del panel para editar el diseño:
- Color y opacidad: arrastra el control deslizante para ajustar la opacidad del fondo y haz clic en la caja de color para editar el color.
- Borde: haz clic en la caja de color para editar el color y arrastra los controles deslizantes para ajustar la Opacidad y color, y el Ancho del borde.
- Esquinas: selecciona una esquina para ajustar la forma redondeada de la misma. Haz clic en el icono Enlace para lograr que todas las esquinas sean iguales.
- Sombreado: activa la palanca para habilitar una sombra y luego editar su ángulo, distancia, tamaño y más.
