Faqja që flet për ju (për) është një nga faqet tuaja më të rëndësishme Site Web. Kjo i lejon njerëzit t'ju njohin më mirë dhe të vendosin nëse janë të kënaqur duke ndërmarrë hapin tjetër. Nëse po kërkoni një mënyrë të thjeshtë për të përfshirë rrëfimin në këtë faqe, do t'ju pëlqejë ky tutorial. Ne do të përdorim efektet lëvizëse të Divi për të krijuar një tranzicion të qetë të rrëfimit në rrotull. Sapo një pjesë e historisë zbehet, shfaqet një pjesë tjetër. Kjo i jep vizitorët ndjenja e të lexuarit të një historie interesante.
Rezultati i mundshëm përfundimtar
Para se të zhyteni në tutorial, le të hedhim një vështrim në rezultatin në madhësi të ndryshme të ekranit.
1. Krijoni pjesën e parë të ekranit të plotë të faqes
Shto një seksion të ri
Ngjyrë e sfondit
Filloni duke shtuar një seksion të parë në faqen tuaj Rreth. Hapni cilësimet e seksionit dhe ndryshoni ngjyrën e sfondit në të zezë.
- Ngjyra e sfondit: # 000000
sizing
Pastaj kthejeni seksionin në ekran të plotë duke shtuar një lartësi minimale në parametrat e madhësisë.
- Lartësia e minuar: 100vh
2. Shtoni një linjë të animuar
Shto një rresht të ri
Struktura e kolonës
Pastaj shtoni një rresht të ri në seksionin tuaj duke përdorur strukturën e kolonës së mëposhtme:
sizing
Hapni parametrat e linjës dhe lejoni që linja të zërë tërë gjerësinë e enës së seksionit duke modifikuar parametrat e dimensionimit.
- Gjerësia: 100%
- Gjerësia maksimale: 100%
ndarje
Pastaj shtoni mbushjen majtas dhe djathtas në madhësi të ndryshme të ekranit.
- Mbushja e majtë: 20vw (tavolinë), 10vw (tablet dhe telefon)
- Mbushja e duhur: 20vw (tavolinë) 10vw (tablet dhe telefon)
gjallëri
Për të rritur efektin e tregimit, do të përdorim gjithashtu një animacion të zbehur për linjën.
- Stili i animacionit: Zbehet
- Kohëzgjatja e animacionit: 3000ms
- Lakorja e shpejtësisë së animacionit: lehtësi-marrje
- Përsëritja e animacionit: një herë
pozitë
Në fund, ne do të sigurohemi që linja të pozicionohet në qendër të enës së seksionit duke modifikuar opsionet e pozicionit.
- Pozicioni: absolut
- Vendndodhja: Qendra
3. Vendosni një titull me efekte lëvizëse
Shtoni modulin e tekstit # 1 në kolonë
Shto përmbajtje H1
Moduli i vetëm që na nevojitet në këtë rresht është një modul teksti me të përmbajtje H1
Titulli 1 Cilësimet e tekstit
Shkoni te skeda e modelit dhe ndryshoni cilësimet e tekstit H1 si më poshtë:
- Shkronja e titullit: Nunito
- Pesha e shkronjave të titullit: Gjysmë e theksuar
- Ngjyra e tekstit të kokës: #ffffff
- Madhësia e tekstit të kokës: 7vw (desktop), 9vw (tabletë), 11vw (telefon)
Lëvizja vertikale
Ne gjithashtu do të shtojmë një animacion delikate vertikale.
- Aktivizoni lëvizjen vertikale: Po
- Fillimi i kompensimit: 0 (me 50%)
- Kompensimi mesatar: 10 (me 100%)
- Kompensimi përfundimtar: 10
Efektet lëvizëse hyrëse dhe dalëse
Me një efekt venitje dhe hyrëse.
- Aktivizoni zbehet brenda dhe jashtë: Po
- Opaciteti fillestar: 100%
- Opaciteti mesatar: 100% (me 55%)
- Hapësia e mbarimit: 0% (në 62%)
Shkallëzimi i efektit të lëvizjes lart e poshtë
E fundit, por jo më pak e rëndësishmja, ne gjithashtu do të përdorim një efekt lëvizjeje në shkallë lart dhe poshtë.
- Aktivizo shkallëzimin lart e poshtë: Po
- Shkalla e fillimit: 100% (deri në 40%)
- Shkalla mesatare: 95% (deri në 74%)
- Shkalla e përfundimit: 90%
4. Klononi një seksion të tërë një herë dhe përfshini tekstin e përshkrimit me efektet lëvizëse
Ndryshoni titullin dhe përmbajtjen
Pasi të keni përfunduar seksionin e parë, mund ta klononi atë plotësisht. Hapni modulin e tekstit brenda kontejnerit të seksionit kopjuar dhe përdorni një kopje H2.
Modifikoni parametrat e tekstit të modulit Tekst H2
Ndryshoni rregullimet e tekstit H2 në përputhje me rrethanat:
- Titulli 2 Policia: Nunito
- Titulli i fontit 2: gjysëm i guximshëm
- Pika 2 Ngjyra e tekstit: #ffffff
- Pika 2 Madhësia e tekstit: 5vw (desktop), 7vw (tabletë), 8vw (telefon)
- Lartësia e linjës 2: 1em (zyrë), 1.2em (tablet dhe telefon)
Shtoni modulin e tekstit # 2 në kolonë
Shto përmbajtje
Më pas, shtoni një modul tjetër teksti në kolonën me a përmbajtje përshkrimi i zgjedhjes suaj.
Cilësimet e tekstit
Ndryshoni cilësimet e tekstit për modulin e tekstit si më poshtë:
- Shkronja e tekstit: Open Sans
- Ngjyra e tekstit: #ffffff
- Madhësia e tekstit: 1vw (desktop), 2.5vw (tabletë), 3vw (telefon)
- Lartësia e vijës së tekstit: 3.1em (tavolinë), 2.5em (tabletë dhe telefon)
ndarje
Përdorni gjithashtu një marzh të lartë.
- Marzhi i sipërm: 8vw
Efektet lëvizëse hyrëse dhe dalëse
Tjetra, kaloni te efektet e lëvizjes në skedën e përparuar dhe përdorni cilësimet e mëposhtme të zbehjes dhe zbehjes:
- Aktivizoni zbehet brenda dhe jashtë: Po
- Opaciteti fillestar: 100%
- Opaciteti mesatar: 0% (me 31%)
- Opaciteti përfundimtar: 0% (deri 35%)
Shkallëzimi i efektit të lëvizjes lart e poshtë
Shtoni gjithashtu një efekt shkallëzimi lart e poshtë.
- Aktivizo shkallëzimin lart e poshtë: Po
- Shkalla e fillimit: 100% (deri në 40%)
- Shkalla mesatare: 95% (deri në 74%)
- Shkalla e përfundimit: 90%
Tani mund ta klononi këtë seksion të fundit sa më shumë që të jetë e mundur. Sidoqoftë, do t'ju duhet të rregulloni përmbajtje të çdo seksioni për nevojat tuaja.
studim
Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.
Mendimet e fundit
Në këtë artikull, ne ju treguam se si të tregoni një histori në faqen tuaj rreth duke përdorur efektet e integruara të lëvizjes së Divi. Efekti që krijuam lejon që kopja e njëpasnjëshme të zbehet brenda dhe jashtë, duke i dhënë vizitorët si të lexosh një histori. Ju gjithashtu mund të shkarkoni skedarin JSON falas! Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.
Faleminderit shumë udhëzuesi juaj më ndihmoi shumë
A dini si të bëni kalime në faqe me divi? Gjeta këtë shtojcë e cila duket se funksionon mirë https://divi-page-transition.com në faqen time. Cfare mendoni ju