¿Quieres crear una llamada a la acción en forma de popups y no sabes como hacerlo. Hoy te explicamos Cómo hacer popups en WordPress con Elementor.
Índice de contenidos
¿Qué es un pop up?
El término pop-up proviene del inglés, y hace referencia a aquellas ventanas que aparecen de forma inesperada en la pantalla de tu navegador. Su función es captar la atención del usuario sobre una información que se considera relevante y con la intención de generar una conversión.
El uso de los pop up se debe realizar con sumo cuidado ya que al ser una acción invasiva si se abusa de esta herramienta puede resultar molesta y derivando en que el usuario abandone la página web. Es recomendable hacer uso de ella de forma moderada.
También hay que tener en cuenta que Google penaliza a las páginas webs que hacen uso de pop ups en dispositivos móviles. Una vez nos pongamos en materia explicaremos como deshabilitar los pop ups en tablet y moviles.
Cómo crear un pop up efectivo
Como hemos comentado, hacer un mal uso de los pop ups puede ser contraproducente, por lo que antes de ponernos a crear nuestro pop up os dejo algunas buenas prácticas que deberías llevar a cabo.
- Facilitar el cierre de la ventana emergente con un clic, da visibilidad a la cruz de cierre.
- No seas repetitivo. Procura que si el usuario ha descartado el pop up no cargue si cambia de página.
- Procura que el pop up no aparezca cuando acaba de cargar la web pero tampoco des tanto como para que el usuario abandone la web.
- Trabaja un diseño y un contenido llamativo.
Creando nuestro pop up con Elementor
En nuestro caso lo que realizaremos es un sencillo pop up en el que invitamos a los usuarios a suscribirse a nuestra newsletter.
Desde el administrador de nuestro WordPress accedemos a plantillas/añadir nueva y una vez aparezca el pop en que nos permite seleccionar que tipo de plantilla queremos realizar seleccionamos popup, le damos un título y crear plantilla.
La versión pro de Elementor viene con unos pop ups predefinidos por lo que si alguno se adapta a vuestro diseño simplemente tenéis que insertarlo y personalizarlo al gusto. Nosotros crearemos un diseño propio y diseñaremos un formulario de suscripción.
Para acceder a los ajustes del popup vamos a clicar sobre la rueda de engranajes que aparece en la esquina inferior derecha (recuadro rojo de la imagen).
- Width: definiremos el ancho del popup.
- Height: definiremos el alto del popup, permitiendonos ajustarlo al contenido, a la pantalla o definir un alto personalizado.
- Content position: definiremos la posición del contenido en relación al popup.
- Position horizontal: define la posición horizontal del popup respecto al ancho del la pantalla.
- Position vertical: define la posición vertical del popup respecto al alto de la pantalla.
- Overlay: Nos permite habilitar el color de fondo que no forma parte del popup. En nuestro caso sería la zona de color negro transparente.
- Close button: Nos permite habilitar el botón para cerrar el popup. En nuestro ejemplo es la X que aparece en la esquina superior derecha que aparece en el contenedor del popup.
- Entrance animation y exit animation: Definiremos el tipo de entrada y salida del popup.
- Animation duration: Definimos la duración de la animación.
Después de crear la estructura del popup pasaremos a personalizar el aspecto visual del popup. Para ello, desde los mismos ajustes del popup clicaremos en el apartado estilos (recuadro azul de la imagen).
El siguiente paso será crear el diseño del contenido del popup que cada uno necesite.
Una vez tengamos definido el diseño de nuestro pop up clicaremos en la flecha que hay al lado del botón de publicar para crear las condiciones de visualización.
Generando las codiciones de visualización
En este punto definiremos que condiciones se deben cumplir o no cumplir para que se visualice el pop up. Elementor permite crear más de una condición para la visualización del pop up. Primero definimos donde se visualizará.
- En el primer selector definiremos si la condición debe incluir o excluir.
- El segundo selector define donde se debe incluir: En toda la web, en páginas de archivo o en páginas únicas.
- El tercer selector variara en función de lo definido en el segundo selector. En nuestro caso definiremos que el pop up solo aparezca en todas las entradas de nuestro blog.
Clicamos sobre siguiente y en Triggers definiremos cuando se visualizara.
- On page load : Se muestra nada más cargar la página o creando un delay definido por segundos.
- On scroll : se muestra después de que el usuario haga scroll hacía arriba o abajo. Definiremos en porcentaje a la altura que se debe mostrar.
- On Scroll To Element : en cuando el usuario se desplaza a un elemento específico. Un buen ejemplo seria mostrar el pop up cuando llegan a los comentarios del blog.
- On click clic : se muestra después de que un usuario haga clic un número determinado de veces.
- After inactivity : se muestra después de que el usuario haya estado inactivo durante X segundos.
- On page exit intent : Para mostrar el pop up antes de que el usuario abandone nuestra página.
Para nuestro ejemplo definiremos que el pop up aparezca en todas las entradas de blog a mitad de página y cuando el scroll sea hacia abajo.
- Show after x pages views : El pop up se mostrará después x páginas vistas.
- Show after x sessions : El pop up se mostrará después de que el usuario visite la página x veces.
- Show after x times : abrirá el pop up solo X cantidad de tiempo para ese visitante específico.
- When arriving from specific URL : Si el usuario llega a una URL especifica
- Show when arriving from : Mostrara el pop up cuando una o varias de las opciones disposibles esten configuradas.
- Hide for logged users :Ocultar pop up para usuarios logueados.
- Show on devices : Definiremos en que soportes se verá el pop up, escritorio, tablet o móvil.
Para nuestro ejemplo pondremos la regla de que el pop up no se vea en teléfonos móviles. Guardamos y ya tenemos nuestro pop up funcionando. En el siguiente vídeo repasaremos los pasos seguidos para crear el pop up.
Alternativas gratuitas a Elementor pro
Si no dispones de la versión pro de Elementor aquí os dejamos una lista de plugins gratuitos para crear pop ups.
- Popup Builder – Responsive WordPress Pop up – Subscription & Newsletter
- Hustle – Pop-Ups, Slide-ins and Email Opt-ins
- CM Pop-Up banners for WordPress
- Popup Maker – Responsive popup
- Popup by Supsystic
- Boxzilla
Y aquí terminamos, esperamos que tras leer estas lineas tengas más claro como gestionar y crear un popup con Elementor. Si quieres saber como crear el aviso de política de cookies con Elementor clica aquí.
hola!
me ha gustado mucho tu artículo, enhorabuena!
una pregunta, como se puede hacer para que una vez que ha pinchado en el pop up no vuelva a aparecer?.
Muchas gracias
Hola Borja:
Nos alegra que el post te haya servido de ayuda.
Respecto a tu consulta puedes definir que solo se muestre una vez desde las reglas avanzadas del pop up. Una vez allí en el parámetro show up x times.
Saludos
Buenas tardes, una consulta como configurar para que el pop up se active dando clic a un botón?
Hola Karol:
Gracias por tu comentario. Puedes crear un popup asociado a un botón con el widget que lleva elementor. Visita el enlace que te adjunto para más información. https://prnt.sc/ovzulx
Hola! He creado el Pop Up siguiendo tu post (Muchas gracias!) pero luego no sé como modificarlo (quiero retardar tiempos), me puedes ayudar?
Gracias!!
Hola Esther, eso lo puedes hacer modificando las reglas de visualización del popup.
Las reglas de visualizacion están al lado del botón de publicar.
Un saludo.
Muy buen articulo y me viene l pelo ya que estoy empezando con esto de los popup y andaba un poco perdido con tantas opciones y tantos plugins distintos.
Genial, nos alegra saber que te fué util.
Hola e leído tu artículo es muy bueno e creado uno pero no sé cómo eliminar me podrás ayudar?muchas gracias!
Podrá eliminarlo accediendo a plantillas/ ventanas emergentes. Ahí simplemente clicando en enviar a papelera lo eliminas.
Un saludo.
Hola enhorabuena por tan valiosa información.
Soy novato y me surgen 3 dudas:
1. ¿Dónde se guardan los datos de suscripción para luego poderlos llevar a mailpoet? O ¿Es mejor crearlo con el plugin de mail marketing para que se guarde directamente en este?
2. ¿Se puede poner casillas de verificación en un sólo pop Up, para elegir la suscripción por ejemplo de, ofertas, novedades, cupones descuento?
3. La ley hoy dice, que le tienes que dar la opción al usuario para que se de de baja de las suscripciones, ¿Tienes algún vídeo respecto a este tema?
Gracias.
Hola Pedro, ante todo perdona por la tardanza de mi respuesta.
Los datos los puedes guardar directamente en Mailpoet vinculando tu cuenta con el formulario. Aqui te dejo un enlace: https://elementor.com/help/mailpoet-elementor-integration/
En el popup, para poner casillas de verificación necesitas el formulario. Y que yo sepa no se puede hacer lo que comentas.
Cuando creas las plantillas de las newsletter en Mailpoet te permite definir en enlace para permitir darse de baja.
muchas gracias, super explicado. 🙂
Gracias por tu comentario Emir, un saludo.
Hola muchas gracias por el tutorial, resolví muchas dudas, aunque tengo un par.
1.- como elimino la x de cerrar el popup para que solo tenga 2 alternativas en la el popup, la de quedarse o de irse. Si o No
2.- La segunda pregunta tiene relación con si se entra a la página que enlace debo colocar en el SI del popup para que no se cargue de nuevo la pagina ya que hice la prueba de colocar la url de mi página en la opción SI y se volvió a cargar la pagina. (no el popup por tenerlo configurado que se muestre solo una vez al usuario)
Desde ya muchas gracias !
Para quitar la x deshabilita el boton de esta captura en los ajustes del popup: https://prnt.sc/26wgvki
Para lo segundo que me preguntas no acabo de comprender. Lo siento
Buenas, me ayudo a comprender los popups.
Solo que mi unica duda es como hacer que no se cierre el popup a menos que rellene sus datos, osea al dar en enviar recien desaparezca el popup.
La verdad es que no se como hacerlo. Siento no poder ser de mas ayuda. Saludos.
Holaa muy bien explicado, yo hice un pop up y debe verse en un footer pero al darle click no abre, y segui todos los pasos, sabes a que se deba o como solucionar?
Hola Alejandra, no acabo de entender que es lo que quieres conseguir. ¿Cuando debe verse el popup?¿Al hacer click en un botón?
¿El popup tiene que estar dentro del footer?
Hola muy buen post!
he creado un pop up, enlazado que debe ir en un footer pero no se abre, sabes a que se deba?
Hola. Menudo pedazo de artículo, felicidades. Tengo una pregunta. ¿Cómo hay que hacer para que se envie, automáticamente, un mail al nuevo suscriptor con un PDF o un enlace para que se descargue el PDF?.
Gracias.
María
Hola María gracias por tu comentario, mirate este video a ver si te sirve: https://www.youtube.com/watch?v=d6jy7fdErPg
Saludos