Come creare una transizione di immagini separatiste con gli effetti di scorrimento di Divi

Gli effetti di scorrimento di Divi ci consentono di creare animazioni di transizione eccezionali che possono stupire i visitatori con un design accattivante. Le immagini, in particolare, possono mostrare la potenza di questi effetti di scorrimento in modi sorprendenti. In questo tutorial, spiegheremo passo dopo passo come creare una transizione di immagini separatiste con gli effetti di scorrimento di Divi. Questo effetto era originariamente presente nella pagina demo. L'effetto prevede il taglio delle immagini in anticipo utilizzando un editor di foto come Photoshop (è abbastanza facile da fare). Dopo che le immagini sono state tagliate, tutto ciò che dobbiamo fare è aggiungerle a Divi e utilizzare gli effetti di scorrimento incorporati per far accadere la magia.

Iniziamo.

Sbirciata

Ecco uno sguardo al design di oggi.

Puoi anche vedere la demo live originale del design sulla pagina demo sotto il titolo "L'esercizio non deve essere noioso".

Scarica GRATUITAMENTE il layout Divi per la transizione dell'immagine Breakaway

Per mettere le mani sul layout di questo tutorial, 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!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file JSON nel Divi Builder.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

A parte la configurazione Divi sopra, avrai bisogno di:

• Due immagini (almeno 1080px per 540px)
• Un software di fotoritocco come Photoshop per suddividere le immagini prima di aggiungerle a Divi.

Parte 1: affettare le immagini in Photoshop

Prima di poter iniziare a creare il nostro design in Divi, dobbiamo tagliare le nostre due immagini che verranno utilizzate per l'effetto di scorrimento della transizione separatista. Entrambe le immagini dovranno essere ritagliate in modo che siano esattamente 1080px per 540px. Successivamente, devono essere tagliati in 8 parti uguali (4 in larghezza, 2 in basso). Una volta pronti, possiamo salvarli sul nostro computer e caricare le sezioni dell'immagine sul nostro sito. Cominciamo con la prima immagine.

Immagine #1

Ritaglio dell'immagine

La prima cosa che dobbiamo fare è ritagliare l'immagine in modo che abbia le dimensioni esatte di 1080px per 540px. Puoi utilizzare qualsiasi software di modifica delle immagini per farlo. In Photoshop, puoi utilizzare lo strumento di ritaglio.

Affettare l'immagine

Quindi, fai clic per utilizzare lo strumento sezione e seleziona l'intera immagine. Fare clic con il pulsante destro del mouse sulla sezione/immagine e selezionare l'opzione Dividi sezione.

Nella casella dell'opzione Dividi fetta, aggiorna quanto segue:

Dividi orizzontalmente in:

• 2 fette in basso, distanziate uniformemente
• 270 pixel per fetta

Dividi verticalmente in:

• 4 fette di diametro, uniformemente distanziate
• 270 pixel per fetta

Quindi fare clic su OK.

Salvataggio delle sezioni dell'immagine

Ora abbiamo un'immagine suddivisa in 8 blocchi uguali, ognuno dei quali 270px per 270px.

Per salvare le sezioni dell'immagine, vai a File > Esporta > Salva per Web.

Quindi scegli il formato del file e fai clic su Salva.

Nella finestra popup, assicurati di aggiornare quanto segue:

• Salva con nome: [inserisci il nome per le immagini]
• Formato: solo immagini
• Impostazioni: Impostazioni predefinite
• Fette: tutte le fette

Quindi fare clic su Salva.

Ora tutte le sezioni dell'immagine verranno salvate sul computer, pronte per essere caricate su Divi.

Immagine #2

Per creare la seconda immagine necessaria per questo effetto di scorrimento della transizione dell'immagine, dovremmo seguire lo stesso processo (ritaglio, taglio e salvataggio) che abbiamo usato per creare la prima immagine.

Ruota le sezioni dell'immagine

Tuttavia, a causa del modo in cui funziona l'effetto di scorrimento rotante, ciascuna delle sezioni dell'immagine che compongono la seconda immagine dovrà essere ruotata di 90 gradi a sinistra oa destra.

Per ruotare un'immagine, puoi utilizzare Photoshop o il software di modifica delle immagini integrato dal tuo sistema operativo (puoi persino utilizzare la galleria multimediale di WordPress per modificare e ruotare le immagini dopo averle caricate sul tuo sito).

