Vai al contenuto principale

Come rivelare le immagini utilizzando le griglie di rollover orizzontali e l'overflow nascosto con Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Dal momento che sono state rilasciate le nuove opzioni di dimensionamento Divi, ci sono alcuni tutorial che mostrano come creare rivelazioni al passaggio del mouse. In questi tutorial, il contenuto nascosto è stato posizionato verticalmente. Tuttavia, in alcuni casi, potresti voler creare una rivelazione orizzontale. In questo tutorial, ti mostreremo come rivelare le immagini usando le griglie al passaggio del mouse di Divi e le opzioni di overflow. Fare questo lavoro richiede un approccio leggermente diverso. Useremo una riga di una colonna e posizioneremo tutti i moduli uno sotto l'altro. Al passaggio del mouse, trasformeremo la colonna in una griglia orizzontale. Potrai 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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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 di 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.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

  • 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à

Vai alla scheda avanzata successiva e nascondi gli overflow. Ciò garantirà che le immagini siano nascoste prima che i visitatori passino il mouse su (desktop) o facciano clic (tablet / dispositivo 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.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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 di rollover orizzontali utilizzando le opzioni di overflow di Divi. Le immagini sono state rivelate quando sono volate sul desktop e sono state cliccate su un tablet / telefono. Anche se abbiamo rivelato le immagini, puoi rivelare il contenuto che preferisci modificando le impostazioni nel builder. Speriamo che questo tutorial ti incoraggi a creare i tuoi progetti alternativi di griglia di cavalcavia! Se hai domande o suggerimenti, ti preghiamo di lasciare un commento nella sezione commenti qui sotto!

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
2 azioni
quota2
Tweet
Enregistrer