Cum să marcați o nouă secțiune Divi cu forme de mișcare subtile

Există multe modalități prin care vă puteți face vizitatorul conștient de faptul că se mută într-o altă secțiune de pe pagina dvs. În cadrul Divi, există o gamă largă de separatoare de secțiuni pe care le puteți folosi chiar de pe bat. Dar dacă sunteți în căutarea unui mod mai animat de a clarifica acest lucru, vă va plăcea acest tutorial. Vă vom arăta cum să marcați o nouă secțiune Divi folosind forme de mișcare subtile. Vom crea aceste forme cu opțiunile încorporate ale Divi și le vom adăuga mișcare cu efectele de defilare ale Divi. Posibilitățile sunt nelimitate, dar vă vom împărtăși trei exemple de design pe care le puteți utiliza imediat. Veți putea descărca gratuit fișierele 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.

Exemplul nr. 1

Desktop

Mobil

Exemplul nr. 2

Desktop

Mobil

Exemplul nr. 3

Desktop

Mobil

Descărcați aspectele Subtle Motion Shapes GRATUIT

Pentru a vă pune mâinile pe aspectele sub formă de mișcare subtilă, 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!

Pași generali

Încărcați aspectul paginii de destinație a galeriei de artă

Pentru acest tutorial, vom folosi pachetul de aspect pentru galeria de artă, dar puteți aplica tehnica oricărui tip de site web pe care îl creați. Adăugați o pagină nouă și încărcați pagina de destinație a pachetului de aspect.

Adăugați un rând nou în partea de jos a secțiunii # 1

Structura coloanei

Acum, vom parcurge câțiva pași de bază care se aplică tuturor celor trei exemple care au fost prezentate la începutul acestui tutorial. Mai întâi, adăugați un rând nou în partea de jos a primei secțiuni a paginii dvs. utilizând 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

Modificați și marja și valorile de umplere.

• Marja superioară: 10vw
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Îndepărtați capitonajul inferior al secțiunii # 1

Pentru a ne asigura că rândul și formele de mișcare apar în partea de jos a secțiunii, va trebui să eliminăm căptușeala inferioară a secțiunii.

• Căptușeală inferioară: 0vw

Recreați exemplul nr. 1

Adăugați modulul divizor # 1

Vizibilitate

După ce ați parcurs pașii generali, este timpul să începeți să recreați diferitele exemple, începând cu primul. Adăugați un prim modul divizor și asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Treceți la fila de proiectare a modulului și schimbați culoarea liniei.

• Culoare linie: # ffa100

Dimensionare

Modificați și setările de dimensionare ale modulului.

• Greutatea divizorului: 50 px
• Înălțime: 50 px

Spațiere

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

• Marja stângă: -200px (numai tabletă și telefon)
• Marja dreaptă: -200px (numai tabletă și telefon)
• Garnitura stânga: 15vw
• Garnitura dreapta: 15vw

Transformă Skew

De asemenea, vom transforma ușor modulul adăugând o valoare de înclinare inferioară în setările de transformare.

• Partea de jos: 60 grade

Efect de derulare a mișcării orizontale

Este timpul să adăugați diferitele efecte de derulare la modulul nostru! În primul rând, vom adăuga o mișcare orizontală.

• Activați mișcarea orizontală: Da
• Offset de pornire: 0
• Decalaj mediu: 0 (la 80%)
• Offset final:
  • Desktop: 20 (la 85%)
  • Tabletă și telefon: 5 (la 85%)

Efect de defilare în interior și în exterior

Vom adăuga și un efect de estompare și ieșire.

• Activați Fading In and Out: Da
• Opacitate de pornire: 0%
• Opacitate medie: 0% (la 36%)
• Opacitate finală: 100% (la 40%)

Efect de defilare în sus și în jos

Și vom finaliza setările modulului adăugând un efect de redimensionare în sus și în jos.

• Activați scalarea în sus și în jos: da
• Scara inițială: 20%
• Scară medie: 50% (la 69%)
• Scara de încheiere: 100% (la 73%)

Modul Clona Divider # 1

După ce ați finalizat modulul divizor, îl puteți clona.

Modificați culoarea liniei

Deschideți setările modulului duplicat și schimbați culoarea liniei.

• Culoare linie: # 24252d

Modificați spațiul

Modificați și valorile de spațiere ale modulului.

• Marja stângă: -200px (numai tabletă și telefon)
• Marja dreaptă: -200px (numai tabletă și telefon)
• Garnitura stânga: 25vw
• Garnitura dreapta: 25vw

Modificați efectul de derulare a mișcării orizontale