Ecco una guida su come ruotare le immagini nella loro posizione originale quando si taglia l'immagine.

Ecco l'immagine originale.

Ecco come devono essere ruotate le sezioni dell'immagine prima di caricarle sul tuo sito.

Questo è necessario per poter eventualmente ottenere il seguente effetto di scorrimento.

Ora che entrambe le immagini sono ritagliate, tagliate, salvate e ruotate, sei pronto per aggiungerle al tuo sito Divi. Dovresti avere un totale di 16 immagini (8 dall'immagine uno e 8 dall'immagine 2).

Parte 2: Creazione dell'effetto di scorrimento di transizione dell'immagine di separazione in Divi

Una volta che le sezioni dell'immagine sono pronte, possiamo iniziare il processo di progettazione in Divi. Ecco come farlo.

Aggiungi riga n. 1

Per iniziare, crea una riga di quattro colonne.

Impostazioni riga

Apri le impostazioni della riga e aggiorna quanto segue:

• Larghezza grondaia: 1
• Larghezza massima: 1080px (desktop), 540px (tablet e telefono)
• Imbottitura: 0px in alto, 0px in basso
• Overflow orizzontale: visibile
• Overflow verticale: visibile

Aggiorna il riempimento della sezione

Dato che posizioneremo la nostra seconda riga assolutamente sopra la prima riga, dobbiamo rimuovere l'imbottitura superiore (e inferiore) della sezione in modo che non elimini la posizione della seconda riga. Apri le impostazioni della sezione e aggiorna quanto segue:

• Imbottitura: 0px in alto, 0px a sinistra

Aggiungere le immagini

Nella prima riga, aggiungeremo ciascuna delle 8 immagini/sezioni che compongono la prima immagine. Le immagini devono essere posizionate all'interno delle colonne esattamente come sono state tagliate in Photoshop (4 in orizzontale e 2 in basso).

Ecco un'illustrazione di ogni immagine etichettata con un numero. Ecco come dovrebbe apparire dopo che tutte le immagini sono state aggiunte alla riga.

Immagine #1

Aggiungi il primo modulo immagine alla colonna 1.

Quindi carica la prima sezione dell'immagine nel modulo.

Effetti di scorrimento

Nella scheda Avanzate, aggiungi i seguenti effetti di scorrimento all'immagine.

• Abilita dissolvenza in entrata e in uscita: SI
• Opacità iniziale: 100% (al 20% di visualizzazione)
• Opacità media: 100% (al 20% di visualizzazione)
• Opacità finale: 0% (al 50% di visualizzazione)

Fare clic sulla scheda Scala e aggiornare quanto segue:

• Abilita ridimensionamento su e giù: S
• Scala iniziale: 100% (al 20% di visualizzazione)
• Scala media: 70% (al 32% – 48% viewport)
• Scala finale: 100% (al 60% di visualizzazione)

Fare clic sulla scheda Ruota e aggiornare quanto segue:

• Abilita rotazione: SI
• Rotazione iniziale: 0 gradi (a 0% viewport)
• Rotazione media: 0 gradi (al 20% di viewport)
• Rotazione finale: -90 gradi (al 60% di visualizzazione)

L'effetto di scorrimento sarà simile a questo quando si scorre la pagina verso il basso.

Immagine #2

Per creare l'immagine n. 2, duplica l'immagine n. 1 e posiziona il duplicato nella colonna 2.

Aggiorna il modulo immagine duplicata con l'immagine n.

Aggiorna effetto scorrimento

Manterremo la maggior parte degli stessi effetti di scorrimento riportati dall'immagine n. 1. L'unica cosa che dobbiamo cambiare è la rotazione. Vai alla scheda Avanzate e cambia la rotazione finale a 90 gradi (invece di -90 gradi) in modo che ruoti nella direzione opposta.

• Rotazione finale: 90 gradi

Immagine #3

Per creare l'immagine n. 3, copia e incolla l'immagine n. 1 nella colonna 3, quindi cambia l'immagine nell'immagine n. 3.

Immagine #4

Per creare l'immagine n. 4, copia e incolla l'immagine n. 2 nella colonna 4 e aggiorna l'immagine all'immagine n. 4.

Immagine #5

