3 efecte de mișcare de derulare fără efort pe care le puteți adăuga la titlurile dvs. cu Divi

Noile efecte de defilare ale lui Divi aduc o mulțime de noi posibilități de design pentru paginile pe care le construiți. Puteți adăuga un efect de defilare personalizat la fiecare container și puteți sincroniza efectele în consecință. Această libertate de design vă ajută cu ușurință să evidențiați anumite conținuturi într-un mod elegant. În acest tutorial, vă vom arăta cum să adăugați efecte de mișcare de derulare la titlurile dvs. În acest fel, puteți pune un accent suplimentar pe titlurile dvs. și vă puteți menține vizitatorii implicați. Veți putea descărca gratuit fișierele 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.

Exemplul nr. 1

Desktop

Mobil

Exemplul nr. 2

Desktop

Mobil

Exemplul nr. 3

Desktop

Mobil

Descărcați GRATUIT aspectele secțiunii Scroll Motion Effects

Pentru a pune mâinile pe aspectele secțiunii gratuite, va trebui mai întâi să le 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. Construiește-ți designul secțiunii erou pe o pagină nouă sau existentă

Adăugați o secțiune nouă

Culoare de fundal

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii și schimbați culoarea de fundal în alb.

• Culoare fundal: #FFFFFF

Spațiere

Treceți la fila de proiectare și modificați și valorile de spațiere.

• Căptușeală superioară: 15vw (desktop), 20vw (tabletă), 25vw (telefon)
• Căptușeală inferioară: 0vw

Revărsări

Și pentru a ne asigura că efectele de derulare nu fac să apară nicio bară de derulare orizontală, vom ascunde, de asemenea, deversările secțiunii.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați lățimea și lățimea maximă în setările de dimensionare.

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

Spațiere

Eliminați și toate umpluturile implicite, de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

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.

Setări text H1

Modificați setările de text H1 ale modulului în consecință:

• Font de titlu: Playfair Display
• Greutatea fontului de titlu: Bold
• Alinierea textului de antet: centru
• Culoare text antet: # 000000
• Dimensiune text antet: 6vw

Adăugați rândul # 2

Structura coloanei

Apoi, adăugați un alt rând folosind următoarea structură de coloane:

Fundal de gradient

Fără a adăuga încă module, deschideți setările rândului și utilizați un fundal de gradient.

• Culoare 1: # 444444
• Culoare 2: # 000000
• Tipul gradientului: liniar
• Direcția gradientului: 237 grade

Dimensionare

Modificați și setările de dimensionare ale rândului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Apoi, adăugați câteva căptușeli personalizate de sus și de jos.

• Căptușeală de sus: 0vw
• Căptușeală inferioară: 10vw (desktop), 15vw (tabletă), 20vw (telefon)

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

Adauga continut

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

Setări text

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

• Font text: Playfair Display
• Culoarea textului: #dddddd
• Dimensiune text: 6vw
• Înălțimea liniei de text: 1em
• Text Forța de estompare a umbrei: 0.29em
• Culoare umbră text: #ffffff
• Aliniere text: centru

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

Adauga continut

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

Setări text

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

• Font text: Deschideți Sans
• Culoarea textului: # e8e8e8
• Dimensiune text: 0.9vw (desktop), 2vw (tabletă), 2.5vw (telefon)
• Înălțimea liniei de text: 2em
• Aliniere text: centru

Dimensionare

Modificați și setările de dimensionare.

• Lățime: 40% (desktop), 90% (tabletă și telefon)
• Alinierea modulului: centru

Spațiere

Și includeți câteva margini de sus și de jos pe diferite dimensiuni de ecran.

• Marja superioară: 10vw (desktop), 15vw (tabletă), 20vw (telefon)
• Marja inferioară: 3vw (desktop), 8vw (tabletă), 13vw (telefon)

Adăugați un modul buton în coloană

Adăugați o copie

Următorul și ultimul modul de care avem nevoie este un modul buton. Adăugați o copie la alegere.

Aliniere

Continuați schimbând alinierea butoanelor din fila de proiectare.

• Aliniere buton: centru

Setări buton

