Como crear una ventana emergente o Popup sin plugin con DIVI en WordPress
29 de julio de 2022

Esta es una forma sencilla y super practica de crear un Popup con codigo y sin necesidad de plugin, para iniciar vamos a tener estos pasos solo de copiar y pegar

  1. Agregaremos el script personalizado en nuestro DIVI
  2. Agregamos el CSS personalizado
  3. Creamos un botón que active el Popup y agregamos la clase lightbox-trigger-element
  4. Creamos el contenido emergente de DIVI ya sea sección, fila o módulo y agregamos la clase lightbox-content-element

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">
sección donde se copia y pega el código

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

VER VIDEO

4 Comentarios

  1. Monica Mejía

    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?

    Responder
    • Alejandro Berrio

      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

      Responder
  2. D. Fernando

    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

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *