Come creare una galleria di immagini a larghezza intera con il modulo Divi Gallery

Le gallerie di immagini a larghezza intera sembrano sempre fantastiche su un sito web. Una galleria a larghezza intera copre l'intera larghezza della finestra del browser. Questo spazio extra consente alle immagini di mantenere una dimensione maggiore, il che è ottimo per l'esperienza dell'utente. E il layout della griglia offre un design estetico che organizza le immagini in colonne che si adatteranno bene a tutte le larghezze del browser.

In questo tutorial, ti mostrerò come creare una galleria di immagini a larghezza intera con il modulo Divi Gallery. Potresti essere sorpreso di quanto sia facile farlo in Divi. Menzionerò anche un paio di modi in cui puoi utilizzare la spaziatura personalizzata per darti un maggiore controllo sulla tua galleria a larghezza intera su dispositivi mobili.

Iniziamo.

Il prima e il dopo

Ecco il modulo Divi Gallery predefinito con 12 immagini.

Ecco un esempio di galleria di immagini a larghezza intera che puoi creare facilmente.

Preparare i tuoi elementi di design

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.

Per questo tutorial, utilizzerò le immagini del layout predefinito della pagina Galleria del ristorante, disponibile gratuitamente all'interno di Divi Builder. Potete scaricare tutte le immagini in fondo a questo post.

Implementazione del modulo Galleria Divi a larghezza intera

Iscriviti al nostro canale Youtube

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 Galleria Divi, 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

Creazione di un layout a larghezza intera per la galleria di immagini

Per creare il layout a larghezza intera per la galleria di immagini, salviamo le nostre impostazioni della galleria per ora e apriamo le impostazioni della riga. Nella scheda Progettazione, aggiorna quanto segue:

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

Questo è il modo più semplice per ottenere una galleria di immagini a tutta larghezza attiva e funzionante. La scelta di "Rendi questa riga a larghezza intera" in combinazione con l'impostazione della larghezza del margine su "1" farà sì che la galleria occupi l'intera larghezza della sezione (su tutte le dimensioni del browser) e riduca la spaziatura tra le immagini.

E la galleria continuerà a occupare l'intera larghezza della pagina anche sui dispositivi mobili.

Personalizzazione delle opzioni di sovrapposizione dell'immagine al passaggio del mouse

Per completare il design della tua galleria di immagini a larghezza intera, è utile personalizzare le opzioni di sovrapposizione dell'immagine al passaggio del mouse integrate nelle impostazioni del modulo Galleria Divi. È possibile modificare l'icona dello zoom, il colore dell'icona e il colore della sovrapposizione. Per fare ciò, apri le impostazioni della Galleria e aggiorna quanto segue:

Colore icona zoom: #ffffff
Colore sovrapposizione al passaggio del mouse: #333d48
Icona al passaggio del mouse: vedi screenshot

Ora diamo un'occhiata al progetto finale.

Altre opzioni di spaziatura della galleria di immagini a larghezza intera

Creazione di un layout a larghezza intera con spaziatura della larghezza della grondaia

Il modo più semplice per personalizzare la spaziatura tra le immagini nel modulo Galleria Divi è regolare la larghezza della riga principale della riga principale. La larghezza della grondaia si riferisce alla spaziatura tra le colonne. Con qualsiasi elemento Divi Row, i valori facoltativi per la larghezza della grondaia vanno da 1 a 4.

1 rappresenta il margine zero tra le colonne.
2 rappresenta un margine destro del 3% tra le colonne.
3 rappresenta un margine destro del 5,5% tra le colonne.
4 rappresenta un margine destro dell'8% tra le colonne.

Poiché utilizziamo il modulo Divi Gallery, la larghezza della grondaia si riferisce anche alla spaziatura tra gli elementi della galleria. Quindi l'aggiunta della larghezza della grondaia alla riga regolerà la spaziatura degli elementi/immagini della galleria nel modulo Galleria.

