Treci la conținutul principal

Cum să creați o tranziție fără sudură cu efecte de defilare pe Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Când vă proiectați pagina de servicii, doriți să vă asigurați că vizitatorii dvs. observă toate serviciile diferite pe care le oferiți. În multe cazuri, acesta va fi doar un serviciu specific pe care îl caută, dar dacă oferiți o modalitate simplificată în structura de servicii, vizitatorii dvs. sunt mai susceptibili să le trateze pe toate. 

În acest tutorial, vă vom arăta cum să fiți creativi cu efectele de defilare ale Divi și să creați o tranziție de serviciu fără probleme. De asemenea, puteți descărca gratuit fișierul JSON!

Să mergem.

Rezultat posibil

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran.

Tranziție între secțiunea divi

1, recreați structura elementelor

Adăugați secțiunea # 1

spaţierea

Începeți prin adăugarea unei noi secțiuni la pagina la care lucrați. Deschideți setările secțiunii și modificați valorile de umplere pe diferite dimensiuni ale ecranului.

  • Înveliș superior: 80px (desktop și tabletă), 0px (telefon)
  • Garnitura de jos: 80px
Secțiunea parametrului Divi

Adăugați o linie nouă

Structura coloanei

Continuați să adăugați un nou rând utilizând următoarea structură a coloanei:

dimensionarea

Fără a adăuga mai multe module, deschideți parametrii liniei și aplicați următoarele modificări parametrilor de dimensionare:

  • Utilizați o lățime personalizată de jgheab: Da
  • Lățimea jgheabului: 1
  • Lățime: 90%
  • Lățime maximă: 1580px
Configurarea distanțării Divi

spaţierea

Apoi adăugați o marjă personalizată de sus și de jos.

  • Marja superioară: 200px
  • Marja de jos: 200px
Configurarea distanțierii liniei

Adăugați un modul text la coloana 1

Adăugați conținut H2

Este timpul să adăugați module, începând cu un modul text în coloana 1. Introduceți orice conținut H2 doriți.

Serviciile noastre oferite de experții momentului

Setări text H2

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

  • Titlul 2 Poliție: trimestrial
  • Antetul 2 Dimensiunea textului: 80px (desktop), 50px (tabletă), 40px (telefon)
  • Înălțimea liniei 2 a capului: 1.2em
Șef divi poliție

spaţierea

Apoi adăugați o marjă mai mică pe tabletă și telefon.

  • Marja de jos: 50 pixeli (numai tabletă și telefon)
Configurare spațiere text Divi

Adăugați un modul text la coloana 2

Adăugați conținut

Să trecem la a doua coloană. Acolo, primul modul de care avem nevoie este un modul text cu un conținut de descriere.

Casetă text conținut divi

Setări text

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

  • Font text: cabin
  • Stilul fontului text: cu majuscule
  • Culoarea textului: # 000000
  • Dimensiunea textului: 18px (desktop), 15px (tabletă), 13px (telefon)
  • Spațiu scrisori text: 3px (desktop), 1px (tabletă și telefon)
  • Înălțimea liniei de text: 3em
Parametru text Divi

Adăugați un modul de separare la coloana 2

vizibilitate

Următorul și ultimul modul de care avem nevoie în această coloană este un modul de separare. Asigurați-vă că este activată opțiunea „Afișați separatorul”.

  • Afișare separator: Da
Separator vizibil

Ligne

Apoi schimbați linia culorii modulului.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

  • Culoarea liniei: # 000000
Fundal de culoare divizor

dimensionarea

Apoi faceți unele modificări la parametrii de dimensionare.

  • Greutatea separatorului: 3px
  • Lățime: 28%
Dimensiunea separatorului Divi

spaţierea

Adăugăm și o marjă de sus.

  • Marja superioară: 10px
Distanțarea modulului separator Divi

Adăugați secțiunea # 2

spaţierea

Să trecem la următoarea secțiune obișnuită. Eliminați umplutura superioară implicită din secțiune.

  • Garnitură superioară: 0px
Secțiunea 2 distanțare divi

