Crear Popup con Jquery

Crear popups HTML | CSS y Jquery o sin códigos

Aquí veras todas las formas de como crear un increible popup basado en HTML5 para que puedas mostrarlo en tu blog o página web (es responsive) y así lograr por ejemplo promocionar algún contenido o motivar a que el usuario se suscriba a tu sitio por email.

Y como siempre, no importa que creador web o bien “cms” utilices, pues te mostrare herramientas para crear un pop up que te dan el widget en un código HTML.

¿Para que sirve poner un popup?

Se esta poniendo de moda usarlos en los sitios web, a veces de manera abusiva, por lo que no se entiende su utilidad muy bien la mayoría de veces.

Si se muestran adecuadamente ayudan a persuadir y no a obligar al usuario a realizar una conversión. Aveces uno dice que el usuario es lo mas importante, pero se le molesta en muchas ocasiones, dejándolo con un mal sabor de boca, que es lo peor de hecho.

Poner popups estratégicamente no significa poner varios, muy coloridos y que aparezcan cada ciertos segundos.

Es verdad que casi siempre se usan para recibir un pago de cierta forma por el contenido, pero claro que se puede lograr esto y al mismo tiempo encantar al usuario por la usabilidad de nuestra web.

Estoy preparando un post para explicar esto a detalle, así que por ahora me enfocare en como hacerlos.

¿Como crear un pop up HTML?

Con las siguientes herramientas, recuerda que funcionan para cualquier creador web, aun así, al final citare desde luego los plugins exclusivos para algunos CMS’s.

Vía GetSiteControl

Esta es una de las mejores plataformas de widgets, ofrece varios y todos en formato de popup aparte de otros mas, puedes crear una ventana de suscripción, una con botones sociales, una tipo encuesta, una con un formulario de contacto o una de promoción nada más.

Permite gratis la integración con el servicio MailChimp pero el usar imágenes es de pago.

