Eventos e interacciones del editor de páginas

La pestaña Eventos (título del panel: Interactividad de elementos) te permite definir cuándo ocurre algo en tu sitio web en vivo y qué cambia en la página: menús que se abren, secciones que aparecen progresivamente al desplazarse, mosaicos de galería que se atenúan al pasar el cursor por encima, desplazamiento suave hasta los anclajes y un sutil efecto de paralaje. Esto no es el Gestor de eventos (talleres y entradas); forma parte de los editores de páginas y de plantillas de encabezado/pie de página.

Configúralo desde la barra lateral derecha: Editar → Eventos, con un bloque, una fila, una columna o una sección seleccionados. Consulta Barra lateral y barra de herramientas del editor de páginas para ver el diseño completo de la barra lateral.

Qué puedes hacer (resumen de funcionalidades)

Funcionalidad	Cómo activarla
Revelaciones activadas por desplazamiento	Entrar en el área de visualización + Añadir clase (combinarlo con transiciones CSS en Estilo o en el CSS del tema)
Interfaz de usuario activada por clic	Hacer clic + Alternar clase, Mostrar, Ocultar o Desplazarse hasta — funciona en teléfonos (a diferencia de los efectos que solo se activan al pasar el cursor)
Efecto al pasar el cursor al estilo galería	Al pasar el cursor al entrar / Al pasar el cursor al salir + Aténuación / Deshacer atenuación o Destacar / Quitar destaque en los contenedores de mosaicos
Toques finales durante la carga	Al cargarse (montarse) + Añadir clase o Mostrar cuando se inicializa la página
Estados de foco	Foco / Desenfoque + Añadir clase o Quitar clase en controles enfocables
Movimiento	Paralaje (desplazamiento o puntero) y Deslizamiento de desplazamiento (escala/opacidad vinculadas al progreso) con intensidad limitada
Control entre elementos	Aplicar acción a → Otro elemento (selector CSS) para activar o desactivar un panel distante (p. ej., `#mobile-menu`)

ArtInStack almacena las interacciones como datos declarativos en el elemento (no como scripts arbitrarios). Un pequeño entorno de ejecución incluido en la lista de permitidos en las páginas publicadas aplica tus reglas de forma segura después de que guardes la página.

Cómo funciona

[Selecciona un elemento en el lienzo]
        → Pestaña «Eventos»: Evento (desencadenante) + Acción + Aplicar acción a
        → Guardar página → Publicar (cuando esté listo)
        → El sitio en vivo ejecuta las interacciones en el contenido de esa página

Cada interacción ocupa una fila en la lista:

Evento: cuándo se activa (las etiquetas de la interfaz de usuario que aparecen a continuación coinciden con el menú desplegable del editor).
Acción: lo que ocurre (activar/desactivar una clase, desplazarse, atenuar elementos hermanos, etc.).
Aplicar acción a: este elemento, otro elemento (selector CSS) o elementos hermanos (para ajustes preestablecidos de pasar el cursor sobre la cuadrícula).
Ejecutar una vez (opcional): para clics y revelaciones en el área de visualización, se activa solo la primera vez.

Puedes apilar varias interacciones en el mismo elemento (por ejemplo, Al cargarse → añadir una clase «ready», y luego Clic → activar/desactivar un menú).

Pestaña «Eventos»: desencadenantes y acciones

El editor solo ofrece pares válidos de desencadenante + acción. Si una acción aparece en gris o no aparece, cambia primero el Evento.

Eventos (desencadenantes)

