Come creare testo e immagini che cambiano durante lo scorrimento in Divi

Gli effetti di scorrimento Divi sono ottimi per creare layout interessanti. Ne abbiamo pubblicati parecchi da quando è stata lanciata la funzione. In questo tutorial, ti mostreremo come creare un layout con testo e immagini che cambiano durante lo scorrimento. Questo design può essere utilizzato per una pagina dei servizi o per qualsiasi tipo di pagina richiesto. L'abbiamo mantenuto pulito e semplice affinché l'effetto di scorrimento fosse al centro dell'attenzione.

Puoi scaricare il layout come file JSON o ricrearlo sul tuo sito web Divi.

Iniziamo.

Anteprima

Prima di iniziare, diamo un'occhiata al layout su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il testo e le immagini che cambiano nella sezione di scorrimento

Per mettere le mani sulla sezione gratuita con testo e immagini che cambiano durante lo scorrimento, dovrai prima scaricarla 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!

Ricrea la sezione con testo e immagini che cambiano durante lo scorrimento

Aggiungi nuova sezione

Sfondo

Per iniziare a ricreare il design, aggiungi una nuova sezione su una pagina nuova o esistente. Aggiungi le immagini di sfondo che abbiamo fornito nel download sopra.

• Immagine di sfondo: design a scatola e punti
  • Desktop: immagine 1
  • Tavoletta: Immagine 2
  • Telefono: Immagine 3
• Dimensione immagine: copertina
• Ripetizione immagine di sfondo: Ripeti Y (verticale)

Spaziatura

Aggiungi un po' di spazio alla sezione.

• Imbottitura superiore e inferiore: 30%

Visibilità

Nascondi anche gli overflow.

• Overflow orizzontale e verticale: nascosto

Aggiungi nuova riga

Visibilità

Ora aggiungi una prima riga e regola le impostazioni di visibilità nella scheda Avanzate.

• Orizzontale: nascosto
• Overflow verticale: predefinito

Modulo Aggiungi testo

Testo

Aggiungi un primo modulo di testo per il titolo. Inserisci alcuni contenuti H1 a tua scelta.

• Corpo: Contenuto H1 – Team di produzione

Testo dell'intestazione

Passa alla scheda Design e modella il testo dell'intestazione.

• Livello di intestazione: H1
• Carattere: Fredoke One
• Peso: grassetto
• Colore nero
• Taglia
  • Desktop: 100 px
  • Tablet: 75px
  • Telefono: 33px
• Spaziatura del carattere
  • Desktop: 4px
  • Tablet: 3px
  • Telefono: 2px

Dimensionamento

Quindi, regolare la larghezza.

• Larghezza: 100%

Aggiungi nuova riga

Dimensionamento

Ora aggiungi una seconda riga e regola le impostazioni di dimensionamento di conseguenza:

• Larghezza: 80%
• Larghezza massima: 1000 px

Visibilità

Nascondi anche gli overflow.

• Overflow orizzontali e verticali: nascosti

Aggiungi il primo modulo di testo

Testo

Aggiungi un altro modulo di testo. Questa volta, inserisci alcuni contenuti H2 a tua scelta.

• Corpo: Contenuto H2 – Set fotografico

Testo dell'intestazione

Disegna il titolo successivo.

• Livello di intestazione: H2
• Peso: grassetto
• Stile: TT
• Colore: Nero #000000
• Taglia
  • Desktop: 50 pixel
  • Tablet: 40px
  • Telefono: 28px
• Spaziatura lettere: 3px

Spaziatura

Imposta anche un po' di spazio per il modulo.

• Margine superiore e inferiore: 0px

Effetti di scorrimento

Completa le impostazioni del modulo aggiungendo i seguenti effetti di scorrimento:

• Dissolvenza in entrata e in uscita: Abilita
• Viewport in basso
  • Posizione: 42%
  • Opacità iniziale: 0%
• Media opacità
  • Posizione inferiore: 43%
  • Prima posizione: 53%
  • Opacità media: 100%
• Viewport Top
  • Posizione: 54%
  • Opacità finale: 0%

Duplica modulo di testo due volte

