# Cómo revelar elementos de la página durante una VSL > Configura una acción sincronizada con el video para revelar un checkout, una oferta, un bono o cualquier bloque en el momento correcto. - Canonical: https://moviie.ai/help/es/player/revelar-elementos-de-la-pagina-durante-una-vsl - Language: es - Category: Player y experiencia - Published: 2026-08-07 - Updated: 2026-08-07 Las **Acciones del video** conectan el tiempo real de la VSL con los elementos de la página donde se incorporó el player. Puedes comenzar con un checkout, una oferta o una sección de bonos ocultos y revelarlos en el momento exacto configurado en el video. El disparador sigue al player. Si la persona pausa, el reloj de la acción también se detiene. Si adelanta o retrocede el video, Moviie vuelve a calcular inmediatamente si el elemento debe estar visible. No es un temporizador independiente iniciado al cargar la página. ## Antes de comenzar Necesitas: un video incorporado con el **código Web completo** generado por Moviie; acceso al HTML de la página o a los campos de clase CSS e ID de tu constructor; un bloque que pueda recibir una clase o un ID estable; el momento del pitch marcado en **Analytics** si quieres usar ese disparador en lugar de ingresar un tiempo manual. > Usa el código Web exactamente como fue copiado desde Moviie. No lo reduzcas ni lo reconstruyas manualmente, porque una versión incompleta puede reproducir el video sin ejecutar las Acciones de la página. ## 1\. Abre Acciones en Studio En la Biblioteca, abre el video utilizado en la VSL. En la navegación de Studio, selecciona **Ações**. Abre **Revelar página**. Selecciona **Criar primeira ação**. *La configuración está dentro del Studio del video y usa su player real como referencia de tiempo.* ## 2\. Prepara el elemento en la página Elige una clase para uno o más elementos, o un ID para un elemento único. Este ejemplo prepara una sección de oferta con la clase `oferta-vsl`: Coloca la regla `.moviie-hidden-until-reveal` en el `` de la página o en el CSS global de tu constructor. Esto evita que la oferta parpadee durante unos milisegundos antes de que la integración termine de cargar. Para usar un ID: ## Clase o ID Opción Úsala cuando Resultado **Clase** varios elementos deben responder a la misma acción se revelan todos los elementos con esa clase **ID** existe un único bloque de destino se revela el elemento con ese ID En Studio, ingresa solamente `oferta-vsl`. No incluyas el punto de una clase, el `#` de un ID, espacios u otros caracteres. Moviie acepta letras, números, guiones y guiones bajos. En Elementor, Webflow y constructores similares, agrega `oferta-vsl` en **CSS Classes** o **Clase CSS**. Para un ID, usa **CSS ID** o **ID HTML**. El nombre debe coincidir exactamente con el valor guardado en Studio. ## 3\. Define el destino y el momento En **O que será revelado**: Escribe un **Nome interno** descriptivo, como `Oferta principal`. Elige **Classe** o **ID**. Ingresa el **Nome no seu HTML** sin `.` ni `#`. En **Quando acontece**, elige: **Momento do pitch** para usar el instante marcado en Analytics. Si todavía no está marcado, Moviie impide guardar y te indica que debes configurarlo primero. **Tempo manual** para ingresar un valor en **Revela em** en minutos y segundos. **Oculta em (opcional)** define cuándo el elemento vuelve a ocultarse. Debe ser posterior al inicio y no puede superar la duración del video. Déjalo vacío para mantener el elemento visible hasta el final de esa reproducción. *La línea de tiempo muestra los estados en espera, visible y finalizado sin sustituir al player de la VSL.* ## 4\. Configura la experiencia de revelación Activa **Levar até o conteúdo** para desplazar la página hasta el primer elemento encontrado. En **Compensar cabeçalho fixo**, usa un valor negativo para dejar espacio encima del bloque. Por ejemplo, `-80 px` evita que un encabezado fijo de 80 píxeles cubra la oferta. El intervalo aceptado es de `-1000 px` a `1000 px`. El desplazamiento es suave por defecto. Si el visitante activó la preferencia de reducir movimiento en su sistema, Moviie respeta esa configuración y evita la animación. Activa **Manter revelado em visitas futuras** para que el elemento no vuelva a ocultarse cuando esa persona regrese a la misma página. Esta elección: vale solamente en el mismo navegador y dispositivo; puede perderse si la persona borra los datos de navegación o usa el modo privado; no se puede combinar con **Oculta em**. *El formulario genera el código inicial según la clase o el ID elegido.* Selecciona **Copiar** en **Código da página**, adapta el contenido de la sección y pégalo en tu sitio. Después, selecciona **Ativar ação**. ## 5\. Prueba con el player real Antes de publicar la página: Usa **Usar tempo atual** para copiar la posición actual del player al campo de inicio. Usa **Ir para** para saltar al inicio o al final configurado. Reproduce desde unos segundos antes del disparador y confirma que el elemento sigue oculto. Cruza el disparador y verifica la revelación y el desplazamiento opcional. Retrocede hasta antes del inicio. Sin persistencia, el elemento debe ocultarse otra vez. Avanza hasta después de **Oculta em**. El elemento debe volver a ocultarse. Recarga la página para probar **Manter revelado em visitas futuras**. Repite la prueba en una pantalla de celular y confirma que el constructor no usa otra clase o bloque para el diseño móvil. ## Administra las acciones existentes Después de guardar, cada acción aparece en una tarjeta con su selector, inicio, final, desplazamiento y estado de persistencia. Usa: el interruptor para activar o desactivar la acción sin borrar su configuración; el lápiz para editar y probar de nuevo; la papelera para eliminar después de confirmar **Excluir ação?**; **Nova ação de página** para controlar otro elemento. Eliminar una acción no modifica el HTML de tu sitio. Si Moviie ya no controlará ese elemento, elimina también `moviie-hidden-until-reveal` del bloque. De lo contrario, el CSS inicial mantendrá el contenido oculto. ## Qué esperar durante la reproducción Antes del momento elegido, el bloque permanece oculto. Al llegar al momento configurado, el bloque aparece y la página se desplaza hasta él si **Levar até o conteúdo** está activo. Al retroceder antes del inicio, el bloque vuelve a ocultarse, excepto cuando **Manter revelado em visitas futuras** está activo. Al pasar por **Oculta em**, el bloque desaparece otra vez. Una clase puede revelar varios bloques al mismo tiempo. Un ID debe identificar un solo bloque. Haz la prueba en la página publicada o en una vista previa que cargue el código Web de Moviie. La vista aislada del constructor puede no reproducir el comportamiento final. ## Problemas comunes Síntoma Causa probable Cómo corregirlo El bloque parpadea antes de ocultarse el CSS inicial cargó tarde o no fue incluido coloca la regla en `` y conserva `moviie-hidden-until-reveal` en el destino El video se reproduce, pero el bloque nunca aparece el código Web está incompleto o el nombre no coincide vuelve a copiar el código Web y compara la clase o el ID carácter por carácter Solo aparecen algunos bloques la clase no fue aplicada a todos los bloques abre cada bloque en el constructor y confirma la misma clase La revelación sucede en el momento incorrecto el tiempo manual o el pitch es incorrecto usa el player y **Usar tempo atual**, o actualiza el pitch en Analytics El encabezado cubre la oferta la compensación no considera el encabezado fijo ingresa la altura del encabezado como valor negativo El bloque vuelve oculto en otra visita la opción está desactivada o se probó en otro navegador actívala y prueba en el mismo navegador fuera del modo privado Funciona en escritorio, pero no en celular el constructor usa otro bloque o clase en el diseño móvil aplica el mismo selector a ambos bloques o crea acciones separadas Evita acciones con tiempos superpuestos para el mismo selector. Una sola acción para cada período de visualización es más fácil de probar y mantener. ## Lista de verificación antes de publicar El sitio usa el código Web completo de Moviie. El CSS de ocultación está en `` o en el CSS global. La clase o el ID coincide exactamente con el valor guardado. El inicio fue probado reproduciendo, adelantando y retrocediendo el video. El final opcional es posterior al inicio. El desplazamiento y la persistencia funcionan como se espera. Escritorio y celular usan el mismo destino o tienen acciones separadas. La página publicada fue probada antes, durante y después del momento elegido. ## Sigue aprendiendo Cómo incorporar un vídeo de Moviie en tu sitio Cómo configurar funciones de VSL en un vídeo Cómo agregar botones de acción a un video