La pagina che parla di te (di) è una delle tue pagine più importanti sito web. Ciò consente alle persone di conoscerti meglio e decidere se si sentono a proprio agio nel fare il passo successivo. Se stai cercando un modo semplice per includere la narrazione in questa pagina, adorerai questo tutorial. Utilizzeremo gli effetti di scorrimento di Divi per creare una transizione fluida della narrazione durante lo scorrimento. Non appena una parte della storia svanisce, ne appare un'altra. Questo dà il Visitatori la sensazione di leggere una storia interessante. 

Possibile risultato finale

Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di dimensioni diverse.

1. Creare la prima sezione a schermo intero della pagina

Aggiungi una nuova sezione

Colore di sfondo

Inizia aggiungendo una prima sezione alla tua pagina Informazioni. Apri le impostazioni della sezione e cambia il colore di sfondo in nero.

• Colore di sfondo: # 000000

dimensionamento

Quindi girare la sezione a schermo intero aggiungendo un'altezza minima nei parametri di dimensionamento.

• Altezza minima: 100 Vh

2. Aggiungi una linea animata

Aggiungi una nuova linea

Struttura a colonne

Quindi aggiungi una nuova riga alla sezione utilizzando la seguente struttura di colonne:

dimensionamento

Aprire i parametri della linea e consentire alla linea di occupare l'intera larghezza del contenitore della sezione modificando i parametri di quotatura.

• Larghezza: 100%
• Larghezza massima: 100%

spaziatura

Quindi aggiungi il riempimento sinistro e destro su diverse dimensioni dello schermo.

• Imbottitura sinistra: 20vw (scrivania), 10vw (tablet e telefono)
• Imbottitura destra: 20vw (scrivania) 10vw (tablet e telefono)

Animazione

Per aumentare l'effetto narrativo, utilizzeremo anche un'animazione di dissolvenza per la linea.

• Stile animazione: dissolvenza
• Durata dell'animazione: 3000 ms
• Curva della velocità di animazione: facilità in entrata
• Ripetizione dell'animazione: una volta

Posizione

Infine, ci assicureremo che la linea sia posizionata al centro del contenitore della sezione modificando le opzioni di posizione.

• Posizione: assoluta
• Posizione: centro

3. Inserisci un titolo con effetti di scorrimento

Aggiungi il modulo di testo # 1 alla colonna

Aggiungi contenuto H1

L'unico modulo di cui abbiamo bisogno in questa riga è un modulo di testo con contenuto H1.

Titolo testo 1

Vai alla scheda di progettazione del modulo e modifica le impostazioni del testo H1 come segue:

• Carattere del titolo: Nunito
• Peso carattere titolo: Semi grassetto
• Colore testo intestazione: #ffffff
• Dimensioni del testo dell'intestazione: 7vw (desktop), 9vw (tablet), 11vw (telefono)

Movimento verticale

Aggiungeremo anche una sottile animazione verticale.

• Attiva movimento verticale: Sì
• Avvia offset: 0 (al 50%)
• Offset medio: 10 (al 100%)
• Offset finale: 10

Effetto di scorrimento in entrata e in uscita

Con un effetto di dissolvenza in entrata e in uscita.

• Attiva dissolvenza in entrata e in uscita: Sì
• Opacità iniziale: 100%
• Opacità media: 100% (al 55%)
• Opacità finale: 0% (al 62%)

Ridimensionamento dell'effetto di scorrimento su e giù

Ultimo ma non meno importante, utilizzeremo anche un effetto di scorrimento su scala su e giù.

• Abilita ridimensionamento su e giù: sì
• Scala iniziale: 100% (al 40%)
• Scala media: 95% (al 74%)
• Scala finale: 90%

4. Clonare un'intera sezione una volta e includere il testo della descrizione con effetti di scorrimento

Modifica titolo e contenuto

Una volta completata la prima sezione, puoi clonarla completamente. Apri il modulo di testo all'interno del contenitore della sezione duplicata e usa una copia H2.

Modifica i parametri di testo del modulo H2 Text

Modificare le impostazioni del testo H2 di conseguenza:

• Titolo 2 Polizia: Nunito
• Titolo carattere 2: semi-grassetto
• Articolo 2 Colore del testo: #ffffff
• Voce 2 Dimensioni del testo: 5vw (desktop), 7vw (tablet), 8vw (telefono)
• Altezza della linea 2: 1em (ufficio), 1.2em (tablet e telefono)

Aggiungi il modulo di testo # 2 alla colonna

Aggiungi contenuto

Successivamente, aggiungi un altro modulo di testo alla colonna con a contenuto descrizione a tua scelta.

Impostazioni del testo

Modificare le impostazioni del testo per il modulo di testo come segue:

• Carattere testo: Apri Sans
• Colore del testo: #ffffff
• Dimensioni del testo: 1vw (desktop), 2.5vw (tablet), 3vw (telefono)
• Altezza della riga di testo: 3.1em (scrivania), 2.5em (tablet e telefono)

spaziatura

Utilizza anche un margine superiore.

• Margine superiore: 8vw

Effetto di scorrimento in entrata e in uscita

Successivamente, passa agli effetti di scorrimento nella scheda avanzata e utilizza le seguenti impostazioni di dissolvenza in entrata e in uscita:

• Attiva dissolvenza in entrata e in uscita: Sì
• Opacità iniziale: 100%
• Opacità media: 0% (al 31%)
• Opacità finale: 0% (al 35%)

Ridimensionamento dell'effetto di scorrimento su e giù

Aggiungi anche un effetto di ridimensionamento su e giù.

• Abilita ridimensionamento su e giù: sì
• Scala iniziale: 100% (al 40%)
• Scala media: 95% (al 74%)
• Scala finale: 90%

Ora puoi clonare quest'ultima sezione quante più volte possibile. Tuttavia, dovrai regolare il contenuto di ogni sezione per le vostre esigenze.

Panoramica

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.

Considerazioni finali

In questo articolo, ti abbiamo mostrato come raccontare una storia sulla tua pagina delle informazioni utilizzando gli effetti di scorrimento integrati di Divi. L'effetto che abbiamo creato consente alla copia consecutiva di sfumare in entrata e in uscita, dando il Visitatori come leggere una storia. Sei stato anche in grado di scaricare gratuitamente il file JSON! Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.