Modifica del numero di colonne nel modulo Divi Gallery in diversi punti di interruzione

Il modulo Divi Gallery ti consente di creare bellissime gallerie di immagini in un layout a griglia reattivo. La galleria è considerata reattiva perché ridimensionerà le dimensioni delle tue immagini e regolerà il numero di colonne nella griglia in base alle diverse larghezze del browser.

Per impostazione predefinita, il modulo Galleria ha tre punti di interruzione (punti in cui lo stile cambia a determinate larghezze del browser) che regolano il numero di colonne nella griglia. Mostrerà la tua galleria di immagini in quattro colonne sul desktop e quindi suddividerà in tre colonne su tablet, due colonne su tablet piccoli (e telefoni grandi) e una colonna su telefoni.

Questa configurazione predefinita di solito funziona nella maggior parte dei casi, ma a volte potrebbe essere necessario un maggiore controllo sul numero di colonne visualizzate su determinate larghezze del browser. Ecco perché in questo tutorial ti mostrerò come completare il numero di colonne visualizzate nel modulo Divi Gallery non solo per desktop, ma anche per tre punti di interruzione aggiuntivi del browser.

Sbirciata

Ecco un'anteprima di ciò che costruiremo in questo tutorial. Notare il diverso numero di colonne per la galleria di immagini su diverse larghezze del browser.

Preparare i tuoi elementi di design

Iscriviti al nostro canale Youtube

Per questo tutorial, avrai bisogno del tema Divi installato e attivo. Avrai anche bisogno di 12 immagini aggiunte alla tua libreria multimediale da utilizzare per la creazione della galleria di immagini. Per un modulo della galleria Divi che utilizza un layout a griglia, la dimensione delle tue immagini dovrebbe essere di circa 1500 px per 800 px se prevedi che le tue immagini si aprano nel display lightbox in modo che riempia bene lo schermo sulla maggior parte dei desktop.

Implementazione della spaziatura personalizzata per il modulo Galleria Divi

Configurazione di una nuova pagina

Per cominciare, crea una nuova pagina, assegna un titolo alla tua pagina e distribuisci Divi Builder. Seleziona l'opzione "Crea da zero" e poi pubblica la tua pagina. Quindi fare clic per costruire sul front-end.

Creazione della galleria di immagini

Con Divi Builder distribuito, vai avanti e crea una nuova sezione regolare con una riga a una colonna e aggiungi un modulo Galleria Divi alla riga.

Divi popolerà il modulo della galleria con alcune immagini dalla tua galleria multimediale in una visualizzazione a griglia come la seguente:

Nelle impostazioni del modulo della galleria, fai clic sull'icona più grigia per aggiungere 12 immagini alla galleria.

Quindi aggiorna le impostazioni del modulo Divi Gallery come segue:

Numero immagini: 12
Mostra titolo e didascalia: NO
Mostra impaginazione: NO

Regola le impostazioni della riga per creare una galleria a tutta larghezza senza larghezza della grondaia

Affinché la nostra nuova struttura a colonne funzioni, la cosa principale che dobbiamo fare è eliminare la spaziatura/margine predefinita che esiste tra le nostre immagini nella galleria. Per fare ciò, tutto ciò che dobbiamo fare è impostare la larghezza del margine interno su 1. Inoltre, come opzione, puoi rendere la riga a larghezza intera per far sì che la galleria di immagini occupi l'intera larghezza del browser. Per fare ciò, apri le impostazioni della riga e aggiorna quanto segue:

Rendi questa riga a larghezza intera: S
Larghezza grondaia: 1

Se vuoi aggiungere spazio tra le immagini nella galleria, ti suggerisco di utilizzare questo metodo poiché dobbiamo mantenere la larghezza della grondaia impostata su 1.

Come la Galleria risponde alle diverse larghezze del browser per impostazione predefinita

Come accennato in precedenza, per impostazione predefinita, il modulo Galleria Divi visualizzerà la tua galleria di immagini in quattro colonne sul desktop e quindi suddividerà in tre colonne su tablet, due colonne su tablet piccoli (e telefoni grandi) e una colonna su telefoni.

Tuttavia, lo modificheremo per includere un numero personalizzato di colonne in determinati punti di interruzione utilizzando alcuni frammenti di CSS personalizzati.

Impostare un numero specifico di colonne per tutte le dimensioni del browser

Se vuoi modificare il numero di colonne visualizzate nella galleria in modo che il numero di colonne rimanga lo stesso su tutte le dimensioni del browser, c'è un modo semplice per farlo. Questo potrebbe essere utile se desideri visualizzare la tua galleria solo in una colonna, due colonne o tre colonne. In questo modo puoi avere immagini davvero grandi sul desktop e immagini più piccole sui dispositivi mobili mantenendo lo stesso numero di colonna. Avere quattro o più colonne probabilmente non funzionerà poiché le immagini saranno troppo piccole per i display del telefono.

Supponiamo che tu voglia visualizzare tre colonne su tutte le dimensioni del browser. Per fare ciò, apri le impostazioni del modulo della galleria Divi e aggiungi il seguente CSS personalizzato all'elemento della galleria:

