Tutorial Divi: Cómo desactivar la ventana emergente al hacer clic en imágenes de la galería

Divi popup en la carga de la página

En caso de que quieras utilizar el módulo Galería Divi en tu sitio web WordPress, pero no quieras que las imágenes se abran en lightbox (lightbox significa que cada imagen se abre en su tamaño completo al hacer clic sobre ella), puedes desactivar el lightbox en ellas. En este artículo, te explicaré cómo puedes hacerlo.

En primer lugar, vamos a mencionar algunas de las razones por las que es posible que desee hacerlo. Una de ellas podría ser que no tienes imágenes de alta resolución para mostrar en tu galería. Puede que estés trabajando en un proyecto que no lo requiera o que tu cliente no te las haya proporcionado.

Hablando desde mi propia experiencia, hace poco estaba construyendo un sitio web para un cliente y quería que incluyera unas 20 imágenes en una galería, pero sólo tenía esas imágenes descargadas del sitio web de su filial. Y tenían un tamaño de 200 x 200 píxeles. Este cliente no necesitaba mostrar ningún detalle en estas imágenes, por lo que una galería con estas pequeñas imágenes sin lightbox era una solución adecuada para este caso.

Como alternativa, para mantener las cosas limpias y sencillas, también puedes deshacerte de la superposición por encima estableciendo el Color del icono de zoom y el Color de superposición por encima en transparente (en la configuración del módulo de la galería > Diseño > Superposición), pero esto no desactivará la caja de luz ni el cursor del puntero. Sólo hará que el icono de zoom y la superposición sean transparentes, por lo que no los verás cuando pases el ratón por encima de las imágenes.

  Arrastrar y soltar imágenes destacadas

¿Cómo desactivo lightbox en la galería Divi?

Así que para desactivar el lightbox en tu galería Divi, todo lo que necesitas hacer es añadir una clase CSS a tu módulo de galería.

¿Qué hace la galería Divi?

Habilitar Galería Divi le permite reemplazar la galería por defecto de WordPress con una nueva galería Divi. Esto muestra la galería de manera diferente dentro de su contenido regular de WordPress. Esta es una galería limpia y más elegante. Las imágenes se cargan mucho más rápido porque no tiene que cargar la página de la imagen.

¿Cómo puedo hacer un conmutador de imágenes en las pestañas personalizadas clic en Divi?

json tendrá que ir a cualquier página que desee y Habilitar el Constructor Divi. Una vez que el Constructor Divi esté habilitado en tu página, puedes arrastrar el archivo . json extraído y soltarlo en el Constructor Divi. A continuación, verás una ventana emergente, sólo tienes que desmarcar la opción “Reemplazar contenido existente” y hacer clic en el botón Importar.

Ventana emergente Divi

Sé que la siguiente imagen puede dar pesadillas a algunos de vosotros… ¡pero miradla bien porque puede ser la última vez que la veáis! Debido a la demanda popular y la frustración constante, voy a mostrar cómo ocultar o mover el estilo de texto poco molesto popup cosita.

Sólo conozco un buen caso de uso para esto, cambiar el color del texto de una palabra o frase dentro de una oración. Pero incluso eso se puede añadir en unos segundos con una etiqueta span. No veo ningún valor para tener esto, y ya que Elegant Themes no ha hecho un botón para desactivar esto, ahí es donde entro yo para solucionarlo en su lugar. Si usted nunca quiere ver esta cosa de nuevo, simplemente coloque el fragmento de CSS a continuación en su sitio web.

  Alinear imágenes en el feed RSS

Si está utilizando nuestro tema gratuito Divi niño, coloque este fragmento en el archivo style.css. De lo contrario, colócalo en tu Divi>Opciones de tema>Cuadro de código CSS personalizado. Si necesitas ayuda, echa un vistazo a nuestra guía completa sobre Dónde añadir código personalizado en Divi.

Espero que haya disfrutado aprendiendo Cómo desactivar el estilo de texto Divi Popover. Por favor, comparta sus pensamientos en los comentarios a continuación. ¡Si usted encuentra valor en este tipo de post, por favor suscribirse porque tenemos toneladas de tutoriales en curso para ser publicado!

Ventana emergente Divi al hacer clic

Primero instale el plugin premium de WordPress Wonder Lightbox. Puedes descargar la versión gratuita desde la página principal del producto, pruébalo, asegúrate de que te funciona antes de actualizar a la versión comercial.

También puedes añadir nombres de clase CSS extra para especificar el ancho y alto del lightbox, por ejemplo, añadiendo wplightbox-width-1024 y wplightbox-height-768 especificará el ancho y alto del popup lightbox como 1024 por 768.

Si desea añadir un botón de reproducción en la parte superior de la imagen, en el menú de la izquierda del backend de WordPress, Divi -> Opciones de tema, pestaña General, desplácese hasta la parte inferior de la página, agregue el siguiente código en el cuadro de entrada CSS personalizado:

Galería Divi lightbox

Aquí puedes encontrar la guía sobre cómo usar Magnific Popup. Además de esta página de documentación, puedes jugar con ejemplos en CodePen. Si has encontrado algún error en esta página o sabes cómo mejorar alguna parte de esta documentación – por favor haz un commit en GitHub.

Igual que el primero, pero utiliza este método si estás creando una ventana emergente a partir de una lista de elementos en un contenedor. Tenga en cuenta que este método no habilita el modo galería, sólo reduce el número de controladores de eventos de clic; cada elemento se abrirá como una única ventana emergente. Si desea habilitar la galería, añada la opción gallery:{enabled:true}.

  Los métodos más rápidos para añadir imágenes en el editor de bloques de WordPress

La ruta a la imagen debe establecerse como fuente principal si ha seleccionado este tipo. Si su popup no tiene una fuente de imagen y no tiene una imagen que no deba ser precargada (y retina-izada, etc.), utilice el tipo inline.

2) Estilizar este elemento. Magnific Popup por defecto no le aplica ningún estilo, excepto el centrado vertical (si alignTop:false). El botón Cerrar se añadirá automáticamente dentro (si closeBtnInside:true).