21 ejemplos de pop-ups que generan conversiones

Para ayudarte a sacar el máximo partido de esta oportunidad de exposición, este artículo te explicará las mejores prácticas de las ventanas pop-up con llamativos ejemplos de ventanas pop-up. Utiliza la información para inspirar tus propios diseños, haz crecer tu lista de correo electrónico y ve cómo se disparan las conversiones de tu negocio.

Las ventanas pop-up son ventanas emergentes de contenido que aparecen sobre una página web mientras el usuario navega en ella. Aumentan la visibilidad del contenido en la ventana emergente, lo que las convierte en una forma eficaz de promocionar ofertas o convertir a los visitantes en suscriptores de correo electrónico. 

Puedes fácilmente añadir ventanas pop-up a tu sitio web con MailerLite creando una con nuestro generador de formularios y pegando el código generado en la cabecera de tu sitio web o conectándote a través de nuestros plugins de WordPress o de e-commerce. 

Puedes utilizar las ventanas pop-up del sitio web para aumentar tu lista de correo electrónico, promocionar páginas y productos, probar rápidamente ofertas y compartir noticias importantes con los visitantes. Sigue leyendo para ver cómo cada uno de estos casos de uso puede beneficiar a tu empresa.

1. Las ventanas pop-up son una forma eficaz de hacer crecer tu lista de correo electrónico. 

Las ventanas emergentes son una forma efectiva de convertir a los visitantes de sitios web y blogs en suscriptores de correo electrónico. Como las ventanas pop-up aparecen sobre el contenido que está leyendo el lector, es difícil pasarlas por alto, y cuantas más personas vean tu oferta, más probabilidades habrá de que conviertan.

Para hacer crecer tu lista de correo electrónico con ventanas pop-up de sitios web, simplemente crea una con un texto que explique los beneficios de unirse a tu lista y añade un formulario de suscripción de correo electrónico.  

Este ejemplo de formulario pop-up de MailerCheck fomenta las suscripciones explicando claramente que los suscriptores recibirán un newsletter mensual con consejos y trucos de email marketing y entregabilidad. 

2. Las pop-ups pueden promocionar ofertas en tu sitio web y landing pages

Las ventanas pop-up también son una forma eficaz de aumentar la exposición de las promociones en tu sitio web y landing pages. Los pop-ups promocionales te permiten mostrar tus últimas ofertas o productos a cualquiera que visite tu sitio. Esto puede generar más ventas, descargas y conversiones. 

Estas son algunas formas de utilizar los pop-up promocionales:

• Ofrecer códigos de descuento de primera compra mientras el usuario está comprando

• Recopilar opiniones de los clientes con ventanas emergentes de encuestas

• Promocionar seminarios web o nuevos productos

• Aumentar las descargas de aplicaciones en tu sitio web

• Enviar a los visitantes a una nueva entrada del blog

3. Las ventanas pop-up te permiten probar diferentes ofertas

Nada mejorará más rápidamente el rendimiento de tu sitio web que las pruebas continuas. La forma en que se redactan, diseñan e incluso presentan las ofertas puede influir en cómo las recibe el público.

Las ventanas emergentes te permiten comprobar rápidamente cómo reacciona tu público a las ofertas especiales mostrándoselas a todos los visitantes de tu sitio web. Distribuye por todo tu sitio web las promociones que obtengan mejores resultados y elimina las que no lo hagan. 

La forma más sencilla de probar varias ofertas es realizar pruebas A/B de tus ventanas pop-up. Sólo tienes que crear dos versiones de un formulario, cada una con una oferta diferente, y MailerLite mostrará los formularios a las personas que visiten tu sitio web. A continuación, puedes hacer un seguimiento de los productos que convierten con mayor frecuencia y extenderlos a todos los usuarios de tu sitio web. 

Haz clic aquí para obtener más información sobre cómo configurar pruebas A/B de formularios con MailerLite. 

4. Las ventanas pop-up te ayudan a anunciar noticias importantes

Este tipo de ventanas son una forma estupenda de informar a los visitantes de tu sitio web de anuncios comerciales. Utilízalas junto con publicaciones en redes sociales, correos electrónicos y blogs para maximizar el número de personas que ven tus noticias importantes.

Utiliza ventanas emergentes para anunciar novedades, actualizaciones de productos, tu última colección, cambios en los horarios de apertura o cualquier otra información que los visitantes del sitio web necesiten saber. 

Ahora deberías entender cómo los pop-ups pueden ayudarte a ti y a tu negocio. A continuación te mostramos los distintos tipos de ventanas emergentes que puedes utilizar, así como un ejemplo de cada una de ellas.

Ejemplo de pop-up temporal