Utilizzo della larghezza personalizzata per un maggiore controllo sulla spaziatura su dispositivi mobili

Se l'opzione "Make This Row Fullwidth" è impostata su S e la larghezza del margine è 2 o più (tutti tranne 1), Divi regolerà automaticamente la larghezza della riga per fornire una spaziatura esterna aggiuntiva. Ciò è necessario perché la larghezza della grondaia si applica solo alla spaziatura tra le colonne/elementi della galleria e non alla riga stessa. Tuttavia, questo potrebbe aggiungere più spaziatura dei margini di quanto desideri sui dispositivi mobili. Ad esempio, se hai l'opzione "Rendi questa riga a larghezza intera" attiva con una larghezza di 2 grondaie, la larghezza effettiva della tua riga sarà dell'89% sui dispositivi mobili (non del 100%). Quindi, se vuoi che la riga si estenda al 100% sui dispositivi mobili, puoi invece utilizzare l'opzione Larghezza personalizzata. Assegnando alla riga una larghezza personalizzata del 100%, la larghezza della riga rimarrà del 100% indipendentemente dal valore Larghezza grondaia. Ora puoi semplicemente aggiungere la spaziatura esterna per la riga usando l'imbottitura di riga. Questo ti darà un maggiore controllo della spaziatura esterna su desktop, tablet e smartphone.

Ecco un esempio di come funzionerebbe. Apri le impostazioni della riga e aggiorna quanto segue:

Larghezza personalizzata: 100%
Larghezza grondaia: 2

Notare come non ci sia margine a destra oa sinistra della galleria.

Ora aggiungi il seguente riempimento personalizzato alla riga:

Imbottitura personalizzata (desktop): 5% in alto, 5% in basso, 5% a sinistra, 5% a destra
Imbottitura personalizzata (smartphone) 5% in alto, 5% in basso, 0% a sinistra, 0% a destra

L'imbottitura del 5% su desktop (e tablet) fornirà lo spazio esterno di cui abbiamo bisogno per abbinare lo spazio tra gli elementi della galleria.

E togliendo l'imbottitura personalizzata destra e sinistra per smartphone, le immagini copriranno l'intera larghezza del browser, dando alle immagini più visibilità.

Aggiunta di spaziatura personalizzata agli elementi della galleria senza larghezza della grondaia

Se vuoi ottenere un controllo ancora maggiore sulla spaziatura del tuo Divi Gallery Module, puoi effettivamente aggiungere la tua spaziatura personalizzata tra gli elementi della galleria invece di utilizzare Gutter Width. Per fare ciò, dovresti impostare la larghezza della grondaia su 1 e quindi aggiungere la spaziatura tra gli elementi della galleria all'interno delle impostazioni del modulo della galleria Divi. Per maggiori informazioni, consulta il tutorial completo sull'utilizzo del modulo Divi Gallery per creare una galleria di immagini con spaziatura personalizzata

Ulteriori informazioni sul modulo Galleria Divi

Dai un'occhiata ai seguenti tutorial per ulteriori modi per personalizzare il tuo modulo Divi Gallery:

• 6 design di bordi unici per le tue immagini del modulo Divi Gallery
• Modifica del numero di colonne nel modulo Divi Gallery in diversi punti di interruzione
• Utilizzo del modulo Divi Gallery per creare una galleria di immagini con spaziatura personalizzata
• Come creare una galleria di immagini che cambia da bianco e nero a colore con il modulo Galleria di Divi

Pensieri finali

Speriamo che questo tutorial ti aiuti a capire come utilizzare il modulo Divi Gallery per creare bellissime gallerie di immagini a larghezza intera nel tuo prossimo progetto. E non dimenticare di esplorare tutte le opzioni di design integrate di Divi e gli effetti al passaggio del mouse per far risaltare ancora di più le tue gallerie di immagini.

Non vedo l'ora di sentirti nei commenti qui sotto.

Saluti!