BlogTema DiviCome disabilitare lightbox nel modulo Galleria Divi

Come disabilitare lightbox nel modulo Galleria Divi

galleria divi
Nel caso in cui desideri utilizzare il modulo della Galleria Divi sul tuo sito web WordPress, ma non vuoi che le immagini si aprano nella lightbox (lightbox significa che ogni immagine si apre nella sua dimensione intera quando fai clic su di essa). In questo articolo ti spiegherò come puoi disabilitare la lightbox.
Prima di iniziare, menzioniamo alcuni dei motivi per cui potresti volerlo fare. Uno di questi potrebbe essere che non hai immagini ad alta risoluzione da mostrare nella tua galleria. Forse stai lavorando a un progetto che non le richiede o il tuo cliente non ti ha fornito contenuti di alta qualitá.

Galleria Divi

Parlando in base alla mia esperienza personale, recentemente stavo costruendo un sito web per un cliente e lui voleva che includessi circa 20 immagini in una galleria, ma le aveva scaricate solo dal sito web della sua filiale. Ed erano delle dimensioni di 200 x 200 pixel. Questo cliente non aveva bisogno di mostrare alcun dettaglio su queste immagini, quindi una galleria con queste piccole immagini senza lightbox era una soluzione appropriata per questo caso.

Quindi, per disabilitare il lightbox sulla tua galleria Divi, tutto ciò che devi fare è aggiungere una classe CSS al modulo della tua galleria. Diciamo che lo chiamerò disable-lightbox.

Disabilita Lightbox Galleria

Quindi aggiungi il seguente codice CSS personalizzato al campo CSS personalizzato nelle Opzioni del tema Divi o al codice CSS personalizzato delle impostazioni della tua pagina (nella pagina in cui avrai la tua galleria).

.disable-lightbox a {
pointer-events: none;
}

.disable-lightbox .et_overlay {
display: none !important;
}

E questo è tutto.

In alternativa, per mantenere le cose pulite e semplici, puoi anche eliminare la sovrapposizione al passaggio del mouse impostando il colore dell’icona dello zoom e il colore della sovrapposizione del passaggio del mouse su trasparente (nelle Impostazioni del modulo della galleria> Design> Sovrapposizione), ma questo non disabiliterà il lightbox e il cursore del puntatore. Renderà trasparenti solo l’icona dello zoom e la sovrapposizione, quindi non le vedrai quando passi il mouse sulle immagini.

Nel caso in cui desideri mantenere le frecce del cursore, aggiungi questo codice CSS per riattivare gli eventi del puntatore per loro:

.et-pb-slider-arrows a { pointer-events: auto; }

E se vuoi mantenere la navigazione anche per l’impaginazione della tua galleria, aggiungi anche questo codice CSS:

.disable-lightbox .et_pb_gallery_pagination a { pointer-events: auto; }

Potresti anche essere interessato al mio altro tutorial che spiega come rendere le immagini in scala di grigi con CSS.

Spero che troverai utile questo piccolo suggerimento Divi. Fammi sapere nei commenti!

Potrebbe interessarti anche la nostra guida su come creare un tema child per Divi.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *


Divi Design Studio rende semplice l’evoluzione digitale di aziende ambiziose.

Mi occupo di Realizzazione, Restyling e Gestione Siti WordPress.

Menu

2024 © Divi Design Studio | P.IVA 04891580237 | Privacy Policy

Promozione esclusiva!

Risparmia sulla realizzazione o il restyling di un sito WordPress con l’esclusiva promozione di fine anno! Per tutto il mese di novembre e fino al 16 dicembre, Divi Design Studio ti offre uno sconto del 10% su tutti i servizi.