Cum să schimbați stilurile pe derulare fără mișcare utilizând opțiunile lipicioase ale lui Divi

Dacă doriți un stil de design curat atunci când creați un nou site web, cel mai probabil veți dori să găsiți o modalitate de a adăuga în continuare o dimensiune suplimentară site-ului dvs. web. Acest tutorial va fi despre asta. Vă vom arăta cum să utilizați opțiunile lipicioase Divi pentru a schimba stilurile lipicioase fără mișcare. Mai exact, aceasta înseamnă că de îndată ce vizitatorii parcurg o anumită parte a paginii dvs., stilurile acelei părți se vor schimba, dar elementele vor rămâne la locul lor. Acest tip de efect este complet axat pe comportamentul utilizatorului. Schimbarea stilurilor lipicioase se întâmplă numai atunci când oamenii trec pe lângă ea, ceea ce oferă un rezultat frumos. În acest tutorial, vă vom arăta pas cu pas cum să ajungeți acolo. Odată ce veți obține abordarea, o veți putea folosi în orice tip de design pe care îl construiți! 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

Descărcați aspectul GRATUIT

Pentru a pune mâna pe aspectul liber, 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!

1. Creați structura elementului

Adăugați o secțiune nouă

Vizibilitate

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii și ascundeți revărsările în fila avansată. Acest lucru vă va asigura că nu apare nicio bară de derulare orizontală.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați un rând nou

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 module, deschideți setările rândului și modificați setările de dimensionare în consecință:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 2580 px

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

Setări coloana 1

Spațiere

Apoi, deschideți setările coloanei 1 și aplicați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară:
  • Desktop: 200 px
  • Tabletă: 100 px
  • Telefon: 80 px
• Căptușeală inferioară:
  • Desktop: 200 px
  • Tabletă: 100 px
  • Telefon: 80 px

Indicele Z

Măriți și indexul z al acestei coloane. Mai târziu în tutorial, vom crea o suprapunere orizontală între coloana 1 și 2. Creștem indexul z pentru a ne asigura că modulele coloanei 1 rămân deasupra modulelor coloanei 2.

• Indicele Z: 11

Setări coloana 2

Culoare de fundal

Apoi, vom adăuga o culoare de fundal în coloana 2.

• Culoare fundal: # f9f9f9

Spațiere

Vom folosi și câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară:
  • Desktop: 200 px
  • Tabletă: 150 px
  • Telefon: 100 px
• Căptușeală inferioară:
  • Desktop: 200 px
  • Tabletă: 150 px
  • Telefon: 100 px

Coloana 3 Setări

Spațiere

Nu în ultimul rând, vom adăuga câteva valori de umplere personalizate și în coloana 3.

• Căptușeală superioară:
  • Desktop: 200 px
  • Tabletă: 100 px
  • Telefon: 50 px
• Căptușeală inferioară:
  • Desktop: 200 px
  • Tabletă: 100 px
  • Telefon: 50 px
• Căptușeală stângă: 8%
• Căptușeală dreaptă: 8%

Adăugați un modul de text în coloana 1

Adăugați o copie

Este timpul să adăugați module, începând cu un modul de text în coloana 1. Adăugați un număr în caseta de conținut.

Culoare de fundal

Schimbați culoarea de fundal în continuare.

• Culoare fundal: #efefef

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Montserrat
• Culoarea textului: #ffffff
• Dimensiune text: 100 px
• Înălțimea liniei de text: 1em
• Aliniere text: centru

Dimensionare

Modificați lățimea următoare.

• Lățime: 150 px

Spațiere

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

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

Poziţie

Repoziționați și modulul.

• Poziție: Absolută
• Locație: în partea dreaptă jos
• Decalaj orizontal: -5%

Adăugați un modul de text în coloana 2

Adăugați H3 și H4 Copy

La a doua coloană. Acolo, vom adăuga un modul de text cu câteva copii H3 și H4.

Setări text

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

• Aliniere text: centru
• Culoarea textului: Întunecat

Setări text H3

Apoi, modificați setările de text H3.

• Rubrica 3 Font: Playfair Display
• Titlul 3 Aliniere text: centru
• Rubrica 3 Dimensiune text:
  • Desktop: 90 px
  • Tabletă: 70 px
  • Telefon: 60 px

Setări text H4

Stilizați și textul H4.

• Rubrica 4 Font: Montserrat
• Rubrica 4 Greutatea fontului: ușoară

Dimensionare

