Todo lo que tu página web necesita

Crear popups HTML – Con o sin JavaScript y Jquery

Hacer popups HTM

Aqui veras como diseñar un increible popup basado en HTML5 para que puedas mostrarlo en tu blog o página web y asi lograr por ejemplo promocionar algun 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 popups que te dan tu widget en un código HTML.

¿Para que sirven en verdad los popups?

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 mayoria 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, dejandolo con un mal sabor de boca, que es lo peor de hecho.

Poner popups estrategicamente 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, asi que por ahora me enfocare en como hacerlos.

Los estilos de popup para páginas web

 Opt-In Center

Es como el estandar, 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 todo lo demas.

Slide Box

A diferencia del primero suele ser de un tamaño menor y no suele opacar todo el contenido, tambien la mayoria 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 prodia decirse que en el momento adecuado. Es mas que eficaz.

 

¿Donde y como crear un pop up HTML?

Las siguientes son aplicaciones universales, 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 nadamas.

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

Probar | Centro de soporte

Tutorial:

  1. Registrate, haciendo clic en “Get Started”.
  2. Una vez registra@ tienes que añadir su código HTML a tu web.

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

GetSiteControl - Código

  1.  Crea tu popup y configuralo, prueba con el “widget de promo”.

Crear popup para web

  • 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 tecnica.
  • Finalmente en el apartado  “Targeting” estan las las opciones de visualización.

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

La verdad es que es muy facil 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.

Probar | 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 hara que tu ventana se cierre lo mas antes posible.

Probar | Centro de tutoriales

Vía POWr

Esta es otra plataforma de plugins buenisima, entre los que tiene esta un creador de popups sencillo que es mas que util pues ofrece gratis la incoporación de imagenes. Sin embargo solo se pueden crear en el popups informativos y no de otro estilo.

Probar | 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 intuitivaa y aun asi tiene varias opciones avanzadas. Permite gratis la incrustación de imagenes y la integración con MailChimp.

Probar | Centro de soporte

Vía Zotabox

Aqui otra plataforma de complementos (cada vez son mas), proporciona la creación de po ups informativos y de suscripción, solo que estos utlmos son una caracteristica “preimum”. Aun asi es muy facil de entender e instalar, sin duda es una muy buena opción.

Probar | 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 mayoria de las herramientas mostradas aqui, lo que me gusta es su extrema simplicidad de uso, es para autenticos novatos en esto como yo.

Probar |Centro de soporte

Vía MailMunch

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

Probar | Centro de tutoriales

Vía Superscribe

Es una aplicacion 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.

Probar | Centro de soporte

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

Plugins especiales para algunos sistemas

WordPress:

Joomla:

Drupal:

¿Como hacer uno desde cero en código?

Ventena emergente basica

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>

Ventana emergente avanzada

El blog de diseño web “DissenyWeb” nos enseña como hacer una desde cero usando simplemente las tacnologias HTML5, JavaScript y CSS.

Tan solo se necistan estos archivos, subelos a tu servidor.

Lo siguiente es llamar al archivo .css:

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

Despues hay que crear un botón, el cual abrira 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 tambien 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.