Elementor dispone de una herramienta muy potente para la creación de PopUp en WordPress. El PopUp builder de Elementor Pro, que forma parte de su theme builder.

La herramienta es genial, pero puede ser un poco liosa, al principio. Por este motivo he decidido crear esta guía sobre el constructor de popup de Elementor Pro, que te sirva para aprender de una manera guiada y fácil a manejar esta herramienta fabulosa del constructor Elementor.

Para utilizar esta herramienta es necesario disponer de Elementor PRO. No vale con la versión gratuita.

QUIERO ELEMENTOR PRO

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

1.- Añadir un nuevo PopUp con Elementor PRO

 

El primer paso consiste en crear o añadir un nuevo PopUp. Esto lo vamos a hacer añadiendo una nueva plantilla tipo PopUp con el theme builder de Elementor.

Esto es así, porque un PopUp técnicamente es un tipo de plantilla de Elementor.

Para esto, iremos a: “Plantillas > Popups” en la administración de nuestro wordpress y haremos clic en el botón “Añadir nueva”

A continuación, nos aparecerá una ventana emergente con las siguientes opciones:

  • Elige el tipo de plantilla en el que quieres trabajar: selecciona Popup
  • Nombre de tu plantilla: pon un nombre identificativo a tu plantilla tipo Popup

 

A continuación, haz clic en el botón: “Crear plantilla”.

 

Crear popup elementor

 

 

 

2.- Construir y diseñar el Popup con Elementor

 

En este punto se te mostrarán una serie de diseños que puedes reutilizar. Haz clic en la pestaña “Popups” de la parte superior y verás un montón de diseños de Popups o ventanas emergentes creados con Elementor que podrás reutilizar en tu diseño.

Puedes elegir uno de esos diseños de PopUp realizados con Elementor y modificarlo o puedes partir de un lienzo vacío. Si quieres partir de un lienzo vacío, haz clic en el “aspa” que aparece situado en la parte superior derecha de la ventana.

Ahora se te mostrará el constructor Elementor como sucede en la construcción de cualquier página. Pero, el lienzo ahora será una ventana emergente o popup en vez de la página completa.

Utiliza los elementos o widgets que quieras para construir la ventana emergente o PopUp. Aquí tienes una guía para aprender a cómo usar Elementor

Una vez la tengas diseñada, haz clic en el botón “Publicar” y te aparecerá una ventana emergente con una serie de condiciones de visualización del Popup, que veremos en el siguiente apartado.

 

QUIERO ELEMENTOR PRO

 

 

3.- Configurar opciones de visualización del Popup o ventana emergente

 

Las opciones de visualización del popup se dividen en 3 apartados: Conditions (condiciones), Triggers (acciones de usuario o detonantes), Advaced rules (reglas avanzadas)

Quieres aprender a usar Elementor desde cero. Aquí tienes mi curso de Elementor

 

 

3.1.- Conditions popup Elementor (condiciones)

 

Con las condiciones definiremos dónde queremos que se muestre el Popup. Cada condición o regla está formada por los siguientes parámetros:

 

Include o Exclude: include, significa “inclusión”. Es decir, donde sí se va a mostrar el popup o ventana emergente. Por otra parte, Exclude significa “exclusión”. Es decir, donde no se va a mostrar el popup.

 

General: aquí podremos seleccionar diferentes opciones:

Entire site: todo el sitio web

Archives: son páginas con listas filtradas de post por algún criterio como: categorías, etiquetas, fechas, autor, etc.

Una vez elegida la opción “Archives” podremos seleccionar el tipo de “archive”, e incluso un elemento específico de ese archive. Por ejemplo, si quisiéramos que solo se mostrará el popup al hacer clic en la categoría “diseño web” del blog. Seleccionaríamos “archive”-> “Categorías” -> “diseño web”

Singular: hace referencia a página o entradas específicas, en contraposición a listas de elementos (archives). Es decir, lo que serían fichas de página, entradas, etc.

Una vez elegido “singular” podremos elegir si nos referimos a “páginas”, “entradas”, etc. Seleccionado el elemento anterior, podremos elegir “all” (todos) o establecer un elemento específico.

Por ejemplo si quisiéramos que el popup se mostrara en todas las páginas, pondríamos: “Singular”-> “Páginas” -> “All”. Pero, si quisiéramos que el PopUp solo se mostrará en la página “Guia wordpress”, pondríamos: “Singular” -> “Páginas” -> “Guía wordpress”

 

Nota: podemos crear varias reglas o condiciones, haciendo clic en el botón “Add condition”. Se pueden combinar reglas tipo include y tipo exclude.

 

