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á.
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.
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.
0 commenti