¿Necesita un botón en cualquier parte de su sitio para abrir un popup de Elementor, pero el disparador estándar «al hacer clic» solo funciona dentro de una misma página? Esta tarea se resuelve en cinco minutos sin plugins de terceros y sin modificar código.

El mecanismo integrado de Elementor Pro, un enlace de ancla combinado con el selector CSS Open By Selector. Una vez configurado, obtiene un popup que se abre desde cualquier página de su sitio: desde un elemento del menú, un enlace de texto o un botón en el pie de página. A continuación, una guía paso a paso, desde la creación del popup hasta la prueba en un sitio en vivo. Cada paso se ilustra con una captura de pantalla de una configuración real.

💡 Resumen rápido:

• Cree un popup en Plantillas de Elementor → Popups y publíquelo
• En las condiciones de visualización, seleccione «Todo el sitio», este es el punto clave del método
• En los ajustes globales del popup, active «Desactivar desplazamiento de página» y «Evitar múltiples popups»
• En la pestaña Avanzado, ingrese el selector a[href="#your-anchor"] en el campo Open By Selector
• Coloque enlaces con el ancla #your-anchor en todo su sitio, el popup se abrirá desde cualquier lugar

Paso 1: Crear un popup en Elementor

Abra Plantillas → Popups en el menú lateral de WordPress y haga clic en «Añadir nuevo». Elija una plantilla prediseñada de la biblioteca de Elementor o comience con un lienzo en blanco. Asigne al popup un nombre descriptivo, por ejemplo, «Popup de contacto» o «Formulario de solicitud», para poder encontrarlo fácilmente en la lista más adelante. El diseño puede ser cualquiera: un formulario de contacto, suscripción a newsletter, formulario de opinión o un banner promocional.

Construya el contenido en el maquetador de Elementor como una página normal: añada un título, formulario, texto y botón de cierre. Cuando esté listo, haga clic en Publicar.

Tras publicar, Elementor abrirá la pantalla de condiciones, disparadores y reglas adicionales. Aquí realizaremos el único ajuste crítico.

Paso 2: Condición, «Todo el sitio»

En la pantalla de condiciones, busque la lista desplegable y seleccione Todo el sitio. Esta es la única condición que necesita establecer.

Nota: incluso si planea mostrar el popup solo en páginas específicas, elegir «Todo el sitio» es el camino más simple. La visualización en sí no estará controlada por la condición de página, sino por la presencia del enlace de ancla #contact en la URL. Sin ancla en la barra de direcciones, no hay popup.

La pantalla de disparadores y reglas adicionales puede omitirse: haga clic en Siguiente y luego en Guardar y cerrar. El método del enlace de ancla funciona independientemente de estos ajustes.

Paso 3: Ajustes globales del popup

Haga clic en el icono del engranaje en la esquina inferior izquierda de la pantalla de edición del popup, se abrirá el panel de Ajustes del Popup. Vaya a la pestaña Avanzado.

Aquí, configure el comportamiento para su tarea. Recomendamos activar:

• Desactivar desplazamiento de página, para que la página de fondo no se desplace mientras el popup está abierto;
• Evitar múltiples popups, para impedir que varios popups se superpongan entre sí.

Deje los demás parámetros con sus valores predeterminados. Lo principal es el campo al final de la pestaña, por el cual se inició todo esto.

Paso 4: Open by selector, la magia del ancla

En el campo Open By Selector, ingrese un selector CSS que «escuche» el enlace de ancla. El formato es estricto:

1
a[href="#contact"]

En lugar de #contact, sustituya su propia ancla: #popup / #callback / #sale o cualquier otro identificador único. El selector responde al clic en cualquier elemento <a> cuyo atributo href sea igual a su ancla.

Guarde el popup. Ahora espera a que un visitante siga un enlace con el ancla requerida.

Paso 5: Colocar enlaces de ancla en todo su sitio

Solo queda añadir enlaces desde donde el visitante abrirá el popup. Cualquier widget de Elementor con un campo de enlace funciona: Botón, Editor de texto, Imagen, Caja de icono.

En el campo de enlace, en lugar de una URL normal, ingrese #contact (o su ancla). En el frontend, esto funciona así: al hacer clic, el navegador añade #contact a la barra de direcciones, el selector a[href="#contact"] se activa y el popup se abre.

En la práctica, usamos tres escenarios típicos:

• Botón en la sección principal, «Solicitar una llamada» con href #callback;
• Elemento del menú, en Apariencia → Menús añada un enlace personalizado con el ancla #contact;
• Enlace de texto en el cuerpo de la entrada, seleccione el texto e ingrese el ancla en el panel de enlace.

Pruébelo: abra cualquier página de su sitio, añada #contact a la barra de direcciones y presione Enter, el popup debería aparecer. Si no es así, vuelva al paso 4 y verifique el selector.

Video: configuración en 3 minutos

El video oficial de Elementor muestra el proceso de principio a fin, desde la creación del popup hasta la prueba en un sitio en vivo.

⁉️🤔 Preguntas frecuentes

¿El método funciona sin Elementor Pro?

No. El módulo Popup Builder solo está incluido en Elementor Pro. En la versión gratuita del maquetador, los popups no están disponibles. Si está usando la versión gratuita, explore la combinación de Elementor con un plugin de popups independiente (por ejemplo, Popup Maker), pero la configuración será diferente allí, mediante selectores jQuery en lugar del Open By Selector estándar.

¿Es obligatoria la condición «Todo el sitio»?

Sí, este es un requisito clave del método. Si deja la condición como «En páginas específicas», el popup solo se mostrará en las páginas seleccionadas y únicamente cuando la página cargue, no al hacer clic en el ancla. El modo «Todo el sitio» cede el control al selector Open By Selector.

¿Se pueden crear múltiples popups diferentes con distintas anclas?

Sí. Cree un popup separado para cada ancla. Por ejemplo, un popup de «Contactos» con el selector a[href="#contact"] y un popup de «Oferta» con a[href="#sale"]. Ambos se configuran en «Todo el sitio» y se activan de forma independiente con su propia ancla.

¿Por qué no se abre el popup con el ancla?

Verifique tres cosas. Primero: #your-anchor debe aparecer en la barra de direcciones, el navegador solo lo añade al hacer clic en un <a> con el href correspondiente, la entrada directa por teclado puede no funcionar. Segundo: el campo Open By Selector debe contener exactamente a[href="#contact"], sin espacios adicionales y con el tipo de comilla correcto. Tercero: abra la consola del navegador (F12) y busque errores de JavaScript, un conflicto con otro plugin podría estar bloqueando el disparador.

¿Afecta esto al SEO?

No. Los enlaces de ancla con almohadilla no son indexados por los motores de búsqueda como páginas separadas. Para Google, esto es un elemento técnico de navegación, no contenido duplicado.

Qué hacer si los disparadores estándar no son suficientes

El enlace de ancla mediante Open By Selector es la forma más universal de abrir un popup de Elementor desde cualquier lugar de su sitio. No depende de en qué página se encuentre el visitante y no requiere editar functions.php.

Si la tarea se vuelve más compleja, por ejemplo, el popup debe abrirse al desplazarse hasta un bloque específico o 10 segundos después de entrar al sitio, use los disparadores estándar de Elementor: Al hacer scroll, Al cargar la página, Al intención de salida. Se configuran en la misma pantalla donde seleccionamos «Todo el sitio» y se combinan perfectamente con el método del ancla.

Pruébelo en un sitio de prueba: cree un popup, ingrese a[href="#test"], coloque un botón con esta ancla en la página de inicio. Todo el proceso lleva menos de cinco minutos.