Programar una ventana emergente por porcentaje de página está bien hasta que necesite que llegue en un lugar exacto. Tal vez lo desee en el instante en que alguien llegue a su bloque de precios, una fila testimonial o una banda de llamada a la acción, no un vago 40% en la página. El Creador de ventanas emergentes de complementos maestros maneja eso con el En Desplácese hasta Elemento desencadenar. Le das a la ventana emergente una ID de CSS con a #, luego pon esa misma identificación, sin el #, sobre el elemento que quieres que actúe como disparador.
Aquí está la configuración completa en Master Addons Popup Builder, que viene gratis con Master Addons para Elementor. Si todo lo que necesita es un activador basado en porcentajes, el guía de opciones de activación emergente cubre ese.
Antes de comenzar #
- Una ventana emergente ya integrada en Master Addons Popup Builder (consulte el archivo guía de configuración emergente para crear uno)
- Una página con el elemento que desea utilizar como activador de desplazamiento
- 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 desplazarse hasta Elemento #
Abra su ventana emergente en Elementor y vaya a Configuración de la ventana emergente MA panel. Bajo Ajustes, cambia Abrir ventana emergente a En Desplácese hasta Elemento. Aparece un nuevo campo: Selector de elementos.
La pista debajo del campo explica lo que quiere, un selector CSS para el elemento que activa la ventana emergente en el desplazamiento, como #my-id o .my-class.
Paso 2: Ingrese un selector de ID de CSS (con el signo #) #
En el Selector de elementos campo, escriba un ID de CSS que comience con #. Aici e #show-popup. Mantenga el nombre breve y único para poder reutilizarlo en la página sin chocar con nada más.
El # está haciendo un trabajo real: le dice a la ventana emergente que esté atenta a un elemento cuyo ID sea show-popup. Publique (o actualice) la ventana emergente para guardarla.
Paso 3: agregue la misma identificación a su elemento de destino (sin el signo #) #
Ahora abra la página donde debería dispararse la ventana emergente y edítela en Elementor. Haga clic en el elemento que desee como activador, aquí está el bloque de sección en la página y ábralo Avanzado pestaña.
Encuentra el ID CSS campo en la pestaña Avanzado y escriba el mismo nombre que usó en la ventana emergente, pero sin el #, así que justo show-popup. Esa pequeña diferencia es todo el truco:
- Selector de elemente pop-up:
#show-popup(con el hash) - ID CSS del elemento:
show-popup(sin hash)
El # es parte del selector CSS, no parte del ID, por lo que pertenece al campo emergente pero nunca al campo ID CSS del elemento. Actualice la página para guardar. Una cosa a tener en cuenta: no reutilice un ID que ya esté conectado a un enlace de anclaje o CSS personalizado en otro lugar, o obtendrá sorpresas.
Paso 4: obtenga una vista previa y desplácese hasta el elemento #
Abra la página en la parte frontal y comience a desplazarse. Nada en la parte superior. En segundo lugar, el elemento que lleva el show-popup ID se desplaza a la vista, la ventana emergente se abre sobre la página.
¿Quieres varios puntos de desplazamiento para activar la misma ventana emergente? Dale a cada elemento el mismo ID de CSS show-popup, y cualquiera de ellos lo activará.
Solución de problemas #
- ¿la ventana emergente nunca se abre? Comprueba el hash. Necesidades del selector de elementos de la ventana emergente
#show-popupy las necesidades de ID CSS del elementoshow-popupsin hachís. - ¿usaste el # en el campo ID de CSS? Sácalo. El campo Elementor CSS ID solo quiere el nombre simple.
- ¿Dos elementos con el mismo ID actuando? Está bien para activar, pero no reutilice una identificación que ya esté manejando CSS o enlaces de anclaje en la página.
- ¿la ventana emergente no se muestra en absoluto? Asegúrese de que la Activación de la ventana emergente esté activada y que sus condiciones de visualización incluyan la página con el elemento activador.
Preguntas frecuentes #
¿cómo abro una ventana emergente al desplazarme a un elemento específico en Elementor?
Configure la opción Abrir ventana emergente de la ventana emergente en Desplazamiento hasta Elemento e ingrese una ID de CSS como #show-popup en el campo Selector de elementos. Luego agregue el mismo ID, sin el #, al campo ID de CSS del elemento de destino en la pestaña Avanzado de Elementor.
¿Por qué agrego el # en la ventana emergente pero no en el elemento?
El campo Selector de elementos espera un selector CSS y # marca un selector de ID. El campo ID de Elementor CSS solo espera el nombre del ID. Entonces usas #show-popup en la ventana emergente y show-popup en el elemento.
¿Puedo activar la ventana emergente desde más de un elemento?
Sí. Dale a cada elemento el mismo ID de CSS y la ventana emergente se activa cuando el visitante se desplaza hacia cualquiera de ellos. Esto es útil cuando tienes varias secciones que deberían activar la misma oferta.
¿cuál es la diferencia entre On Scroll y On Scroll to Element?
En Scroll se activa después de que un visitante se desplaza por un porcentaje establecido de la página. En Scroll to Element se activa cuando aparece un elemento específico, lo cual es más preciso cuando desea que la ventana emergente esté vinculada a una sección exacta.
¿necesito Elementor Pro para esto?
No. Master Addons Popup Builder funciona con la versión gratuita de Elementor, por lo que el disparador On Scroll to Element y el método CSS ID funcionan sin Elementor Pro.