Per creare l'immagine n. 5, duplica l'immagine n. 1 in modo che il duplicato sia direttamente sotto nella colonna 1.

Aggiorna l'immagine all'immagine #5. Quindi aggiorna l'effetto di scorrimento Dissolvenza in entrata e in uscita come segue:

• Opacità iniziale: 100% (a 0% viewport)
• Opacità media: 100% (a 0% viewport)
• Opacità finale: 0% (al 40% di viewport)

Quindi aggiorna l'effetto di scorrimento Ridimensionamento su e giù come segue:

• Scala iniziale: 100% (a 0% viewport)
• Scala media: 70% (al 12% – 28% viewport)
• Scala finale: 100% (al 40% di visualizzazione)

E infine, aggiorna l'effetto di scorrimento rotante come segue:

• Rotazione iniziale: 0 gradi (a 0% viewport)
• Rotazione media: 0 gradi (a 0% viewport)
• Rotazione finale: 90 gradi (al 40% di visualizzazione)

Immagine #6

Per creare l'immagine n. 6, duplica l'immagine n. 5 e spostala nella colonna 2 (sotto l'immagine n. 2).

Aggiorna il modulo immagine con l'immagine #5. Quindi regolare l'effetto di scorrimento rotante nella direzione opposta (-90 gradi) come segue:

• Rotazione finale: -90 gradi

Immagine #7

Per creare l'immagine n. 7, duplica l'immagine n. 5 e spostala sotto l'immagine n. 3 nella colonna 3. Quindi aggiorna il modulo dell'immagine duplicata con l'immagine n. 7.

Immagine #8

Per creare l'immagine n. 8, duplica l'immagine n. 6 e spostala sotto l'immagine n. 4 nella colonna 4. Quindi aggiorna il modulo immagine duplicata con l'immagine n. 8.

Ora tutte le sezioni dell'immagine sono state aggiunte alla riga n. 1 con l'effetto di scorrimento separato.

Ecco come appare il risultato finora.

Aggiungi riga #2

La seconda riga di immagini non richiederà molto tempo per la progettazione. Tutto ciò che dobbiamo fare è duplicare la riga n. 1, aggiornare tutte le immagini con quelle corrette e quindi assegnarle una posizione assoluta.

Vai avanti e duplica la riga n. 1.

Aggiorna le immagini della riga n. 2

Ricorda le immagini ruotate che abbiamo creato per l'immagine n. Ora, tutto ciò che dobbiamo fare è caricare ciascuno di essi nella posizione corretta del modulo immagine all'interno della riga 2.

Aggiorna gli effetti di scorrimento dell'immagine

Una volta che le nuove immagini ruotate sono a posto, dobbiamo eliminare l'effetto di scorrimento Fading In e Out da tutte le immagini nella riga n. 2.

Fai ciò, distribuisci la modalità di visualizzazione wireframe e usa la selezione multipla per selezionare tutte e 8 le immagini nella riga n. 2. Quindi apri le impostazioni per una delle immagini selezionate per distribuire le impostazioni dell'elemento. Sotto l'opzione Effetto di scorrimento Dissolvenza in entrata e in uscita, aggiorna quanto segue:

• Abilita dissolvenza in entrata e in uscita: NO

Posizione Riga #2

Il nostro ultimo passaggio è posizionare la riga n. 2 direttamente dietro la riga n. 1. Un modo semplice per farlo è fornire la riga e la posizione assoluta. Apri le impostazioni per la riga n. 2 e aggiorna quanto segue:

• Posizione: Assoluta
• Posizione: in alto al centro

Risultato finale

Per vedere il risultato, potresti dover dare alla tua sezione una quantità significativa di margine superiore e inferiore o creare altre sezioni sopra e sotto il disegno. Questo ti darà la stanza di cui hai bisogno per vedere correttamente l'effetto di scorrimento.

Diamo un'occhiata al risultato finale.

Ed eccolo sul cellulare.

Pensieri finali

Questa transizione di immagini separate è un design impressionante di per sé, ma puoi facilmente utilizzarla per trasmettere un messaggio di tipo trasformazione ai visitatori (come un prima e un dopo). E non devi nemmeno accontentarti di questo design. Sentiti libero di sperimentare diversi effetti di scorrimento per creare transizioni di immagini ancora più sorprendenti. Hai qualche idea?

Non vedo l'ora di sentirti nei commenti.

Saluti!