Cum să creați tranziții de copiere paralelă cu opțiunile lipicioase ale lui Divi

Când căutați modalități creative de a vă condimenta designul paginilor, efectele de paralaxă pot fi utile. Aduc acea interacțiune suplimentară pe scroll fără a fi prea invazivi. Dacă sunteți în căutarea unei modalități de a extinde acel efect de paralaxă la mai multe secțiuni de pe pagina dvs., vă va plăcea acest tutorial. Astăzi, vă vom arăta cum să creați tranziții de copiere în paralelă cu opțiunile lipicioase ale lui Divi. De îndată ce vizitatorii parcurg o anumită secțiune, copia derulează în jos cu imaginea de fundal de paralaxă, ceea ce oferă un efect foarte curat. De îndată ce următoarea secțiune din linie este atinsă, copia este apoi înlocuită cu un alt titlu. Rezultatul pe care îl căutăm arată excelent pe toate dimensiunile ecranului ș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!

https://youtu.be/uZCD0__Apjk

Abonați-vă la canalul nostru Youtube

1. Creați structura elementului

Adăugați o secțiune nouă

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Acest efect va funcționa în mod special bine dacă aveți conținut deasupra și dedesubtul aspectului pe care urmează să îl creăm.

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 de rând și modificați setările de dimensionare după cum urmează:

• Egalizați înălțimile coloanei: Da
• Lățime: 95%
• 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

Imagine de fundal a coloanei

Acum, după ce am modificat setările generale ale rândului, vom aplica și câteva setări personalizate coloanei din rândul nostru. Începeți prin deschiderea setărilor coloanei.

Încărcați o imagine de fundal și activați un efect de paralaxă asupra acesteia.

• Utilizați efectul Parallax: Da
• Metoda Parallax: CSS

Spațiere coloană

Apoi, accesați fila de proiectare și aplicați o umplutură personalizată de jos.

• Căptușeală inferioară: 50vh

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

Adăugați conținut H2

Îmi recomand să adăugați module, începând cu un modul text care conține un conținut H2 la alegere.

Setări text H2

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

• Rubrica 2 Font: Montserrat
• Titlul 2 Greutate font: îndrăzneț
• Titlul 2 Stil font: majuscule
• Rubrica 2 Culoarea textului: #ffffff
• Rubrica 2 Dimensiune text:
  • Desktop: 9vw
  • Tabletă: 14vw
  • Telefon: 15vw

Filtre

Activăm și un mod de amestecare în setările filtrelor.

• Blend Mode: Suprapunere

Adăugați modulul buton la coloana 1

Adăugați o copie

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

Adăugați un link

Apoi, introduceți un link.

Setări buton

Apoi, treceți la fila de proiectare a modulului și modificați setările butonului în mod corespunzător:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton:
  • Desktop: 2vw
  • Tabletă și telefon: 7vw
• Culoarea textului butonului: #ffffff
• Lățimea chenarului butonului: 0 px
• Distanța dintre litere și butoane: 0,06vw

• Buton Font: Karla
• Afișează pictograma buton: Da
• Plasare pictogramă buton: stânga
• Afișați pictograma doar pe cursor pentru buton: Nu

Spațiere

Adăugați și o umplutură personalizată, de sus și de jos.

• Căptușeală superioară: 8%
• Căptușeală inferioară: 8%

Poziţie

Și completați setările modulului prin repoziționarea modulului în colțul din dreapta jos al coloanei.

• Poziție: Absolută
• Locație: în partea dreaptă jos

2. Pașii necesari pentru efect

Întoarceți modulul de text lipicios

Acum, că am stabilit bazele designului nostru cu toate elementele necesare, este timpul să permitem tranziția copierii în paralelă. Pentru a face acest lucru, vom folosi opțiunile lipicioase încorporate ale Divi pe modulul text. Deschideți setările modulului, accesați fila avansată și aplicați următoarele setări lipicioase:

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

Modificați spațiul modulului text

Mod implicit

Acum că am activat opțiunile lipicioase de pe acest modul, putem aplica stiluri lipicioase. În mod implicit, modulul va fi plasat deasupra coloanei. Și datorită culorii textului alb al modulului, acesta se va amesteca cu culoarea de fundal a secțiunii și va face să pară că nu există deloc text acolo. Pentru a crea această poziționare, vom folosi o marjă superioară negativă pe diferite dimensiuni de ecran.

• Marja superioară:
  • Desktop: -10vw
  • Tabletă: -14vw
  • Telefon: -15vw

Lipicios

Odată ce modulul de text este înfășurat, vrem să revină la vedere. Pentru a ne asigura că acest lucru se întâmplă, vom readuce această marjă superioară la „0vh” într-o stare lipicioasă.

• Marja superioară lipicioasă: 0vh

Secțiunea Spațierea

De asemenea, vom avea nevoie de spațiu în partea de sus și de jos a secțiunii noastre, astfel încât fundalul și modulul de text să poată fuziona în culori. Pentru a face acest lucru, vom deschide din nou setările secțiunii și vom aplica niște umpluturi personalizate de sus și de jos.

• Căptușeală superioară: 10vh
• Căptușeală inferioară: 10vh

Clonați întreaga secțiune de câte ori doriți

După ce ați finalizat proiectarea secțiunii, o puteți clona de câte ori doriți.

Schimbați conținutul și linkurile

Asigurați-vă că schimbați conținutul și linkurile pentru fiecare modul din secțiunile duplicate și ați terminat!

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ă creați tranziții de copiere de paralaxă care vă permit să extindeți efectul de paralaxă în mai multe secțiuni de pe pagina dvs. 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.