6 design di bordi unici per le tue immagini del modulo Divi Gallery

Il modulo Divi Gallery è il luogo ideale per mostrare una galleria di immagini sul tuo sito web. Per impostazione predefinita, il modulo della galleria visualizzerà le tue immagini in un layout a griglia senza molto stile, il che è ottimo per mantenere le immagini come elemento di design principale. Tuttavia, se stai cercando di essere un po' creativo, puoi inquadrare le tue immagini con diversi design dei bordi per rendere unica la tua galleria di immagini. Il modulo Galleria rende questo processo abbastanza facile da eseguire e i risultati potrebbero sorprenderti.

In questo tutorial, ti mostrerò come creare design di bordi unici per le tue gallerie di immagini utilizzando il modulo Divi Gallery.

Iniziamo!

Sbirciata

#1 Galleria di immagini Polaroid

Inizia a costruire il design n. 1

#2 Design pulito della griglia

Inizia a costruire il design #2

#3 Immagine di sfondo personalizzata dietro l'intera galleria

Inizia a costruire il progetto n. 3

#4 Immagine di sfondo personalizzata dietro ogni elemento della galleria

Inizia a costruire il design #4

#5 Box Shadow e Border Combo

Inizia a costruire il design #5

#6 Design del bordo della striscia di pellicola

Inizia a costruire il progetto n. 6

Cosa ti serve per iniziare

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.

Configurare la tua nuova pagina

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

Salvataggio di un modello di modulo Galleria Divi

Poiché progetteremo 5 diversi stili di bordo per il modulo Divi Gallery, sarebbe utile avere un modello di modulo galleria di base salvato nella nostra libreria in modo da non dover ricominciare da capo ogni volta che progettiamo una nuova galleria .

Crea una nuova sezione con una riga di una colonna e quindi aggiungi il modulo Galleria 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. Sto usando le immagini dal layout di pagina della galleria del ristorante.

Quindi aggiorna le impostazioni del modulo Divi Gallery come segue:

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

Questo funzionerà come un buon modello per il futuro. Per salvare il modulo Galleria nella tua libreria Divi, fai clic sull'icona Salva nella libreria nel menu del modulo grigio quando passi con il mouse sul modulo. Quindi denominare il modello "Modello modulo galleria" e salvarlo nella libreria.

Quando vuoi aggiungere il modulo galleria salvato alla tua pagina, tutto ciò che devi fare è fare clic per aggiungere un nuovo modulo come di consueto. Quindi seleziona la scheda Aggiungi dalla libreria nel popup e fai clic sul modulo galleria con il nome "Modello modulo galleria".

Questo è tutto. Ora passiamo a quei disegni di confine!

#1 Galleria di immagini Polaroid

Questo prossimo design è un bordo popolare per le immagini che assomiglia a un'immagine polaroid. Questo è un layout particolarmente utile se vuoi visualizzare i titoli delle tue immagini.

Ecco come farlo.

Impostazioni della sezione

Crea una nuova sezione regolare con una riga a una colonna. Quindi aggiungi il modello del modulo Divi Gallery salvato dalla libreria (spiegato sopra). Prima di modificare il modulo Galleria, apri le impostazioni della sezione e aggiungi un colore di sfondo grigio in modo che i nostri bordi bianchi appaiano un po'.

Sfondo: #dddddd

Impostazioni riga

Successivamente aggiorna le impostazioni della riga con quanto segue:

Larghezza grondaia: 1

Questo eliminerà la spaziatura dei margini predefinita tra le immagini. Aggiungeremo la nostra spaziatura personalizzata in seguito.

Impostazioni modulo Galleria

Apri le impostazioni del modulo Galleria e aggiorna quanto segue:

Mostra titolo e didascalia: S

Peso del carattere del titolo: grassetto
Stile carattere titolo: TT
Allineamento del testo del titolo: al centro
Altezza della riga del titolo: 2em

Immagine Larghezza bordo superiore: 10px
Immagine Colore bordo superiore: #ffffff
Larghezza bordo sinistro immagine: 10px
Colore bordo sinistro immagine: #ffffff
Larghezza bordo destro immagine: 10px
Colore bordo destro immagine: #ffffff

Per creare una spaziatura tra le nostre immagini, aggiungi il seguente bordo agli elementi della galleria:

Larghezza bordo: 10px
Colore bordo: #dddddd (corrisponde al colore dello sfondo della sezione)

Per colorare la parte inferiore del nostro design del bordo polaroid, dobbiamo aggiungere uno sfondo bianco al modulo.

Colore di sfondo: #ffffff

Risultato finale

Ecco il risultato finale del disegno del bordo polaroid.

#2 Design pulito della griglia