condiciones popup elementor

 

 

 

3.2.- Triggers popups Elementor (acciones de usuario)

 

En este apartado seleccionaremos y configuraremos la o las acciones que debe realizar el visitante para que se lance el Popup o ventana emergente con Elementor. Es decir, vamos a definir qué debe hacer el usuario para que se lance el popup. El “donde”, ya lo definimos en el apartado anterior.

  • on page load: Si ponemos esta opción en “SI” el popup se lanzará transcurrido un determinado tiempo desde que el visitante acceda a la página. Este tiempo, lo podemos personalizar también. Esta es una de las opciones más habituales para la configuración de un popup.
  • on scroll: si ponemos el selector en “SI” el popup se lanzará cuando el usuario realice scroll en la página. Deberemos definir si el pop up se lanza cuando se haga scroll ascendente o descendente (direction). También debemos elegir el porcentaje de scroll que se debe hacer para que salte el popup (within)
  • on scroll to element: si marcamos esta opción se lanzará el popup cuando se haga scroll hasta un determinado elemento de la página. Debemos poner un nombre “ID” al selector y añadirlo al elemento en cuestión.
  • on click: si ponemos esta opción en “sí”, se lanzará el popup de Elementor cuando se el visitante haga un determinado número de clics en nuestra web. Este número lo debemos definir en el campo “clicks”
  • After inactivity: si ponemos el selector en sí, se lanzará el popup cuando transcurra un tiempo determinado en el cual el visitante no haya realizado ninguna acción en la página. Debemos también definir ese tiempo en segundos.
  • On page exist intent: si marcamos esta opción, el popup se lanzará cuando el visitante intente salir de nuestro sitio web. El popup se le mostrará previamente a la salida del sitio web.
QUIERO ELEMENTOR PRO

 

acciones de usuario para lanzar el popup de elementor

 

 

3.3.- Advanced rules PopUp Elementor (reglas avanzadas)

 

En esta pestaña se pueden definir otras condiciones necesarias para que se lance el popup de Elementor.

 

  • Show after X page views: si marcamos «SÍ» podremos especificar un número necesario de páginas de nuestra web que ha de visitar el usuario antes de que salte el popup.
  • Show after X sessions: si activamos esta opción estaremos definiendo el número de sesiones que ha de realizar el usuario en nuestra web antes de que le salte el popup (una sesión empieza con el acceso a nuestro sitio y termina al cerrar el navegador).
  • Show up to X times: Esta opción es bastante habitual y si la activamos con el selector en “On Open” nos permitirá  establecer el número de veces que se le puede mostrar al usuario el popup. Lo normal será establecer “1”, con la finalidad de que el usuario solo vea el popup 1 vez en una misma sesión (en caso contrario cada vez que cambie de página dentro de nuestra web, se le volverá mostrar el popup, y eso no tiene sentido y es muy agobiante). Si seleccionamos “On close” estaremos definiendo el nº de veces que ha de cerrar el popup el visitante, después de esto ya no se le volverá a mostrar.
  • When arriving from specific URL: podremos establecer que para que el popup salte el visitante tiene que venir enlazado desde una determinada página externa.
  • Show when arriving from: podemos establecer que el popup solo salte dependiendo de donde proceda el visitante: búsquedas en Google, enlaces externos y/o enlaces internos.
  • Hide for logged in users: podemos establecer una regla para ocultar el popup a todos los usuarios logueados, o especificar determinados perfiles de usuarios de wordpress.
  • Show on devices: Set to Yes to choose to show on Desktop, Tablet, and/or Mobile . Con esta opción podremos establecer en qué tipo de dispositivos se debe mostrar el popup.

 

condiciones especiales para activar popup elementor

 

 

4.- Edición del PopUp

 

Una vez has terminado tu popup, seguro que te plantearás

¿y ahora como modifico el popup que he creado? Pues te lo voy a explicar, porque sobre todo el tema de las opciones de configuración del popup son un poco difíciles de encontrar.

Para editar un popup iremos a: “Plantillas > Popups” y haremos clic en “Editar con Elementor” sobre el popup que queramos modificar. Ahora, podrás fácilmente modificar el aspecto estético del popup. Pero, ¿cómo puedo modificar las condiciones del popup?

Para eso, haz clic en el icono en forma de “punta de flecha” que aparece en la parte inferior del menú lateral derecho de Elementor, junto al botón “ACTUALIZAR”.

Al hacer clic sobre dicho icono, se te mostrarán enlaces para acceder a las opciones de configuración del popup: Display conditions, Triggers y Advanced rules.

QUIERO ELEMENTOR PRO