Cum să declanșați tranzițiile de imagine cu opțiunile lipicioase ale lui Divi

Versatilitatea opțiunilor lipicioase ale lui Divi merge mai departe decât simpla utilizare a setărilor pentru un antet lipicios. Îl puteți folosi pentru a declanșa modificări și în designul dvs. În acest tutorial, de exemplu, vom folosi opțiunile lipicioase ale lui Divi pentru a declanșa tranziția imaginii. Tranzițiile imaginii au loc de îndată ce vizitatorii se apropie de imaginea din scroll. Vom recrea două exemple diferite de la zero, dar odată ce veți obține abordarea, veți putea crea propriile tranziții de imagine unice folosind doar opțiunile încorporate ale Divi. 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 finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați aspectul GRATUIT

Pentru a pune mâna pe aspectul liber, 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. Pași generali

Adăugați secțiunea nr. 1

Spațiere

În prima parte a tutorialului, vom construi fundamentul designului nostru. Odată ce a fost pus la punct, ne putem concentra pe aplicarea setărilor corecte pentru a realiza cele două exemple din previzualizarea acestui post. Adăugați o nouă secțiune la pagina la care lucrați, mutați pe fila de proiectare a secțiunii și eliminați toate umpluturile implicite, sus și jos.

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

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Lățime maximă: 1480 px
• Alinierea rândurilor: centru

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

Indicele Z

Și setați indexul az în setările de poziție. Acest lucru ne va ajuta să ne asigurăm că rândul rămâne sub rândul următor pe care îl adăugăm mai târziu în tutorial.

• Indicele Z: 1

Coloane Debordează

Apoi, deschideți setările coloanei și setați revărsările la ascuns.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați modulul de imagine în coloană

Lăsați caseta de imagine goală

Singurul modul de care avem nevoie în acest rând este un modul de imagine. Lăsați caseta de imagine goală.

Imagine de fundal

Și folosiți în schimb o imagine de fundal la alegere.

• Dimensiunea imaginii de fundal: copertă
• Poziția imaginii de fundal: Centru

Spațiere

Pentru a permite afișarea imaginii, vom folosi câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară:
  • Desktop: 300 px
  • Tabletă și telefon: 150 px
• Căptușeală inferioară:
  • Desktop: 300 px
  • Tabletă și telefon: 150 px

Adăugați secțiunea 2

Spațiere

Adăugați o altă secțiune chiar sub cea anterioară. Deschideți setările secțiunii și eliminați umplutura superioară implicită din setările de spațiere.

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

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Indicele Z

Adăugați și un index az pentru acest rând.

• Indicele Z: 2

Adăugați modulul Call to Action în coloană

Adauga continut

În acest rând, singurul modul de care avem nevoie este un modul Call to Action. Adăugați conținutul la alegere.

Adăugați link buton

Împreună cu un link de buton.

Culoare de fundal

Apoi, adăugați o culoare de fundal alb.

• Culoare fundal: #ffffff

Setări text

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

• Alinierea textului: stânga
• Culoarea textului: Întunecat

Setări text titlu

Stilizați și textul titlului.

• Titlu Font: Playfair Display
• Titlu Font Style: Italic
• Dimensiune text titlu
  • Desktop: 45 px
  • Tabletă: 40 px
  • Telefon: 35 px
• Spațierea literelor de titlu: 1 px

Setări text corp

La fel ca și textul corpului.

• Font corp: Karla
• Înălțimea liniei corpului: 2em

Setări buton

Apoi, stilizați butonul.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 18 px
• Culoarea textului butonului: # 000000
• Culoare degrade 1: #ffffff
• Culoare gradient 2: # ffdc91
• Tipul gradientului: liniar
• Poziția inițială: 50%
• Poziție finală: 50%

• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Buton Font: Karla
• Stilul fontului butonului: majuscule
• Buton Afișare: Da

• Plasare pictogramă buton: stânga
• Afișați pictograma doar pe cursor pentru buton: Nu
• Căptușeală superioară: 10 px
• Căptușeală inferioară: 10 px
• Căptușeală stângă: 15%
• Garnitura dreapta: 15%

Dimensionare

Modificăm și setările de dimensionare pentru diferite dimensiuni de ecran.

• Lăţime:
  • Desktop: 65%
  • Tabletă: 80%
  • Telefon: 100%
• Alinierea modulului: centru

Spațiere

Apoi, vom adăuga câteva valori de marjă și umplere personalizate la setările de spațiere.

• Marja superioară:
  • Desktop: -150 px
  • Tabletă: -50px
  • Telefon: 0px
• Marja inferioară: 50 px
• Căptușeală superioară: 150 px
• Căptușeală inferioară: 150 px

Box Shadow

Și vom completa setările modulului adăugând o umbră de casetă subtilă.