Se stai cercando uno stile di griglia semplice e pulito per le tue immagini, questo design del bordo è una buona opzione. È ben bilanciato e piacevole per gli occhi.

Ecco come farlo.

Crea una nuova sezione regolare con una riga a una colonna. Quindi aggiungi il modello del modulo Divi Gallery salvato dalla libreria (spiegato sopra).

Impostazioni riga

Prima di modificare il modulo Galleria, apri le impostazioni della sezione e aggiorna quanto segue:

Larghezza grondaia: 1
Imbottitura personalizzata: 0px in alto, 0px in basso
Larghezza bordo: 10px
Colore bordo: #dddddd

Questo bordo riga è necessario per far corrispondere la spaziatura esterna della nostra galleria con la spaziatura tra le immagini.

Impostazioni modulo Galleria

Ora apri le impostazioni del modulo galleria e aggiungi un bordo agli elementi della tua galleria e alle immagini della tua galleria aggiornando quanto segue:

Larghezza bordo immagine: 20 px
Colore bordo immagine: #ffffff

Larghezza bordo: 10px
Colore bordo: trasparente (questo è importante per mostrare il colore di sfondo)

Ora aggiungi un colore di sfondo al modulo della galleria per completare il design.

Colore di sfondo: #dddddd (corrisponde al colore del bordo della riga)

Poiché il bordo dell'elemento della galleria è trasparente, eredita il colore dello sfondo.

Progetto definitivo

Cambiare i colori del bordo cambiando il colore di sfondo

Se vuoi giocare con diversi colori del bordo, puoi aggiornare il colore di sfondo a quello che vuoi. Ma dovrai eliminare il bordo della riga e aggiungere la seguente spaziatura al modulo:

Imbottitura personalizzata: 10px in alto, 10px in basso, 10px a sinistra, 10px a destra

Ora puoi regolare il colore di sfondo come preferisci:

#3 Immagine di sfondo personalizzata dietro l'intera galleria

Questo design ti consente di utilizzare un'immagine di sfondo per fungere da sfondo di trama per i bordi delle tue immagini. Questo è un bel modo per rendere unico ogni bordo dell'immagine in quanto mostra un'area specifica dell'immagine di sfondo del modulo. La configurazione è molto simile al Clean Grid Design sopra.

Ecco come farlo.

Crea una nuova sezione regolare con una riga a una colonna. Quindi aggiungi il modello del modulo Divi Gallery salvato dalla libreria (spiegato sopra).

Impostazioni riga

Prima di modificare il modulo Galleria, apri le impostazioni della sezione e aggiorna quanto segue:

Larghezza grondaia: 1
Imbottitura personalizzata: 0px in alto, 0px in basso

Impostazioni modulo Galleria

Ora aggiorna le impostazioni del modulo Galleria come segue:

Immagine di sfondo: [aggiungi immagine] (non potrai ancora vederla)
Colore di sfondo: #dddddd (questo viene mostrato solo se usi un'immagine di sfondo png con trasparenza)
Larghezza bordo immagine: 10 px
Colore bordo immagine: #ffffff

Larghezza bordo (per modulo): 10px
Colore bordo: #ffffff

Quindi aggiungi il seguente CSS personalizzato all'elemento della galleria:

padding: 3%;

Questo crea la separazione tra gli elementi della galleria per completare il design.

Risultato finale

#4 Immagine di sfondo personalizzata dietro ogni elemento della galleria

Questo design ti consente di utilizzare un'immagine di sfondo per fungere da bordo per ciascuno degli elementi della galleria individualmente. Puoi creare qualsiasi immagine personalizzata che desideri o utilizzare una delle immagini di sfondo incluse nei nostri layout predefiniti. Ne sto usando uno dal layout della pagina di destinazione di Meetup.

Ecco come farlo.

Crea una nuova sezione regolare con una riga a una colonna. Quindi aggiungi il modello del modulo Divi Gallery salvato dalla libreria (spiegato sopra).

Impostazioni riga

Prima di modificare il modulo Galleria, apri le impostazioni della sezione e aggiorna quanto segue:

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

Impostazioni modulo Galleria

Ora aggiorna le impostazioni del modulo Galleria come segue:

Larghezza bordo immagine: 10 px
Colore bordo immagine: #ffffff

Quindi aggiungi il seguente CSS personalizzato all'elemento della galleria:

padding: 30px;
background-image: url("");
background-size: contain;
background-repeat: no-repeat;
background-position: right;

Successivamente dovrai caricare l'immagine di sfondo personalizzata che desideri posizionare dietro ciascuno degli elementi della tua galleria. Per questo esempio, sto usando un'immagine da uno dei nostri pacchetti di layout predefiniti. Una volta che l'immagine è stata caricata nella galleria dei media di WordPress, copia l'URL dell'immagine negli appunti.