revarsarile

De asemenea, ascundeți revărsările.

  • Debord de orizontală: ascuns
  • Debord vertical: ascuns
Ascundeți revărsările modulului divi

Adăugați o linie nouă

Structura coloanei

Continuați să adăugați un prim rând folosind următoarea structură a coloanei:

Alegeți un aspect divi

dimensionarea

Fără a adăuga mai multe module, deschideți parametrii liniei, accesați parametrii de dimensionare și efectuați următoarele modificări:

  • Utilizați o lățime personalizată de jgheab: Da
  • Lățimea jgheabului: 1
  • Egalizați înălțimile coloanei: Da
  • Lățime: 90%
  • Lățime maximă: 1580px
Secțiunea divi de configurare a jgheabului

spaţierea

Apoi, eliminați toate captuseala implicită superioară și inferioară.

  • Garnitură superioară: 0px
  • Garnitura de jos: 0px
Setările de spațiere a modulului Divi 1 linie

Setări pentru coloana 1

Culoare de fundal

Apoi deschideți setările pentru coloana 1 și schimbați culoarea de fundal.

  • Culoare fundal: # f7f7f7
Configurare de fundal modul linie Divi

spaţierea

Completați setările coloanei adăugând valori de umplere personalizate pe diferite dimensiuni de ecran.

  • Căptușeală superioară: 200px (birou), 100px (tabletă și telefon)
  • Garnitură de jos: 200px (birou), 100px (tabletă și telefon)
  • Căptușire stânga: 8%
  • Căptușire dreapta: 8%
Setările coloanei modulului rând

Setări pentru coloana 2

spaţierea

Continuați deschizând setările din coloana 2. Accesați fila avansată și adăugați valori de umplere personalizate pe diferite dimensiuni de ecran.

  • Căptușeală de top: 100px (desktop), 50px (tabletă și telefon)
  • Garnitura de jos: 200px
  • Căptușire stânga: 150 px (birou), 0 px (tabletă și telefon)
Setări de spațiere a modulului Divi

Adăugați un modul de separare la coloana 1

vizibilitate

În prima coloană, primul modul de care avem nevoie este un modul de separare. Asigurați-vă că este activată opțiunea „Afișați separatorul”.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

  • Afișare separator: Da
Afișați separatorul divi 1

Ligne

Apoi schimbați linia culorii modulului.

  • Culoarea liniei: # 000000
Setări separator Divi

dimensionarea

De asemenea, modificați parametrii de dimensionare.

  • Greutatea separatorului: 3px
  • Lățime: 50%
Dimensiunea separatorului Divi

Adăugați un modul text la coloana 1

Adăugați conținut H3

Următorul modul de care avem nevoie în coloana 1 este un modul text cu conținut H3.

Setarea secțiunii de conținut Divi

Setări text H3

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

  • Titlul 3 Poliție: trimestrial
  • Culoarea textului articolului 3: # 000000
  • Articol 3 Dimensiunea textului: 50px (desktop), 40px (tabletă), 35px (telefon)
  • Înălțimea liniei 3 a capului: 1.1em

Adăugați un modul text la coloana 2

Adăugați conținut

În a doua coloană, primul modul de care avem nevoie este un modul text cu un anumit conținut de descriere.

Setarea modulului text Divi

Setări text

Modificați setările textului modulului după cum urmează:

  • Font text: cabin
  • Stilul fontului text: cu majuscule
  • Dimensiunea textului: 18px (desktop), 15px (tabletă), 13px (telefon)
  • Spațiu scrisori text: 3px (desktop), 1px (tabletă și telefon)
  • Înălțimea liniei de text: 3em
Reglarea fontului pentru matrița textului Divi

Adăugați un modul de buton la coloana 2

Adăugați o copie

Următorul și ultimul modul de care avem nevoie este un modul buton. Introduceți o copie la alegere.

Setarea conținutului modulului text

Setări buton