• Cutie Shadwo Blur Strength: 30 px
• Culoare umbră: rgba (0,0,0,0.11)

2. Aplicați Efectul lipicios pe rând

Deschideți rândul în secțiunea # 1

Acum că am stabilit bazele designului nostru, este timpul să aplicăm efectul lipicios. Acest efect lipicios ne va ajuta să schimbăm stilurile pe măsură ce oamenii derulează elementul. Elementul la care vom adăuga efectul nostru lipicios este rândul din prima secțiune care conține imaginea.

Aplicați Efectul lipicios

Este important să vă asigurați că limita inferioară lipicioasă este setată la secțiune. Începutul și punctele finale ale rândului nostru sunt aceleași cu cele ale secțiunii, ceea ce asigură faptul că rândul nu devine de fapt lipicios, dar sunt aplicate stiluri lipicioase. Decalajul superior lipicios determină în ce moment începe tranziția. Dacă această valoare ar fi zero, de exemplu, ar însemna că partea de sus a browserului ar trebui să atingă partea de sus a rândului pentru a începe tranziția. Setând decalajul superior lipicios la „300px”, creăm tranziția mai devreme.

• Poziție lipicioasă: lipiți-vă de sus
• Decalaj superior lipicios: 300 px
• Limita lipicioasă inferioară: secțiunea
• Decalaj de la elementele lipicioase înconjurătoare: Da
• Stiluri implicite de tranziție și lipicioase: Da

Asigurați-vă că există un offset de egalitate deasupra primei secțiuni

Deoarece am setat decalajul superior lipicios la „300 px”, avem nevoie de spațiul din partea de sus a paginii noastre pentru a face acest lucru. Dacă utilizați acest design undeva la jumătatea paginii, nu trebuie să vă faceți griji cu privire la acest pas. Cu toate acestea, dacă utilizați această abordare în partea de sus a paginii, va trebui fie să modificați decalajul superior lipicios, fie să adăugați suficient spațiu în partea de sus. Vom adăuga niște margini superioare la prima noastră secțiune pentru a genera acel spațiu.

• Marja superioară: 400 px

3. Aplicați Ken Burn Effect la modulul de imagine

Acum, după ce rândul nostru a devenit lipicios, putem începe să aplicăm stiluri lipicioase pe rând și pe toate elementele copilului său. Deși posibilitățile sunt nelimitate, vă prezentăm două exemple diferite și cum să le realizați. Pentru a ușura jocul cu cele două exemple diferite, vom clona ambele secțiuni o dată și le vom așeza sub primele.

Exemplul nr. 1

Setări de rânduri lipicioase

Box Shadow

Pentru a recrea exemplul # 1, pe care l-ați putut vedea în previzualizarea acestei postări, deschideți setările de rând și aplicați următoarele setări de umbră a casetei:

• Box Shadow Vertical Position: 0px
• Puterea răspândirii umbrei cutiei: 0 px
• Culoare umbră: rgba (0,0,0,0)

• Poziție verticală lipicioasă: 100 px
• Culoare Sticky Shadow: # ffdc91

Tranziție

Includeți și o tranziție lină în fila avansată.

• Durata tranziției: 500 ms
• Curba vitezei de tranziție: ușurință

Setări pentru modulul de imagine lipicios

Scară de transformare

Apoi, deschideți modulul de imagine și aplicați un efect de scară de transformare într-o stare lipicioasă.

• Ambele: 100%

• Amândouă lipicioase: 130%

Tranziție

Asigurați o tranziție lină modificând setările de tranziție ale modulului în consecință:

• Durata tranziției: 1200 ms
• Curba vitezei de tranziție: ușurință

Exemplul nr. 2

Setări de rânduri lipicioase

Transformă Traducere

Trecem la al doilea exemplu! Deschideți setările de rând și aplicați următoarele setări de traducere de transformare:

• Dreapta: 20%

• Sticky Right: 0%

Tranziție

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

• Durata tranziției: 500 ms
• Curba vitezei de tranziție: ușurință

Setări pentru modulul de imagine lipicios

Filtre

Apoi, deschideți modulul de imagine și jucați-vă cu filtrele în stare implicită și lipicioasă.

• Saturație: 0%
• Luminozitate: 50%

• Saturație lipicioasă: 100%
• Luminozitate lipicioasă: 100%

Tranziție

Completați setările modulului și acest tutorial, modificând setările de tranziție după cum urmează:

• Durata tranziției: 500 ms
• Curba vitezei de tranziție: ușurință

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 opțiunile lipicioase ale lui Divi. Mai precis, v-am arătat cum să declanșați tranziții de imagine. De îndată ce oamenii derulează imaginea, stilurile imaginii se schimbă, ceea ce duce la o tranziție frumoasă. Am tratat două exemple diferite, dar posibilitățile sunt nelimitate. 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.