Cum se creează text și imagini care se schimbă pe scroll în Divi

Publicat: 2020-07-17

Efectele de defilare Divi sunt excelente pentru crearea de machete interesante. Am publicat destul de multe de la lansarea funcției. În acest tutorial, vă vom arăta cum să creați un aspect cu text și imagini care se schimbă pe scroll. Acest design poate fi utilizat pentru o pagină de servicii sau pentru orice tip de pagină de care aveți nevoie. Am păstrat-o curată și simplă pentru ca efectul scroll să capteze lumina reflectoarelor.

Puteți descărca aspectul ca fișier JSON sau îl puteți recrea pe propriul site web Divi.

Să începem.

previzualizare

Înainte de a începe, să aruncăm o privire asupra aspectului pe diferite dimensiuni de ecran.

Desktop

text și imagini care se schimbă pe scroll

Mobil

text și imagini care se schimbă pe scroll

Descărcați textul și imaginile care se schimbă în secțiunea de derulare GRATUIT

Pentru a pune mâna pe secțiunea gratuită cu text și imagini care se schimbă pe 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

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.

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!

Recreați secțiunea cu text și imagini care se schimbă în derulare

Adăugați o secțiune nouă

fundal

Pentru a începe să recreați designul, adăugați o nouă secțiune pe o pagină nouă sau existentă. Adăugați imaginile de fundal pe care le-am furnizat în descărcarea de mai sus.

  • Imagine de fundal: design cutie și puncte
    • Desktop: Imaginea 1
    • Tabletă: Imaginea 2
    • Telefon: Imaginea 3
  • Dimensiunea imaginii: Copertă
  • Repetarea imaginii de fundal: Repetați Y (vertical)

text și imagini care se schimbă pe scroll

Spațiere

Adăugați spațiu la secțiune.

  • Căptușeală superioară și inferioară: 30%

text și imagini care se schimbă pe scroll

Vizibilitate

Ascundeți și revărsările.

  • Depășire orizontală și verticală: ascunsă

text și imagini care se schimbă pe scroll

Adăugați un rând nou

Vizibilitate

Acum adăugați un prim rând și reglați setările de vizibilitate în fila avansată.

  • Orizontal: Ascuns
  • Vertical Overflow: implicit

Adăugați un modul de text

Text

Adăugați un prim modul de text pentru titlu. Introduceți un conținut H1 la alegere.

  • Corp: Conținut H1 - Echipa de producție

text și imagini care se schimbă pe scroll

Text de antet

Treceți la fila de proiectare și stilizați textul antetului.

  • Nivel de titlu: H1
  • Font: Fredoke One
  • Greutate: îndrăzneț
  • Culoarea neagra
  • mărimea
    • Desktop: 100 px
    • Tabletă: 75 px
    • Telefon: 33 px
  • Spațiul dintre litere
    • Desktop: 4 px
    • Tabletă: 3 px
    • Telefon: 2 px

text și imagini care se schimbă pe scroll

Dimensionare

Apoi, reglați lățimea.

  • Lățime: 100%

Adăugați un rând nou

Dimensionare

Acum adăugați un al doilea rând și ajustați setările de dimensionare în consecință:

  • Lățime: 80%
  • Lățime maximă: 1000 px

text și imagini care se schimbă pe scroll

Vizibilitate

Ascundeți și revărsările.

  • Deborduri orizontale și verticale: ascunse

Adăugați primul modul de text

Text

Adăugați un alt modul text. De data aceasta, introduceți un conținut H2 la alegere.

  • Corp: Conținut H2 - Fotografie set

Text de antet

Stilează titlul în continuare.

  • Nivel de titlu: H2
  • Greutate: îndrăzneț
  • Stil: TT
  • Culoare: Negru # 000000
  • mărimea
    • Desktop: 50 px
    • Tabletă: 40 px
    • Telefon: 28 px
  • Spațierea literelor: 3 px

text și imagini care se schimbă pe scroll

Spațiere

Setați și unele spații pentru modul.

  • Marja superioară și inferioară: 0 px

text și imagini care se schimbă pe scroll

Efecte derulare