Estas ventanas temporales aparecen después de que un usuario haya estado en tu sitio web durante un número determinado de segundos.

Se trata del tipo más popular de ventanas pop-up: puedes mostrarlas en una específica landing page o en todo el sitio.

A continuación, un ejemplo de una sencilla ventana emergente temporal en el blog de Tony Robbins.

Ejemplo de pop-up de bienvenida

Las ventanas emergentes de bienvenida cubren toda la ventana del navegador, lo que garantiza que tu oferta capte plenamente la atención del visitante. 

Si embargo, si no se utilizan correctamente, estas ventanas pop-up pueden ser muy intrusivas y perjudicar la experiencia del usuario. Por eso utilízalas en ocasiones especiales y no pierdas de vista tus análisis para ver cómo reacciona tu público.

Aquí tienes un ejemplo de pop-up de bienvenida en el blog de 99Designs. Es imposible que se pierda, pero tiene un botón de cierre claro para que la gente pueda volver fácilmente al contenido.

Ejemplo de pop-up activada por desplazamiento

Las ventanas emergentes activadas por desplazamiento se muestran cuando un usuario alcanza un cierto punto en tu página. Por ejemplo, una ventana pop-up activada por desplazamiento puede aparecer después de que un visitante haya recorrido el 70% de una entrada larga de un blog.

Dado que las personas que ven una ventana emergente activada por desplazamiento ya han visto el valor que proporcionas, es más probable que interactúen con tu oferta.

Aquí tienes un buen ejemplo de una ventana pop-up activada por desplazamiento en el blog Help Scout.

Ejemplo de pop-up de bienvenida en formato barra

Las ventanas emergentes de bienvenida en formato barra aparecen en la parte superior o inferior de tu página web. Son las menos invasivas de todas las ventanas emergentes porque no tapan el contenido que el visitante está leyendo. Estas ventanas pop-up funcionan bien tanto para anuncios en todo el sitio como para formularios de suscripción por correo electrónico.

Así es como Elegant Themes utiliza su barra de bienvenida emergente para llamar la atención sobre su oferta.

Ejemplo de pop-up de salida

Las ventanas emergentes de salida aparecen cuando un visitante está a punto de salir de tu página. Funcionan detectando el momento en que el cursor del visitante alcanza la parte superior de la página, lo que indica que está a punto de abandonarla. Genial, ¿no es así? La ventana pop-up de intención de salida aparece para recordar a la persona tu oferta e incluso puede ayudar a reducir el abandono del carrito.

El equipo de Coschedule utiliza ventanas emergentes de intención de salida para llegar a los visitantes por última vez antes de que se vayan.

Ejemplo de pop-up de clic para eventos

Una ventana emergente de clic para evento es una ventana de texto que aparece cuando un visitante del sitio web hace clic en un enlace determinado, como un llamado a la acción (CTA). Los visitantes que hacen clic en la CTA ya han decidido pasar a la acción, por lo que hay muchas posibilidades de que conviertan cuando lean el texto emergente.

Cualquiera puede crear estas ventanas pop-up

Puedes crear todas estas ventanas emergentes avanzadas con el editor de pop-ups de MailerLite y sincronizarlas con tu lista de correo electrónico.

Aquí tienes un video tutorial de pop-ups que muestra lo fácil que es crear pop-ups con MailerLite. Además, ¡son totalmente gratis! Todos los usuarios, incluidos los del plan gratuito, pueden crear formularios emergentes ilimitados para hacer crecer sus listas de correo electrónico. Más información y regístrate aquí. 

Hasta ahora hemos hablado de cómo funcionan las ventanas emergentes de los newsletters por correo electrónico y cómo pueden ayudar a tu negocio. A continuación, compartiremos algunas de las mejores prácticas y más ejemplos de ventanas pop-up de correo electrónico para ayudarte a crear ventanas emergentes eficaces.

1. Las ventanas emergentes deben destacar un beneficio

La ventana pop-up debe explicar claramente las ventajas de la oferta para que los usuarios sepan por qué deben suscribirse. 

Al promocionar un newsletter por correo electrónico, los beneficios pueden ser tan sencillos como la información que el visitante conocerá al suscribirse y cómo éstos le ayudará.

A continuación se muestra un ejemplo creado con MailerLite de la plataforma de integración Workato. Destaca que las personas que se suscriban al newsletter quincenal aprenderán todo lo necesario para crear mejores integraciones y automatizaciones. 

Puedes dar a la gente un incentivo adicional para inscribirse en tu lista mediante la promoción de un lead magnet que reciben cuando se unen. 

Photoshop Mosaic hace esto prometiendo enviar a cualquiera que se suscriba a la lista un conjunto de texturas abstractas gratuitas de alta resolución para Photoshop.

