Crea tu primer Pop-up con ColorBox

Los Pop-up o Ventanas emergentes son un elemento indispensable para dar a conocer una promoción, oferta, descuento e incluso un formulario de registro en tu página web.

[php snippet=1]

Por ejemplo muchas páginas web lo usan en el home de su página principal, lo presentan como un formulario de contacto y ofrecen descuentos a quien se registre.

Como pueden ver es una muy buena estrategia de marketing para generar leads de muy buena calidad.

Ahora bien sabemos que WordPress es el sistema de gestión de contenido más usado en el mundo, sin embargo cuando trabajamos con una pagina web limpia es necesario integrarlo manualmente.

¿Qué quiero decir con una página web limpia?

Pues una página que no se encuentra en ningún sistema de gestión de contenido y como todo guerrero azteca (Si, soy de México), la desarrolla desde cero.

Pop up con Color Box.

Pues bien manos a la obra y lo primero que tienes que hacer es ir directamente a la página de colorbox y descargar los archivos Jquery.

Colorbox nos proporciona un tutorial sobre como integrarlo a nuestra página web, pero algo que no tiene en su documentación es como hacer un pop up.

Entonces suponiendo que ya has descargado el plugin de Colorbox y además ya tienes noción en programación el siguiente código será muy entendible para ti.

<script>
jQuery(document).ready(function($) {
$.colorbox({
iframe:true,
width:»70%»,
height:»60%»,
href:»https://www.youtube.com/embed/rVSDTXU4Fko»,
open:true });

});

</script>

Este código es un simple script que carga automáticamente un pop up cuando el DOM de la página ya esta listo.

Los 2 elementos nuevos son href y open los cuales hacen la llamada al elemento para generar el pop up al cargar la pagina web.

En el ejemplo cuando el Dom de la página web carga, este abre un iframe que contiene un video de youtube.