Apoi, stilizați butonul după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 0,8vw (desktop), 1,5vw (tabletă), 2,5vw (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea chenarului butonului: #ffffff
• Raza chenarului butonului: 1 px
• Buton Font: Deschideți Sans
• Buton Font Greutate: Bold
• Stilul fontului butonului: majuscule

Spațiere

Și includeți 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ă: 2,5vw (desktop), 5vw (tabletă), 8vw (telefon)
• Căptușeală dreaptă: 2,5vw (desktop), 5vw (tabletă), 8vw (telefon)

2. Aplicați Efecte derulare

Exemplul nr. 1

Modul text # 1

Mișcare orizontală

Acum, după ce am conceput aspectul general al secțiunii erou, este timpul să aplicăm diferitele efecte de mișcare de derulare copiei noastre. Pentru a recrea primul exemplu, deschideți primul modul de text și utilizați următoarea mișcare orizontală:

• Activați mișcarea orizontală: Da
• Offset de pornire: 0
• Decalaj mediu: 0
  • 0% - 80% (desktop)
  • 0% - 95% (tabletă și telefon)
• Offset final: -10

Fade In and Out

Vom adăuga și un efect de estompare și ieșire.

• Activați Fading In and Out: Da
• Opacitate de pornire: 100%
• Opacitate medie: 100%
  • 0% - 70% (desktop)
  • 0% - 95% (tabletă și telefon)
• Opacitate finală: 0%

Modul text # 2

Mișcare orizontală

Apoi, deschideți al doilea modul de text din secțiunea dvs. și aplicați următoarea mișcare orizontală:

• Activați mișcarea orizontală: Da
• Offset de pornire: 10
• Decalaj mediu: 0
  • 10% - 70% (desktop)
  • 10% - 95% (tabletă și telefon)
• Decalare finală: 10

Fade In and Out

Împreună cu un efect de estompare și ieșire potrivite:

• Activați Fading In and Out: Da
• Opacitate de pornire: 0%
• Opacitate medie: 100%
  • 35% - 60% (desktop)
  • 35% - 95% (tabletă și telefon)
• Opacitate finală: 0%

Exemplul nr. 2

Modul text # 1

Mișcare verticală

Doriți să recreați în schimb cel de-al doilea efect de mișcare de derulare? Deschideți primul modul de text din secțiunea dvs. și adăugați următoarea mișcare verticală:

• Activați mișcarea verticală: da
• Offset de pornire: 0
• Decalaj mediu: 0
  • 90% (desktop)
  • 95% (tabletă și telefon)
• Decalare finală: -8

Scalare î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 inițială: 20%
• Scară medie: 100%
  • 20% - 80% (desktop)
  • 20% - 95% (tabletă și telefon)
• Scara de încheiere: 20%

Modul text # 2

Mișcare verticală

Apoi, deschideți al doilea modul de text și utilizați următoarele setări de mișcare verticală:

• Activați mișcarea verticală: da
• Offset de pornire: 0
• Decalaj mediu: 0
  • 15% - 70% (desktop)
  • 15% - 90% (tabletă și telefon)
• Decalare finală: -8

Scalare în sus și în jos

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

• Activați scalarea în sus și în jos: da
• Scara inițială: 0%
• Scară medie: 100%
  • 30% - 70% (desktop)
  • 30% - 90% (tabletă și telefon)
• Scara de încheiere: 100%

Estompa

Și finalizați efectul de derulare adăugând un efect de estompare celui de-al doilea modul de text al secțiunii dvs.

• Activați Blur: Da
• Blur de pornire: 10 px
• Mid Blur: 0 px
  • 40% - 73% (desktop)
  • 40% - 95% (tabletă și telefon)
• Blur final: 100 px

Exemplul nr. 3

Modul text # 1

Mișcare orizontală

Nu în ultimul rând, vă vom arăta cum să recreați al treilea efect de mișcare de derulare. Deschideți primul modul de text al secțiunii și adăugați un efect de mișcare orizontală.

• Activați mișcarea orizontală: Da
• Offset de pornire: 0
• Decalaj mediu: 0
  • 0% - 90%
• Decalare finală: 10

Fade In and Out

Folosiți și un efect de fade in and out pentru acest modul.

• Activați Fading In and Out: Da
• Opacitate de pornire: 100%
• Opacitate medie: 100%
  • 0% - 90% (desktop)
  • 0% - 95% (tabletă și telefon)
• Opacitate finală: 0%

Rotire

Și vom aplica și un efect rotativ.

• Activați rotirea: Da
• Rotația de pornire: 0 °
• Rotație medie: 0 °
  • 0% - 90% (desktop)
  • 0% - 95% (tabletă și telefon)
• Rotație finală: 90 °

Modul text # 2

Mișcare orizontală

Apoi, deschideți al doilea modul de text din secțiunea dvs. și aplicați următoarele setări de mișcare orizontală:

• Activați mișcarea orizontală: Da
• Offset de pornire: 0
• Decalaj mediu: 0
  • 0% - 90%
• Offset final: -10

Fade In and Out

Continuați folosind un efect de mișcare de derulare în fade in and out.

• Activați Fading In and Out: Da
• Opacitate de pornire: 100%
• Opacitate medie: 100%
  • 0% - 80% (desktop)
  • 0% - 95% (tabletă și telefon)
• Opacitate finală: 0%

Rotire

Și completați setările modulului adăugând și un efect de derulare rotativă.

• Activați rotirea: Da
• Rotația de pornire: 0 °
• Rotație medie: 0 °
  • 0% - 80% (desktop)
  • 0% - 90% (tabletă și telefon)
• Rotație finală: -90 °

previzualizare

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

Exemplul nr. 1

Desktop

Mobil

Exemplul nr. 2

Desktop

Mobil

Exemplul nr. 3

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să utilizați noile efecte de derulare Divi pentru a adăuga efecte de mișcare de derulare la titlul dvs. Am tratat trei exemple diferite, dar posibilitățile sunt cu adevărat nelimitate. Ați putut descărca gratuit fișierele 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.