Come aprire un popup di Elementor tramite un link

Finestra popup di iscrizione via email
Unisciti alla nostra lista e ricevi le ultime novità. Iscriviti per non perdere nessun aggiornamento.

Indice dei contenuti

Para abrir un popup de Elementor al pulsar un enlace, configura a[href="#enlace-popup"] en «Abrir por selector» y utiliza #enlace-popup como destino del enlace. Necesitas un popup publicado y un plan de Elementor Pro que incluya el constructor de ventanas emergentes. No hace falta instalar otro plugin para este método.

Respuesta rápida: un enlace que puedes reutilizar

Selector del popup:
a[href="#enlace-popup"]

Enlace que insertas en un texto, botón o menú:
#enlace-popup

Escribe el mismo nombre en ambos sitios y conserva las comillas rectas del selector. El enlace funciona dentro de la página que contiene y carga el popup; no es una dirección independiente que abra la ventana desde cualquier web. Consulta el procedimiento oficial de Elementor para abrir un popup mediante un enlace.

Si el enlace está en un botón de Elementor, también puedes asignarle directamente la acción dinámica «Popup → Abrir popup». Más abajo encontrarás las alternativas y cómo comprobarlas. En esta guía se conserva el ejemplo #enlace-popup para que puedas seguirlo de principio a fin.

Configurar nuestro propio enlace para abrir un popup

También podemos personalizar y acortar el enlace de nuestros popups, para ello sigue estos pasos:

