Tutorial Divi: Lightbox también en las imágenes no solo en las galerías

Galería deslizante Divi

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 la 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.

¿Cómo puedo utilizar Divi lightbox para fotos?

Añadir Lightbox a una imagen en Divi

  Evitar que Google indexe tus imágenes del Blog

En el cuadro de diálogo Configuración de imagen, cargue un archivo de imagen y, a continuación, haga clic en el título Enlace e introduzca la URL de la imagen, vídeo o PDF del lightbox en el cuadro de entrada URL del enlace. Ve a la pestaña Avanzado, haz clic en el título ID y Clases CSS, e introduce wplightbox en el cuadro de entrada Clase CSS.

¿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.

Plugin de galería Divi

Hoy estoy haciendo algo inusual por primera vez, por necesidad. Estoy haciendo un tutorial que requiere un producto de pago. ¡Nunca he hecho esto antes, y no tengo la intención de hacer un hábito de ello, pero simplemente no podía simplemente evitar compartir una solución simplemente porque cuesta algo de dinero, porque es francamente la única manera de hacerlo, y es realmente impresionante! ¡Así que en este tutorial, te voy a mostrar cómo utilizar la versión gratuita del plugin Advanced Custom Fields (ACF) para mostrar dinámicamente las imágenes en el módulo Galería Divi! Esta es la única solución en el mercado para hacer una galería con ACF versión gratuita y Divi. Esta solución tan esperada es única e innovadora y resuelve un gran problema para los usuarios de Divi.

THEME BUILDER: Vale la pena recordar que el contenido dinámico a menudo está destinado a ser utilizado en una plantilla creada con el Constructor de temas Divi. Recomendamos utilizar el Theme Builder para crear galerías dinámicas. Si usted no está familiarizado con el Theme Builder, por favor revise nuestro mini curso Divi Theme Builder.

Divi abrir imagen en lightbox

El filtro de acción de clic personalizado a continuación anulará la acción de clic global detallada anteriormente, lo que le permite establecer la acción de clic en una base por puesto. En otras palabras, cada entrada puede tener su propia acción de clic.

  Reducción automática de imágenes – El modo correcto no el de WordPress

En el ejemplo anterior, estamos comprobando el valor del campo personalizado “dfg_click_action”. Este campo personalizado se añadiría a cada entrada para la que quisiera crear una acción de clic personalizada. A continuación, estamos devolviendo un valor diferente al filtro dependiendo del valor del campo personalizado. Dado que los valores del campo personalizado son los mismos que los valores de la acción de clic, tendría más sentido simplemente comprobar si el campo existe y devolver su valor en caso afirmativo. Para este tutorial estoy mostrando los valores para que sea más fácil ver cómo funciona el filtro.

Observe que en el código de ejemplo anterior si el campo personalizado “dfg_click_action” está vacío, volvemos a la $default_action. Esta es la acción establecida en la opción Click Action del módulo mencionada anteriormente. Usando $default_action, puede ver cómo puede establecer una acción de clic para todos los elementos de la cuadrícula en la configuración del módulo y sólo cambiar la acción de clic para ciertos elementos.

Rejilla de imagen Divi

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.

  Obtener y mostrar imágenes del contenido

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 la 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.