Le gallerie di immagini sono una delle destinazioni preferite sulla maggior parte dei siti Web. E, in molti casi, potrebbe essere meglio mantenere quelle gallerie di immagini allegre e statiche, lasciando che le immagini facciano la loro magia.

 Tuttavia, aggiungi un effetto di scorrimento puzzle scorrevole a una galleria di immagini (come faremo in questo tutorial), può dare un tocco rinfrescante a un classico senza tempo.

In questo tutorial, ti mostreremo come costruire un layout semplice che rivela una galleria di immagini con un effetto di scorrimento del puzzle scorrevole su Divi. 

La chiave è capire come la dimensione delle immagini si riferisce ai valori di offset verticale e orizzontale di ciascun effetto di scorrimento per spostare l'immagine esattamente di un punto. Ma una volta completato, l'effetto di movimento risultante è nitido e preciso poiché gradualmente si assembla e rivela una galleria di immagini in un modo unico.

Possibile risultato

Ecco una panoramica del layout della galleria di immagini con l'effetto di scorrimento del puzzle scorrevole che creeremo in questo tutorial.

Possibile risultato divi

Creazione della sezione di intestazione

Per iniziare, creiamo una rapida sezione di intestazione che dirà all'utente di scorrere la pagina per visualizzare la galleria e con i fantastici effetti di scorrimento.

Aggiungi una riga

Aggiungi una riga di una colonna alla sezione predefinita.

Riga singola colonna

Aggiungi un modulo di testo

All'interno della colonna / riga aggiungi un nuovo modulo di testo.

Nelle impostazioni del testo, aggiorna il contenuto del corpo con il seguente:

<h1>Image Gallery</h1>

Aggiungi modulo di testo

Impostazioni del modulo di testo

Nella scheda Progettazione, aggiorna la struttura del testo come segue:

  • Carattere del titolo: Roboto
  • Peso carattere titolo: grassetto
  • Stile carattere titolo: TT
  • Allineamento del testo dell'intestazione: centro
  • Dimensioni del testo dell'intestazione: 50 px (desktop), 40 px (tablet e telefono)
  • Spaziatura della lettera del titolo: 4px
Stile di testo modificato

Aggiungi un'icona del modulo Blurb

Una volta che il testo è a posto, aggiungi un nuovo modulo di testo di presentazione sotto il modulo di testo.

Modulo di riepilogo della selezione Divi

Quindi rimuovere tutto il titolo e il corpo dal contenuto predefinito e selezionare per utilizzare l'icona della freccia verso il basso.

Modulo di riepilogo Divi

Impostazioni del testo di presentazione

Quindi aggiorna le impostazioni del testo della presentazione con un nuovo colore e un'animazione della diapositiva ripetuta.

  • Colore icona: # ffb500
  • Stile animazione: diapositiva
  • Direzione dell'animazione: in basso
  • Intensità dell'animazione: 20%
  • Ripetizione dell'animazione: loop
Modulo di riepilogo dell'animazione Divi

Imbottitura di sezione

Per dare spazio alla sezione per lo scorrimento, aggiorna il riempimento come segue:

  • Imbottitura: 20VH sopra, 50VH sotto

Qui stiamo usando l'unità di lunghezza vh che è relativa all'altezza della finestra del browser in modo che la spaziatura si adatti in modo coerente a tutte le dimensioni del browser.

Configurare la spaziatura dei moduli divi

Creazione di galleria di immagini con effetti di scorrimento

Ora che la nostra sezione di intestazione è completa, siamo pronti per costruire la galleria di immagini effettiva con gli effetti di scorrimento del puzzle scorrevole. L'intera galleria sarà composta da tre righe di 4 immagini / colonne in ogni riga per un totale di 12 immagini. Tuttavia, puoi facilmente aggiungere più linee e immagini al layout una volta terminato.

Creazione della sezione e della linea

Aggiungi una nuova sezione

Cominciamo aggiungendo una nuova sezione regolare nella sezione titolo.

