El otro día estaba yo pensando de qué escribir y me he dado cuenta, luego de unas cuantas búsquedas por Google, que no existen muchos artículos que traten el diseño de pop-ups con Elementor.

Sí existen extensos escritos sobre la utilización de las ventanas emergentes, de cómo son una buena alternativa y también de como puedes dejar a tu usuario horrorizado al usarlos mal.

También existen muchos tutoriales de otras herramientas. Pero con Elementor no hay muchos.

Y mira que me parece una de las grandes funcionalidades que metieron hace unos meses.

Así que de eso vamos a hablar.

¿Qué es un pop-up?

Estamos hartos de ver pop-ups. Hartos.

¿O no?

Un pop-up es una ventana emergente que salta mientras estás navegando por una página web, con el objetivo de mostrar otro tipo de contenido complementario a lo que estás viendo.

Los pop-ups son una alternativa a los banners publicitarios, que suelen estar insertados en las barras laterales, arriba, abajo o en medio del texto.

Utilizando una ventana emergente seríamos capaces de mostrar anuncios o promociones más concretas, puntuales y organizadas.

Pero el mal uso de ellos puede llegar a entorpecer o disminuir la buena experiencia de usuario, por lo que hay que tener cuidado en su uso y emplearlos de forma correcta.

El objetivo es que el lector realice una acción concreta y no debes espantarlo.

¿Para qué valen los pop-ups?

Si tienes un blog o una página web que es un puntal importante de tu negocio, los pop-ups son mucho más que simples herramientas para mostrar un producto, un servicio o una campaña.

Son elementos casi indispensables para conseguir leads.

Un lead en el contexto del marketing digital no es más que un visitante que nos ha dejado sus datos (nombre y email, habitualmente) como cambio a un contenido de interés que desee leer o descargar.

Es una acción voluntaria del usuario. Esos contactos ni se compran ni se venden.

Los datos suelen pasar a nuestra base de datos, habitualmente una lista de email marketing, pues esos leads suelen ser considerados cómo posibles clientes para nuestros productos o servicios.

Se sitúan en un primero momento del ciclo de compra.

¿Cómo usar los pop-ups correctamente para el marketing?

Si el objetivo de un pop-up es, como dijimos, conseguir leads que engrosen nuestra lista de email marketing, es importante saber dónde y cuándo los mostramos.

En primer lugar, debemos contextualizar donde se muestra el pop-up.

Adapta y personaliza el lugar donde lo va a visualizar el usuario. Que el contenido ofrecido en el pop-up sea relevante y tenga relación con el que en ese rato se está leyendo es fundamental.

No vayas a ofrecer una masterclass sobre WordPress, por ejemplo, mientras que el usuario está buscando recetas de pulpo á feira.

En segundo lugar, y muy relacionado con el anterior, debe responder a una necesidad de tu lector. Debe ser relevante en lo que está buscando, aportar valor y solucionar alguno de sus problemas.

Por ejemplo, si está buscando información sobre WordPress, puedes recomendarle un e-book sobre algún tema que consideres que va a cubrir sus necesidades.

Por último, no inventes nada.

Hay muchos recursos disponibles en forma de plugin que te van a permitir diseñar y mostrar estos pop-ups.

Y además tienes muchas formas de presentarlo. No lo muestres siempre cuando el usuario llega. Él está interesado en leer el contenido del artículo, no en suscribirse a tu blog.

Muéstralo cuándo mejor se adapte tu estrategia: cuando el usuario marche de la página, cuando pulse un botón, cuando pase el ratón por encima de algún elemento, etc.

¿Cómo diseñar pop-ups irresistibles y funcionales con Elementor?

Desde hace algunas versiones, el constructor visual Elementor, que ya he dicho bastantes veces que es mi plugin de referencia a la hora de maquetar webs, incluyó la opción de diseño de pop-ups.

Para poder crear tu pop-up debes estar en la opción Plantillas -> Pop-ups y pulsar en Añadir nuevo.

A continuación, indica nombre y crea la plantilla.

Configura la plantilla del pop-up con Elementor

A la hora de crear un nuevo pop-up puedes elegir entre decenas de diseños ya maquetados, pero si ninguno se adapta a tus necesidades puedes empezar desde un lienzo en blanco.

Si escoges esta opción podrás adaptar exactamente el diseño a lo que necesites, por lo que es la que yo siempre recomiendo.

En la barra de la derecha puedes configurar la ventana emergente, su tamaño, su estilo y su comportamiento.

Ajustes del pop-up

Unas de las configuraciones más importantes a la hora de diseñar tu pop-up.

