Cum să creați o animație plic cu Efecte de derulare Divi

De fiecare dată când apare o nouă caracteristică Divi, încercăm să împărtășim câteva tutoriale interesante și utile care vă vor ajuta să vă gândiți în afara casetei și să fiți creativi cu Divi. Tutorialul de astăzi face exact asta. Vă vom arăta cum puteți crea o animație plic receptivă cu efectele de scroll ale lui Divi. Acesta este un mod excelent de a sublinia un blocaj de îndemn, de exemplu, dar îl puteți utiliza și în alte scopuri. 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

Descărcați aspectul animației plic GRATUIT

Pentru a pune mâna pe aspectul gratuit al animației plicului, va trebui mai întâi să îl 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!

Recreați structura elementului

Adăugați o secțiune nouă în mijlocul sau în partea de jos a paginii

Culoare de fundal

Începeți prin adăugarea unei noi secțiuni undeva în mijlocul sau în partea de jos a paginii. Deschideți setările secțiunii și schimbați culoarea de fundal în alb.

• Culoare fundal: #FFFFFF

Spațiere

Modificați apoi setările de spațiere.

• Căptușeală superioară: 5vw
• Căptușeală inferioară: 0 px

Revărsări

Și ascundeți debordarea 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:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândurilor și schimbați culoarea de fundal.

• Culoare fundal: #FFFFFF

Dimensionare

Treceți la fila de proiectare a rândului în continuare și modificați setările de dimensionare după cum urmează:

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

Spațiere

Apoi, adăugați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

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

Frontieră

Adăugați și o rază de margine.

• Toate colțurile: 20 px

Box Shadow

De asemenea, folosim o umbră de cutie subtilă.

• Box Shadow Vertical Position: 38 px
• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0.08)

Indicele Z

Completați setările rândului mărind indexul z din fila avansată.

• Indicele Z: 11

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

Adăugați conținut H2

Este timpul să adăugați module, începând cu un prim modul de text. Introduceți un conținut H2 la alegere.

Setări text H2

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

• Rubrica 2 Font: Poppins
• Titlul 2 Dimensiune text: 2vw (desktop), 4vw (tabletă), 5vw (telefon)

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

Adauga continut

Adăugați un alt modul de text chiar sub cel precedent și introduceți un conținut de descriere la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text.

• Font text: Deschideți Sans
• Dimensiune text: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Înălțimea liniei de text: 2.6em

Spațiere

Adăugați și câteva valori personalizate de sus și de jos pe diferite dimensiuni de ecran.

• Căptușeală superioară: 2vw (desktop), 4vw (tabletă), 5vw (telefon)
• Căptușeală inferioară: 2vw (desktop), 4vw (tabletă), 5vw (telefon)

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

Adăugați o copie

Următorul și ultimul modul pe care îl vom plasa în acest rând este un modul buton. Adăugați o copie la alegere.

Setări buton

Apoi, stilizați butonul în consecință:

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

• Raza chenarului butonului: 100 px
• Buton Font: Poppins

Spațiere

Și completați setările modulului 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ă: 2vw (desktop), 4vw (tabletă), 6vw (telefon)
• Căptușeală dreaptă: 2vw (desktop), 4vw (tabletă), 6vw (telefon)

Adăugați rândul # 2

Structura coloanei

Acum că avem rândul îndemnului la acțiune, este timpul să începem să creăm forma plicului. Pentru aceasta, adăugați un rând nou folosind următoarea structură de coloane:

Dimensionare

Permiteți rândului să ocupe lățimea întregii secțiuni modificând setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• 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

Afişa

Și pentru a ne asigura că coloanele apar una lângă cealaltă pe dimensiuni de ecran mai mici, vom adăuga o linie de cod CSS la elementul principal al rândului.

display: flex;

Adăugați modulul de imagine în coloana 1

Lăsați caseta de imagine goală

Adăugați un modul de imagine în coloana 1 și lăsați caseta de imagine goală.

Fundal de gradient

În schimb, folosim un fundal de gradient.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: # e8e8e8
• Tipul gradientului: liniar
• Direcția gradientului: 150 grade
• Poziția inițială: 50%
• Poziție finală: 50%

Spațiere

Modificați valorile de umplere ale modulului în consecință:

• Căptușeală superioară: 15vw
• Căptușeală inferioară: 15vw

Clonați modulul de imagine în coloana 1 și plasați duplicatul în coloana 2

După ce ați finalizat modulul de imagine din coloana 1, puteți clona întregul modul și puteți plasa duplicatul în coloana 2.

Schimbați fundalul de gradient

Schimbați fundalul de gradient după cum urmează:

• Culoare 1: rgba (255,255,255,0)
• Culoarea 2: #efefef
• Tipul gradientului: liniar
• Direcția gradientului: 210 grade
• Poziția inițială: 50%
• Poziție finală: 50%

Adăugați rândul # 3

Structura coloanei

Pentru a crea partea de jos a plicului, vom avea nevoie de un alt rând cu următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și modificați setările de dimensionare după cum urmează:

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

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

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

Afişa

Și permiteți ambelor coloane să apară una lângă cealaltă adăugând o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Indicele Z

Completați setările rândului mărind indexul z din fila avansată.

• Indicele Z: 12

Adăugați modulul de imagine în coloana 1

Lăsați caseta de imagine goală

Adăugați un modul de imagine în coloana 1 și, din nou, lăsați caseta de imagine goală.

Fundal de gradient

Folosiți în schimb un fundal de gradient.

• Culoare 1: rgba (255,255,255,0)
• Culoarea 2: #efefef
• Tipul gradientului: liniar
• Direcția gradientului: 213 grade
• Poziția inițială: 40%
• Poziție finală: 40%

Spațiere

Și creșteți dimensiunea modulului prin adăugarea unor căptușeli de sus și de jos.

• Căptușeală superioară: 20vw
• Căptușeală inferioară: 20vw

Clonați modulul de imagine în coloana 1 și plasați duplicatul în coloana 2

După ce ați finalizat modulul de imagine din coloana 1, îl puteți clona și plasa duplicatul în coloana 2.

Schimbați fundalul de gradient

Asigurați-vă că schimbați fundalul de gradient al duplicatului.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: # e8e8e8
• Tipul gradientului: liniar
• Direcția gradientului: 147 grade
• Poziția inițială: 40%
• Poziție finală: 40%

Adăugați mișcare verticală la rândul # 1

Acum, ultima parte pentru a face ca animația plicului să funcționeze este adăugarea unui efect de derulare a mișcării verticale sensibile la primul rând din secțiunea dvs. și ați terminat!

• Activați mișcarea verticală: da
• Offset de pornire:
  • Desktop: 0 (la 68%)
  • Tabletă: 0,5 (la 61%)
  • Telefon: 0,5 (la 43%)
• Decalaj mediu:
  • Desktop: 6,5 (la 81%)
  • Tabletă și telefon: 21,5 (la 82%)
• Offset final:
  • Desktop: 16 (la 95%)
  • Tabletă și telefon: 21,5 (la 82%)

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, ți-am arătat cum să devii creativ cu efectele de scroll ale lui Divi. Mai exact, v-am arătat cum să creați o animație plic. Puteți utiliza această animație pentru multe tipuri de lucruri, de exemplu pentru a evidenția blocul CTA. 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.