¿Quieres saber cómo hacer un popup en WordPress sin instalar otro plugin? Si tu web está hecha con Divi, puedes crear una ventana emergente con un poco de código que solo tienes que copiar y pegar. Estos son los pasos:
- Agregaremos el script personalizado en nuestro DIVI
- Agregamos el CSS personalizado
- Creamos un botón que active el Popup y agregamos la clase lightbox-trigger-element
- Creamos el contenido emergente de DIVI ya sea sección, fila o módulo y agregamos la clase lightbox-content-element
Contenido del artículo
PASO UNO: Agregamos el script personalizado
Dirígete a DIVI en la sección de Integración y vamos a "Agregar código al <head> de su blog" donde copiamos y pegamos el siguiente codigo
<script type="text/javascript"> jQuery(document).ready(function(t){t('div:not(.et_mobile_menu) .lightbox-content, div:not(.et_mobile_menu) [class*="lightbox-content-"]').addClass("mfp-hide"),t("div:not(.et_mobile_menu) .lightbox-trigger").magnificPopup({items:{src:"div:not(.et_mobile_menu) .lightbox-content",type:"inline"}}),t('div:not(.et_mobile_menu) [class*="lightbox-trigger-"]').each(function(){var i=".lightbox-content-"+Array.prototype.find.call(this.classList,function(t){return t.indexOf("lightbox-trigger-")>-1}).split("lightbox-trigger-")[1];t(this).magnificPopup({items:{src:i,type:"inline"}})}),t(this).click(function(){t(".mfp-wrap").attr("id","et-boc")}),t('[class*="lightbox-content"]').prepend('<div class="lightbox-overlay"></div>')});</script>
<script src="/wp-content/themes/Divi/includes/builder/feature/dynamic-assets/assets/js/magnific-popup.js" async></script>
<link rel="stylesheet" href="wp-content/themes/Divi/includes/builder/styles/magnific_popup.css">
PASO DOS: Agregamos el CSS personalizado
Dirígete a DIVI en la sección "General" y bajamos hasta "CSS personalizado" donde copiamos y pegamos el siguiente código
/****** Lightbox Styling *******/
[class*="lightbox-trigger-"] {cursor:pointer;}
[class*="lightbox-content-"] {position:relative; z-index: unset !important;}
[class*="lightbox-content-"] .mfp-close {color:#999999 !important;}
[class*="lightbox-content-"] .mfp-close:active {top:0px !important;}
PASO TRES: Creamos nuestro botón disparador
Para este paso vamos a agregar el siguiente CSS al elemento ya sea un botón, imagen o sección:
lightbox-trigger- <valor>
Donde podemos reemplazar <valor> por la palabra o numero que queramos
Por ejemplo lightbox-trigger-ejemplo
PASO CUATRO: Creamos nuestro contenedor del Popup
En la misma pagina se crea el contenido de nuestro popup ya sea una imagen, formulario, sección en otras palabras lo que quieras, en donde le vamos agregar esta linea de CSS
lightbox-content- <valor>
Donde el <valor> lo vamos a reemplazar por el mismo que utilizamos en el botón disparador
Ejemplo lightbox-content-ejemplo
RECOMENDACIÓN
En las ultimas actualizaciones de DIVI creo unas opciones de bloqueo de algunas acciones para mejorar la precarga de la pagina, para que funcione bien este código te recomiendo tener esta configuración. Si te gustan estos trucos con Divi, mira también cómo expandir y contraer texto en Divi.
¿Para qué usar un popup en WordPress?
Una ventana emergente bien usada no molesta: ayuda. Estos son los usos que más resultados me han dado en sitios de clientes:
- Captar correos: un formulario corto a cambio de un descuento o una guía gratuita.
- Anunciar una promoción: envío gratis, rebajas o un lanzamiento.
- Mostrar un video o una galería sin sacar al usuario de la página.
- Abrir un formulario de contacto o cotización desde un botón, sin crear otra página.
Mi recomendación: que el popup se abra cuando el usuario haga clic (como en este tutorial) y no apenas carga la página. Los popups que tapan el contenido al entrar molestan a los visitantes y Google puede penalizarlos en móviles.
Preguntas frecuentes
¿Por qué crear un popup en WordPress sin plugin?
Porque cada plugin suma código, peticiones y posibles conflictos. Si solo necesitas una ventana emergente sencilla, unas líneas de código en Divi hacen el trabajo sin cargar un plugin completo.
¿Este método funciona con cualquier tema de WordPress?
Está pensado para Divi. En otros temas podría no funcionar sin ajustes, porque el código se apoya en cómo Divi carga sus recursos.
¿Qué puedo mostrar dentro del popup?
Lo que quieras: una imagen, un formulario de contacto, un video o una sección completa de Divi. Solo tienes que agregarle la clase CSS del paso cuatro al contenedor.
El popup no se abre, ¿qué reviso?
Primero, que el botón tenga la clase lightbox-trigger-element. Segundo, la configuración de rendimiento de Divi que te muestro en la recomendación: algunas opciones de optimización pueden bloquear el script.
Hola, Alejandro. Seguí los pasos y los popup funcionan bien, pero queda un espacio blanco en la página donde está ubicadas las cajas, ¿qué puedo hacer al respecto?
Hola Mónica, cuando dices cajas es el pop-up (mensaje emergente) si es asi mira bien las margenes de la caja del pop-up que sean cero o también mira el fondo de esa caja que sea transparente o que no tenga.
Saludos
Muy buen articulo y de mucho interés para cualquier proyecto, pero esteria bien que se le pudieran dar un poco más de estilos como por ej. cuando aparece y cuando desaparece…Un C. Saludo
Hola Fernando, gracias por ver el contenido, perfecto lo tendré en cuenta para los próximos videos que desarrolle. Te invito a que me sigas por youtube en https://youtube.alejandroberrio.com saludos