Apoi, accesați efectele de derulare din fila avansată și modificați decalajul final al efectului de derulare a mișcării orizontale.

• Offset final:
  • Desktop: -20
  • Tabletă și telefon: -5

Recreați exemplul nr. 2

Adăugați modulul divizor # 1

Vizibilitate

Dacă preferați să recreați al doilea exemplu, mergeți mai departe și adăugați un prim modul divizor la ultimul rând al secțiunii. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Modificați culoarea liniei modulului în continuare.

• Culoare linie: # ffa100

Dimensionare

Modificați și setările de dimensionare.

• Greutatea divizorului: 200 px
• Lățime: 200 px
• Alinierea modulului: centru
• Înălțime: 200 px

Frontieră

Apoi, vom transforma modulul într-un cerc adăugând o rază de margine.

• Toate colțurile: 200 px

Efect de derulare a mișcării orizontale

E timpul să adăugați efectele de derulare! Primul efect pe care îl folosim este mișcarea orizontală.

• Activați mișcarea orizontală: Da
• Offset de pornire: -2
• Decalaj mediu: 0
• Offset final:
  • Desktop: 20
  • Tabletă și telefon: 5

Efect de defilare în sus și în jos

Apoi, vom activa și un efect de redimensionare în sus și în jos.

• Activați scalarea în sus și în jos: da
• Scara inițială: 20%
• Scară medie: 100%
• Scara de încheiere: 100%

Modul divizor clonă

Continuați și clonați întregul modul divizor.

Schimbați culoarea liniei

Deschideți duplicatul și schimbați culoarea liniei.

• Culoare linie: # 24252d

Modificați spațiul

Adăugați și o marjă de sus.

• Marja superioară: -200px

Schimbați efectul de derulare a mișcării orizontale

Apoi, accesați setările efectului de derulare a mișcării orizontale și modificați decalajul final.

• Offset final:
  • Desktop: -20
  • Tabletă și telefon: -5

Recreați exemplul nr. 3

Adăugați Garnitura Row

Trecem la următorul și ultimul exemplu! Începeți prin a deschide rândul pe care l-ați creat în pașii generali ai acestui tutorial și modificați valorile de umplere din setările de spațiere.

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

Adăugați modulul divizor # 1

Vizibilitate

Adăugați un nou modul divizor la ultimul rând al secțiunii dvs. și ascundeți divizorul.

• Show Divider: Nu

Fundal de gradient

Adăugați un fundal degradat în continuare.

• Culoare 1: # ffa100
• Culoare 2: # f77f00
• Tipul gradientului: liniar
• Direcția gradientului: 121 grade

Dimensionare

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

• Lățime: 200 px
• Alinierea modulului: centru
• Înălțime: 0px

Spațiere

În continuare, adăugăm câteva căptușeli personalizate de sus și de jos.

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

Efect de derulare a mișcării orizontale

Acum, este timpul să adăugați efectele de derulare, începând cu o mișcare orizontală pe diferite dimensiuni ale ecranului.

• Activați mișcarea orizontală: Da
• Offset de pornire: -1 (la 30%)
• Decalaj mediu: 0
• Offset final:
  • Desktop: 20
  • Tabletă și telefon: 5

Efect rotativ de derulare

Vom completa setările modulului adăugând un efect de derulare rotativă.

• Activați rotirea: Da
• Rotație de pornire: 0 ° (la 46%)
• Rotație medie: 50 ° (la 75%)
• Rotație finală: 90 °

Modul divizor clonă

Continuați și clonați întregul modul.

Schimbați fundalul de gradient

Deschideți setările duplicatului și modificați culorile de fundal de gradient.

• Culoare 1: # 24252d
• Culoare 2: # 16161c

Schimbați spațiul

Adăugați o marjă superioară negativă.

• Marja superioară: -100px

Schimbați efectul de derulare orizontală

Și modificați decalajul final al mișcării orizontale în setările efectelor de derulare.

• Offset final:
  • Desktop: -20
  • Tabletă și telefon: -5

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Exemplul nr. 1

Desktop

Mobil

Exemplul nr. 2

Desktop

Mobil

Exemplul nr. 3

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați forme de mișcare și să le utilizați pentru a marca o nouă secțiune pe pagina dvs. Divi. Utilizarea acestei tehnici îi va ajuta pe vizitatori să devină și mai conștienți de faptul că trec la o altă parte a paginii dvs. Efectele de mișcare pe care le-am recreat sunt subtile și adaugă interacțiune site-ului dvs. într-un mod fără efort. Ați putut descărca gratuit fișierele 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.