Come far scorrere verso il basso rivelare il titolo e la didascalia dell'immagine della tua galleria con Divi

Se stai creando un sito Web in cui le immagini svolgono un ruolo centrale nel design, potresti voler includere una galleria a un certo punto. È qui che entra in gioco il Divi Gallery Module. Ti consente di selezionare direttamente le immagini dalla tua libreria multimediale e di visualizzarle in una struttura organizzata. Per impostazione predefinita, puoi anche mostrare dinamicamente il titolo e la didascalia di ogni immagine. Tuttavia, se stai cercando di limitare la quantità di testo che appare nel tuo design, potresti voler scorrere verso il basso per rivelare il titolo e la didascalia di un'immagine quando ci passi sopra. In questo tutorial, ti mostreremo esattamente come farlo. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

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

Desktop

Mobile

Scarica il layout GRATUITAMENTE

Per mettere le mani sul layout gratuito, 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!

https://youtu.be/p6Bh7wz3HMc

Iscriviti al nostro canale Youtube

1. Carica immagini con titoli e didascalie

Vai alla libreria multimediale

La prima parte di questo tutorial si concentra sull'aggiunta di immagini con titoli e didascalie all'interno della libreria multimediale. Per arrivarci, vai alla dashboard di WordPress > Media > Libreria.

Carica immagini

Una volta lì, carica le immagini che desideri includere nella tua galleria.

Aggiungi titoli e didascalie

Dovrai aggiungere un titolo e una didascalia a ciascuna immagine singolarmente. Per un risultato ottimale, cerca di mantenere una lunghezza del testo simile per ogni immagine.

2. Crea design con Divi

Crea una nuova pagina o aprine una esistente

Una volta che le tue immagini sono state caricate, è il momento di costruire il design in Divi. Crea una nuova pagina o aprine una nuova e abilita il Visual Builder in alto.

Aggiungi la sezione n. 1

Colore di sfondo

Aggiungi una nuova sezione alla tua pagina e apri le impostazioni della sezione. Applica il seguente colore di sfondo:

• Colore di sfondo: #ededed

Aggiungi riga n. 1

Struttura della colonna

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

Spaziatura

Senza ancora aggiungere moduli, apri le impostazioni della riga, vai alla scheda design e applica il seguente margine superiore e inferiore:

• Margine superiore: 5%
• Margine inferiore: 5%

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto H2

È ora di aggiungere moduli, iniziando con un modulo di testo nella colonna 1 contenente alcuni contenuti H2.

Impostazioni testo H2

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 di conseguenza:

• Intestazione 2 Carattere: Montserrat
• Intestazione 2 Dimensione del testo:
  • Desktop: 62px
  • Tablet: 48px
  • Telefono: 32px
• Altezza riga intestazione 2: 1,3 em

Dimensionamento

Modifica anche la larghezza massima del modulo su diverse dimensioni dello schermo.

• Larghezza massima:
  • Desktop: 500 px
  • Tablet: 400px
  • Telefono: 250px

Aggiungi modulo divisore alla colonna 1

Visibilità

Il modulo successivo e ultimo di cui abbiamo bisogno nella colonna 1 è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Linea

Quindi, passa alla scheda Design e cambia il colore della linea.

• Colore linea: #ffc000

Dimensionamento

Modifica anche le impostazioni di dimensionamento del modulo.

• Peso del divisore: 5px
• Larghezza massima: 100 px
• Altezza: 5px

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Nella colonna 2, l'unico modulo di cui abbiamo bisogno è un modulo di testo con un contenuto descrittivo.

Impostazioni testo

Modificare le impostazioni del testo del modulo come segue:

• Carattere del testo: Lato
• Altezza riga di testo: 2,2 em

Spaziatura

Applica anche un margine superiore.

• Margine superiore: 50 px

Aggiungi sezione #2

Aggiungi un'altra sezione sotto la precedente.

Sfondo sfumato

Apri le impostazioni della sezione e applica uno sfondo sfumato.

• Colore 1: #ededed
• Colore 2: #ffffff
• Tipo di gradiente: lineare
• Posizione di partenza: 20%
• Posizione finale: 20%

Spaziatura

Passa alla scheda Progettazione della sezione e rimuovi tutte le imbottiture superiori e inferiori predefinite.

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

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Colore di sfondo

Senza aggiungere ancora moduli, apri le impostazioni della riga e applica un colore di sfondo.