Apoi stilează butonul.

  • Utilizați stiluri personalizate pentru buton: Da
  • Dimensiunea butonului: 20 pixeli
  • Culoarea textului butonului: #ffffff
  • Culoarea fundalului butonului: # 000000
  • Lățimea marginii butonului: 0px
Setarea stilului butonului Divi
  • Font pentru butoane: trimestrial
  • Greutatea fontului pentru buton: bold
Setările culorii butonului Divi

spaţierea

Adăugați, de asemenea, umplutură personalizată.

  • Garnitură superioară: 50px
  • Garnitura de jos: 50px
  • Plăcuță stângă: 100px
  • Căptușire dreapta: 100px
Setări de spațiere a butonului modulului Divi

Poziţie

Și repuneți butonul în consecință:

  • Poziție: Absolut
  • Locație: stânga jos
Reglarea poziției modulului butonului Divi

Clonați linia de câte ori este necesar

După ce ați completat întreaga linie și toate modulele sale, puteți clona întreaga linie de trei ori.

Clonează modulul divi

Schimbă tot conținutul

Asigurați-vă că editați tot conținutul în linii duplicate.

Editați conținutul secțiunii Divi

2. Aplicați efecte de derulare

Efecte de derulare a primului rând

Mișcare orizontală

După ce ați completat toate liniile din secțiunea dvs., este timpul să adăugați efectele de derulare. Deschideți primul rând al secțiunii și adăugați mișcare orizontală.

  • Activați mișcarea orizontală: Da
  • Start offset: -5
  • Offset mediu: 0 (la 26%)
  • Decalaj final: 0
  • Efect de declanșare a mișcării: mijlocul elementului
Aplicați efecte de defilare divi

Estompează și iese

De asemenea, utilizați un efect de estompare de intrare și de ieșire.

  • Activați decolorarea și intrarea: Da
  • Opacitate inițială: 100%
  • Opacitate medie: 100% (la 50%)
  • Opacitatea finală: 0% (până la 53%)
  • Efect de declanșare a mișcării: mijlocul elementului
Configurați secțiunea de animație fade animation

Efecte de derulare a rândului de mijloc

Mișcare verticală

Apoi, vom adăuga efecte de derulare la toate liniile dintre prima și ultima linie a secțiunii. Folosiți mai întâi o mișcare verticală:

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

  • Activați mișcarea verticală: Da
  • Start offset: -4
  • Offset mediu: 0 (la 26%)
  • Decalaj final: 0
  • Efect de declanșare a mișcării: mijlocul elementului
Configurație aniativă defilare Divi

Estompează și iese

De asemenea, activați un efect de intrare și de estompare.

  • Activați decolorarea și intrarea: Da
  • Opacitate inițială: 0%
  • Opacitate medie: 100% (de la 27% la 50%)
  • Decalaj final: 0 (la 53%)
  • Efect de declanșare a mișcării: mijlocul elementului
Animație de estompare a liniei Divi

Efecte de derulare a ultimei linii

Mișcare verticală

Apoi deschideți ultima linie a secțiunii și adăugați următoarea mișcare verticală:

  • Activați mișcarea verticală: Da
  • Start offset: -4
  • Offset mediu: 0 (la 26%)
  • Decalaj final: 0
  • Efect de declanșare a mișcării: mijlocul elementului
Modul de linie divi cu defilare de animație

Estompează și iese

Cu un efect de estompare de intrare și de ieșire și ați terminat!

  • Activați decolorarea și intrarea: Da
  • Opacitate inițială: 0%
  • Opacitate medie: 100% (de la 27% la 50%)
  • Opacitatea finală: 100% (până la 53%)
  • Efect de declanșare a mișcării: mijlocul elementului
Setări de animație pentru aspectul modulului Divi line

Rezultat final

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

Demo final

Ultimele gânduri

În acest articol, v-am arătat cum să creați o tranziție de serviciu frumoasă cu efectele de derulare ale Divi. Chiar înainte ca un serviciu să dispară, celălalt începe să apară, oferind o tranziție plăcută plăcută ochiului. Această abordare vă va ajuta să evidențiați fiecare serviciu la nivel individual. De asemenea, puteți 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.

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top