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.

Anteprima flyby immagine DiviIniziamo a ricreare!

Aggiungi una nuova sezione

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

Selezione di una sezione diviAggiungi una nuova linea

Struttura a colonne

Continua ad aggiungere una nuova riga usando la seguente struttura di colonne:

Inserisci una sezione diviSfondo 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%

Configurazione dello sfondo della linea Divi

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%

Regolazione radiale della linea Divispaziatura

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

Regolazione della spaziatura dei parametri della linea Divi

Bordo predefinito

Aggiungi un raggio del bordo di pixel 50 negli angoli in alto a destra e in basso a destra.

Regolazione del deezer del bordo della linea

Hover Border

Porta gli angoli in "0px" in bilico.

reti di sorvolo

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)

Impostazioni dell'ombra della linea Divi

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)

Floating shadow line divi

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.

Titolo dell'articolo del modulo di testo Divi

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

Configurazione carattere intestazione divi

spaziatura

Quindi aggiungere valori di riempimento personalizzati.

  • Migliore imbottitura: 6vw
  • Imbottitura inferiore: 7vw
  • Riempimento a sinistra: 2vw

Configurazione del margine Divi

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.

Carica un'immagine diviScatola leggera

Attiva quindi l'opzione lightbox nelle impostazioni del collegamento.

  • Apri nel visualizzatore: sì

Apri in un visualizzatore dividimensionamento

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ì

Modifica della dimensione dell'immagine DiviClonare il modulo immagine due volte

Una volta completato il primo modulo immagine, è possibile copiarlo due volte.

Clona due volte il modulo immagine

Cambia immagini

Cambia le immagini nei due duplicati. Assicurati che le immagini che carichi abbiano le stesse dimensioni della prima immagine.

Modifica immagine diviAggiungi 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

Impostazioni del modulo della linea Diviin 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%

Cambia larghezza mentre sei in bilicovisibilità

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

Configurazione Divi overflowtransizioni

Stiamo anche cambiando la durata della transizione nei parametri di transizione.

  • Durata della transizione: 0ms

Transizione tra animazioni divi

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;

Regolazione della colonna Divireti di sorvolo

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.

Clona il modulo riga più volte

Modifica lo sfondo sfumato della linea 1

Cambia il colore del primo gradiente nello sfondo del gradiente della seconda linea.

  • Colore 1: # ffdc96

Modifica della duplicazione della linea DiviCambia 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!