2. Las ventanas pop-up de correo electrónico deben aparecer en el momento adecuado

Como en el amor y en los negocios, el momento oportuno lo es todo en las ventanas emergentes. Mostrar tu ventana emergente en el momento adecuado es clave para aumentar tu tasa de conversión. 

Interrumpir a un lector nada más aterrizar en tu sitio web es poco probable que conduzca a una experiencia de usuario positiva. Es como si te acosara un vendedor nada más entrar en una tienda. 

En su lugar, da tiempo a los visitantes para familiarizarse con tu contenido antes de mostrar la ventana emergente. Así generarás confianza y será más probable que la gente convierta cuando vea tu oferta.

Cómo optimizar las ventanas pop-up temporales 

Echa un vistazo a tus datos de Google Analytics para saber cuál es el mejor momento para mostrar tus ventanas emergentes. Averigua el tiempo medio de permanencia en la página y activa la ventana pop-up cuando haya transcurrido el 30% de ese tiempo.

Si tienes Google Analytics activado en tu sitio web, encontrar el tiempo medio en la página es sencillo. Haz clic en Comportamiento y elige la opción Visión general. Verás que el tiempo medio en página es una de las principales métricas.

El tiempo en la página te da una línea de base sobre dónde empezar, pero debes probar diferentes tiempos para obtener los mejores resultados. Prueba mostrar tu ventana emergente más tarde o más temprano para ver qué funciona mejor.

Recuerda también que la gente pasa un tiempo diferente en cada tipo de página, por lo que debes ajustar los tiempos de las ventanas emergentes en consecuencia. La gente puede permanecer en una entrada de blog de 5.000 palabras durante más de diez minutos, pero abandonar una breve landing page tras sólo unos segundos. 

Herramientas para optimizar la sincronización de la ventana pop-up activada por desplazamiento

Aprovecha las ventanas emergentes activadas por desplazamiento que sólo aparecen cuando el usuario alcanza a leer parte de tu página. Así podrás saber con precisión si alguien está listo para ver tu ventana pop-up.

Herramientas como Hotjar, Crazyegg o Clicktale te ayudarán a seguir el comportamiento de tus visitantes en tu sitio. Encuentra las áreas en las que la gente está más comprometida y establece el disparador de desplazamiento.

Aquí te compartimos otro ejemplo de ventana pop-up activada por desplazamien que utiliza Groove en su blog.

3. El diseño de tu pop-up debe ir acorde con tu marca

Alinea el diseño de tus ventanas emergentes con tu sitio web y tu marca. Para ello, haz coincidir el color principal, la tipografía y el texto de las ventanas pop-up con los de tu sitio web.

He aquí un ejemplo de ventana emergente de SmartBlogger en sintonía con el resto de su marca. Los colores, las tipografías e incluso el estilo de escritura son inmediatamente reconocibles para cualquiera que esté familiarizado con la marca SmartBlogger.

4. Haz que las ventanas pop-up sean lo más relevantes posible

Las ventanas emergentes tienen más posibilidades de conversión cuando la oferta está estrechamente relacionada con el contenido de la página. Para conseguir más inscripciones, ten en cuenta los retos que suelen tener las personas que visitan tu sitio web y tus páginas y, a continuación, crea ofertas relacionadas. 

He aquí un ejemplo. En MailerLite, promocionamos nuestro curso intensivo de entregabilidad de correo electrónico descargable con una ventana pop-up temporizada en la entrada de nuestro blog sobre los mejores servicios de limpieza de listas de correo electrónico. 

Pero en los artículos de ideas y consejos que compartimos en nuestro newsletter mensual, promocionamos nuestro calendario de contenidos por correo electrónico con una barra de bienvenida.

5. La ventana pop-up con CTA debe ser prominente y accionable

Tu ventana emergente debe tener un llamado a la acción (CTA) claro que anime a los visitantes del sitio web a realizar una acción concreta. Tu CTA debe diferenciarse del resto del contenido de la ventana pop-up. Debe captar la atención de inmediato y los lectores deben saber intuitivamente qué hacer a continuación.

Puedes conseguirlo de la siguiente manera:

• Dale a tu CTA un color que contraste con el de la página

• Utiliza verbos de acción en el CTA para establecer claramente la acción deseada

• Indica el beneficio de actuar

La siguiente ventana pop-up de Satisfy Running cumple bien los tres puntos anteriores: Destaca las ventajas exactas de pasar a la acción, utiliza colores contrastados y anima a la acción con verbos.

6. Las ventanas pop-up deben ser fáciles de cerrar

Deja claro cómo se puede cerrar la ventana pop-up para que quienes no deseen suscribirse puedan volver a disfrutar del contenido. Tu botón de cierre no debe ser tan prominente como tu CTA, pero tampoco puede ser algo que un visitante pasaría por alto.