Completați setările modulului adăugând următoarele efecte de derulare:

  • Fading In and Out: Activați
  • Partea de jos a ferestrei
    • Poziție: 42%
    • Opacitate de pornire: 0%
  • Opacitate medie
    • Poziția de jos: 43%
    • Poziția de top: 53%
    • Opacitate medie: 100%
  • Top Viewport
    • Poziție: 54%
    • Opacitate finală: 0%

Duplicați modulul de text de două ori

Clonați modulul text de două ori.

text și imagini care se schimbă pe scroll

Ajustați al 2-lea modul de text

Text

Schimbați conținutul din noul modul de text.

  • Corp: Conținut H2 - Direcția artistică

text și imagini care se schimbă pe scroll

Poziţie

Adăugați și poziționare absolută la modul.

  • Poziție: Absolută
  • Locație: stânga sus

text și imagini care se schimbă pe scroll

Efecte derulare

Apoi, actualizați setările efectului de derulare.

  • Fading In and Out: Activați
  • Partea de jos a ferestrei
    • Poziție: 56%
    • Opacitate de pornire: 0%
  • Opacitate medie
    • Poziția de jos: 57%
    • Poziția de top: 67%
    • Opacitate medie: 100%
  • Top Viewport
      • Poziție: 68%
      • Opacitate finală: 0%

Ajustați al treilea modul de text

Text

Acum reglați al doilea duplicat al modulului text. Schimbați mai întâi conținutul.

  • Corp: Conținut H2 - Recuzită și garderobă

Poziţie

Adăugați o poziție absolută în continuare.

  • Poziție: Absolută
  • Locație: stânga sus

Efecte derulare

Apoi, modificați efectele de derulare.

  • Fading In and Out: Activați
  • Partea de jos a ferestrei
    • Poziție: 70%
    • Opacitate de pornire: 0%
  • Opacitate medie
    • Poziția de jos: 71%
    • Poziția de top: 80%
    • Opacitate medie: 100%
  • Top Viewport
    • Poziție: 81%
    • Opacitate finală: 0%

text și imagini care se schimbă pe scroll

Adăugați un modul de imagine

Imagine

Acum este timpul să adăugați un modul de imagine. Utilizați o imagine pătrată cu o dimensiune a imaginii de 350 x 350 px.

  • Imagine: Imagine pătrată 350 x 350 px

text și imagini care se schimbă pe scroll

Aliniere

Setați alinierea la stânga.

  • Aliniere imagine: Stânga

text și imagini care se schimbă pe scroll

Spațiere

Reglați și distanța.

  • Arată spațiul sub imagine: Nu
  • Marja superioară: -60px

Filtre

Apoi, adăugați un filtru pentru a face imaginea desaturată.

  • Saturație: 0%

text și imagini care se schimbă pe scroll

Vizibilitate

Acum, treceți la fila avansată și setați revărsările la ascuns.

  • Depășire orizontală și verticală: ascunsă

text și imagini care se schimbă pe scroll

Efecte derulare

Nu în ultimul rând, adăugați un efect de defilare în interior și în afara.

  • Fading In and Out: Activați
  • Partea de jos a ferestrei
    • Poziție: 70%
    • Opacitate de pornire: 0%
  • Opacitate medie
    • Poziție: 71%
    • Mijloc: 100%
  • Top Viewport
    • Poziție: 100%
    • Opacitate finală: 0%

Adăugați un modul Apel la acțiune

Text

Treceți la modulul următor, care este un modul de apel la acțiune. Includeți conținut la alegere.

  • Titlu: Echipa de artă a lui Jason
  • Buton: Rezervați echipa de artă a lui Jason
  • Corp: conținut descriptiv

Legătură

Adăugați un link în continuare.

  • Link: Link-ul dvs.

fundal

Eliminați și culoarea de fundal implicită.

  • Utilizați culoarea de fundal: Nu

Text

Apoi, setați alinierea la dreapta.

  • Alinierea textului: dreapta

Text de antet

Stilizați și textul antetului.

  • Nivel de titlu: H3
  • Font: Fredoke One
  • Alinierea textului titlului: stânga
  • Culoare: Negru #oooooo
  • mărimea
    • Desktop: 48 px
    • Tabletă: 42 px
    • Telefon: 33 px
  • Spațiul dintre litere
    • Desktop și tabletă: 1 px
    • Telefon: 0px
  • Inaltimea liniei
    • Desktop și tabletă: 1.6em
    • Telefon: 1.1em

Corpul textului

