Cómo Agregar un Botón que Abre un Popup o Modal
Usa un evento de clic de Botón cuando quieras que un CTA abra un modal o modal personalizado (formulario de oferta, detalles de bonus, video o paso breve de calificación) sin navegar fuera de la página.
Antes de Empezar
Asegúrate de tener:
- Una página abierta en el Constructor de Páginas.
- Contenido planificado para el popup (formulario, texto, imagen, CTA).
- Familiaridad con el área Modal del Navegador para editar contenido del overlay. Consulta Navegador y capas.
Paso 1: Crear el Contenido del Modal
- Abre el Navegador.
- Trabaja en el área Modal para que el contenido del popup quede separado de las secciones principales de la página.
- Agrega las secciones, texto, formulario o media que deben aparecer dentro del overlay.
- Mantén el contenido modal breve — los overlays compiten con la oferta principal.
Si tu página usa un contenedor objetivo de modal personalizado, anota el target/clase que el activador debe referenciar.
Paso 2: Agregar el Botón Activador
- En el canvas de la página principal, arrastra un Botón al hero, oferta o sección de precios.
- Configura una etiqueta clara como Ver detalles de la oferta, Abrir formulario o Ver bonus.
- Haz clic en el botón para abrir el panel de ajustes.
Consulta Elemento Botón (referencia).
Paso 3: Configurar el Evento de Clic a Modal
- Abre los ajustes del evento de clic.
- Elige modal o modal personalizado (el texto puede variar según la versión de la UI).
- Para modal personalizado, ingresa el contenedor objetivo / clase que coincida con tu configuración modal.
- Confirma que no estés usando un evento de enlace simple — una URL navegaría fuera en lugar de abrir el overlay.
| Tipo de evento | Uso típico |
|---|---|
| Modal | Flujo modal compartido / global en la página |
| Modal personalizado | Contenedor modal específico para ese CTA |
El Resumen de página puede ayudarte después a auditar activadores, clases y reglas de auto-apertura. Consulta Resumen de página.
Paso 4: Estilizar y Revisar Conflictos
- Estiliza el botón activador para contraste y tamaño táctil en mobile.
- Previsualiza con otros widgets a nivel de página (Cookie, WhatsApp, Notificación) habilitados para que el overlay no choque con controles flotantes.
- Asegura que los CTAs del modal (enviar, cerrar, enlace secundario) sean obvios.
Paso 5: Publicar y Probar
- Save y Publish.
- En la URL en vivo, haz clic en el botón activador.
- Confirma que el modal se abre con el contenido correcto.
- Cierra/descarta el modal y confirma que la página sigue siendo usable.
- Vuelve a probar en mobile — overlays y teclados pueden cambiar la altura disponible.
Solución de Problemas
| Problema | Qué intentar |
|---|---|
| El botón no hace nada | Confirma que el evento de clic sea modal/modal personalizado, no un enlace vacío. |
| Se abre contenido incorrecto | Selecciona el objetivo modal correcto; edita contenido en Navegador → Modal. |
| Modal recortado en mobile | Reduce la altura del contenido; prueba con headers sticky deshabilitados si hace falta. |
| Confunde con Notificación | Notificación es un aviso a nivel de página, no un overlay modal. Usa eventos de clic modal para popups. |
Resultado
Los visitantes pueden abrir tu popup desde un CTA permaneciendo en la misma página — útil para ofertas secundarias, formularios y detalles de bonus.
Documentación Relacionada
FAQ
¿Un modal es lo mismo que Notificación?
No. Notificación es un aviso singular a nivel de página. Un modal es contenido overlay activado por eventos de clic (u otras reglas modales de la página).
¿Puede un botón abrir un modal e ir a una URL?
Dale al botón una función principal. Pon un enlace secundario dentro del modal si los visitantes necesitan un destino después del overlay.
¿Dónde edito el contenido modal después?
Usa el área Modal del Navegador para no confundir capas overlay con secciones principales de la página.