[symple_button url=”https://getsitecontrol.com?ref=30297″ color=”orange” button_target=”_blank” btnrel=”nofollow”]Probar[/symple_button] | Centro de soporte

Tutorial:

1. Una vez en su página, registrate, haciendo clic en “Get Started”.

2. Despues de estar registra@ tienes que añadir su código HTML general a tu web

Insertalo de una forma en la que este en todas las páginas o artículos. Puede ser en el <footer>.Mira como hacer esto en algunos creadores web aqui.

GetSiteControl - Codigó3. En el dashboard tan solo hace falta ir al botón que dice “Create widget” para hacer tu primer popup y configuralo, prueba con el “widget de promo”.

Popup para blogs

  • En el apartado “Appareance” se trabajan las opciones de estilos, como la posición, los colores, el tipo de fuente, entre otras.
  • En la sección “Content” se introduce el texto que se mostrara en el popup.
  • En “Behaviour” se define el comportamiento del widget  de forma técnica.
  • Finalmente en el apartado  “Targeting” estan las las opciones de visualización.

4. A lo ultimo solo debes de activar el widget para que aparezca en tu blog o página corporativa.

La verdad es que es muy fácil de entender.

Vía Appocalypsis

Es novedad, sin embargo la verdad es que ha venido a titularse como una de los mejores constructores de ventanas emergentes de todo tipo. Ofrece mas de 70 plantillas y muchas opciones de visualización, aunque la integración con MailChimp es de pago.

[symple_button url=”https://www.appocalypsis.com/” color=”orange” button_target=”_blank” btnrel=”nofollow”]Probar[/symple_button] | Centro de soporte

Vía Sumo

Esta opción se ha vuelto muy popular dentro de la blogosfera, pues ofrece varias utilidades de gran valor, entre estas un generador de lo que estas buscando. El problema es que gratis es muy limitado en cuanto a diseño y hará que tu ventana se cierre lo mas antes posible.

[symple_button url=”https://sumo.com/app/list-builder” color=”orange” button_target=”_blank” btnrel=”nofollow”]Probar[/symple_button] | Centro de tutoriales

Vía POWr

Esta es otra plataforma de plugins buenísima, entre los que tiene esta un creador de popups sencillo que es mas que útil pues ofrece gratis la incorporación de imágenes. Sin embargo solo se pueden crear en el popups informativos y no de otro estilo.

[symple_button url=”https://www.powr.io/plugins/popup” color=”orange” button_target=”_blank” btnrel=”nofollow”]Probar[/symple_button] | Centro de tutoriales

Vía Privy

Esta excelente herramienta se especializa en la creación de ventanas emergentes de suscripción, la verdad es que su interfaz es muy intuitiva y aun así tiene varias opciones avanzadas. Permite gratis la incrustación de imágenes y la integración con MailChimp.

[symple_button url=”https://privy.com/” color=”orange” button_target=”_blank” btnrel=”nofollow”]Probar[/symple_button] | Centro de soporte

Vía Zotabox

Aqui otra plataforma de complementos (cada vez son mas), proporciona la creación de popups informativos y de suscripción, solo que estos últimos son una característica “premium”. Aun así es muy fácil de entender e instalar, sin duda es una muy buena opción.

[symple_button url=”https://zotabox.com/zbv2/simplepopup” color=”orange” button_target=”_blank” btnrel=”nofollow”]Probar[/symple_button] | Centro de soporte

Vía OptKit

Sin duda es una excelente opción, permite crear un popup desde cero o utilizar una plantilla como la mayoría de las herramientas mostradas aquí, lo que me gusta es su extrema simplicidad de uso, es para auténticos novatos en esto como yo.

[symple_button url=”https://optkit.com/” color=”orange” button_target=”_blank” btnrel=”nofollow”]Probar[/symple_button] |Centro de soporte

Vía MailMunch

Se trata de una herramienta que se especializa en las ventanas emergentes de suscripción. También es una opción muy famosa, ofrece muchas opciones de campos y la integración gratis con un montón de servicios como MailChimp. Muy recomendable.

[symple_button url=”https://www.mailmunch.co/” color=”orange” button_target=”_blank” btnrel=”nofollow”]Probar[/symple_button] | Centro de tutoriales

Vía Superscribe

Es una aplicación sencilla pero que cumple bien con lo suyo, esta enfocada en el email marketing como otras, funciona con MailChimp como suele ser y creo que otorga un pequeño espacio de almacenamiento para administrar los mensajes.

[symple_button url=”https://superscribe.co” color=”orange” button_target=”_blank” btnrel=”nofollow”]Probar[/symple_button] | Centro de soporte

Quizas buscabas: Popup con el likebox (Page Plugin) de Facebook dentro

Plugins tipo “creador de popups” exclusivos

WordPress:

Joomla:

Drupal:

Los estilos de pop up para páginas web

 Opt-In Center

Es como el estándar, también es el que ha aburrido a muchos. 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 contenido de la página.

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 la información 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 popup de media página, el cual puede ser uno de los mas agresivos para el usuario por lo que no es uno de las mas conversiones en verdad naturales logre.

Full Page

En este caso hablo de una ventana emergente de pagina completa, aunque bien puede utilizarse para una portada de bienvenida personalmente creo que puede llegar a ser muy molesto, solo es mi opinión.

Click Button

Por ultimo el estilo de “click button” puede ser mas persuasivo, pues abre un popup con la misma intención del usuario y podría decirse que en el momento adecuado. Es mas que eficaz.

¿Como hacer uno desde cero en código?

Ventana emergente básica

Su programación consiste en unas cuantas lineas de código:

<!-- Ventanas Pop up -->
<script>
function popUp(URL) {
day = new Date();
id = day.getTime();
eval(&quot;page&quot; + id + &quot; = window.open(URL, &#39;&quot; + id + &quot;&#39;, &#39;toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=400,left=212,top=184&#39;);&quot;);
}
</script>

Avanzado: Ejemplo con JavaScript, CSS y Jquery

El blog de diseño web “DissenyWeb” nos enseña como hacer un pop up desde cero usando simplemente las tecnologías HTML5, JavaScript y CSS.

Tan solo se necesitan estos archivos, súbelos a tu servidor.

Lo siguiente es llamar al archivo .css:

<link rel=”stylesheet” href=”demo.css”>

Después hay que crear un botón, el cual abrirá el popup:

<input type=”button” value=”Pop up en Zoom In” data-type=”zoomin” />

Mas tarde solo hay que programar el contenido que ira dentro, este es un ejemplo:

<div class=”overlay-container”>
<div class="window-container zoomin">
    <h3>Ejemplo de un titulo H3</h3>
    Ejemplo de texto de la ventana emergente<br/>
    <br/>
    <span>Cerrar ventana</span>
 </div>

Finalmente se llama al archivo demo.js y por ende se activa el jquery:

<script>!window.jQuery && document.write(unescape('%3Cscript src=”jquery-1.7.1.min.js”%3E%3C/script%3E'))</script>
<script type="text/javascript" src="demo.js"></script>

¿Preguntas que puedes hacerte?

¿Debo de pagar por crear y ocupar los popups HTML?

Estas aplicaciones tienen una versión gratuita pero también un modelo de pago, el cual es mas que recomendable si se quieren hacer obtener resultados extraordinarios.

¿Como puedo entender mejor las herramientas mostradas?

Me asegure de linkear el centro de ayuda de cada una, igualmente si tienes problemas puedes consultar en los comentarios y con gusto seras atendido.

¿Comparto el articulo?

Depende de si es lo que buscabas.

2 Comentarios para “Crear popups HTML | CSS y Jquery o sin códigos”

Deja tu propio comentario