Cum să-ți spui povestea pe Scroll cu Divi

Pagina dvs. despre informații este una dintre cele mai importante pagini de pe site-ul dvs. web. Permite oamenilor să vă cunoască mai bine și să decidă dacă se simt confortabil să facă următorul pas. Dacă sunteți în căutarea unui mod lin de a include povestiri în pagina dvs. despre, vă va plăcea acest tutorial. Vom folosi efectele de scroll ale lui Divi pentru a crea o tranziție lină a povestirii pe scroll. De îndată ce o parte a poveștii dispare, o altă parte dispare. Acest lucru le oferă vizitatorilor sentimentul că citesc o poveste interesantă. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Abonați-vă la canalul nostru Youtube

Descarcă GRATUIT povestea despre pagina Despre aspectul Scroll

Pentru a pune mâna pe povestea despre pagini despre aspectul scroll, va trebui mai întâi să o descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

1. Creați prima secțiune a ecranului complet al paginii

Adăugați o secțiune nouă

Culoare de fundal

Începeți prin adăugarea unei prime secțiuni la pagina despre informații. Deschideți setările secțiunii și schimbați culoarea de fundal în negru.

• Culoare fundal: # 000000

Dimensionare

Întoarceți secțiunea pe ecran complet adăugând o înălțime minimă în setările de dimensionare.

• Înălțime minimă: 100vh

2. Adăugați rândul animat

Adăugați un rând nou

Structura coloanei

Apoi, adăugați un rând nou în secțiunea dvs. utilizând următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și permiteți rândului să ocupe lățimea întregului container al secțiunii modificând setările de dimensionare.

• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Apoi, adăugați niște umpluturi la stânga și la dreapta pe diferite dimensiuni ale ecranului.

• Căptușeală stângă: 20vw (desktop), 10vw (tabletă și telefon)
• Căptușeală dreaptă: 20vw (desktop) 10vw (tabletă și telefon)

Animaţie

Pentru a crește efectul de povestire, vom folosi și o animație de estompare pentru rând.

• Stil de animație: Fade
• Durata animației: 3000 ms
• Curba de viteză a animației: ușurință-intrare-ieșire
• Repetați animația: o dată

Poziţie

Și nu în ultimul rând, ne vom asigura că rândul este poziționat central în interiorul containerului de secțiune, modificând opțiunile de poziție.

• Poziție: Absolută
• Locație: centru

3. Introduceți titlul cu efecte de derulare

Adăugați modulul de text nr. 1 în coloană

Adăugați conținut H1

Singurul modul de care avem nevoie în acest rând este un modul de text cu un conținut H1.

Rubrica 1 Setări text

Treceți la fila de proiectare a modulului și modificați setările de text H1 după cum urmează:

• Titlu Font: Nunito
• Greutatea fontului de titlu: Semi îndrăzneț
• Culoare text antet: #ffffff
• Dimensiune text antet: 7vw (desktop), 9vw (tabletă), 11vw (telefon)

Mișcare verticală

Vom adăuga și o animație verticală subtilă.

• Activați mișcarea verticală: da
• Offset de pornire: 0 (la 50%)
• Decalaj mediu: 10 (la 100%)
• Decalare finală: 10

Efect de defilare în interior și în exterior

Împreună cu un efect de estompare în și în afara.

• Activați Fading In and Out: Da
• Opacitate de pornire: 100%
• Opacitate medie: 100% (la 55%)
• Opacitate finală: 0% (la 62%)

Efect de derulare în sus și în jos

Nu în ultimul rând, vom folosi și un efect de defilare în sus și în jos.

• Activați scalarea în sus și în jos: da
• Scara de start: 100% (la 40%)
• Scară medie: 95% (la 74%)
• Scara de încheiere: 90%

4. Clonați întreaga secțiune o dată și includeți textul de descriere cu efecte de derulare

Modificați antetul și copiați conținutul

După ce ați finalizat prima secțiune, o puteți clona în întregime. Deschideți modulul de text din containerul secțiunii duplicat și utilizați o copie H2.

Modificați textul modulului H2 Setări text

Modificați setările de text H2 în consecință:

• Rubrica 2 Font: Nunito
• Titlul 2 Greutate font: Semi Bold
• Rubrica 2 Culoarea textului: #ffffff
• Titlul 2 Dimensiune text: 5vw (desktop), 7vw (tabletă), 8vw (telefon)
• Înălțimea liniei 2 a titlului: 1em (desktop), 1,2em (tabletă și telefon)

Adăugați modulul de text nr. 2 în coloană

Adauga continut

Apoi, adăugați un alt modul de text în coloană cu un conținut de descriere la alegere.

Setări text

Modificați setările de text ale modulului de text după cum urmează:

• Font text: Deschideți Sans
• Culoarea textului: #ffffff
• Dimensiune text: 1vw (desktop), 2,5vw (tabletă), 3vw (telefon)
• Înălțimea liniei de text: 3.1em (desktop), 2.5em (tabletă și telefon)

Spațiere

Folosiți și o marjă superioară.

• Marja superioară: 8vw

Efect de defilare în interior și în exterior

Apoi, treceți la efectele de defilare din fila avansată și utilizați următoarele setări de decolorare și intrare:

• Activați Fading In and Out: Da
• Opacitate de pornire: 100%
• Opacitate medie: 0% (la 31%)
• Opacitate finală: 0% (la 35%)

Efect de defilare în sus și în jos

Adăugați și un efect de redimensionare în sus și în jos.

• Activați scalarea în sus și în jos: da
• Scara de start: 100% (la 40%)
• Scară medie: 95% (la 74%)
• Scara de încheiere: 90%

5. Clonați secțiunea a doua până la câte ori doriți

Schimbați conținutul pe măsură ce mergeți

După ce ați completat a doua secțiune a paginii, o puteți clona de câte ori doriți, în funcție de povestea despre pagina dvs. Asigurați-vă că modificați conținutul din fiecare secțiune.

6. Completați pagina cu secțiunea CTA

Schimbați descrierea Spațiului modulului text

Completați pagina despre informații cu o secțiune CTA la final. Deschideți descrierea Modul text și modificați marginea de sus și de jos.

• Marja superioară: 4vw
• Marja inferioară: 4vw

Adăugați un modul buton

Adăugați o copie

Apoi, adăugați și un modul buton cu o copie la alegere.

Setări buton

Treceți la fila de proiectare a modulului și modificați setările butonului după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 2,5vw (tabletă), 3,5vw (telefon)
• Culoarea textului butonului: # 000000
• Culoarea fundalului butonului: #FFFFFF
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 100 px
• Buton Font: Nunito
• Buton Font Greutate: Bold

Spațiere

Completați setările modulului buton adăugând câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală stângă: 3vw (desktop), 6vw (tabletă), 8vw (telefon)
• Căptușeală dreaptă: 3vw (desktop), 6vw (tabletă), 8vw (telefon)

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să spuneți o poveste pe pagina dvs. despre folosind efectele de defilare încorporate ale Divi. Efectul pe care l-am creat permite copierii consecutive să se estompeze și să ofere vizitatorilor impresia că citesc o poveste. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.