Seguramente los conoces y te has encontrado con uno. Los popups son una pequeña ventana que aparece mientras estás navegando por algún sitio web o un ecommerce, ofreciéndote algún descuento, suscripción o contenido.
Los popups son algo controversiales y no le agradan a la mayoría. Y con algo de razón: interrumpen la experiencia del usuario y si no se usan de forma adecauda, son molestos.
Sin embargo, si se usan de forma inteligente y no tan invasiva, los popups pueden ayudarte a:
- Generar más suscriptores a tu lista o newsletter
- Promocionar contenido específico
- Reducir el porcentaje de rebote
- Aumentar las ventas de tu ecommerce
En esta guía vamos a revisar a detalle cómo agregar un popup en Elementor y algunos tips extra para usarlos de forma efectiva en tu sitio web.
NOTA: Los popups son una función exclusiva de Elementor PRO.
Tipos de popups en Elementor
Estos son las variedades que tenemos disponibles:
- Generación de leads.
- Suscripción para newsletters
- Promoción / ventas
- Login
- Restricción de contenido
- Exit intent
- Anuncios
La misma flexibilidad y opciones de diseño que tenemos para crear páginas y landings pages lo tenemos para ser creativos y armar diferentes tipos popups, pero por si no te sientes con mucha inspiración o necesitas algo rápido, contamos con más de 100 plantillas disponibles.
Formas de mostrar Popups en Elementor
Puedes escoger diferentes posiciones y formas en las que aparezca cualquier popup que vayas a crear, entre las destacas:
- Modal
- Slide-in
- Pantalla completa
- Barra superior o inferior
Cómo agregar un popup en Elementor Pro
Revisa el siguiente video tutorial o sigue en el artículo el proceso paso a paso.
Ahora sí, asegúrate de tener una licencia activa de Elementor Pro antes de comenzar.
Paso 1 – Crea y configura el popup
Ingresa a tu Dashboard de WordPress y haz clic en Plantillas > Mensajes emergentes. Haz clic en el botón verde que dice “Añadir nueva ventana emergente»
Introduce el nombre del popup y haz clic en “Crear plantilla”.
A continuación podrás ver la galería de plantillas que te ofrece Elementor Pro, navega y elige la que mejor se adapte a lo que quieres crear.
En cuanto elijas tu plantilla, se abre el editor de Elementor. Antes de comenzar a diseñar tu popup, echa un ojo a la configuración principal. Del lazo izquierdo inferior hay un botón de ajustes.
Aquí podrás hacer los siguientes ajustes:
- Disposición
- Ancho y alto del popup
- Posición horizontal y vertical
- Si deseas o no superposición
- Si deseas o no botón de cerrar
- Animación de entrada
- Animación de salida
- Duración de la animación
- Ajustes generales
- Título del popup
- Estado
- Etiqueta HTML
- Ajustes de vista previa
Los principals son los de Disposición y Ajustes generales. Revísalos y ajusta a tus necesidades.
Diseña tu popup
Ahora sí, una vez que hayas hecho la configuración básica, ¡es momento de diseñar tu popup!
Puedes agregar cualquier widget de Elementor como imágenes, videos, botones, textos, íconos, formularios, etc.
Si estás basándote en una plantilla, entonces es muy probable que no vayas a necesitar agregar ni cambiar muchas cosas. Lo más normal serían los textos, cambiar imágenes, colores y configurar la integración con tu software de email marketing si usas el widget de Formularios.
Paso 2 – Elige las condiciones de visualización
Ya que tengas diseñado y configurado tu popup, es momento de elegir en qué condciones quieres que se despliegue en tu sitio web o landing page.
Haz clic en la flecha a un lado del botón verde de publiciar y haz clic en “Condiciones de visualización”.
A continuación tenemos tres opciones para configurar:
1. Condiciones. Esto te permite elegir en cuáles páginas o entradas quieres que aparezca el popup. Puedes elegir todo el sitio o por archivos o por página única y ahí elegir páginas, entradas, páginas de destino o incluso si usas Woocommerce, productos y archivos de productos.
También puedes incluir o excluir páginas.
2. Disparadores. Aquí en lugar de elegir páginas, entradas o productos, escoger ciertos “triggers” o disparadores. Estos son:
- Al cargar la página. Eliges a los cuántos segundos quieres que aparezca el popup
- Al desplazarse. Ya sea en dirección hacia abajo o arriba y eliges qué porcentaje para que aparezca.
- Al desplazarse hasta un elemento.
- Al hacer clic.
- Tras ciertos segundos de inactividad
- Al internet salir de la página (exit intent)
3. Reglas avanzadas. Como su nombre lo dice, puedes elegir configuraciones y reglas avanzadas. Ejemplos: mostrar tras cierto número de visitas o sesiones, al llegar a alguna url específica, mostrar al llegar desde buscadores, enlaces externos o enlaces internos, en ciertos dispositivos, navegadores, etc. ¡Una maravilla!
Una vez que hayas seleccionado las reglas, haz clic en “Guardar y cerrar”.
¡Listo! Ya podrás ver tu popup en vivo en las páginas o con las condiciones que hyas seleccionado.
Cómo agregar el popup como botón
Además de usar las reglas de visualación, también puedes hacer que los popups salgan cuando un usuario de clic en un botón o texto. ¡Vamos a ver cómo lograrlo!
En tu página de Elementor, agrega un widget de botón.
Diseña tu botón con los colores, tamaños y tipografías correspondientes. Después, en la parte de enlace, haz clic en el botón pequeño de Etiquetas Dinámicas.
Haz clic en Ventana Emergente
Después, vuelve a hacer clic en Ventana Emergente > Todo. Ingresa el nombre del popup y listo.
Guarda los cambios y haz la prueba. ¡El Pop up aparecerá cuando hagas clic en el botón!
¿Qué te pareció este tutorial?
Ahora ya sabes cómo crear, configurar y publicar popups con Elementor Pro. La realidad es que este plugin es una maravilla y hace que todo sea fácil, sencillo e intuitivo.
Si aún no tienes Elementor PRO, haz clic aquí para adquirir tu licencia.