Evento (etiqueta de la interfaz de usuario)	Ideal para
Clic	Botones, tarjetas, menús: utilízalo para cualquier acción que los visitantes deban realizar en el móvil
Al cargarse (mount)	Estado inicial al cargarse la página (clase «ready», mostrar una banda)
Entrar en el área de visualización (revelación al desplazarse)	Aparición gradual o deslizamiento a medida que el visitante se desplaza (utiliza la intersección del área de visualización, no detectores de desplazamiento sin procesar)
Entrada al pasar el cursor / Salida al pasar el cursor	Mejoras para ordenador de sobremesa: combina siempre la salida con la entrada
Enfoque / Desenfoque	Campos de formulario y controles enfocables (`tabindex` en divs personalizados si es necesario)
Movimiento del puntero (continuo)	Efecto de paralaje vinculado al cursor (limitado; respeta el movimiento reducido)

Acciones

Acción (etiqueta de la interfaz de usuario)	Qué hace
Alternar clase	Añade o elimina una clase CSS en el elemento de destino; ideal para menús y pestañas al hacer clic
Añadir clase / Eliminar clase	Cambios de clase unidireccionales: ideal para elementos que se muestran al pasar el cursor y pares de elementos al pasar el cursor
Mostrar / Ocultar	Visibilidad mediante clases de la plataforma (la ocultación predeterminada utiliza `hidden` al estilo de Tailwind)
Atenuado / Deshacer atenuación	Atenúa los mosaicos hermanos del mismo padre de fila/columna (cuadrículas de galería)
Destacar / Quitar destaque	Resalta el elemento sobre el que se pasa el cursor
Desplazarse a	Desplazamiento suave hasta un ancla dentro de la página (`#section-id`)
Paralaje (desplazamiento o puntero)	Movimiento sutil vinculado al desplazamiento o al puntero (intensidad limitada en el formulario)
Deslizamiento de desplazamiento (progreso → estilo)	Al cargarse, anima la escala/opacidad a medida que el elemento se desplaza por la ventana gráfica

Aplicar acción a

Opción	Usar cuando
Este elemento (seleccionado)	El bloque seleccionado debe cambiar (o albergar un detector de paso del cursor para atenuar los elementos hermanos)
Otro elemento (selector CSS)	Necesitas activar o desactivar `#nav-drawer`, `.accordion-panel`, etc.
Elementos hermanos (mismo padre)	Atenuación / Deshacer atenuación al pasar el cursor por la cuadrícula: asocia la interacción al envolvente de mosaicos para que los hermanos sean otros mosaicos

Sincronización con la ventana de visualización (para revelación al desplazarse): ajustes preestablecidos Predeterminado, Antes, Después o Margen de raíz personalizado controlan cuándo se activa la revelación.

Recetas muy útiles

Revelación al desplazarse (fundido o deslizamiento)

Selecciona la sección o el bloque raíz.
Eventos → Entrar en el área de visualización (revelación al desplazarse) → Añadir clase → nombre de la clase, p. ej., is-visible.
En Estilo (o en tu tema), define esa clase con opacity / transform + transition.
Activa Ejecutar una vez (recomendado) para que la animación no se repita cada vez que el usuario se desplace hacia atrás.
Guardar página → abre la URL pública o de vista previa y desplázate hasta el bloque.

Menú móvil o despliegue

Asigna un identificador al panel en Atributos si es necesario (o utiliza una clase).
En el bloque botón: Haz clic → Alternar clase → Otro elemento → #tu-identificador-del-panel → clase, p. ej., is-open.
Aplica estilo a .is-open en CSS para mostrar el cajón.
Prueba con el ancho de vista previa Móvil.

Cuadrícula de portafolio: atenuar otros mosaicos al pasar el cursor

Selecciona el envasador del mosaico (la celda de columna que rodea cada imagen; no la etiqueta img sola, a menos que sea la raíz del bloque).
Al pasar el cursor → Atenuar → Este elemento (el oyente permanece en el mosaico; los elementos hermanos se atenúan).
Añade una segunda interacción: Al salir del cursor → Deshacer atenuación.
Guarda la página y pruébala en ordenador; ofrece una alternativa de clic para la información crítica en móvil.

Desplazamiento suave a una sección

