Poiché le nuove opzioni di dimensionamento di Divi sono stati rilasciati, sono disponibili alcuni tutorial che mostrano come creare le rivelazioni al passaggio del mouse. In questi tutorial, il contenuto mascherato è stato posizionato verticalmente. Tuttavia, in alcuni casi potresti voler creare una rivelazione orizzontale. In questo tutorial ti mostreremo come rivelare le immagini utilizzando le griglie al passaggio del mouse e le opzioni di overflow. Divi. Fare questo lavoro richiede un approccio leggermente diverso. Useremo una riga di una colonna e collocheremo tutti i moduli uno sotto l'altro. Al passaggio del mouse, trasformeremo la colonna in una griglia orizzontale. Puoi anche scaricare il file JSON gratuitamente!
Andiamo.
Panoramica
Prima di immergerci nel tutorial, diamo una rapida occhiata a come appare su schermi di dimensioni diverse.
Iniziamo a ricreare!
Aggiungi una nuova sezione
Inizia aggiungendo una nuova sezione regolare alla pagina su cui stai lavorando.
Aggiungi una nuova linea
Struttura a colonne
Continua ad aggiungere una nuova riga usando la seguente struttura di colonne:
Sfondo sfumato predefinito
Senza aggiungere più moduli, apri i parametri di linea e aggiungi il seguente sfondo sfumato:
- Colore 1: #b1ffc4
- Colore 2: #ffffff
- Tipo di gradiente: radiale
- Direzione radiale: centro
- Posizione iniziale: 28%
- Posizione finale: 28%
Sorvolando lo sfondo sfumato
Cambia lo sfondo sfumato passando con il mouse.
- Colore 1: #b1ffc4
- Colore 2: #ffffff
- Tipo di gradiente: radiale
- Direzione radiale: sinistra
- Posizione iniziale: 5%
- Posizione finale: 5%
spaziatura
Vai alle impostazioni di spaziatura e quindi modifica i valori di riempimento e margine.
- Riempimento superiore: 0px
- Imbottitura inferiore: 0px
- Margine superiore: 50px
- Margine inferiore: 50px
Bordo predefinito
Aggiungi un raggio del bordo di pixel 50 negli angoli in alto a destra e in basso a destra.
Hover Border
Porta gli angoli in "0px" in bilico.
Ombra predefinita
Quindi aggiungi un'ombra sottile alla scatola usando i seguenti parametri:
- Box Shadow Blur Force: 50px
- Colore dell'ombra: rgba (0,0,0,0.09)
Hover Box Shadow
Rimuovi l'ombra dalla scatola quando voli sopra, sostituendo il colore dell'ombra con un colore completamente trasparente.
- Colore dell'ombra: rgba (0,0,0,0)
Aggiungi un modulo di testo a una colonna
Aggiungi contenuto H2
È ora di iniziare ad aggiungere moduli, iniziando con un modulo di testo. Inserisci il contenuto H2 a tua scelta.
Impostazioni di testo H2
Passa alla scheda Design e modifica le impostazioni del testo H2 di conseguenza:
- Titolo 2 Carattere: Acme
- Titolo 2 Stile carattere: sottolineato
- Titolo 2 Sottolineato il colore: #00ff3f
- Titolo 2 Colore del testo: #000000
- Titolo 2 Dimensione testo: 3vw
spaziatura
Quindi aggiungere valori di riempimento personalizzati.
- Migliore imbottitura: 6vw
- Imbottitura inferiore: 7vw
- Riempimento a 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 di tua scelta.
Scatola leggera
Attiva quindi l'opzione lightbox nelle impostazioni del collegamento.
- Apri nel visualizzatore: sì
dimensionamento
E forza l'intera larghezza dell'immagine nelle impostazioni di ridimensionamento. Ciò garantirà che l'immagine rimanga sensibile a tutte le dimensioni dello schermo.
- Forza larghezza completa: Sì
Clonare il modulo immagine due volte
Una volta completato il primo modulo immagine, è possibile copiarlo due volte.
Cambia immagini
Cambia le immagini nei due duplicati. Assicurati che le immagini che carichi abbiano le stesse dimensioni della prima immagine.
Aggiungi l'effetto rollover alla riga
dimensionamento
Ora che abbiamo completato la riga di base e le impostazioni della mod, è il momento di creare l'effetto hover! Inizieremo modificando l'altezza e la larghezza della riga e nascondendo gli overflow. Apri le impostazioni di ridimensionamento delle righe e apporta le seguenti modifiche:
- Usa una larghezza della grondaia personalizzata: Sì
- Larghezza della grondaia: 1
- Larghezza: 20%
- Larghezza massima: 100%
- Altezza: 15.9vw
in bilico
Riduci la larghezza al "100%" durante il passaggio del mouse. Ciò consentirà la visualizzazione delle immagini dopo il passaggio del mouse sulla riga.
- Larghezza: 100%
visibilità
Passa alla scheda avanzata successiva e nascondi gli overflow. Ciò assicurerà che le immagini vengano mascherate prima del file Visitatori passa il mouse (desktop) o fai clic (tablet/mobile) sul modulo di testo.
- Straripamento orizzontale: nascosto
- Straripamento verticale: nascosto
transizioni
Stiamo anche cambiando la durata della transizione nei parametri di transizione.
- Durata della transizione: 0ms
Elemento di rollover della colonna principale
Per creare una griglia hover, apriremo le impostazioni della colonna, andremo alla scheda Opzioni avanzate e inseriremo le seguenti righe di codice CSS nell'elemento hover principale:
display: griglia; grid-template-colonne: 20% 25% 25% 25%; griglia-gap: 10px;
Clona la linea due volte
Una volta completata la prima riga, puoi clonarla tutte le volte che vuoi. Per questo particolare esempio di progettazione, cloniamo la riga due volte.
Modifica lo sfondo sfumato della linea 1
Cambia il colore del primo gradiente nello sfondo del gradiente della seconda linea.
- Colore 1: # ffdc96
Cambia lo sfondo sfumato della linea 2
Fai lo stesso per la terza fila.
- Colore 1: # b7c7ff
Cambia la copia del modulo di testo e il colore di sottolineatura dei due duplicati
Continua cambiando il colore di sottolineatura dei duplicati del modulo di testo con la copia e il gioco è fatto!
- Colore sottolineato # 1: # ffaa00
- Colore sottolineato # 2: # 0037ff
Considerazioni finali
In questo tutorial, ti abbiamo mostrato come visualizzare le immagini in griglie orizzontali al passaggio del mouse utilizzando le opzioni di overflow. Divi. Le immagini venivano rivelate quando si passava il mouse sul desktop e si faceva clic su tablet/telefono. Sebbene abbiamo rivelato le immagini, puoi rivelare le contenuto a tua scelta modificando i parametri nel generatore. Ci auguriamo che questo tutorial ti ispiri a creare i tuoi progetti alternativi di griglie al passaggio del mouse! Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!