Sezione selezione divi

Aggiungi una riga

Quindi aggiungi una riga con quattro colonne alla sezione.

La sezione ha 4 colonne divi

Impostazioni linea

Sotto le impostazioni della linea, aggiorna quanto segue:

  • Larghezza della grondaia: 1
  • Larghezza: 100%
  • Larghezza massima: 1200 px (desktop), 600 px (tablet), 300 px (telefono)
Parametro della linea Divi
Come la larghezza della linea determina la dimensione dell'immagine

La larghezza della riga è molto importante per questo design in quanto determinerà la larghezza di ciascuna delle quattro colonne. Una volta impostata la larghezza della grondaia su 1, non ci sarà più margine tra le immagini. 

E quando impostiamo la larghezza massima su 1200 px, il layout a quattro colonne renderà ciascuna delle colonne / immagini esattamente larga 300 px (1200 px / 4 = 300 px). 

Inoltre, poiché ciascuna delle immagini è quadrata, sappiamo che anche l'altezza di ciascuna immagine sarà di 300 pixel. Non dobbiamo mantenerlo così se non lo vogliamo. 

Ad esempio, potremmo anche scegliere di avere un layout a tre colonne con immagini di 400 x 400 pixel. Conoscere la larghezza dell'immagine (300px) e l'altezza (anche 300px) sarà la chiave per creare l'effetto di scorrimento in un secondo momento.

Aggiungere immagini

Aggiungi immagine 1

Aggiungi modulo immagine div

Immagine 1 Effetti di scorrimento

Effetto di scorrimento Divi
Relazione tra la dimensione dell'immagine e gli offset dell'effetto di scorrimento

Quando si utilizza l'effetto di scorrimento verticale e orizzontale, è importante capire cosa rappresenta il valore numerico inserito. In questo esempio, abbiamo un offset iniziale del movimento verticale di -3. Questo -3 è in realtà -300px (o 300px in basso) che è la larghezza dell'immagine. 

L'offset raggiunge quindi 0 (la posizione iniziale) quando l'utente scorre. Questo è ciò che crea l'effetto di scorrimento che sposta l'immagine esattamente su un blocco / fotogramma. Il movimento orizzontale inizia a 3 (300 pixel da destra) e si ferma nella posizione predefinita. Questi due effetti si combinano per creare un effetto di scorrimento in due parti unico.

Aggiungi immagine 2

Dopo che gli effetti di scorrimento sono stati aggiunti all'immagine 1. Aggiungere una nuova immagine alla colonna 2.

parametro immagine divi

Lasceremo questa immagine statica senza alcun effetto di scorrimento.

Aggiungi immagine 3

Quindi aggiungi un altro modulo immagine alla colonna 3 e aggiorna il modulo con una nuova immagine.

Immagine 3 Effetti di scorrimento

In Impostazioni immagine, aggiorna i seguenti effetti di scorrimento:

Nella scheda Movimento orizzontale ...

  • Attiva movimento orizzontale: SÌ
  • Inizio offset: -3 (allo 0% della finestra)
  • Offset medio: 0 (al 15% del viewport)
  • Fine offset: 0 (al 100% del viewport)
Effetto di scorrimento divi del modulo immagine

Aggiungi immagine 4

Per creare l'ultima immagine, copia l'immagine 1 e incollala nella colonna 4.

Copia il modulo immagine divi

Carica una nuova immagine nelle impostazioni dell'immagine.

Carica una nuova immagine divi

Immagine 4 Effetti di scorrimento

Quindi aggiorna i seguenti effetti di scorrimento:

Nella scheda Movimento verticale ...

  • Attiva il movimento verticale: SÌ
  • Inizio offset: 3 (allo 0% della finestra)
  • Offset medio: 0 (al 15% -28% del viewport)
  • Fine offset: 0 (al 40% del viewport)

Nella scheda Movimento orizzontale ...

  • Attiva movimento orizzontale: SÌ
  • Inizio offset: 3 (allo 0% della finestra)
  • Offset medio: 3 (al 28% del viewport)
  • Fine offset: 0 (al 40% del viewport)