Apoi, accesați setările de dimensionare și aplicați o lățime „100%”. Acest lucru vă va ajuta cu pasul următor, care este repoziționarea modulului.

• Lățime: 100%

Poziţie

Completați setările modulului accesând fila avansată și modificând setările de poziție după cum urmează:

• Poziție: Absolută
• Locație: în partea stângă jos
• Decalaj vertical: 20 px

Adăugați un modul de text în coloana 3

Adăugați conținut H5 și paragraf

La a treia coloană. Adăugați un modul de text cu conținut H5 și paragraf la alegere.

Setări text

Treceți la fila de proiectare a modulului și schimbați fontul în setările de text.

• Font text: Montserrat

Setări text H5

Stilizați și textul H5.

• Rubrica 5 Font: Montserrat
• Titlul 5 Greutate font: îndrăzneț
• Rubrica 5 Dimensiune text:
  • Desktop și tabletă: 23 px
  • Telefon: 18 px

2. Modificări cheie pentru a crea efect

Secțiune

Îndepărtați căptușeala secțiunii

Acum că am stabilit bazele designului nostru, putem începe să creăm efectul personalizat de stiluri lipicioase pe care l-ați putut vedea în previzualizarea acestui post. Primul pas pentru a obține acest efect este să vă asigurați că valorile de umplere de sus și de jos ale secțiunii sunt zero. Acest lucru ne va ajuta să ne asigurăm că atât secțiunea, cât și rândul încep și se termină în același punct. Acest lucru este important atunci când adăugăm poziția lipicioasă la rândul nostru în pașii următori. Setând limita la partea de jos a secțiunii, nu lăsăm loc pentru mișcarea rândului. Cu toate acestea, rândul va fi transformat lipicios în acele câteva secunde și va evidenția stilurile lipicioase modificate în designul nostru.

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

Rând

Întoarceți Row Sticky

Deschideți setările rândului și rotiți rândul lipicios. După cum sa menționat în pasul anterior, este important să vă asigurați că limita inferioară a rândului nostru este secțiunea. Deoarece nu există spațiu între sfârșitul rândului și sfârșitul secțiunii, rândul lipicios va rămâne la locul său.

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

Culoare de fundal Sticky Row

Este timpul să începeți să aplicați câteva stiluri lipicioase elementelor noastre! Începeți cu culoarea de fundal a rândului.

• Culoare fundal: # 161616

Tranziția rândului

Pentru a asigura o tranziție lină, vom mări durata tranziției în fila avansată a rândului.

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

Culoarea de fundal a coloanei lipicioase 2

Apoi, vom schimba culoarea de fundal a coloanei 2 lipicioase.

• Culoare fundal: # 262626

Modul text în coloana 1

Culoare de fundal lipicioasă

Vom schimba și culoarea de fundal a modulului de text din coloana 1.

• Culoare fundal: # ddc7b5

Culoare text lipicioasă

Împreună cu culoarea textului lipicios.

• Culoarea textului: # 0a0a0a

Dimensionare lipicioasă

Și vom crește lățimea modulului în setările de dimensionare.

• Lățime: 105%

Tranziție

Asigurăm o tranziție lină prin modificarea duratei de tranziție a modulului în fila avansată.

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

Modulul de text din coloana 2

Culoare text lipicioasă

În continuare, avem modulul de text în coloana 2. Vom schimba culoarea textului în lumină într-o stare lipicioasă.

• Culoarea textului: deschis

Modul text în coloana 3

Culoare text lipicioasă

Același lucru este valabil și pentru modulul text din coloana 3.

• Culoarea textului: deschis

3. Secțiunea de clonare pentru reutilizare

Acum că am finalizat prima secțiune, inclusiv efectul de schimbare a stilurilor lipicioase, putem reutiliza această secțiune de câte ori dorim clonând-o.

Schimbați toate copiile

Asigurați-vă că modificați toate copiile duplicate.

Adăugați câteva marje superioare la prima secțiune și marje inferioare la ultima secțiune

Și nu în ultimul rând, vom adăuga o marjă de sus la prima secțiune și o marjă de jos la ultima secțiune. Acest lucru ne va ajuta să prevenim tranziția imediată înainte ca oamenii să înceapă derularea. Asta e!

• Marja superioară: 200 px

• Marja inferioară: 200 px

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 exact, am folosit opțiunile lipicioase Divi pentru a schimba stilurile lipicioase fără a adăuga mișcare. De îndată ce oamenii derulează o anumită parte a paginii dvs., stilurile designului se schimbă, ceea ce evidențiază acea parte specifică a paginii. 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.