Apoi, textul corpului.

  • Font: Verdana
  • Culoare: Negru # 000000
  • Dimensiune: 14 px
  • Spațierea literelor: 0,5 px

Buton

Reglați și stilurile butoanelor.

  • Stiluri personalizate
  • Dimensiune text: 17 px
  • Culoarea textului: alb #ffffff
  • Fundal: negru # 000000
  • Spațierea literelor: 1 px
  • Font: Verdana
  • Marja superioară: 20 px
  • Căptușeală superioară și inferioară: 10 px
  • Garnitura stânga și dreapta: 25 px

Poziţie

Treceți la fila avansată și modificați setările de poziție după cum urmează:

  • Poziție: relativă
  • Originea offsetului: stânga sus
  • Decalaj orizontal: 25 px

text și imagini care se schimbă pe scroll

Vizibilitate

Apoi, ascundeți revărsările.

  • Depășire orizontală și verticală: ascunsă

text și imagini care se schimbă pe scroll

Efecte derulare

Nu în ultimul rând, activați un efect de derulare în interior și în exterior.

  • Fading In and Out: Activați
  • Partea de jos a ferestrei
    • Poziție: 54%
    • Opacitate de pornire: 0%
  • Opacitate medie
    • Poziția de jos: 55%
    • Poziția de top: 80%
    • Mijloc: 100%
  • Top Viewport
    • Poziție: 100%
    • Opacitate finală: 0%

Duplicați al doilea rând

Clonați rândul cu toate modulele sale.

Ajustați primul modul de text

Text

Acum modificați conținutul modulelor de text clonate. Începeți de sus.

  • Corp: Conținut H2 / Preproducție

Text

Schimbați alinierea la dreapta.

  • Alinierea textului: dreapta

Extindeți alinierea textului

Aplicați alinierea tuturor modulelor de text clonate din același rând.

  • Extindeți alinierea textului: la toate modulele de text din acest rând

text și imagini care se schimbă pe scroll

text și imagini care se schimbă pe scroll

Ajustați al 2-lea modul de text

Text

Acum actualizați conținutul din al doilea modul de text clonat.

  • Corp: H2 Content / On-Set Production

Poziţie

Schimbați și locația în setările de poziție.

  • Locație: dreapta sus

Ajustați al treilea modul de text

Text

Acum schimbați conținutul celui de-al treilea modul de text clonat.

  • Corp: Conținut H2 / Coordonare între echipe

Poziţie

Schimbați și locația în setările de poziție.

  • Locație: dreapta sus

Reglați modulul de imagine nou

Imagine

Apoi, schimbați fotografia din modulul imagine.

  • Imagine: Imagine nouă 350 x 350px

Aliniere

Schimbați și alinierea imaginii.

  • Alinierea imaginii: dreapta

Ajustați modulul de apel nou la acțiune

Text

Deschideți modulul de îndemn și schimbați tot conținutul.

  • Titlu: Echipa de producție a lui Alice
  • Buton: Rezervați echipa de producție a lui Alice
  • Corp: conținut descriptiv nou.

Legătură

Schimbați și linkul.

  • Link: link nou

Text

Modificați și alinierea.

  • Alinierea textului: stânga

Text de antet

Modificați și alinierea textului antet.

  • Alinierea textului titlului: stânga

Corpul textului

La fel ca și textul corpului.

  • Alinierea textului corpului: stânga

Dimensionare

Nu uitați să modificați și alinierea întregului modul în setările de dimensionare.

  • Alinierea modulului: stânga

Poziţie

În cele din urmă, resetați setările de poziție la valorile implicite și ați terminat!

  • Poziție: Resetați la implicit

previzualizare

Să aruncăm o ultimă privire asupra aspectului paginii pe diferite dimensiuni de ecran.

Desktop

Mobil

Aceasta este o înfășurare pentru aspectul cu text și imagini care se schimbă pe scroll!

Am terminat de recreat textul și imaginile care se schimbă pe scroll. Am reușit să obținem acest efect datorită efectelor de defilare încorporate ale lui Divi. Utilizați acest aspect pentru o pagină de servicii, o pagină despre, o întâlnire cu echipa sau orice doriți! Utilizați fundalurile furnizate sau lăsați fundalul alb.

Spuneți-ne ce părere aveți în comentarii!