width: 33.33% !important;
margin: 0 !important;
clear: none !important;

Ora la tua galleria manterrà la struttura a tre colonne su tutte le dimensioni del browser.

Se desideri un layout a 2 colonne per tutte le dimensioni del browser, tutto ciò che devi fare è modificare il valore della proprietà della larghezza al 50%.

Se desideri un layout a 1 colonna, aggiorna semplicemente la larghezza al 100%.

Questo è tutto.

Ma, se vuoi ottenere un maggiore controllo sul numero di colonne in determinati punti di interruzione, continua a leggere.

Modifica del numero di colonne per punti di interruzione specifici

Se desideri ottenere il controllo completo sul numero di colonne visualizzate quando il browser raggiunge determinati punti di interruzione, possiamo utilizzare alcuni frammenti di CSS con query multimediali che hanno come target determinate larghezze del browser.

Aggiungi la classe CSS al modulo Divi Gallery

Prima di aggiungere il CSS personalizzato, dobbiamo prima dare al nostro modulo della galleria una classe CSS personalizzata in modo da poter fare riferimento a quella classe specifica nel nostro CSS. Ciò assicurerà che il nostro css venga applicato solo a questo modulo specifico della galleria. Per fare ciò, apri le impostazioni del modulo della galleria e aggiungi la seguente classe CSS nella scheda Avanzate:

Classe CSS: col-width

Non dimenticare di estrarre il css personalizzato aggiunto all'elemento della galleria nella sezione precedente di questo articolo se lo hai aggiunto.

Successivamente, salva le tue impostazioni.

Aggiungi il CSS personalizzato alle impostazioni della pagina

Con la tua classe CSS in atto, sei pronto per aggiungere il CSS personalizzato. Apri le impostazioni della pagina facendo clic sull'icona a forma di ingranaggio nella barra delle impostazioni della pagina nella parte inferiore della pagina (oppure puoi utilizzare la scorciatoia da tastiera "o").

Quindi aggiungi il seguente CSS personalizzato nella scheda Avanzate.

/** Desktop **/
@media (min-width: 981px){
.col-width .et_pb_gallery_item {
width: 16.66% !important; /*six columns*/
clear: none !important;
}
}

/** Tablet **/
@media (max-width: 980px){
.col-width .et_pb_gallery_item {
width: 25% !important; /*four columns*/
clear: none !important;
}
}

/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.col-width .et_pb_gallery_item {
width: 33.33% !important; /*three columns*/
clear: none !important;
}
}

/** Phone **/
@media (max-width: 479px){
.col-width .et_pb_gallery_item {
width: 50% !important; /*two columns*/
clear: none !important;
}
}

Questo CSS aggiungerà un numero personalizzato di colonne a determinati punti di interruzione come segue:

Desktop: 6 colonne
Tablet: 4 colonne
Tablet piccolo e telefono grande: 3 colonne
Telefono: 2 colonne

Comprensione e regolazione del CSS

Guardando il CSS, noterai che è suddiviso in quattro media query separate. La media query principale aggiunge uno stile ai browser desktop (browser con una larghezza minima di 981 px). La seconda query multimediale aggiunge uno stile ai browser delle dimensioni di un tablet e così via.

All'interno di ogni media query, il CSS più importante da non prendere in considerazione è la proprietà width. Questo designa la dimensione di ogni elemento della galleria e che imposta anche la larghezza della colonna per la galleria.

Ad esempio, la query multimediale principale per desktop imposta la larghezza dell'elemento della galleria sul 16,66%.

Ciò equivale a un sesto della larghezza totale del suo contenitore (o riga). Pertanto, la galleria visualizzerà un layout a sei colonne sul desktop.

Per regolare il numero di colonne per il desktop, tutto ciò che devi fare è modificare la proprietà della larghezza su un valore diverso. Ecco un elenco di percentuali di larghezza che puoi provare.

12 colonne: 8,33%
10 colonne: 10%
8 colonne: 12,5%
6 colonne: 16,66%
5 colonne: 20%
4 colonne: 25%
3 colonne: 33,33%
2 colonne: 50%
1 colonna: 100%

Risultato finale

Ecco il risultato finale sulle diverse larghezze del browser.

Desktop (6 colonne)

Tavoletta (4 colonne)

Tablet piccolo e telefono grande (3 colonne)

Telefono (2 colonne)

Pensieri finali

Spero che questo tutorial sia stato utile per quelli di voi che desiderano ottenere un maggiore controllo sul numero di colonne visualizzate dalla galleria su determinati dispositivi o punti di interruzione. Con questa configurazione, puoi aggiungere qualsiasi numero di colonne che desideri per qualsiasi larghezza del browser per creare visualizzazioni di gallerie pensando all'utente.

I punti di interruzione che ho usato nel CSS personalizzato sono quei punti di interruzione che Divi già utilizza. Sentiti libero di dare un'occhiata al nostro post su come mettere a punto i tuoi progetti con le query multimediali per ulteriori informazioni su questo concetto.

Alla prossima volta, non vedo l'ora di sentirti nei commenti.

Saluti!