En un bloque Botón o Enlace: Hacer clic → Desplazarse a → selector #pricing (debe existir en la página).
La personalización del desplazamiento no está disponible: el navegador desplaza el destino a la parte superior de la ventana de visualización.

Efecto de paralaje o desplazamiento

Es preferible utilizar Al cargarse (montar) + Efecto de paralaje o Desplazamiento en una sección padre; utiliza el selector Otro elemento si la capa en movimiento es un elemento hijo con un identificador.
Mantén la intensidad baja; el editor aplica límites máximos.
Prueba con la vista previa de Ordenador y ten en cuenta que algunos visitantes utilizan el modo de movimiento reducido (los efectos pueden verse minimizados).

Reglas de diseño que garantizan la fiabilidad de las páginas

Regla	Por qué
Comportamiento crítico → Clic	El efecto al pasar el cursor no existe en muchos teléfonos
Combina «al pasar el cursor» + «al salir del cursor»	Evita que las cuadrículas se queden «atenuadas»
Evita el «pase del cursor» y «ocultar» en el mismo elemento	Una vez oculto, el visitante no puede volver a pasar el cursor para deshacerlo
Utiliza «Añadir/Quitar clase» para el «pase del cursor»	No utilices «Alternar clase» al pasar el cursor: puede cambiar de forma incorrecta al volver a pasar el cursor
Las clases deben existir en el CSS	Añadir clase solo cambia el nombre; define `.is-visible`, `.is-open`, etc. en Estilo o en el CSS del tema
Asigna la clase a la raíz del bloque	Menos oyentes duplicados; más fácil de encontrar en Capas
Guarda antes de evaluar el comportamiento en tiempo real	Las interacciones se aplican al HTML publicado o en vista previa, no solo al lienzo estático

Límites (por página)

La pestaña Eventos muestra contadores en tiempo real. Límites habituales:

Límite	Valor aproximado
Interacciones por elemento seleccionado	15
Interacciones discretas por página	200
Movimiento continuo (paralaje / desplazamiento) por página	32
Elementos con interacciones por página	80

Si la opción Añadir interacción está desactivada, elimina las interacciones que no se utilicen en otras partes de la página o simplifica los efectos con mucho movimiento.

Editores de cabecera, pie de página y plantillas

Aparece la misma pestaña Eventos cuando editas plantillas de cabecera o pie de página en Configuración → Cabecera y pie de página. Úsala para botones de navegación fija o bandas de revelación en el pie de página; consulta Cabecera, pie de página y navegación.

Solución de problemas

Síntoma	Qué comprobar
No ocurre nada en el sitio web en producción	Guardar página; prueba la URL de vista previa/pública, no solo el lienzo; confirma que el elemento sigue teniendo las interacciones enumeradas en Eventos
El efecto al pasar el cursor funciona una vez, pero luego ya no	Has utilizado Ocultar al pasar el cursor: cambia a Añadir clase / Eliminar clase con un efecto que no sea `display:none`
La clase se activa, pero no hay cambio visual	No hay reglas CSS para ese nombre de clase
La revelación al desplazarse nunca se activa	Umbral/margen demasiado estricto; el elemento ya está visible al cargarse; falta la transición de la clase
El menú funciona en el ordenador, pero no en el móvil	Depende de Hacer clic, no solo del paso del cursor
Se atenúan los mosaicos equivocados	Interacción en un contenedor incorrecto: los elementos hermanos deben compartir el mismo padre

Próximos pasos y validación

Abre una página de borrador → selecciona una Sección → Eventos → añade Entrar en el área de visualización + Añadir clase → Guardar página.
Previsualiza la página en un navegador y desplázate hasta que la sección entre en el área de visualización.
Añade Clic + Alternar clase en un botón dirigido a un panel oculto; comprueba el resultado en el ancho de móvil.
Consulta la Referencia de bloques y maquetación del editor para conocer los tipos de bloques que combinan bien con las interacciones.