{"id":6829,"date":"2022-09-06T13:19:58","date_gmt":"2022-09-06T11:19:58","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/comment-ouvrir-un-popup-elementor-via-un-lien\/"},"modified":"2026-09-29T16:35:50","modified_gmt":"2026-09-29T14:35:50","slug":"comment-ouvrir-un-popup-elementor-via-un-lien","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/fr\/comment-ouvrir-un-popup-elementor-via-un-lien\/","title":{"rendered":"Comment ouvrir un popup Elementor via un lien"},"content":{"rendered":"\n

Para abrir un popup de Elementor al pulsar un enlace, configura a[href=\"#enlace-popup\"]<\/code> en \u00abAbrir por selector\u00bb y utiliza #enlace-popup<\/code> como destino del enlace.<\/strong> 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\u00e9todo.<\/p>\n\n\n\n

Respuesta r\u00e1pida: un enlace que puedes reutilizar<\/h2>\n\n\n\n
Selector del popup:\na[href="#enlace-popup"]\n\nEnlace que insertas en un texto, bot\u00f3n o men\u00fa:\n#enlace-popup<\/code><\/pre>\n\n\n\n
Escribe el mismo nombre en ambos sitios y conserva las comillas rectas del selector. El enlace funciona dentro de la p\u00e1gina que contiene y carga el popup; no es una direcci\u00f3n independiente que abra la ventana desde cualquier web. Consulta el procedimiento oficial de Elementor para abrir un popup mediante un enlace<\/a>.<\/p>\n\n\n\n
Si el enlace est\u00e1 en un bot\u00f3n de Elementor, tambi\u00e9n puedes asignarle directamente la acci\u00f3n din\u00e1mica \u00abPopup \u2192 Abrir popup\u00bb. M\u00e1s abajo encontrar\u00e1s las alternativas y c\u00f3mo comprobarlas. En esta gu\u00eda se conserva el ejemplo #enlace-popup<\/code> para que puedas seguirlo de principio a fin.<\/p>\n\n\n\n
Configurar nuestro propio enlace para abrir un popup<\/h3>\n\n\n\n
Tambi\u00e9n podemos personalizar y acortar el enlace de nuestros popups, para ello sigue estos pasos:<\/p>\n\n\n\n
\"Abrir<\/a><\/figure>\n\n\n\n
    \n
  1. Abrimos en el constructor de Elementor el popup.<\/li>\n\n\n\n
  2. Abre los ajustes del popup. En la interfaz de las capturas se accede mediante el icono de \"Ajustes ajustes en la esquina inferior izquierda. En versiones m\u00e1s recientes, busca la configuraci\u00f3n de la ventana emergente en los controles del documento; su posici\u00f3n puede variar.<\/li>\n\n\n\n
  3. En la pesta\u00f1a Avanzado > Abrir por selector,<\/em> crea un selector CSS para el enlace, ejemplo: a[href=\"#enlace-popup\"]<\/strong><\/mark><\/code><\/li>\n\n\n\n
  4. Aplica este enlace en cualquier parte de tu sitio web enlazando con el enlace activador de anclaje (ejemplo: #enlace-popup<\/a>)<\/li>\n<\/ol>\n\n\n\n
    \n
    El texto #enlace-popup<\/strong><\/a> es a nuestra elecci\u00f3n, podemos establecer el nombre que queramos siempre sin espacios ni caracteres especiales y preferiblemente en min\u00fasculas. Recuerda establecer las condiciones de visualizaci\u00f3n de la ventana emergente a Todo el sitio<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n
    El nombre del enlace identifica tu disparador: evita asignarlo a dos popups distintos. Si no necesitas aperturas autom\u00e1ticas, no actives disparadores de carga o desplazamiento para este caso. Las opciones de activaci\u00f3n manual de Elementor<\/a> permiten utilizar selectores de enlaces, clases o identificadores.<\/p>\n\n\n\n
    Hacer que nuestro popup est\u00e9 activo en todo el sitio web<\/h2>\n\n\n\n
    Las condiciones deben incluir las p\u00e1ginas donde quieres utilizar el enlace. Para un enlace disponible en toda la web, elige Todo el sitio<\/strong>; si solo debe funcionar en determinadas p\u00e1ginas, incluye esas p\u00e1ginas. En el siguiente ejemplo se configura para todo el sitio.<\/p>\n\n\n\n
    \"Activar<\/a><\/figure>\n\n\n\n
      \n
    1. Abrimos con Elementor el Mensaje emergente<\/strong>.<\/li>\n\n\n\n
    2. Abre las opciones de publicaci\u00f3n o actualizaci\u00f3n del popup y entra en Condiciones de visualizaci\u00f3n<\/strong>. La posici\u00f3n del control puede variar entre versiones del editor.<\/li>\n\n\n\n
    3. Se nos abrir\u00e1 una ventana emergente con varias pesta\u00f1as en la parte izquierda, dejamos la que est\u00e1 Condiciones<\/strong> > clic en el bot\u00f3n A\u00f1adir condici\u00f3n<\/strong> y dejamos la condici\u00f3n por defecto que es Todo el sitio<\/strong>.<\/li>\n\n\n\n
    4. Ya solo tenemos que guardar haciendo clic en el enlace Guardar y cerrar<\/strong> o bien en el bot\u00f3n Siguiente<\/strong> y despu\u00e9s en el bot\u00f3n Guardar y cerrar<\/strong>.<\/li>\n<\/ol>\n\n\n\n
      \n
      Ahora nuestra ventana emergente<\/strong> estar\u00e1 activa en todo nuestro sitio web. No es necesario configurar Disparadores o Reglas avanzadas si no los necesitas.<\/p>\n<\/blockquote>\n\n\n\n
      A\u00f1adir la acci\u00f3n abrir ventana emergente a un widget<\/h3>\n\n\n\n
      En un bot\u00f3n de Elementor puedes usar directamente la acci\u00f3n din\u00e1mica de abrir el popup. No necesitas copiar su direcci\u00f3n para ese bot\u00f3n; los m\u00e9todos siguientes sirven si quieres reutilizar el enlace generado en otros elementos.<\/p>\n\n\n\n
      \"Asignar<\/a><\/figure>\n\n\n\n
        \n
      1. Hacemos clic en el bot\u00f3n para seleccionarlo.<\/li>\n\n\n\n
      2. En la pesta\u00f1a Contenido<\/strong> hacemos clic en el bot\u00f3n 
        \"Etiquetas<\/figure> Etiquetas din\u00e1micas<\/strong> de la propiedad Enlace<\/strong> > seleccionamos la acci\u00f3n Ventana emergente<\/strong>.<\/li>\n\n\n\n
      3. Abre los ajustes de Ventana emergente<\/strong>, selecciona la acci\u00f3n Abrir popup<\/strong> y busca el nombre de la ventana que quieres mostrar. Selecciona el resultado correspondiente.<\/li>\n\n\n\n
      4. Guarda los cambios y comprueba el bot\u00f3n en la p\u00e1gina p\u00fablica.<\/li>\n<\/ol>\n\n\n\n
        \n
        Una vez hecho esto el bot\u00f3n tendr\u00e1 asignada la acci\u00f3n de abrir el popup y podremos obtener el enlace a trav\u00e9s del mismo.<\/p>\n<\/blockquote>\n\n\n\n
        C\u00f3mo conseguir el enlace que abre nuestro mensaje emergente<\/h2>\n\n\n\n
        Adem\u00e1s del selector personalizado, puedes copiar el enlace de acci\u00f3n que Elementor genera para una ventana. Ese enlace contiene informaci\u00f3n del popup: si lo duplicas, lo recreas o lo trasladas a otra web, vuelve a obtenerlo y comprueba su funcionamiento. Aqu\u00ed se conservan los m\u00e9todos de copia como alternativas.<\/p>\n\n\n\n
        Obtener el enlace de la ventana emergente desde el inspector del navegador<\/h3>\n\n\n\n
        Una vez hemos a\u00f1adido la acci\u00f3n de abrir la ventana emergente a un widget en este caso un bot\u00f3n, solo tenemos que abrir la p\u00e1gina donde lo hayamos insertado en el navegador y seguir estos pasos:<\/p>\n\n\n\n
        \"Obtener<\/a><\/figure>\n\n\n\n
          \n
        1. Abrimos la p\u00e1gina donde est\u00e1 el bot\u00f3n en el navegador (en este caso Google Chrome).<\/li>\n\n\n\n
        2. Clic con el bot\u00f3n derecho encima del bot\u00f3n > clic en Inspeccionar<\/strong> del men\u00fa emergente.<\/li>\n\n\n\n
        3. Desde el Inspector hacemos clic con el bot\u00f3n derecho encima del enlace que incluye la acci\u00f3n de abrir, podemos distinguirlo porque comienza por #elementor-action…<\/strong> > clic en Edit attribute<\/strong> del men\u00fa emergente.<\/li>\n\n\n\n
        4. Ahora el enlace se nos mostrar\u00e1 sombreado eso quiere decir que est\u00e1 seleccionado y ya podemos copiarlo pulsando CTRL+C<\/strong> o haciendo clic con el bot\u00f3n derecho encima del mismo > clic en Copiar<\/strong> del men\u00fa emergente.<\/li>\n<\/ol>\n\n\n\n
          \n
          Ahora ya tenemos la URL que dispara la acci\u00f3n de abrir el popup. Podemos pegarla en un archivo de texto para luego hacer un copia y pega y usarla donde queramos.<\/p>\n<\/blockquote>\n\n\n\n
          Obtener el enlace interno de la ventana emergente desde un widget<\/h3>\n\n\n\n
          Otro modo de obtener el enlace interno<\/strong> de la ventana emergente es copiando el enlace directamente desde el widget en este caso desde el bot\u00f3n. Veamos como hacerlo:<\/p>\n\n\n\n
          \"Obtener<\/a><\/figure>\n\n\n\n
            \n
          1. Clic con el bot\u00f3n derecho del rat\u00f3n sobre el bot\u00f3n > clic en Copiar direcci\u00f3n de enlace<\/strong><\/li>\n\n\n\n
          2. Usamos el bloc de notas para pegar el enlace con CTRL+V<\/li>\n\n\n\n
          3. Conservamos el fragmento completo desde #elementor-action<\/strong> hasta el final. Si la direcci\u00f3n incluye delante el dominio y la ruta de la p\u00e1gina, podemos retirarlos para reutilizar el fragmento dentro de la misma web. No borramos ni modificamos la parte codificada que viene despu\u00e9s.<\/li>\n<\/ol>\n\n\n\n
            \n
            Prueba el enlace en su destino antes de retirar un bot\u00f3n que hayas creado solo para obtenerlo. La ventana debe seguir publicada y disponible en la p\u00e1gina donde vayas a utilizar el enlace.<\/p>\n<\/blockquote>\n\n\n\n
            Si copias un enlace de acci\u00f3n generado, vuelve a obtenerlo tras duplicar o trasladar el popup a otro sitio: contiene informaci\u00f3n de esa ventana. Evita editar a mano su parte codificada. El selector con un nombre elegido por ti suele ser m\u00e1s f\u00e1cil de mantener.<\/p>\n\n\n\n
            Obtener el enlace interno de la ventana emergente con un plugin<\/h3>\n\n\n\n
            Este es un m\u00e9todo opcional de terceros que se conserva como referencia. Antes de instalar el plugin, revisa su ficha, compatibilidad y mantenimiento en WordPress.org<\/a>. Para un enlace de apertura normal, empieza por el m\u00e9todo nativo explicado al principio.<\/p>\n\n\n\n
            \"Obtener<\/a><\/figure>\n\n\n\n
              \n
            1. Instala el plugin Popup Trigger URL for Elementor Pro<\/a>.<\/li>\n\n\n\n
            2. Ve a Plantillas<\/strong> > Mensajes emergentes<\/strong>.<\/li>\n\n\n\n
            3. En el listado de plantillas encontrar\u00e1s el bot\u00f3n Show URLs<\/strong> a la derecha de cada una, haz clic en \u00e9l y se mostrar\u00e1 un popup con todos los enlaces disponibles para ese mensaje emergente.<\/li>\n<\/ol>\n\n\n\n
              \n
              Para mostrar el popup solo necesitamos el primero (Open), pero este plugin adem\u00e1s proporciona otros tres m\u00e1s: Toggle, Close y Close (Don`t Show Again).<\/p>\n<\/blockquote>\n\n\n\n
              C\u00f3mo aplicar el enlace obtenido para abrir la ventana emergente<\/h2>\n\n\n\n
              Una vez tenemos el enlace ya podemos aplicar a cualquier enlace creado con Elementor, Gutenberg o incluso en el men\u00fa de nuestro sitio web. Vamos a ver unos ejemplos.<\/p>\n\n\n\n
              Aplicar enlace al widget Editor de textos<\/h3>\n\n\n\n
              \"Aplicar<\/a><\/figure>\n\n\n\n
                \n
              1. En el Editor de texto<\/strong> seleccionamos el texto al que queramos aplicar el enlace de apertura del popup.<\/li>\n\n\n\n
              2. Hacemos clic en la herramienta Insertar\/Editar un enlace (Ctrl+k)<\/strong>.<\/li>\n\n\n\n
              3. Despu\u00e9s pulsamos Ctrl+V<\/strong> para pegar el enlace, teniendo en cuenta que previamente habremos copiado el enlace con Ctrl+C<\/strong>.<\/li>\n\n\n\n
              4. Ya solo queda hacer clic en el bot\u00f3n Actualizar<\/strong> y probar nuestro enlace de apertura de popup.<\/li>\n<\/ol>\n\n\n\n
                Aplicar enlace al texto de un post con el editor Gutenberg<\/h3>\n\n\n\n
                No solo lo podemos aplicar a un texto, tambi\u00e9n a un bot\u00f3n o a cualquier elemento que admita a\u00f1adir enlaces.<\/p>\n\n\n\n
                \"Aplicar<\/a><\/figure>\n\n\n\n
                  \n
                1. Abrimos una entrada en el editor Gutenberg<\/strong> seleccionamos el texto al que queramos aplicar el enlace de apertura del popup.<\/li>\n\n\n\n
                2. Hacemos clic en la herramienta Enlace Ctrl+K<\/strong>.<\/li>\n\n\n\n
                3. Despu\u00e9s pulsamos Ctrl+V<\/strong> para pegar el enlace, teniendo en cuenta que previamente habremos copiado el enlace con Ctrl+C<\/strong>.<\/li>\n\n\n\n
                4. Ya solo queda hacer clic en el bot\u00f3n Actualizar<\/strong> y probar nuestro enlace de apertura de popup.<\/li>\n<\/ol>\n\n\n\n
                  Aplicar enlace en el men\u00fa de WordPress<\/h3>\n\n\n\n
                  \"Panel<\/a><\/figure>\n\n\n\n
                    \n
                  1. En un tema cl\u00e1sico, abrimos Apariencia > Men\u00fas<\/em>. Si el tema utiliza el Editor del sitio, editamos el bloque Navegaci\u00f3n correspondiente y a\u00f1adimos all\u00ed el enlace personalizado.<\/li>\n\n\n\n
                  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<\/strong>.<\/li>\n\n\n\n
                  3. Finalmente hacemos clic en el bot\u00f3n Guardar men\u00fa<\/strong>.<\/li>\n<\/ol>\n\n\n\n
                    \n
                    Ahora ya sabes como aplicar el enlace de apertura de una ventana emergente en cualquier parte de tu sitio web.<\/p>\n<\/blockquote>\n\n\n\n
                    \u00abNo funciona, mi ventana emergente no aparece\u00bb<\/h2>\n\n\n\n