Pagina care vorbește despre tine (despre) este una dintre cele mai importante pagini ale tale site-ul web. Acest lucru le permite oamenilor să vă cunoască mai bine și să decidă dacă sunt confortabili să facă pasul următor. Dacă sunteți în căutarea unei modalități ușoare de a include narațiune pe această pagină, vă va plăcea acest tutorial. Vom folosi efectele de defilare ale Divi pentru a crea o tranziție lină de narațiune pe defilare. De îndată ce o parte din poveste se estompează, apare o altă parte. Acest lucru dă vizitatori sentimentul de a citi o poveste interesantă. 

Rezultat final posibil

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

1. Creați prima secțiune pe ecran complet a paginii

Adăugați o secțiune nouă

Culoare de fundal

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

• Culoare fundal: # 000000

dimensionarea

Apoi rotiți secțiunea pe ecranul complet adăugând o înălțime minimă în parametrii de dimensionare.

• Inaltime minima: 100vh

2. Adăugați o linie animată

Adăugați o linie nouă

Structura coloanei

Apoi adăugați un nou rând la secțiunea dvs. folosind următoarea structură de coloană:

dimensionarea

Deschideți parametrii liniei și permiteți liniei să ocupe întreaga lățime a containerului de secțiune modificând parametrii de dimensionare.

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

spaţierea

Apoi adăugați umplutura la stânga și la dreapta pe diferite dimensiuni de ecran.

• Căptușire stânga: 20vw (birou), 10vw (tabletă și telefon)
• Căptușire dreapta: 20vw (birou) 10vw (tabletă și telefon)

Animaţie

Pentru a crește efectul de povestire, vom folosi, de asemenea, o animație de estompare pentru linie.

• Stil de animație: Fade
• Durata animației: 3000ms
• Curba vitezei animației: ușurință în intrare
• Repetați animația: o dată

Poziţie

În cele din urmă, ne vom asigura că linia este poziționată în centrul containerului de secțiune modificând opțiunile de poziție.

• Poziție: absolută
• Locație: Centru

3. Introduceți un titlu cu efecte de derulare

Adăugați modulul text # 1 la coloană

Adăugați conținut H1

Singurul modul de care avem nevoie în această linie este un modul text cu cuprins H1.

Titlul 1 Setări text

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

• Titlul fontului: Nunito
• Greutatea fontului titlu: Semi îndrăzneț
• Culoarea textului antetului: #ffffff
• Dimensiune text antet: 7vw (desktop), 9vw (tabletă), 11vw (telefon)

Mișcare verticală

Vom adăuga, de asemenea, o animație verticală subtilă.

• Activați mișcarea verticală: Da
• Start offset: 0 (la 50%)
• Offset mediu: 10 (la 100%)
• Decalaj final: 10

Efectul de derulare de intrare și de ieșire

Cu un efect de estompare de intrare și de ieșire.

• Activați decolorarea și intrarea: Da
• Opacitate inițială: 100%
• Opacitate medie: 100% (la 55%)
• Opacitatea finală: 0% (până la 62%)

Scalarea efectului de derulare în sus și în jos

Nu în ultimul rând, vom folosi, de asemenea, un efect de derulare a scării în sus și în jos.

• Activați scalarea în sus și în jos: Da
• Scara de pornire: 100% (până la 40%)
• Scara medie: 95% (până la 74%)
• Scara finală: 90%

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

Editați titlul și conținutul

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

Modificați parametrii textului modulului H2 Text

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

• Titlul 2 Poliție: Nunito
• Titlul fontului 2: semi-îndrăzneț
• Articolul 2 Culoarea textului: #ffffff
• Articolul 2 Dimensiunea textului: 5vw (desktop), 7vw (tabletă), 8vw (telefon)
• Înălțimea liniei 2: 1em (birou), 1.2em (tabletă și telefon)

Adăugați modulul text # 2 la coloană

Adăugați conținut

Apoi, adăugați un alt modul de text la coloana cu a cuprins descrierea la alegere.

Setări text

Modificați setările de text pentru modulul text după cum urmează:

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

spaţierea

De asemenea, utilizați o marjă de sus.

• Marja superioară: 8vw

Efectul de derulare de intrare și de ieșire

Apoi, comutați la efecte de derulare în fila avansată și utilizați următoarele setări de fade in și fade out:

• Activați decolorarea și intrarea: Da
• Opacitate inițială: 100%
• Opacitate medie: 0% (la 31%)
• Opacitate finală: 0% (până la 35%)

Scalarea efectului de derulare î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 pornire: 100% (până la 40%)
• Scara medie: 95% (până la 74%)
• Scara finală: 90%

Acum puteți clona această ultimă secțiune de cât mai multe ori posibil. Cu toate acestea, va trebui să ajustați cuprins din fiecare secțiune pentru nevoile dvs.

studiu

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

Ultimele gânduri

În acest articol, ți-am arătat cum să spui o poveste pe pagina ta despre folosind efectele de defilare încorporate ale Divi. Efectul pe care l-am creat permite copierii consecutive să se estompeze în interior și în afara, dând vizitatori ca și cum ai citi o poveste. De asemenea, ați putut descărca fișierul JSON gratuit! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.