Abrir popup por selector
  1. Abrimos en el constructor de Elementor el popup.
  2. Abre los ajustes del popup. En la interfaz de las capturas se accede mediante el icono de Ajustes elementor ajustes en la esquina inferior izquierda. En versiones más recientes, busca la configuración de la ventana emergente en los controles del documento; su posición puede variar.
  3. En la pestaña Avanzado > Abrir por selector, crea un selector CSS para el enlace, ejemplo: a[href="#enlace-popup"]
  4. Aplica este enlace en cualquier parte de tu sitio web enlazando con el enlace activador de anclaje (ejemplo: #enlace-popup)

El texto #enlace-popup es a nuestra elección, podemos establecer el nombre que queramos siempre sin espacios ni caracteres especiales y preferiblemente en minúsculas. Recuerda establecer las condiciones de visualización de la ventana emergente a Todo el sitio.

El nombre del enlace identifica tu disparador: evita asignarlo a dos popups distintos. Si no necesitas aperturas automáticas, no actives disparadores de carga o desplazamiento para este caso. Las opciones de activación manual de Elementor permiten utilizar selectores de enlaces, clases o identificadores.

Hacer que nuestro popup esté activo en todo el sitio web

Las condiciones deben incluir las páginas donde quieres utilizar el enlace. Para un enlace disponible en toda la web, elige Todo el sitio; si solo debe funcionar en determinadas páginas, incluye esas páginas. En el siguiente ejemplo se configura para todo el sitio.

Activar ventana emergente en todo el sitio
  1. Abrimos con Elementor el Mensaje emergente.
  2. Abre las opciones de publicación o actualización del popup y entra en Condiciones de visualización. La posición del control puede variar entre versiones del editor.
  3. Se nos abrirá una ventana emergente con varias pestañas en la parte izquierda, dejamos la que está Condiciones > clic en el botón Añadir condición y dejamos la condición por defecto que es Todo el sitio.
  4. Ya solo tenemos que guardar haciendo clic en el enlace Guardar y cerrar o bien en el botón Siguiente y después en el botón Guardar y cerrar.

Ahora nuestra ventana emergente estará activa en todo nuestro sitio web. No es necesario configurar Disparadores o Reglas avanzadas si no los necesitas.

Añadir la acción abrir ventana emergente a un widget

En un botón de Elementor puedes usar directamente la acción dinámica de abrir el popup. No necesitas copiar su dirección para ese botón; los métodos siguientes sirven si quieres reutilizar el enlace generado en otros elementos.

Asignar a un botón una ventana emergente
  1. Hacemos clic en el botón para seleccionarlo.
  2. En la pestaña Contenido hacemos clic en el botón
    Etiquetas dinamicas
    Etiquetas dinámicas de la propiedad Enlace > seleccionamos la acción Ventana emergente.
  3. Abre los ajustes de Ventana emergente, selecciona la acción Abrir popup y busca el nombre de la ventana que quieres mostrar. Selecciona el resultado correspondiente.
  4. Guarda los cambios y comprueba el botón en la página pública.

Una vez hecho esto el botón tendrá asignada la acción de abrir el popup y podremos obtener el enlace a través del mismo.

Cómo conseguir el enlace que abre nuestro mensaje emergente

Además del selector personalizado, puedes copiar el enlace de acción que Elementor genera para una ventana. Ese enlace contiene información del popup: si lo duplicas, lo recreas o lo trasladas a otra web, vuelve a obtenerlo y comprueba su funcionamiento. Aquí se conservan los métodos de copia como alternativas.

Obtener el enlace de la ventana emergente desde el inspector del navegador

Una vez hemos añadido la acción de abrir la ventana emergente a un widget en este caso un botón, solo tenemos que abrir la página donde lo hayamos insertado en el navegador y seguir estos pasos:

Obtener el enlace del popup desde el inspector del navegador
  1. Abrimos la página donde está el botón en el navegador (en este caso Google Chrome).
  2. Clic con el botón derecho encima del botón > clic en Inspeccionar del menú emergente.
  3. Desde el Inspector hacemos clic con el botón derecho encima del enlace que incluye la acción de abrir, podemos distinguirlo porque comienza por #elementor-action… > clic en Edit attribute del menú emergente.
  4. Ahora el enlace se nos mostrará sombreado eso quiere decir que está seleccionado y ya podemos copiarlo pulsando CTRL+C o haciendo clic con el botón derecho encima del mismo > clic en Copiar del menú emergente.

Ahora ya tenemos la URL que dispara la acción de abrir el popup. Podemos pegarla en un archivo de texto para luego hacer un copia y pega y usarla donde queramos.

Obtener el enlace interno de la ventana emergente desde un widget

Otro modo de obtener el enlace interno de la ventana emergente es copiando el enlace directamente desde el widget en este caso desde el botón. Veamos como hacerlo:

Obtener el enlace del popup directamente desde el boton
  1. Clic con el botón derecho del ratón sobre el botón > clic en Copiar dirección de enlace
  2. Usamos el bloc de notas para pegar el enlace con CTRL+V
  3. Conservamos el fragmento completo desde #elementor-action hasta el final. Si la dirección incluye delante el dominio y la ruta de la página, podemos retirarlos para reutilizar el fragmento dentro de la misma web. No borramos ni modificamos la parte codificada que viene después.

Prueba el enlace en su destino antes de retirar un botón que hayas creado solo para obtenerlo. La ventana debe seguir publicada y disponible en la página donde vayas a utilizar el enlace.

Si copias un enlace de acción generado, vuelve a obtenerlo tras duplicar o trasladar el popup a otro sitio: contiene información de esa ventana. Evita editar a mano su parte codificada. El selector con un nombre elegido por ti suele ser más fácil de mantener.

Obtener el enlace interno de la ventana emergente con un plugin

Este es un método opcional de terceros que se conserva como referencia. Antes de instalar el plugin, revisa su ficha, compatibilidad y mantenimiento en WordPress.org. Para un enlace de apertura normal, empieza por el método nativo explicado al principio.

Obtener el enlace de la ventana emergente con un plugin
  1. Instala el plugin Popup Trigger URL for Elementor Pro.
  2. Ve a Plantillas > Mensajes emergentes.
  3. En el listado de plantillas encontrarás el botón Show URLs a la derecha de cada una, haz clic en él y se mostrará un popup con todos los enlaces disponibles para ese mensaje emergente.

Para mostrar el popup solo necesitamos el primero (Open), pero este plugin además proporciona otros tres más: Toggle, Close y Close (Don`t Show Again).

Cómo aplicar el enlace obtenido para abrir la ventana emergente

Una vez tenemos el enlace ya podemos aplicar a cualquier enlace creado con Elementor, Gutenberg o incluso en el menú de nuestro sitio web. Vamos a ver unos ejemplos.

Aplicar enlace al widget Editor de textos

Aplicar el enlace en el widget editor de texto
  1. En el Editor de texto seleccionamos el texto al que queramos aplicar el enlace de apertura del popup.
  2. Hacemos clic en la herramienta Insertar/Editar un enlace (Ctrl+k).
  3. Después pulsamos Ctrl+V para pegar el enlace, teniendo en cuenta que previamente habremos copiado el enlace con Ctrl+C.
  4. Ya solo queda hacer clic en el botón Actualizar y probar nuestro enlace de apertura de popup.

Aplicar enlace al texto de un post con el editor Gutenberg

No solo lo podemos aplicar a un texto, también a un botón o a cualquier elemento que admita añadir enlaces.

Aplicar el enlace en gutenberg
  1. Abrimos una entrada en el editor Gutenberg seleccionamos el texto al que queramos aplicar el enlace de apertura del popup.
  2. Hacemos clic en la herramienta Enlace Ctrl+K.
  3. Después pulsamos Ctrl+V para pegar el enlace, teniendo en cuenta que previamente habremos copiado el enlace con Ctrl+C.
  4. Ya solo queda hacer clic en el botón Actualizar y probar nuestro enlace de apertura de popup.

Aplicar enlace en el menú de WordPress

Panel de administración de WordPress en español
  1. En un tema clásico, abrimos Apariencia > Menús. Si el tema utiliza el Editor del sitio, editamos el bloque Navegación correspondiente y añadimos allí el enlace personalizado.
  2. Hacemos clic en el desplegable Enlaces personalizados y pegamos con Ctrl+V el enlace interno del popup y escribimos un nombre en Texto del enlace.
  3. Finalmente hacemos clic en el botón Guardar menú.

Ahora ya sabes como aplicar el enlace de apertura de una ventana emergente en cualquier parte de tu sitio web.

«No funciona, mi ventana emergente no aparece»

  • Comprueba que el popup esté publicado y que la página donde pruebas quede incluida en sus condiciones.
  • Compara carácter por carácter el selector y el enlace: a[href="#enlace-popup"] y #enlace-popup. Usa comillas rectas.
  • Prueba primero un botón con la acción dinámica de abrir ese popup. Si funciona, revisa el enlace o selector del otro elemento.
  • Haz la prueba en la página pública, también sin iniciar sesión y en móvil. Descarta una copia antigua de caché tras guardar los cambios.
  • Si sigue fallando, revisa los errores de la consola y posibles conflictos de scripts. Prueba cambios de plugins o de optimización en un entorno de pruebas, no desactivando todo en una web con clientes.

Las opciones para evitar varios popups y otras reglas pueden influir en el resultado. La guía oficial de diagnóstico de ventanas emergentes detalla qué revisar. No presupongas que el enlace está mal solo porque la ventana no aparece.

¿Qué es una ventana emergente o popup?

Un popup es una ventana que se muestra sobre el contenido de la página. Puede servir para abrir un formulario, mostrar información adicional o presentar una promoción. Aquí nos centramos en que se abra a petición del visitante, al pulsar un enlace.

Video paso a paso

Enlaces de interés

Revisión documental: 29 de septiembre de 2026. Los nombres y la posición de algunos controles pueden variar respecto a las capturas y al vídeo; los métodos se han contrastado con las guías oficiales enlazadas.