• Ancho: puedes indicar en píxeles o en porcentaje (VW o vertical width) el ancho de la ventana emergente.
• Alto: puedes configurar el alto adaptado al contenido, adaptado a la pantalla o personalizarlo en píxeles o en porcentaje (VH o vertical height).
• Current position: puedes configurar dónde se van a ir alineando los elementos que vayas colocando en el pop-up (arriba, centro o abajo).
• Posición: puedes configurar cuál es la posición inicial del pop-up respeto al eje horizontal y el vertical.
• Overlay: puedes activar o desactivar la capa de fondo que tapa parcial o totalmente la web y permite destacar el pop-up.
• Close Button: puedes activar o desactivar un botón de permite cerrar el pop-up
• Animaciones: puedes configurar la animación de entrada y la animación de salida del pop-up.

Estilo del pop-up

En la opción de estilo puedes indicar el aspecto visual que tendrá la ventana emergente y otros elementos.

• Pop-up: puedes configurar el color de fondo, el borde, el radio del borde y la sombra de la caja.
• Overlay: puedes configurar la capa de color o la imagen que se sitúa entre la web y el pop-up, y que permite destacar este último.
• Close button: puedes configurar el tamaño, el color y la posición del botón de cierre.

Opciones avanzadas del pop-up

Ciertos comportamientos avanzados del pop-up son bastante curiosos y atractivos de cara a que se acerque el más posible a lo que necesitas.

• Show Close Button After: puedes indicar el número de segundos de retardo que tendrá el botón de cierre antes de aparecer.
• Automatically Close After: puedes indicar el número de segundos de retardo hasta que el pop-up se cierre automáticamente.
• Prevent Closing on Overlay: puedes evitar que el usuario cierre el pop-up haciendo clic fuera de él.
• Prevent Closing on ESC key: puedes evitar que el usuario cierre el pop-up pulsando la tecla ESC.
• Disable Page Scrolling: puedes evitar que el usuario haga scroll por la página.
• Avoid Multiple Popups: permite múltiples pop-ups.

Comportamiento del Pop-up

Una vez finalizado el diseño del pop-up, incluyendo todos los widgets de Elementor que desees poner, debes configurar el comportamiento del pop-up. Es decir, dónde, cuándo y cómo se le va a mostrar al usuario.

Condiciones de visualización

Puede que necesites que el pop-up se muestre en una página concreta, en una entrada concreta, en todas las entradas del blog, en una sola categoría, etc.

Puedes seleccionar tantas condiciones como desees hasta que quede perfectamente configurado en qué lugar de la página vas a mostrar el pop-up.

Triggers o disparadores

Son aquellas acciones requeridas para que el pop-up salte. Sus nombres son bastante claros, pero los vamos a ver uno por uno.

• On Page Load: puedes configurar que el pop-up salga al cargar la página, indicando una cantidad de segundos de retardo.
• On Scroll: puedes indicar que el pop-up se muestre cuando navegas por la página, saltando a la altura de un porcentaje aproximado de la página.
• On Scroll to Element: puedes indicar el ID de un elemento para que el pop-up salte al navegar por encima de él.
• On Click: puedes indicar que el pop-up se muestre al pulsar en un elemento.
• After Inactivity: puedes configurar que el pop-up salte luego de un período de inactividad, indicado en segundos.
• On Page Exit Intent: el pop-up saltará cuando tengas intención de cerrar la página.

Reglas avanzadas

Son aquellos requerimientos necesarios para que el pop-up se muestre.

• Show after X page views: puedes indicar el número de páginas que el usuario debe visitar antes de que el pop-up se le muestre.
• Show after X sessions: el pop-up saltará si el visitante vuelve a tu web el número de veces que le indicas.
• Show up to X times: puedes configurar el número máximo de veces que se mostrará el pop-up a un usuario.
• When arriving from specific URL: el pop-up solo saltará si llegas desde una dirección web específica.
• Show when arriving from: esta opción, que puede parecer muy semejante a la anterior, te permite indicar que el pop-up salte si el usuario viene desde motores de búsqueda, enlaces externos o enlaces internos.
• Hide for logger in users: configura el tipo de usuario para el cual el pop-up no se le mostrará
• Show on devices: indica los dispositivos donde se mostrará el pop-up.

Conclusión

Utilizar con cabeza los pop-ups en tu página web es requisito fundamental en la estrategia de marketing.

Es una buena manera de conseguir leads cualificados para tu lista de suscriptores, pero un uso excesivo puede echar al visitante de tu web.

Elementor da una serie de herramientas muy interesantes de cara a diseñar y construir tus propios pop-ups.

¡Aprovéchalo!

¿Y tú, utilizas Elementor?  ¿Thrive Leads? ¿Haces los pop-ups a mano?

Nos leemos en los comentarios.