Come raccontare la tua storia su Scroll con Divi
Pubblicato: 2020-02-24La tua pagina Informazioni è una delle pagine più importanti del tuo sito web. Consente alle persone di conoscerti meglio e decidere se sono a loro agio per fare il passo successivo. Se stai cercando un modo semplice per includere lo storytelling nella tua pagina Informazioni, adorerai questo tutorial. Useremo gli effetti di scorrimento di Divi per creare una transizione fluida della narrazione sullo scorrimento. Non appena una parte della storia scompare, un'altra parte scompare. Questo dà ai visitatori la sensazione di leggere una storia interessante. Potrai anche scaricare gratuitamente il file JSON!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Iscriviti al nostro canale Youtube
Scarica GRATUITAMENTE The About Page Story su Scroll Layout
Per mettere le mani sulla storia della pagina gratuita sul layout di scorrimento, devi 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 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.
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!
1. Crea la prima sezione a schermo intero della pagina
Aggiungi 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
Trasforma la sezione a schermo intero successivamente aggiungendo un'altezza minima nelle impostazioni di dimensionamento.
- Altezza minima: 100 vh
2. Aggiungi riga animata
Aggiungi nuova riga
Struttura della colonna
Quindi, aggiungi una nuova riga alla tua sezione utilizzando la seguente struttura di colonne:
Dimensionamento
Apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza del contenitore della sezione modificando le impostazioni di dimensionamento.
- Larghezza: 100%
- Larghezza massima: 100%
Spaziatura
Quindi, aggiungi un po 'di imbottitura sinistra e destra su diverse dimensioni dello schermo.
- Imbottitura sinistra: 20vw (desktop), 10vw (tablet e telefono)
- Imbottitura destra: 20vw (desktop) 10vw (tablet e telefono)
Animazione
Per aumentare l'effetto narrativo, utilizzeremo anche un'animazione di dissolvenza per la riga.
- Stile di animazione: dissolvenza
- Durata dell'animazione: 3000 ms
- Curva di velocità dell'animazione: facilità di entrata e uscita
- Ripetizione animazione: una volta
Posizione
E, ultimo ma non meno importante, ci assicureremo che la riga sia posizionata centralmente all'interno del contenitore della sezione modificando le opzioni di posizione.
- Posizione: Assoluta
- Posizione: Centro
3. Inserisci titolo con effetti di scorrimento
Aggiungi il modulo di testo n. 1 alla colonna
Aggiungi contenuto H1
L'unico modulo di cui abbiamo bisogno in questa riga è un modulo di testo con alcuni contenuti H1.
Intestazione 1 Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H1 come segue:
- Carattere dell'intestazione: Nunito
- Peso del carattere dell'intestazione: semi grassetto
- Colore del testo dell'intestazione: #ffffff
- Dimensione del testo dell'intestazione: 7vw (desktop), 9vw (tablet), 11vw (telefono)
Movimento verticale
Aggiungeremo anche una sottile animazione verticale.
- Abilita movimento verticale: Sì
- Scostamento iniziale: 0 (al 50%)
- Compensazione media: 10 (al 100%)
- Scostamento finale: 10
Effetto di scorrimento in dissolvenza in entrata e in uscita
Insieme a un effetto dissolvenza in entrata e in uscita.
- Abilita 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 verso l'alto e verso il basso
Ultimo ma non meno importante, utilizzeremo anche un effetto di scorrimento in scala su e giù.
- Abilita ridimensionamento su e giù: Sì
- Scala iniziale: 100% (al 40%)
- Scala media: 95% (al 74%)
- Scala finale: 90%
4. Clona l'intera sezione una volta e includi il testo descrittivo con gli effetti di scorrimento
Modifica intestazione e copia del 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 le impostazioni del testo del modulo di testo H2
Modificare le impostazioni del testo H2 di conseguenza:
- Intestazione 2 Carattere: Nunito
- Peso del carattere dell'intestazione 2: semi grassetto
- Colore testo titolo 2: #ffffff
- Titolo 2: Dimensione testo: 5vw (desktop), 7vw (tablet), 8vw (telefono)
- Heading 2 Line Height: 1em (desktop), 1.2em (tablet e telefono)
Aggiungi il modulo di testo n. 2 alla colonna
Aggiungi contenuto
Quindi, aggiungi un altro modulo di testo alla colonna con un contenuto descrittivo a tua scelta.
Impostazioni testo
Modificare le impostazioni del testo del modulo di testo come segue:
- Carattere del testo: Open Sans
- Colore del testo: #ffffff
- Dimensione del testo: 1vw (desktop), 2.5vw (tablet), 3vw (telefono)
- Altezza riga di testo: 3.1em (desktop), 2.5em (tablet e telefono)
Spaziatura
Usa anche un margine superiore.
- Margine superiore: 8vw
Effetto di scorrimento in dissolvenza in entrata e in uscita
Quindi, passa agli effetti di scorrimento nella scheda Avanzate e utilizza le seguenti impostazioni di dissolvenza in entrata e in uscita:
- Abilita 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 verso l'alto e verso il basso
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%
5. Clona la seconda sezione tutte le volte che vuoi
Modifica il contenuto mentre procedi
Una volta completata la seconda sezione della tua pagina, puoi clonarla tutte le volte che vuoi, a seconda della trama della tua pagina. Assicurati di modificare il contenuto in ogni sezione.
6. Pagina completa con la sezione CTA
Modifica la spaziatura del modulo di testo della descrizione
Completa la pagina delle informazioni con una sezione CTA alla fine. Apri il modulo di testo della descrizione e modifica il margine superiore e inferiore.
- Margine superiore: 4vw
- Margine inferiore: 4vw
Aggiungi modulo pulsante
Aggiungi copia
Quindi, aggiungi anche un modulo pulsante con una copia a tua scelta.
Impostazioni dei pulsanti
Passa alla scheda di progettazione del modulo e modifica le impostazioni del pulsante come segue:
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante: 1vw (desktop), 2.5vw (tablet), 3.5vw (telefono)
- Colore del testo del pulsante: #000000
- Colore di sfondo del pulsante: #FFFFFF
- Larghezza bordo pulsante: 0px
- Raggio del bordo del pulsante: 100 px
- Carattere pulsante: Nunito
- Peso del carattere del pulsante: grassetto
Spaziatura
Completa le impostazioni del modulo pulsanti aggiungendo alcuni valori di riempimento personalizzati su diverse dimensioni dello schermo.
- Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
- Imbottitura inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
- Imbottitura sinistra: 3vw (Desktop), 6vw (Tablet), 8vw (Telefono)
- Imbottitura destra: 3vw (Desktop), 6vw (Tablet), 8vw (Telefono)
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come raccontare una storia sulla tua pagina delle informazioni utilizzando gli effetti di scorrimento incorporati di Divi. L'effetto che abbiamo creato consente la dissolvenza in entrata e in uscita di copie consecutive, dando ai visitatori l'impressione di leggere una storia. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.