Crear Popup con Jquery

Pop up – ¿Qué es? y cómo crear uno fácil para tu página web

¿Qué es un pop up?

Dentro del diseño web se refiere a una ventana emergente que aparece en una página web (sin previo aviso para el visitante), mostrando cualquier contenido, ya sea relevante para el usuario o no.

En los ultimos tiempos estos elementos se han profesionalizado y han pasado de ser totalmente intrusivos a ofrecer experiencias personalizadas.

En Marketing los pop ups se emplean para generar conversiones, lo estandar: capturar el email del visitante para adentrarlo en campañas de email marketing.

Otro ejemplo popular es utilizarlos pars evitar que el usuario se marche robotando de la web, mostrando el pop up cuando intenta salir (el famoso exit intent).

En la actualidad cada uno es capaz de configurarse para ser mostrado en un determinado momento y si se desea en base a una segmentación del tipo de usuario al que quieres dirigirte.

Beneficios de usar pop ups 😱😱

En conclusión te ayudan a convertir el trafico que recibes para que este sirva de algo.

Mira, según la propia herramienta Privy el 98% de los visitantes se van de una web promedio sin hacer nada de valor, una perdida de oportunidades alarmante.

De poco sirve tener 25,000 usuarios/mes, si el 80% por cierto solo se queda mirando tu web sin accionar.

Junto con los live chats, los pop ups son el complemento que mas puede influir en las ventas de una tienda online. A diferencia de otros, que influyen en la usabilidad o en en el diseño nadamas.

Entonces, este tipo de widget realmente puede ser la base sobre la cual el crecimiento de tu página web podra ser una realidad no muy lejana.


Crear un pop up fácil para tu web

A continuación conoceras los mejores popup makers que sirven para diseñar este increible widget visualmente y ponerlo en tu sitio en cuestión de minutos (no importa si usas WordPress o Wix).


 

1. Con GetSiteControl

Su mayor ventaja es que permite crear no solo pop ups para capturar emails, si no con formularios de contacto, botones para compartir, encuestas y mas dentro.



Precios

  • SMALL- $19/mes/sitio web
  • MEDIUM – $29/mes/sitio web
  • LARGE – $49/mes/sitio web

Si necesitas ayuda, visita su espacio de soporte

 

1. Con Sumo

Se puede destacar que a diferencia del resto de programas permite crear ventanas para varios sitios web con una misma cuenta, ademas ofrece buenas opciones de segmentación desde su plan gratuito.

Ver ejemplo:



Precios

  • FREE – $0
  • PRO – $49 USD

Si necesitas ayuda, visita su espacio de soporte

 

1.Con Privy

Una de las grandes ventajas de Privy es que permite hacer campañas de email marketing, por lo que te usar una herramienta como MailChimp sera por fin opcional.

Ver ejemplo:



Precios

  • ALWAYS FREE -Gratis
  • AUTOMATE -$24 USD
  • COMMERCE-$79 USD
  • GROWTH-$299 USD

Si necesitas ayuda, visita su espacio de soporte

 

1.Con Justuno

Sus mejores puntos a favor es que permite editar el diseño de cada pop up profundamente (avanzado) y es la herramienta aquí, que mas opciones de segmentación ofrece.

Ver ejemplo:



Precios

  • Básico- Gratis
  • TRAFFIC 25K -$49 USD
  • TRAFFIC 50K -$99 USD
  • TRAFFIC 100K-$199 USD

Si necesitas ayuda, visita su espacio de soporte

 

1.Con Optinmonster

Lo que se puede destacar es que aunque no ofrece versión gratuita sus planes son los mas asequibles del mercado, debido a que sus funciones no son tan avanzadas.



Precios

    • Basic-$19 USD
    • Plus-$39 USD
    • PRO-$59 USD
    • Growth-$99 USD

     

Si necesitas ayuda, visita su espacio de soporte

 

1.Con AddThis

Uno de sus pros importantes es que obviamente ofrece otros widgets como «share buttons» y que es totalmente gratis (por ahora), por lo que es una opción atractiva para comenzar.



Si necesitas ayuda, visita su espacio de soporte


