Când vă proiectați pagina de servicii, doriți să vă asigurați că dvs vizitatori observați toate serviciile diferite pe care le furnizați. În multe cazuri, acesta va fi doar un serviciu specific pe care îl caută, dar dacă oferiți o modalitate simplificată în structura dvs. de servicii, este mai probabil ca dvs. vizitatori a face cu ei pe toți.
În acest tutorial, vă vom arăta cum să fiți creativ cu efectele de defilare ale Divi și creați o tranziție fără întreruperi de servicii. De asemenea, veți putea descărca fișierul JSON gratuit!
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.
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
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
spaţierea
Apoi adăugați o marjă personalizată de sus și de jos.
- Marja superioară: 200px
- Marja de jos: 200px
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 cuprins H2 la alegere.
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
spaţierea
Apoi adăugați o marjă mai mică pe tabletă și telefon.
- Marja de jos: 50 pixeli (numai tabletă și telefon)
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 anumit cuprins Descriere.
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
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
Ligne
Apoi schimbați linia culorii modulului.
- Culoarea liniei: # 000000
dimensionarea
Apoi faceți unele modificări la parametrii de dimensionare.
- Greutatea separatorului: 3px
- Lățime: 28%
spaţierea
Adăugăm și o marjă de sus.
- Marja superioară: 10px
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
revarsarile
De asemenea, ascundeți revărsările.
- Debord de orizontală: ascuns
- Debord vertical: ascuns
Adăugați o linie nouă
Structura coloanei
Continuați să adăugați un prim rând folosind următoarea structură a coloanei:
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
spaţierea
Apoi, eliminați toate captuseala implicită superioară și inferioară.
- Garnitură superioară: 0px
- Garnitura de jos: 0px
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
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ă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)
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”.
- Afișare separator: Da
Ligne
Apoi schimbați linia culorii modulului.
- Culoarea liniei: # 000000
dimensionarea
De asemenea, modificați parametrii de dimensionare.
- Greutatea separatorului: 3px
- Lățime: 50%
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 cuprins H3.
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.
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
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.
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
- Font pentru butoane: trimestrial
- Greutatea fontului pentru buton: bold
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
Poziţie
Și repuneți butonul în consecință:
- Poziție: Absolut
- Locație: stânga jos
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.
Schimbă tot conținutul
Asigurați-vă că editați tot conținutul în linii duplicate.
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
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
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ă:
- 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
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
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
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
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.
Ultimele gânduri
În acest articol, v-am arătat cum să creați o tranziție frumoasă de servire cu efectele de defilare ale Divi. Chiar înainte ca un serviciu să dispară, celălalt începe să apară, oferind o tranziție plăcută, ușoară pentru ochi. Această abordare vă va ajuta să evidențiați fiecare serviciu la nivel individual. De asemenea, ați putut descărca fișierul JSON gratuit! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.
