Come rivelare le immagini usando le griglie orizzontali e l'overflow nascosto con Divi

Da quando sono uscite le nuove opzioni di dimensionamento di Divi, abbiamo creato alcuni tutorial che mostrano come creare rivelazioni al passaggio del mouse. In quei tutorial, il contenuto nascosto era posizionato verticalmente. In alcuni casi, tuttavia, potresti voler creare invece una rivelazione orizzontale. In questo post, ti mostreremo come rivelare le immagini usando le griglie al passaggio del mouse e le opzioni di overflow di Divi. Fare questo lavoro richiede un approccio leggermente diverso. Useremo una riga a una colonna e posizioneremo tutti i moduli uno sotto l'altro e al passaggio del mouse trasformeremo la colonna in una griglia orizzontale. 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 GRATUITAMENTE il layout delle griglie al passaggio del mouse

Per mettere le mani sul layout delle griglie al passaggio del mouse, 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!

Iniziamo a ricreare!

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Inizia aggiungendo una nuova sezione normale alla pagina su cui stai lavorando.

Aggiungi nuova riga

Struttura della colonna

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

Sfondo sfumato predefinito

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi il seguente sfondo sfumato:

• Colore 1: #b1ffc4
• Colore 2: #ffffff
• Tipo di gradiente: radiale
• Direzione radiale: Centro
• Posizione di partenza: 28%
• Posizione finale: 28%

Sfondo sfumato al passaggio del mouse

Cambia lo sfondo sfumato al passaggio del mouse.

• Colore 1: #b1ffc4
• Colore 2: #ffffff
• Tipo di gradiente: radiale
• Direzione radiale: sinistra
• Posizione di partenza: 5%
• Posizione finale: 5%

Spaziatura

Passa alle impostazioni di spaziatura e modifica successivamente i valori di riempimento e margine.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Margine superiore: 50 px
• Margine inferiore: 50 px

Bordo predefinito

Aggiungi il raggio del bordo "50 px" negli angoli in alto a destra e in basso a destra.

Confine al passaggio del mouse

Riporta gli angoli a "0px" al passaggio del mouse.

Ombra casella predefinita

Aggiungi un'ombra sottile casella successiva utilizzando le seguenti impostazioni:

• Forza sfocatura ombra scatola: 50 px
• Colore ombra: rgba(0,0,0,0.09)

Ombra del riquadro al passaggio del mouse

Rimuovi l'ombra della scatola al passaggio del mouse sostituendo il colore dell'ombra con uno completamente trasparente.

• Colore ombra: rgba(0,0,0,0)

Aggiungi modulo di testo alla colonna

Aggiungi contenuto H2

È ora di iniziare ad aggiungere moduli, iniziando con un modulo di testo. Inserisci alcuni contenuti H2 a tua scelta.

Impostazioni testo H2

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

• Intestazione 2 Carattere: Acme
• Intestazione 2 Stile carattere: sottolineato
• Colore sottolineatura titolo 2: #00ff3f
• Colore testo titolo 2: #000000
• Intestazione 2 Dimensione del testo: 3vw

Spaziatura

Aggiungi successivamente alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 6vw
• Imbottitura inferiore: 7vw
• Imbottitura sinistra: 2vw

Aggiungi modulo immagine alla colonna

Carica immagine

Il secondo modulo di cui abbiamo bisogno in questa colonna è un modulo immagine. Carica un'immagine orizzontale a tua scelta.

Lightbox

Abilita l'opzione lightbox nelle impostazioni del collegamento successiva.

• Apri in Lightbox: Sì

Dimensionamento

E forza l'intera larghezza sull'immagine nelle impostazioni di dimensionamento. Ciò assicurerà che l'immagine rimanga reattiva su tutte le dimensioni dello schermo.

• Forza intera larghezza: Sì

Clona modulo immagine due volte

Una volta completato il primo modulo immagine, puoi procedere e clonarlo due volte.

Cambia immagini

Cambia le immagini in entrambi i duplicati. Assicurati che le immagini caricate abbiano le stesse dimensioni impostate della prima immagine.

Aggiungi effetto al passaggio del mouse alla riga

Dimensionamento

Ora che abbiamo completato le impostazioni di base della riga e del modulo, è il momento di realizzare l'effetto hover! Inizieremo modificando l'altezza e la larghezza della riga e nascondendo gli overflow. Apri le impostazioni di ridimensionamento della riga e apporta le seguenti modifiche:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Larghezza: 20%
• Larghezza massima: 100%
• Altezza: 15,9 vw

Dimensionamento al passaggio del mouse

Riporta la larghezza al "100%" al passaggio del mouse. Ciò consentirà alle immagini di apparire una volta posizionata la riga.

• Larghezza: 100%

Visibilità

Passa alla scheda Avanzate e nascondi gli overflow. Ciò assicurerà che le immagini siano nascoste prima che i visitatori passino il mouse (desktop) o facciano clic (tablet/mobile) sul modulo di testo.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

transizioni

Stiamo anche cambiando la durata della transizione nelle impostazioni delle transizioni.

• Durata della transizione: 0 ms

Elemento principale al passaggio del mouse della colonna

Per creare una griglia al passaggio del mouse, apriremo le impostazioni della colonna, andremo alla scheda Avanzate e posizioneremo le seguenti righe di codice CSS nell'elemento principale al passaggio del mouse:

display: grid;
grid-template-columns: 20% 25% 25% 25%;
grid-gap: 10px;

Clona riga due volte

Una volta completata la prima riga, puoi clonarla tutte le volte che vuoi. Per questo particolare esempio di design, cloniamo la riga due volte.

Cambia lo sfondo sfumato della riga n. 1 duplicata

Cambia il primo colore sfumato dello sfondo sfumato della seconda riga.

• Colore 1: #ffdc96

Cambia lo sfondo sfumato della riga 2 duplicata

Fai lo stesso per la terza riga.

• Colore 1: #b7c7ff

Cambia modulo di testo Copia e sottolinea il colore di entrambi i duplicati

Continua modificando il colore della sottolineatura di entrambi i duplicati del modulo di testo insieme alla copia e il gioco è fatto!

• Colore sottolineatura #1: #ffaa00
• Colore sottolineatura n. 2: #0037ff

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 rivelare le immagini nelle griglie orizzontali utilizzando le opzioni di overflow di Divi. Le immagini sono state rivelate una volta posizionate sul desktop e cliccate su tablet/telefono. Sebbene abbiamo rivelato le immagini, puoi rivelare qualsiasi tipo di contenuto desideri modificando le impostazioni all'interno del builder. Speriamo che questo tutorial ti ispiri a creare anche i tuoi progetti di griglia al passaggio del mouse alternativi! 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.