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
ÍNDICE CÓMO CREAR UN POPUP CON ELEMENTOR
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”.
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)
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.
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.
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.
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
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Y no se podría modificar el tamaño del pop-up? me gustaría que el pop-up fuera de pantalla completa, pero al intentar introducir esas variaciones tanto en la Disposición de la Seccion del pop-up , como a traves de css. Parece que hay un máximo de tamaño establecido para estos pop-ups.
se os ocurre alguna manera que pueda funcionar?
saludos
Hola, muy bueno tu trabajo, muchas gracias. Solo me queda una duda como modificar los mensajes que emite cuando falla la validacion de un campo y como modificar las propias reglas de validacion, por ejemplo para las URL que no pida https, solo el nombre.com, gracias anticipadas
Buenas Oswaldo,
¿Reglas de validación? Pero, ¿estás hablando del Elemento PopUp o el de formulario?. Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Elementor, Cursos sobre Divi, Astra Pro, Flatsome, Analytics, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.****
muchas gracias, no encontraba como editar las configuraciones del popup para las reglas de visualización después de haberlo creado. Esta muy escondidas.
Ahora que lo estoy configurando, veo que es muy molesto que aparezca una y otra vez, sabrás de casualidad cómo se puede mostrar sólo 1 vez al usuario que navega en la página? No quiero que cada cierto tiempo le aparezca, ni cada x paginas vistas, sólo quiero que cuando entre a mi tienda le aparezca una vez y ya, espero me puedas apoyar ya que no logro configurarlo así
Hola Gerardo,
Con la opción «Show up to X times»: Sí 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). Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Cursos sobre Elementor, Astra Pro, SEO, Analytics, Curso Diseñador web freelance, Cursos sobre Woocommerce, sobre Mailchimp, blog WordPress, etc. etc.