Clona il modulo di testo due volte.

Regola il secondo modulo di testo

Testo

Modifica il contenuto nel nuovo modulo di testo.

• Corpo: H2 Content – ​​Direzione artistica

Posizione

Aggiungi anche il posizionamento assoluto al modulo.

• Posizione: Assoluta
• Posizione: in alto a sinistra

Effetti di scorrimento

Quindi, aggiorna le impostazioni dell'effetto di scorrimento.

• Dissolvenza in entrata e in uscita: Abilita
• Viewport in basso
  • Posizione: 56%
  • Opacità iniziale: 0%
• Media opacità
• Posizione inferiore: 57%
• Prima posizione: 67%
• Opacità media: 100%
• Viewport Top
  • • Posizione: 68%
    • Opacità finale: 0%

  

Regola 3° modulo di testo

Testo

Ora regola il secondo modulo di testo duplicato. Cambia prima il contenuto.

• Corpo: Contenuto H2 – Oggetti di scena e guardaroba

Posizione

Aggiungi poi una posizione assoluta.

• Posizione: Assoluta
• Posizione: in alto a sinistra

Effetti di scorrimento

Quindi, modifica gli effetti di scorrimento.

• Dissolvenza in entrata e in uscita: Abilita
• Viewport in basso
  • Posizione: 70%
  • Opacità iniziale: 0%
• Media opacità
  • Posizione inferiore: 71%
  • Prima posizione: 80%
  • Opacità media: 100%
• Viewport Top
  • Posizione: 81%
  • Opacità finale: 0%

Aggiungi modulo immagine

Immagine

Ora è il momento di aggiungere un modulo immagine. Usa un'immagine quadrata con una dimensione dell'immagine di 350 x 350 px.

• Immagine: immagine quadrata 350 x 350 px

Allineamento

Imposta l'allineamento a sinistra.

• Allineamento immagine: a sinistra

Spaziatura

Regola anche la spaziatura.

• Mostra spazio sotto l'immagine: No
• Margine superiore: -60 px

Filtri

Quindi, aggiungi un filtro per rendere l'immagine desaturata.

• Saturazione: 0%

Visibilità

Ora passa alla scheda Avanzate e imposta gli overflow su nascosti.

• Overflow orizzontale e verticale: nascosto

Effetti di scorrimento

Ultimo ma non meno importante, aggiungi un effetto di scorrimento in dissolvenza in entrata e in uscita.

• Dissolvenza in entrata e in uscita: Abilita
• Viewport in basso
  • Posizione: 70%
  • Opacità iniziale: 0%
• Media opacità
  • Posizione: 71%
  • Medio: 100%
• Viewport Top
  • Posizione: 100%
  • Opacità finale: 0%

Aggiungi il modulo di invito all'azione

Testo

Al modulo successivo, che è un modulo di invito all'azione. Includi alcuni contenuti a tua scelta.

• Titolo: Il team artistico di Jason
• Pulsante: Prenota Jason's Art Team
• Corpo: contenuto descrittivo

Collegamento

Aggiungi un collegamento successivo.

• Link: il tuo link

Sfondo

Rimuovi anche il colore di sfondo predefinito.

• Usa colore di sfondo: No

Testo

Quindi, imposta l'allineamento a destra.

• Allineamento del testo: a destra

Testo dell'intestazione

Stile anche il testo dell'intestazione.

• Livello di intestazione: H3
• Carattere: Fredoke One
• Allineamento del testo del titolo: a sinistra
• Colore: Nero #oooooo
• Taglia
  • Desktop: 48 pixel
  • Tablet: 42px
  • Telefono: 33px
• Spaziatura del carattere
  • Desktop e tablet: 1px
  • Telefono: 0px
• Altezza della linea
  • Desktop e tablet: 1.6em
  • Telefono: 1.1em

Corpo del testo

Quindi, il corpo del testo.

• Carattere: Verdana
• Colore: Nero #000000
• Dimensioni: 14px
• Spaziatura lettere: 0,5 px

Pulsante

Regola anche gli stili dei pulsanti.