• Colore di sfondo: #f4f4f4

Dimensionamento

Passa poi alle impostazioni di dimensionamento della riga e applica le seguenti modifiche:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 2
• Larghezza: 90%
• Larghezza massima: 1580 px

Spaziatura

Stiamo personalizzando anche i valori di riempimento.

• Imbottitura superiore: 150 px
• Imbottitura inferiore: 0px
• Imbottitura sinistra: 5%
• Imbottitura destra: 5%

Aggiungi il modulo Galleria alla colonna

Seleziona immagini caricate

È ora di aggiungere le immagini, utilizzando un modulo Galleria! Seleziona le immagini che hai caricato nella tua libreria multimediale nella prima parte di questo tutorial.

Elementi

L'effetto hover ha senso solo sul desktop. Su schermi di dimensioni più piccole, non c'è passaggio del mouse e il tocco attiverà invece un effetto lightbox. Per questo motivo, mostriamo solo il titolo e la didascalia sul desktop e li disattiviamo su schermi di dimensioni inferiori. Stiamo anche disabilitando l'impaginazione. Puoi trovare queste opzioni nelle impostazioni degli elementi.

• Mostra titolo e didascalia
  • Desktop: Sì
  • Tablet e telefono: No
• Mostra impaginazione: No

Disposizione

Passa alla scheda di progettazione del modulo e modifica il layout successivo.

• Layout: Griglia
• Orientamento miniature: Ritratto

Sovrapposizione

Stiamo modificando anche le impostazioni dell'overlay.

• Colore icona sovrapposizione: #ffffff
• Colore sfondo sovrapposizione: rgba(0,0,0,0.25)

Impostazioni testo

Successivamente, cambieremo il colore del testo nelle impostazioni del testo.

• Colore del testo: chiaro

Impostazioni del testo del titolo

Quindi, modelleremo il testo del titolo.

• Livello titolo titolo: H3
• Carattere del titolo: Montserrat
• Dimensione del testo del titolo: 20px

Impostazioni testo didascalia

Stiamo modificando anche le impostazioni del testo della didascalia.

• Carattere didascalia: Lato
• Colore del testo della didascalia: #efefef
• Spaziatura tra lettere didascalia: 0,5 px
• Altezza riga didascalia: 1,9 em

Elemento galleria CSS

Quindi, passeremo alla scheda Avanzate. Una volta lì, aggiungeremo le seguenti righe di codice CSS alla casella CSS del titolo dell'elemento della galleria:

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;

Didascalia elemento galleria CSS

E useremo queste righe di codice all'interno della casella CSS della didascalia dell'elemento della galleria:

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;
padding-bottom: 20px;

3. Applicare l'effetto rivelazione

Aggiungi l'ID CSS al modulo Galleria

Ora che il nostro design è a posto, possiamo concentrarci su alcuni passaggi necessari per creare l'effetto di rivelazione. La prima cosa che faremo è aggiungere un ID CSS al nostro modulo Galleria.

• ID CSS: divi-gallery

Modulo Aggiungi codice sotto il modulo Galleria

Quindi, aggiungeremo un modulo codice sotto il modulo galleria.

Aggiungi tag di stile

Per creare l'effetto, useremo del codice CSS. Per preparare il nostro modulo di codice per quel codice, inseriremo alcuni tag di stile all'interno della casella del codice.

Inserisci codice CSS tra i tag di stile

E incolleremo le seguenti righe di codice CSS tra i tag di stile:

#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p {
visibility: hidden;
opacity: 0;
transform: translateY(-50px);
background-color: #FE7541;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
  
#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p, #divi-gallery .et_pb_gallery_image {
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1); 
}

#divi-gallery .et_pb_gallery_item:hover h3, #divi-gallery .et_pb_gallery_item:hover p {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
  
#divi-gallery .et_pb_gallery_item:hover div {
transform: translateY(-10px);
}

Questo è tutto! Salva le impostazioni della pagina ed esci da Visual Builder per visualizzare il risultato quando passi con il mouse su uno degli elementi della galleria.

Anteprima

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

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come essere creativo con il modulo Galleria integrato di Divi. Più specificamente, ti abbiamo mostrato come far scorrere verso il basso rivelare il titolo e la didascalia di un'immagine quando si passa con il mouse sul desktop. Questo ti aiuta a mantenere un design visivo senza visualizzare troppo testo contemporaneamente. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a 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.