Pop up makers especiales para algunos CMS’s

A continuación descubre plugins especiales para WordPress y otros gestores de contenido, para diseñar atractivas ventanas emergentes.

WordPress:


Joomla:

Estilos de pop up para páginas web

 

Opt-In Center

Se ha convertido en el estándar. Se trata de una ventana emergente de tamaño mediano que se muestra en el centro oscureciendo en la mayoría de los casos el resto de contenido en la página.

Opt-in center

 

Slide Box

A diferencia del primero suele ser de un tamaño menor y no suele opacar todo el contenido, también la mayoría de veces suele presentar efectos de entrada y salida bastante llamativos y agradables.

 
 

Bar

Se basa en mostrar el contenido en una barra normalmente delgada (aunque ahora pueden ser mas altas) ya sea en la parte de arriba o de abajo, puede ocuparse para el aviso sobre el uso de cookies.

 

Half Page

Este estilo logra que se visualice un pop up form de media página, el cual puede ser uno de los mas agresivos para el usuario a menos de que su apertura sea intencional.

 

Full Page

En este caso hablo de una ventana emergente de pagina completa, aunque bien puede utilizarse para una portada de bienvenida si el contenido no es relevante puede causarle muchas molestias al usuarios.

fullpage

 
Estilos de comportamiento:

Click to Lightbox

Abre un popup con la misma intención del usuario por lo que no suele causar una mala experiencia, sin embargo obviamente puede pasar mas desapercibido.

Si quieres ver algunos ejemplos ve a nuestra sección de códigos y busca la parte de "Mostrar contenido en un popup".

Exit Intent

Este famoso estilo abre el pop up form cuando el visitante intenta irse de tu página web, la verdad se ha demostrado que funciona de maravilla, por lo que no es raro que grandes empresas utilicen este astuto metodo.


¿Preguntas que puedes hacerte? 🤔

- ¿Debo de pagar por ocupar estas herramientas?


Solo si lo necesitas. Estas aplicaciones tienen una versión gratuita para siempre, pero también un modelo de pago, el cual es mas que recomendable si deseas funciones mas avanzadas.

 

- ¿Cómo elegir la opción mas ideal para mi web?


Si usas WordPress enfocate en los plugins que tiene exclusivos, pero de ahi en fuera identifica que necesitas.

Ojo: Dandole clic al nombre de cada programa se te mostraran sus caracteristicas completas, páginas web que le usan actualmente, opiniones de usuarios y mucho mas.

La realidad es la mayoria ofrece practicamente lo mismo, pero:

Si necesitas diseñar pop ups para mas de un sitio te recomendamos Sumo, si necesitas segmentar cuando y cómo se muestran los popups forms de manera compleja el ideal es Justuno.

Y si deseas estadisticas de conversión integradas y personalizar cada detalle del diseño, Privy y Justuno son muy buenos con esto.

Si aparte de pop ups forms quieres que obtener otros widgets cómo formularios de contacto, botones para compartir, GetSiteControl puede que te funcione.

 

- ¿Cómo se instalan en mi página web?


Es realmente facil. Estas herramientas te proporcionan un código que tan solo debes añadir en el Head o Footer general de tu sitio y listo.

No tienes que hacer modificiones de código ni descargar nada. Pero por si acaso, te dejo este tutorial que podria ayudarte mucho en la instalación.

 

- ¿Qué diferencia hay con esto si hago los popups con HTML y CSS?


En diseño y rendimiento no mucha, obtienes los mismos resultados.

Ah, pero te ahorras empezar todo desde 0, es decir mucho tiempo, el cuál puedes ocupar para definir que estrategias de marketing y ventas van a aplicar estos pop ups.

 

- ¿Existen creadores web que ya tengan incluido todo esto?


De hecho si. Plataformas como IONOS, Duda, Squarespace o Emiweb ya traen un creador de popups, por lo que en estos programas te ahorras el contratar una herramienta como las que mostramos en este artículo.


Bien, espero este contenido sea de gran utilidad para tu página web, si notas valor en el por favor compartelo en redes sociales, gracias. 😄