Ora torna indietro e apri le impostazioni del modulo della galleria e incolla l'URL nel CSS personalizzato dove dice "inserisci qui l'URL dell'immagine". Assicurati di mantenere l'URL all'interno delle citazioni.

Risultato finale

Questo è il risultato finale.

#5 Box Shadow e Border Combo

Le ombre scatolate sono ottime per dare alla tua galleria un tocco personalizzato. Puoi utilizzare le ombre della scatola sulle immagini del modulo della galleria Divi per creare un design a griglia spezzata che inquadra le immagini in un modo unico. Puoi anche combinare l'ombra della scatola con i disegni dei bordi per tutti i tipi di possibilità.

Ecco come farlo.

Crea una nuova sezione regolare con una riga a una colonna. Quindi aggiungi il modello del modulo Divi Gallery salvato dalla libreria (spiegato sopra).

Aggiungi bordo immagine e ombra scatola

Apri le impostazioni della Galleria e aggiorna quanto segue:

Larghezza bordo immagine: 10 px
Colore bordo immagine: #ffffff

Image Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: -30px
Posizione verticale dell'ombra del riquadro: -30px
Forza di diffusione dell'ombra della scatola: -10px
Colore ombra: #e08474

Aggiungi il bordo dell'elemento della galleria

Il design dell'ombra della scatola sembra buono così com'è ora. Ma puoi anche aggiungere un bordo aggiuntivo per il tuo elemento della galleria aggiornando quanto segue:

Larghezza bordo destro: 7 px
Colore bordo destro: #dddddd
Stile bordo destro: punteggiato
Larghezza bordo inferiore: 7px
Colore bordo inferiore: #dddddd
Stile bordo inferiore: punteggiato

Ho aggiunto uno stile di bordo punteggiato solo per ricordarti i diversi stili disponibili. Sentiti libero di usare altri stili (come solido o tratteggiato).

Impostazioni riga

Per dare più spazio al tuo design, apri le impostazioni della riga e aggiorna quanto segue:

Crea riga a larghezza intera: S

Progetto definitivo

Ecco il disegno definitivo.

#6: Design del bordo della striscia di pellicola

Per quest'ultimo design, ho pensato di mostrarti qualcosa di un po' più unico. Questo design utilizza uno stile di bordo tratteggiato solo sul lato destro e sinistro degli elementi della galleria che divide ogni colonna di immagini in un modo che ricorda le strisce di pellicola.

Ecco come farlo.

Crea una nuova sezione regolare con una riga a una colonna. Quindi aggiungi il modello del modulo Divi Gallery salvato dalla libreria (spiegato sopra).

Impostazioni riga

Prima di modificare il modulo Galleria, apri le impostazioni della riga e modifica la larghezza della grondaia su 1.

Larghezza grondaia: 1

Questo eliminerà la spaziatura dei margini predefinita tra le tue immagini.

Impostazioni modulo Galleria

Quindi, apri le impostazioni della Galleria e aggiorna quanto segue:

Aggiungi bordi immagine tratteggiati

Larghezza bordo destro immagine: 8px
Colore bordo destro immagine: #dddddd
Stile bordo destro immagine: tratteggiato
Larghezza bordo sinistro immagine: 8px
Colore bordo sinistro immagine: #dddddd
Stile bordo sinistro dell'immagine: tratteggiato

Aggiungi bordo elemento galleria per spaziatura

Larghezza bordo sinistro: 20 px
Colore bordo sinistro: #ffffff
Larghezza bordo destro: 20 px
Colore bordo destro: #ffffff

Aggiungi ombra riquadro immagine

Image Box Shadow: vedi screenshot
Forza sfocatura ombra scatola: 0px
Forza di diffusione dell'ombra della scatola: -10px
Colore ombra: #222222

Aggiungi colore di sfondo

Colore di sfondo: #222222

Quindi aggiungi il seguente CSS personalizzato all'elemento della galleria:

padding: 5px 10px;

Il risultato finale

Ora controlla il risultato.

Pensieri finali

Spero che questi sei esempi di design dei bordi forniscano ispirazione per la creazione di alcuni design dei bordi personalizzati per le tue immagini quando utilizzi il modulo Divi Gallery. Una volta che hai gestito le impostazioni disponibili con il modulo Divi Gallery, tutto ciò che serve è un po' di creatività. Quindi divertiti ad esplorare nuove opzioni di design personalizzate con immagini, colori e spaziatura diversi.

Non vedo l'ora di sentirti nei commenti.

Saluti!