• Stili personalizzati
• Dimensione del testo: 17px
• Colore del testo: bianco #ffffff
• Sfondo: nero #000000
• Spaziatura lettere: 1px
• Carattere: Verdana
• Margine superiore: 20px
• Imbottitura superiore e inferiore: 10px
• Imbottitura sinistra e destra: 25 px

Posizione

Passa alla scheda Avanzate e modifica le impostazioni di posizione come segue:

• Posizione: Parente
• Origine offset: in alto a sinistra
• Offset orizzontale: 25px

Visibilità

Quindi, nascondi gli overflow.

• Overflow orizzontale e verticale: nascosto

Effetti di scorrimento

Ultimo ma non meno importante, abilita un effetto di scorrimento in dissolvenza in entrata e in uscita.

• Dissolvenza in entrata e in uscita: Abilita
• Viewport in basso
  • Posizione: 54%
  • Opacità iniziale: 0%
• Media opacità
  • Posizione inferiore: 55%
  • Prima posizione: 80%
  • Medio: 100%
• Viewport Top
  • Posizione: 100%
  • Opacità finale: 0%

Duplica 2a riga

Clona la riga con tutti i suoi moduli.

Regola il primo modulo di testo

Testo

Ora cambia il contenuto dei moduli di testo clonati. Inizia dall'alto.

• Corpo: contenuto H2 / pre-produzione

Testo

Modificare l'allineamento a destra.

• Allineamento del testo: a destra

Estendi l'allineamento del testo

Applica l'allineamento a tutti i moduli di testo clonati nella stessa riga.

• Estendi l'allineamento del testo: a tutti i moduli di testo in questa riga

Regola il secondo modulo di testo

Testo

Ora aggiorna il contenuto nel secondo modulo di testo clonato.

• Corpo: Contenuto H2 / Produzione sul set

Posizione

Cambia anche la posizione nelle impostazioni di posizione.

• Posizione: in alto a destra

Regola 3° modulo di testo

Testo

Ora cambia il contenuto del terzo modulo di testo clonato.

• Corpo: Contenuto H2 / Coordinamento tra i team

Posizione

Cambia anche la posizione nelle impostazioni di posizione.

• Posizione: in alto a destra

Regola nuovo modulo immagine

Immagine

Quindi, cambia la foto nel modulo immagine.

• Immagine: Nuova immagine 350 x 350 px

Allineamento

Modifica anche l'allineamento dell'immagine.

• Allineamento immagine: a destra

Regola il nuovo modulo di invito all'azione

Testo

Apri il modulo di invito all'azione successivo e modifica tutto il contenuto.

• Titolo: Il team di produzione di Alice
• Pulsante: Prenota il team di produzione di Alice
• Corpo: Nuovo contenuto descrittivo.

Collegamento

Cambia anche il collegamento.

• Link: Nuovo link

Testo

Modifica anche l'allineamento.

• Allineamento del testo: a sinistra

Testo dell'intestazione

Modifica anche l'allineamento del testo dell'intestazione.

• Allineamento del testo del titolo: a sinistra

Corpo del testo

Così come il corpo del testo.

• Allineamento del corpo del testo: a sinistra

Dimensionamento

Non dimenticare di modificare anche l'allineamento dell'intero modulo nelle impostazioni di dimensionamento.

• Allineamento del modulo: a sinistra

Posizione

Infine, ripristina le impostazioni di posizione predefinite e il gioco è fatto!

• Posizione: ripristina ai valori predefiniti

Anteprima

Diamo un'ultima occhiata al layout di pagina su schermi di diverse dimensioni.

Desktop

Mobile

Questo è un involucro per il layout con testo e immagini che cambiano sullo scorrimento!

Abbiamo finito di ricreare il testo e le immagini che cambiano durante lo scorrimento. Siamo stati in grado di ottenere questo effetto grazie agli effetti di scorrimento incorporati di Divi. Usa questo layout per una pagina dei servizi, una pagina delle informazioni, una pagina per incontrare il team o qualsiasi cosa ti piaccia! Usa gli sfondi forniti o lascia lo sfondo bianco.

Fateci sapere cosa ne pensate nei commenti!