pop up html jquery css.jpg

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 Privy

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

De forma general es la mejor opción si nos basamos en su relación de costo-beneficio, que refleja sus potentes características ofrecidas a un precio considerablemente bajo.

Por otra parte no encontramos una desventaja notable en este fantastico creador de pop ups.


Precios

  • Free -Gratis
  • Growth -$20 USD/mes

Si necesitas ayuda, visita su espacio de soporte

Tutorial:

Para crear una cuenta en Privy sigue los siguientes pasos.

1 – Una vez dentro de su página de inicio, en la parte superior derecha hacemos clic en el botón «Sign up» y proseguimos a rellenar el formulario a continuación.

Botón Sign Up

2 – Como siguiente paso aparecerá un pop up de bienvenida con la siguiente frase «Your first campaign is published!» y dos botones en la parte inferior.

Para editar tu propia campaña debes hacer clic en el botón «Unpublish & Edit».

Botón Editar campaña

3 – Después haz clic sobre la campaña por defecto «Newsletter Signup», luego dentro ve a la sección «Design» en la parte superior izquierda para modificar el diseño del pop up.

4 – Como siguiente paso selecciona «Click to edit» en la opción «Popup Design».

Para editar el texto solo haz clic sobre él, toca el botón y ve a sus configuraciones para cambiar el color y tipos de letra y presiona «Save» para guardar tus cambios.

5 – Para instalar el código debes darle a la «x» del pop up y cerrarlo, seguido te aparecerá el botón «Install my code», cópialo y pegalo en el «header o footer» de tu página web. ¡Y listo!

Agrega tus propias segmentaciones en la opción «Popup tiggers» dando clic nuevamente en «Click to edit» y modifica el momento de aparecer o después de que el usuario haya visto cierto porcentaje de la página y después de cierto tiempo o frecuencia.

La siguiente forma de seguir configurándolo es seleccionar el tipo de audiencia o a quienes se les muestra en la opción «Audience targeting» como por ejemplo si tienes una tienda online puedes hacer que aparezca cuando tengan cierto valor en el carrito.

O que aparezca en contenido específico de tu página web.

 

2. Con Justuno

Uno de sus mejores puntos a favor es que te permite editar el diseño de cada pop up profundamente (avanzado), por lo que tus campañas serán las mejores.

Además de que es también uno de los programas que ofrece una gran variación de opciones para segmentar.

 

Ver ejemplo:

Una de sus desventajas es que solo te permite añadir los pop ups a un solo sitio web.


Precios

  • Básico- Gratis
  • Básico (Pago) -$49 USD/mes

Si necesitas ayuda, visita su espacio de soporte

3. Con Sumo

Se puede destacar que a diferencia del resto de programas, permite crear ventanas emergentes para múltiples sitios web con una misma cuenta desde su plan gratuito.

Esta herramienta te ofrece varias formas de segmentar tus pop ups para que aparezcan en los sitios y momentos adecuados.

Ver ejemplo:

Una desventaja es que su panel de estadísticas solo lo ofrece en su plan de pago.


Precios

  • FREE – $0
  • PRO – $49 USD/mes

Si necesitas ayuda, visita su espacio de soporte

4. Con AddThis

Un pro para este widget es que además de ser gratuito, también ofrece otros programas incluidos como lo son «share buttons» por lo que es una opción atractiva para empezar.

Marcando otra ventaja notable es que, no debes preocuparte por el límite de vistas ya que es completamente ilimitado.

La desventaja para este programa es no poder eliminar su marca debido a que es gratuito.


Si necesitas ayuda, visita su espacio de soporte

5. Con Poptin

Tienes la ventaja de una gran lista de integraciones como MailChimp, que funcionan para generar campañas y obtener más conversiones.

También tienes una extensa manera de segmentar cada pop up desde el plan gratuito, hasta disfrutar tambien de la tecnología exit intent.

Ver ejemplo:

Su desventaja es que de todos los programas es el que ofrece menos vistas en su plan gratuito.


Precios

  • FREE -$0 USD/mes
  • Basic-$19 USD/mes
  • Pro-$49 USD/mes
  • Agency-$99 USD/mes

Si necesitas ayuda, visita su espacio de soporte

6. 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.

Otra ventaja para este programa es que el límite de vistas es mayor a otros widgets y sus precios se acomodan a empresas con un gran número de visitantes.

Una desventaja notable es que no te ofrece ningún tipo de estadísticas con las que puedas medir tus conversiones, solo ofrece la integración de Google Analytics.


Precios

  • Basic-$9 USD/mes
  • Plus-$19 USD/mes
  • PRO-$29 USD/mes
  • Growth-$49 USD/mes

Si necesitas ayuda, visita su espacio de soporte

7. Con GetSiteControl

Su mayor ventaja es que permite crear no solo pop ups para capturar emails, si no también formularios de contacto, botones para compartir, encuestas y más.

Además de todo esto, lo más genial es que puedes eliminar su marca desde su primer plan, lo que otros programas por el mismo precio no te permiten.

Esta herramienta solo ofrece pocos datos en el panel de estadísticas lo que hace que sea su desventaja.


Precios

  • Small – $9/mes
  • Medium – $19/mes
  • Large – $29/mes

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. 😄