Come sincronizzare la copia espandibile sullo scorrimento con Divi
Pubblicato: 2020-03-08Quando l'enfasi di una certa sezione è sulla copia, è importante assicurarsi che la copia non passi inosservata. Ci sono molte tecniche che puoi usare per mettere la tua copia sotto i riflettori, ma in questo tutorial ti mostreremo come sincronizzare la copia in espansione sullo scorrimento usando i nuovi effetti di scorrimento di Divi. Mentre gli utenti stanno scorrendo, apparirà un'altra parte della copia, consentendo loro di leggere passo dopo passo il contenuto che stai fornendo. 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
Scarica GRATUITAMENTE la copia espandibile sul layout di scorrimento
Per mettere le mani sulla copia in espansione sul layout di 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 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 un progetto di sezione
Aggiungi nuova sezione
Colore di sfondo
Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e cambia il colore di sfondo.
- Colore di sfondo: #151515
Spaziatura
Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Larghezza: 90%
- Larghezza massima: 1380 px
Spaziatura
Aggiungi successivamente un'imbottitura personalizzata in alto e in basso.
- Imbottitura superiore: 150 px
- Imbottitura inferiore: 150 px
Aggiungi il modulo di testo n. 1 alla colonna
Aggiungi contenuto
Quindi, aggiungi un primo modulo di testo con alcuni contenuti a tua scelta.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Livvic
- Peso del carattere del testo: grassetto
- Colore del testo: #f1f1f1
- Dimensioni del testo: 170 px (desktop), 100 px (tablet), 70 px (telefono)
- Altezza riga di testo: 1em
- Lunghezza orizzontale dell'ombra del testo: 0,06 em
- Lunghezza verticale dell'ombra del testo: 0em
- Colore ombra del testo: rgba (79,79,79,0.74)
- Allineamento del testo: centro (desktop), sinistra (tablet e telefono)
Clona modulo di testo due volte
Clonare il modulo di testo due volte.
Modifica contenuto
Modifica il contenuto di entrambi i moduli di testo duplicati.
Aggiungi riga #2
Struttura della colonna
Aggiungi un'altra riga subito sotto la precedente utilizzando la seguente struttura a colonne:
Dimensionamento
Apri le impostazioni della riga e modifica le impostazioni di dimensionamento di conseguenza:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 100%
Spaziatura
Successivamente, rimuovi l'imbottitura superiore e inferiore predefinita della riga.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Frontiera
Aggiungi un bordo superiore successivo.
- Larghezza bordo superiore: 1px
- Colore bordo superiore: #4c4c4c
Impostazioni colonna
Spaziatura
Stiamo apportando alcune modifiche anche alle impostazioni delle colonne. Apri le impostazioni e aggiungi alcuni valori di riempimento personalizzati.
- Imbottitura superiore: 5vw
- Imbottitura inferiore: 10vw
- Imbottitura sinistra: 6vw
- Imbottitura destra: 6vw
Frontiera
Usa anche un bordo destro.
- Larghezza bordo destro: 1px
- Colore bordo destro: #4c4c4c
Aggiungi modulo Blurb alla colonna 1
Aggiungi contenuto
Continua aggiungendo un modulo Blurb alla colonna con alcuni contenuti a tua scelta.
Seleziona icona
Seleziona un'icona a tua scelta successivamente.
Impostazioni icona
Passa alla scheda di progettazione del modulo e modifica le impostazioni dell'icona come segue:
- Colore icona: #a3acff
- Allineamento immagine/icona: a sinistra
Impostazioni del testo del titolo
Modifica anche le impostazioni del testo del titolo.
- Carattere del titolo: Livvic
- Peso del carattere del titolo: grassetto
- Colore del testo del titolo: #c1c1c1
- Dimensione del testo del titolo: 35px
- Lunghezza orizzontale dell'ombra del testo del titolo: 0.06em
- Titolo Testo Shadow Lunghezza verticale: 0em
- Colore dell'ombra del testo del titolo: rgba (79,79,79,0.74)
Impostazioni del corpo del testo
Stiamo apportando alcune modifiche anche alle impostazioni del testo del corpo.
- Colore del corpo del testo: #878787
- Dimensione del testo del corpo: 16px
- Altezza della linea del corpo: 2,4 em
Blurb Titolo CSS
E creeremo dello spazio attorno al titolo con una singola riga di codice CSS che aggiungeremo al titolo della trama nella scheda Avanzate.
margin: 30px 0 40px 0;
Clona l'intera colonna due volte
Dopo aver completato l'intera colonna e il modulo Blurb al suo interno, puoi clonare l'intera colonna due volte.
Rimuovi il bordo della colonna 3
Apri le impostazioni della colonna 3 e rimuovi il bordo destro.
- Larghezza bordo destro: 0px
Modifica contenuto
E cambia il contenuto del modulo Blurb per ogni duplicato.
2. Aggiungi effetti di scorrimento
Sezione
Ridimensionamento su e giù
È ora di aggiungere effetti di scorrimento, a partire dalla sezione. Usa l'effetto di scorrimento scala su e giù con i seguenti valori:
- Abilita ridimensionamento su e giù: Sì
- Scala iniziale: 70%
- Scala media: 100%
- Scala finale: 100%
Modulo di testo n. 1
Dissolvenza in entrata e in uscita
Quindi, apri il primo modulo di testo nella prima riga della sezione e aggiungi un effetto di dissolvenza in entrata e in uscita.
- Abilita dissolvenza in entrata e in uscita: Sì
- Opacità iniziale: 0%
- Opacità media: 0% (al 55%)
- Opacità finale: 100% (al 71%)
Ridimensionamento su e giù
Usa anche un effetto di ridimensionamento su e giù.
- Abilita ridimensionamento su e giù: Sì
- Scala iniziale: 0% (al 47%)
- Scala media: 100% (al 56%)
- Scala finale: 100% (al 64%)
Estendi gli effetti di scorrimento del modulo di testo n. 1
Continua estendendo gli effetti di scorrimento agli altri due moduli di testo nella colonna.
- A: Tutti i testi
- In tutto: questa colonna
Modulo Blurb #1
Ridimensionamento su e giù
Successivamente, aggiungeremo un effetto di scorrimento in scala su e giù al modulo Blurb nella colonna 1.
- Abilita ridimensionamento su e giù: Sì
- Scala iniziale:
- Desktop: 0%
- Tablet e telefono: 100%
- Scala media: 100% (al 33%)
- Scala finale: 100% (al 64%)
Estendi gli effetti di scorrimento del modulo Blurb n. 1
Completa il tutorial estendendo l'effetto di scorrimento a tutti i moduli Blurb nella riga e il gioco è fatto!
- A: Tutti i Blurbs
- In tutto: questa riga
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 tutorial, ti abbiamo mostrato un modo creativo per sincronizzare la copia espandibile nella tua sezione Divi. Questo è un ottimo modo per evidenziare il testo e consentire ai visitatori di leggere diverse parti della tua sezione passo dopo passo. 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.