Etichettatura degli angoli delle immagini in una splendida griglia della galleria con Divi

Cerchi un modo unico e bello per visualizzare le immagini in una galleria sul tuo sito web? Se è così, siamo sicuri che adorerai questo post. Ti mostreremo come tagliare gli angoli dell'immagine con i moduli di testo come parte di un bellissimo design che rimane reattivo al 100% su tutte le dimensioni dello schermo. Questo è un ottimo modo per aggiungere etichette numerate alle tue immagini mantenendo un design fantastico. Potrai anche scaricare gratuitamente il file JSON dell'esempio di progettazione.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Scarica GRATUITAMENTE il layout della sezione della galleria

Per mettere le mani sul layout della sezione della galleria gratuita, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Iscriviti al nostro canale Youtube

Iniziamo a ricreare

Aggiungi nuova sezione

Spaziatura

La prima cosa che devi fare è aggiungere una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Colore di sfondo

Aggiungi un colore di sfondo bianco dopo.

• Colore di sfondo: #ffffff

Dimensionamento

Passa alle impostazioni di dimensionamento e rimuovi tutto lo spazio tra le colonne, la riga e la sezione applicando le seguenti impostazioni:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Continua rimuovendo tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Colonna 1, 2, 3 e 4 Elemento principale

Ora, per assicurarci che una struttura a 4 colonne sia mantenuta su tutte le dimensioni dello schermo, ci assicureremo che ognuna delle colonne mantenga la sua larghezza del 25% aggiungendo la seguente riga di codice CSS a ciascun elemento principale della colonna singolarmente:

width: 25% !important;

Aggiungi modulo immagine alla colonna 1

Carica immagine 1:1

È ora di iniziare ad aggiungere moduli! Aggiungi un nuovo modulo immagine alla prima colonna e carica un'immagine quadrata a tua scelta (o usane una che puoi trovare nella cartella zippata che hai potuto scaricare all'inizio di questo post).

Lightbox

Abilita l'opzione lightbox nelle impostazioni del collegamento successiva.

• Apri in Lightbox: Sì

Dimensionamento

Per assicurarci che l'immagine rimanga reattiva su tutte le dimensioni dello schermo, abiliteremo anche l'opzione "Forza larghezza intera".

• Forza intera larghezza: Sì

Filtri predefiniti

Stiamo anche cambiando la luminosità.

• Luminosità: 50%

Filtri al passaggio del mouse

E lo riporteremo al "100%" al passaggio del mouse.

• Luminosità: 100%

Indice Z predefinito

Passa alle impostazioni di visibilità e assicurati che l'indice Z rimanga "0" nel suo stato predefinito.

• Indice Z: 0

Indice Z al passaggio del mouse

Ma, al passaggio del mouse, vogliamo che si sovrapponga all'etichetta numerata Modulo di testo che aggiungeremo nei prossimi passaggi. Per fare ciò, aumenteremo il valore dell'indice Z al passaggio del mouse.

• Indice Z: 100

Clona modulo immagine 3 volte e posizionalo nelle colonne rimanenti

Una volta completato il modulo immagine nella colonna 1, puoi clonarlo tre volte. Posiziona i duplicati nelle tre colonne rimanenti della riga.

Cambia immagini

Modifica le immagini nei duplicati.

Aggiungi margine superiore al modulo immagine nella colonna 2

E aggiungi un margine superiore al modulo immagine nella seconda colonna.

• Margine superiore: 24,7 vw

Modulo Aggiungi testo sotto Modulo immagine n. 1

Aggiungi contenuto

Il modulo successivo di cui abbiamo bisogno nella colonna 1 è un modulo di testo. Aggiungi un numero alla casella del contenuto.

Colore di sfondo

Cambia il colore di sfondo successivo. Questo colore deve corrispondere al colore di sfondo che hai assegnato alla riga.

• Colore di sfondo: #ffffff

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo.

• Carattere del testo: Lora
• Allineamento del testo: a destra
• Colore del testo: #000000
• Dimensione del testo: 3vw
• Altezza riga di testo: 3vw

Dimensionamento

Stiamo anche riducendo la larghezza del modulo.