Evita utilizar frases negativas o pasivo-agresivas como opción para cerrar una ventana emergente a menos que realmente se adapte a la voz de tu marca. En la mayoría de los casos, hacer que los visitantes hagan clic en frases como "No quiero más suscripciones a correo electrónico" o "No quiero cambiar mi vida" para cerrar la ventana emergente les molestará y perjudicará a tu marca.

Mira este ejemplo emergente de Tim Ferris. Fíjate en cómo escribe la opción de desestimar sin insultos ni comentarios sarcásticos. 

7. Pide sólo la información necesaria

Es más probable que la gente se suscriba a tu lista de correo electrónico cuando el proceso es sencillo. Reduce la fricción solicitando únicamente una dirección de correo electrónico cuando los usuarios se registren. Si reduces al mínimo la información que solicitas, aumentarás el número de personas que se unan a tu lista y siempre puedes utilizar encuestas por correo electrónico para recopilar más información de los suscriptores una vez que se hayan suscrito.

La siguiente ventana pop-up de 100 Days of No Code es un buen ejemplo de ventana emergente de newsletter que sólo solicita la dirección de correo electrónico del suscriptor. La marca no necesita más información para empezar a convertir las inscripciones en clientes..

8. Crea pop-ups de newsletter adaptables para que funcionen en todos los dispositivos

Tus ventanas pop-up deben ser adaptables para que se vean bien en todos los tamaños de pantalla, tanto en los móviles y tabletas como en los dispositivos de escritorio. Todos los botones y formularios deben ser accesibles independientemente del tipo de pantalla que utilice el visitante. 

Las ventanas emergentes de MailerLite siempre responden, por lo que no necesitas hacer ningún trabajo extra.

Este es un ejemplo de plantilla pop-up optimizada para móviles plantilla emergente que puedes crear con MailerLite.

9. Las ventanas pop-up deben ser respetuosas

Si alguien cierra una ventana emergente, significa que no quiere seguir viéndola. Respeta su decisión y no le muestres más ventanas emergentes durante su visita. Es molesto, simple y llanamente.

Puedes solucionarlo configurando la frecuencia de las ventanas emergentes (la frecuencia con la que un visitante ve una ventana emergente) a un máximo de una vez al día.

Si anuncias productos o nuevas entradas de blog con ventanas pop-up, evita mostrar la misma ventana emergente a un visitante que ya haya realizado una acción. La mayoría de los editores de ventanas emergentes tienen esta configuración.

¿Quiere más ideas? Aquí tienes ejemplos de ventanas emergentes de correo electrónico creadas por gente como tú. Se crearon en MailerLite. Mantenlo sencillo y diviértete experimentando con tus ventanas emergentes.

En el ejemplo anterior de ventana pop-up de correo electrónico, Perfect Glasses utiliza su formulario emergente para atraer a los visitantes del sitio web a unirse a su lista de correo ofreciéndoles el envío de un cupón a todos los que se suscriban.

Healthy Essentials Australia opta por un formulario emergente de promoción de encuestas en el que se les pide su opinión antes de dejar su sitio. De este modo, la empresa obtiene información valiosa para saber por qué se están perdiendo ventas y, al mismo tiempo, recopila suscriptores a los que posteriormente puede animar a realizar una compra.

Arriba se muestra un ejemplo de ventana emergente de correo electrónico en la que Powerpointify ofrece a los nuevos suscriptores una descarga gratuita que consta de más de 40 diapositivas de PowerPoint cuando se registran para recibir newsletters a través de su formulario de suscripción de correo electrónico. Como resultado, Powerpointify sabrá que los suscriptores de este formulario emergente responden a la inspiración de diapositivas y al contenido gratuito.

En este ejemplo de ventana emergente de correo electrónico, RhinoFit utiliza un formulario pop-up de promoción en su página de precios para invitar a los visitantes a programar una demostración.

Reflexiones finales sobre las ventanas pop-up

Cuando las ventanas emergentes aportan valor a tus visitantes sin perjudicar su experiencia de navegación, has alcanzado el nirvana de las ventanas emergentes.

Si quieres empezar a hacer crecer tu lista y tu negocio utilizando pop-ups, nuestro editor de pop-ups facilita su creación. Haz clic aquí para registrarte gratis y empieza a crear tu primer pop-up hoy mismo.

Nota del editor: Este post se publicó originalmente en octubre de 2018 y se ha actualizado con nuevos ejemplos y funciones.

Y si has tenido alguna experiencia con ventanas pop-up (¡buena o mala!) que te gustaría compartir, nos encantaría saber más en la sección de comentarios más abajo.