A veces no quieres que se cargue una ventana emergente por sí sola. Quieres que se abra sólo cuando alguien hace clic en un botón o enlace. El Creador de ventanas emergentes de complementos maestros hace esto con el En clic disparador y selector de ID CSS. Configuras el ID en la ventana emergente, luego agregas el mismo ID a cualquier elemento Elementor y al hacer clic en ese elemento se abre la ventana emergente.
¿qué es una ventana emergente al hacer clic en Elementor? #
Una ventana emergente al hacer clic en Elementor es una ventana emergente que permanece oculta hasta que un visitante hace clic en un elemento específico «un botón, enlace, imagen o ícono « en lugar de aparecer por sí solo cuando se carga la página. El Creador de ventanas emergentes de complementos maestros construye uno con el En clic disparador: le das a la ventana emergente un CSS selector de identificación como #sale-popup, luego agregue ese mismo ID (sin el #) al campo ID CSS de cualquier elemento Elementor. Debido a que la coincidencia se realiza solo en el ID, se puede activar una ventana emergente desde tantos elementos como desee « y no necesita licencia Elementor Pro ni JavaScript personalizado, aunque el activador On Click requiere Master Addons Pro. Las ventanas emergentes al hacer clic se adaptan al contenido basado en intenciones, como detalles de precios, demostraciones de video, formularios de inicio de sesión y códigos de cupón, donde una ventana emergente automática se interrumpiría en lugar de ayudar. Explore el resto del Widgets y extensiones de complementos maestros para ver qué más puedes poner dentro de uno.
Antes de comenzar #
Es necesario implementar tres cosas antes de configurar una ventana emergente al hacer clic: una ventana emergente ya integrada en Master Addons Popup Builder, Elementor instalado y activo, y Master Addons para Elementor instalado y activo. Luego, toda la configuración requiere dos campos y aproximadamente un minuto.
- Una ventana emergente ya integrada en Master Addons Popup Builder (consulte el archivo guía de configuración emergente para crear uno)
- Elementor instalado y activo
- Complementos maestros para Elementor instalados y activos (guía de instalación)
Paso 1: configure la ventana emergente para que se abra al hacer clic #
Abra su ventana emergente en Elementor y vaya a Configuración de la ventana emergente MA panel. Bajo Ajustes, schimbă Abrir ventana emergente a En clic. Aparece un nuevo campo: Abierto por selector.
En ese campo, escriba un ID de CSS con el signo #, por ejemplo #sale-popup. Ese es el selector que activa la ventana emergente. Mantenga el nombre simple y único para que sea fácil de reutilizar.
Paso 2: agregue el ID de CSS a un elemento Elementor #
Ahora vaya a la página donde desea el activador y edítelo en Elementor. Elija cualquier elemento, un botón funciona bien y ábralo Avanzado pestaña. Encuentra el ID CSS campo e ingrese el mismo nombre, pero sin el signo # esta vez, entonces sale-popup.
Esa diferencia hace tropezar a la gente: la ventana emergente Open By Selector usa #sale-popup, mientras que el ID CSS del elemento utiliza sale-popup. El # es parte de la sintaxis del selector, no parte del ID.
Paso 3: obtenga una vista previa y haga clic #
Actualice la página y luego obtenga una vista previa en el front-end. Verás tu botón (aquí está etiquetado como “Haga clic para abrir la ventana emergente”) en el diseño, sin ninguna ventana emergente a la vista todavía.
Haga clic en el botón y la ventana emergente se abrirá de inmediato. El mismo activador funciona en tantos elementos como desee, simplemente proporcione a cada uno el mismo ID de CSS.
Solución de problemas #
- ¿No pasa nada al hacer clic? Asegúrese de que los ID coincidan:
#sale-popupen la ventana emergente Abrir por selector, ysale-popup(no #) en el ID CSS del elemento. - ¿la ventana emergente no está activa? Comprueba que la ventana emergente Activación está encendido y sus condiciones de visualización incluyen la página con el botón.
- ¿usaste el # en el campo ID de CSS? Elimínalo. El ID de Elementor CSS solo toma el nombre simple.
Preguntas frecuentes #
¿cómo abro una ventana emergente de complementos maestros al hacer clic?
En el panel Configuración de ventanas emergentes de MA, configure Abrir ventana emergente en Al hacer clic e ingrese una ID de CSS como #sale-popup en el campo Abrir por selector. Luego agregue el mismo ID, sin el #, al campo ID de CSS de un elemento en la pestaña Avanzado de Elementor.
¿Por qué agrego el # en un lugar pero no en el otro?
El campo Abrir por selector espera un selector CSS y # marca un selector de ID. El campo ID de Elementor CSS espera solo el nombre del ID. Entonces usas #sale-popup en la ventana emergente y sale-popup en el elemento.
¿Puedo activar la ventana emergente desde más de un botón?
Sí. Dale a cada botón o elemento el mismo ID de CSS, luego cada uno abre la misma ventana emergente al hacer clic. Puedes mezclar botones, enlaces y otros elementos.
¿Puedo abrir una ventana emergente desde un enlace de texto en lugar de un botón?
Sí. Cualquier elemento con el ID de CSS correspondiente funciona, incluido un enlace, una imagen o un icono. Agregue el ID en la pestaña Avanzado de ese elemento y se convertirá en un activador.
¿necesito Elementor Pro para una ventana emergente al hacer clic?
No. El generador de ventanas emergentes de complementos maestros funciona con la versión gratuita de Elementor, por lo que el disparador On Click y el método CSS ID funcionan sin Elementor Pro. El disparador On Click necesita Master Addons Pro, ya que el complemento gratuito abre todas las ventanas emergentes en la carga de la página.
Lectura relacionada #
- Configuración del generador de ventanas emergentes de complementos maestros
- Explicación de las opciones de activación de ventanas emergentes
- Cómo agregar una ventana emergente en Elementor gratis
- Cómo mostrar una ventana emergente de intención de salida en Elementor
- Los mejores complementos de creación de ventanas emergentes para WordPress