• Larghezza: 7vw

Spaziatura

Crea uno spazio per il modulo nelle impostazioni di spaziatura successiva.

• Imbottitura superiore: 0.5vw
• Imbottitura inferiore: 2.5vw
• Imbottitura destra: 0.9vw

Indice Z

E aumentare l'indice Z.

• Indice Z: 99

Clona modulo di testo 3 volte

Una volta completati i passaggi generali per il modulo di testo, puoi clonarlo tre volte.

Posizionamento

Posiziona i duplicati di conseguenza:

Personalizza moduli di testo

Modulo di testo n. 1

Margine superiore negativo

È ora di iniziare a personalizzare i diversi moduli di testo in base alla loro posizione! Apri il modulo di testo nella colonna 1 e aggiungi un margine superiore negativo.

• Margine superiore: -5.9vw

Scatola ombra

Stiamo anche aggiungendo un'ombra box utilizzando le seguenti impostazioni:

• Posizione orizzontale dell'ombra della scatola: 7vw
• Posizione verticale dell'ombra della scatola: 5.9vw
• Forza di diffusione dell'ombra della scatola: 0px
• Colore ombra: rgba (35,50,255,0.94)

Modulo di testo #2

Modifica numerazione

Continua aprendo il modulo di testo nella seconda colonna e modifica il numero.

Allineamento del testo

Modifica anche l'allineamento del testo.

• Allineamento del testo: a sinistra

Allineamento del modulo

E cambia l'allineamento del modulo nelle impostazioni di dimensionamento.

• Allineamento del modulo: a destra

Spaziatura

Passa alle impostazioni di spaziatura e aggiungi un margine superiore negativo. Aggiungi l'imbottitura anche a sinistra invece che a destra.

• Margine superiore: -6vw
• Imbottitura sinistra: 0.9vw

Scatola ombra

Completa il design del modulo di testo aggiungendo un'ombra di scatola.

• Posizione orizzontale dell'ombra della scatola: 7vw
• Posizione verticale dell'ombra della scatola: -6vw
• Forza di diffusione dell'ombra della scatola: 0px
• Colore ombra: #ededed

Modulo di testo n. 3

Modifica numerazione

Al modulo di testo nella colonna 3! Modificare il numero nella casella del contenuto.

Margine superiore negativo

Passa alla scheda Progettazione e aggiungi un margine superiore negativo.

• Margine superiore: -6vw

Scatola ombra

Usa anche un'ombra a scatola.

• Posizione orizzontale dell'ombra della scatola: -7vw
• Posizione verticale dell'ombra della scatola: -6vw
• Forza di diffusione dell'ombra della scatola: 0px
• Colore ombra: #ff2323

Modulo di testo #4

Modifica numerazione

Al prossimo e ultimo modulo di testo. Cambia anche qui il numero.

Allineamento del testo

Quindi, cambia l'allineamento del testo.

• Allineamento del testo: a sinistra

Allineamento del modulo

Modificare l'allineamento del modulo anche nelle impostazioni di dimensionamento.

• Allineamento del modulo: a destra

Cambia spaziatura

Modificare le impostazioni di spaziatura successiva.

• Margine superiore: 24,7 vw
• Margine inferiore: -6vw
• Imbottitura sinistra: 0.9vw

Scatola ombra

E completa il design del modulo di testo aggiungendo un'ombra di scatola con le seguenti impostazioni:

• Posizione orizzontale dell'ombra della scatola: -7vw
• Posizione verticale dell'ombra del riquadro: -5.9vw
• Forza di diffusione dell'ombra della scatola: 0px
• Colore ombra: #000000

Clona intera riga

Una volta completata la riga, puoi clonarla tutte le volte che vuoi, a seconda di quante immagini vuoi visualizzare.

Modifica numerazione e immagini

Assicurati di cambiare tutte le immagini e i numeri e il gioco è fatto!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Pensieri finali

In questo post, ti abbiamo mostrato come creare una bella galleria con gli angoli delle immagini etichettati. Questo è un modo unico per mostrare le tue immagini in modo esteticamente accattivante. Sei stato anche in grado di scaricare il file JSON all'inizio del tutorial. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.