Opzione di scorrimento Divi

Linea duplicata

Ora che gli effetti di scorrimento dell'immagine sono stati eseguiti per la prima riga, tutto ciò che dobbiamo fare è duplicare la riga per creare più immagini e gli effetti di scorrimento corrispondenti. Per questo esempio, duplichiamo la riga due volte per creare un totale di tre righe.

Sostituire e riorganizzare le immagini secondo necessità

Quindi possiamo spostare le immagini usando la funzione di trascinamento della selezione dove vogliamo. Qui è dove puoi diventare creativo e vedere come scorreranno le immagini in movimento. E una volta che le immagini sono a posto, puoi sostituire il contenuto del modulo immagini con nuove immagini che soddisfino le esigenze del sito web.

Divisione immagine totale

Ritocchi finali

Visibilità della sezione

Poiché le nostre immagini si estenderanno probabilmente al di fuori della sezione / finestra, nascondiamo l'overflow per ripulirlo un po '. Apri le impostazioni della sezione e aggiorna quanto segue:

  • Straripamento orizzontale: nascosto
  • Straripamento verticale: nascosto
Visibility divi

Imbottitura di sezione

Vogliamo che l'effetto di scorrimento verticale dell'immagine in alto (che si estende sopra la sezione) sia visibile nonostante l'overflow nascosto. Quindi aggiungiamo un riempimento superiore e inferiore uguale all'altezza dell'immagine (300 pixel).

Imbottitura Divi

Risultato finora

In questo momento possiamo fermarci qui se vuoi mantenere il design della galleria senza alcuna spaziatura tra le immagini. Ecco come appare il risultato finora. Notare come le immagini si muovono verticalmente e orizzontalmente esattamente di un blocco / fotogramma.

animazione finale divi

Aggiunta di spazio tra le immagini

Poiché abbiamo impostato la larghezza del margine interno su 1, non abbiamo più un margine tra le nostre colonne o immagini. Per ricreare una spaziatura simile, possiamo aggiungere un riempimento a ogni fotogramma.

 Questo ci consentirà di creare la spaziatura di cui abbiamo bisogno senza compromettere la funzionalità degli effetti di scorrimento. Ciò è possibile perché l'aggiunta di riempimento all'immagine non aumenterà la larghezza o l'altezza del contenitore dell'immagine. Puoi anche avere un effetto simile usando anche i bordi.

Immagine 1 Imbottitura

Apri le impostazioni nell'immagine 1 e aggiorna quanto segue:

  • Imbottitura: 10 pixel nella parte superiore, 10 pixel nella parte inferiore, 10 pixel a sinistra, 10 pixel a destra
Aggiungi margine divi

Estendi il riempimento a tutte le immagini

Prima di salvare, fare clic con il pulsante destro del mouse sull'opzione di riempimento e selezionare "Estendi riempimento". Nella finestra pop-up Espandi stili, fare clic sul pulsante Estendi per estendere questo riempimento a tutte le immagini sulla pagina.

Estendi i margini divi

Risultato finale

Ecco il risultato di tutto il lavoro che abbiamo svolto finora.

Risultato finale desktop Divi

Considerazioni finali

L'effetto di scorrimento del puzzle scorrevole descritto in questo articolo non si limita a darci un design unico per una galleria di immagini. Sottolinea inoltre che gli offset di movimento orizzontale e verticale possono essere utilizzati per effetti di scorrimento più precisi.

 Sentiti libero di esplorare diverse varianti di questo layout modificando gli offset e mescolando le posizioni delle immagini. 

Puoi anche modificare il numero di colonne purché comprendi come cambierà la dimensione della colonna / immagine e quindi come aggiornare gli offset dell'effetto di scorrimento con il valore corrispondente.

Alcune risorse consigliate

Probabilmente troverai questi risorse interessante perché ti permetteranno anche di creare gallerie fotografiche sul tuo blog WordPress.