Dëshironi të dizajnoni një sfond Divi animuar kur lëvizni faqen falë maskave dhe modeleve? Ky tutorial është për ju...
Shtimi i një animacioni rrotullues në Divi dhe maskat dhe modelet e tij të sfondit janë një këshillë e dobishme dizajni që mund t'i japë jetë të re modeleve tuaja të sfondit. Site Web.
Në këtë tutorial, ne do t'ju tregojmë se si të krijoni dhe animoni maskat dhe modelet e sfondit duke përdorur opsionet e lëvizjes së Divi (nuk nevojitet kod personal).
Për ta bërë këtë, ne do të krijojmë një shtresë sfondi lundrues duke përdorur një linjë Divi të cilat do t'i përdorim për të animuar maskat dhe modelet e sfondit kur një përdorues lëviz nëpër një seksion të përmbajtje.
Ne mendojmë se rezultati do t'ju pëlqejë.
Le të fillojmë!
studim
Ja një ilustrim i shpejtë se si do të duket animacioni i rrotullimit në sfond për këtë tutorial.
Koncepti
Koncepti i këtij dizajni nuk duhet të jetë shumë i vështirë për t'u kuptuar. Ne fillojmë me një seksion që ka një sfond gradient.
Pastaj krijojmë një vijë që është e pozicionuar (absolute) në mënyrë që të mbulojë plotësisht seksionin (si një mbivendosje). Mund të shtojmë një model sfondi në rresht.
Më pas mund të shtojmë një maskë sfondi në kolonë.
Më pas shtojmë efektet e lëvizjes në rresht dhe kolonë (si shkalla dhe rrotullimi) të cilat do të animojnë modelin dhe maskën veçmas në sfondin e seksionit.
Kur fshehim tejmbushjen e seksionit, gjithçka që shohim është animacioni që gjendet brenda seksionit.
Le të fillojmë duke krijuar një faqe me Divi Builder
Për të filluar, do t'ju duhet të bëni sa më poshtë:
Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.
Jepini një titull që ka kuptim për ju dhe klikoni përdorim Divi Ndërtues
Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.
Lexo gjithashtu: Divi: Si të përdorni "Gradient Builder" për të zbukuruar imazhet tuaja
Si të krijoni maska dhe modele të sfondit të animuar me lëvizje me Divi
Dizajni i sfondit të seksionit
Së pari, ne do të kapërcejmë krijimin e një rreshti dhe do të hidhemi drejt e në redaktim të seksionit ekzistues të paracaktuar në ndërtuesin e temave.
Për ta bërë dizajnin tonë të sfondit të mbushë shfletuesin, duhet të shtojmë një lartësi vertikale në seksion. Një mënyrë e thjeshtë për ta bërë këtë është të shtoni një lartësi minimale në seksion.
Hap cilësimet e seksionit. Nën skedën Projektimi, përditësoni lartësinë minimale dhe hiqni mbushjen si më poshtë:
- Marzhi: 80 vh (lart dhe poshtë)
- Mbushja: 0 px (lart dhe poshtë)
Projektimi i një gradienti të sfondit për seksionin
Tani mund të shtojmë një gradient të personalizuar të sfondit në seksion.
Për të shtuar ndalesat e para të gradientit, sigurohuni që cilësimet e seksionit të jenë të hapura nën skedë Përmbajtja. Pastaj zgjidhni skedën Gradienti i Sfondit dhe klikoni për të shtuar një gradient të ri. Kjo do të shtojë dy ngjyra gradient të paracaktuar. Shtoni pikat e mëposhtme të gradientit me ngjyrë dhe pozicion si më poshtë:
- Ndalesat e gradientit:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
Pastaj ndryshoni drejtimin e gradientit linear:
- Drejtimi i gradientit: 270 gradë
Shtoni rreshta në seksion
Tani që seksioni ynë është në vend, shtoni një rresht me një kolonë në seksion. Kjo linjë do të përdoret për animacionin e lëvizjes së maskës së sfondit dhe modelit.
Tjetra, kopjoni rreshtin që sapo krijuat. Kjo linjë e dytë (e dyfishuar) do të përdoret për tonën përmbajtje siç do të bënit zakonisht.
Tani duhet të keni një linjë të sipërme për animacionin e lëvizjes së sfondit dhe një rresht për përmbajtje normal.
Personalizo linjën
Tani që kemi gati gradientin e sfondit të seksionit tonë, mund ta kthejmë vëmendjen te linja që do të përdorim për animacionin tonë në sfond në lëvizje.
Hap cilësimet e linjës. Nën skedën Avancuar, përditësoni sa vijon:
- Pozicioni: Absolut
Kjo do të lejojë që rreshti të mbivendoset seksioni pa zënë hapësirë reale në dokument.
Tani gjithçka që duhet të bëjmë është të përditësojmë lartësinë dhe gjerësinë në mënyrë që ato të përfshijnë gjerësinë dhe lartësinë e plotë të seksionit. Kjo do të krijojë mbivendosjen që na nevojitet dhe shtresën tonë të dytë të dizajnit të sfondit.
Nën skedinë Projektimi, përditësoni opsionet e madhësisë si më poshtë:
- Aquasize lartësitë e kolonës: PO
- Gjerësia: 100%
- Gjerësia maksimale: 100%
- lartësia: 100%
- Mbushja: 0 px (lart dhe poshtë)
Tani mund të mos jeni në gjendje ta shihni rreshtin, por tani ajo mbulon në mënyrë të përsosur sfondin e të gjithë seksionit.
Krijo një model sfondi për rreshtin
Në këtë shembull do të shtojmë modelin Konfeti si sfond i linjës.
Hap cilësimet e linjës. Nën opsionin Sfond, zgjidhni skedën Modeli i sfondit dhe përditësoni sa vijon:
- Modeli i sfondit: Konfeti
- Modeli:
- Ngjyra: #f6bef7
- Madhësia: Madhësia e personalizuar
- Gjerësia: 35 vw
- Përsëriteni Origjina: qendër
SHËNIM : Përdorimi i njësisë së gjatësisë VW siguron që modeli të shkallëzohet me shfletuesin, duke e mbajtur dizajnin të qëndrueshëm dhe të përgjegjshëm.
Shtoni Efektet e Lëvizjes në Linjë
Tani që modeli ynë i sfondit është në vend, ne mund të shtojmë efekte lëvizëse në rresht.
Shkoni te skeda Avancuar. Nën opsionin Efektet lëvizni, përditësoni sa vijon:
Zgjidhni skedën Lëvizje horizontale dhe përditësoni sa vijon:
- Aktivizo lëvizjen horizontale: PO
- Kompensimi fillestar: 0,5 (në 0%)
- Kompensimi i mesëm: 0 (nga 40% në 60%)
- Kompensimi përfundimtar: -0,5 (në 100%)
Kjo do të lëvizë modelin e sfondit të linjës duke filluar 50 piksel në të majtë dhe duke përfunduar 50 piksele në të djathtë.
Zgjidhni skedën "Shkallëzimi lart dhe poshtë" dhe përditësoni sa vijon:
- Aktivizo shkallëzimin lart dhe poshtë: PO
- Shkalla e fillimit: 150% (në 0%)
- Shkalla e mesme: 100% (nga 40% në 60%)
- Shkalla përfundimtare: 150% (në 100%)
Kjo do të shkallëzojë modelin e sfondit të rreshtit kur lëviz.
Zgjidhni skedën « Rradhës » dhe përditësoni sa vijon:
- Aktivizo rrotullimin: PO
- Rrotullimi i fillimit: 10 gradë (në 0%)
- Rrotullimi mesatar: 0 gradë (nga 40% në 60%)
- Rrotullimi përfundimtar: -10 gradë (në 100%)
KËSHILLA KRYESORE: Ju duhet të mbani rrotullimin në minimum ose rrezikoni të shfaqni boshllëqe ku linja nuk zgjatet përtej seksionit. Një rregull i mirë praktik është të rrisni shkallën nëse dëshironi të rritni rrotullimin. Kjo do të lejojë që vija të rrotullohet mbi seksion pa ekspozuar skajet.
Shtoni maskën e sfondit me efekte lëvizëse në kolonë
Pasi rreshti ynë të përfundojë, ne jemi gati të shtojmë një maskë sfondi me efekte rrotullimi në kolonën e të njëjtit rresht. Për të filluar, le të shtojmë një maskë sfondi.
Për ta bërë këtë, hapni cilësimin e kolonës. Nën skedën Maska e sfondit, përditësoni sa vijon:
- Maska: Shtresa e pikës
- Ngjyra: #ffffff
- Transformimi i maskës: Kthimi horizontal, përmbysja
Shtoni efektet e lëvizjes në kolonë
Tani që maska jonë e sfondit është vendosur, ne mund të shtojmë efekte lëvizëse në kolonë. Mbani në mend se kolona tashmë ka efekte lëvizëse të trashëguara nga rreshti prind.
Gjithçka që do të bëjmë është të rrotullojmë kolonën në drejtim të kundërt të rreshtit për të arritur më shumë ndarje të maskës dhe modelit për kohëzgjatjen e rrotullës.
Shkoni te skeda Avancuar. Nën opsionet Efektet lëvizni, zgjidhni skedën Rotating dhe përditësoni sa vijon:
- Aktivizo rrotullimin: PO
- Rrotullimi i fillimit: -15 gradë (në 0%)
- Rrotullimi mesatar: 0 gradë (nga 40% në 60%)
- Rrotullimi përfundimtar: 15 gradë (në 100%)
Fshih tejmbushjen e seksionit
Aktualisht, linja mbetet e dukshme sa herë që lëvizja e bën atë të shtrihet përtej seksionit.
Për ta pastruar këtë, duhet të fshehim tejmbushjen e seksionit. Për ta bërë këtë, hapni cilësimet e seksionit. Nën skedën Avancuar, përditësoni opsionet e dukshmërisë si më poshtë:
- Vërshimi horizontal: I fshehur
- Vërshimi vertikal: I fshehur
Tani duket më mirë.
Shiko gjithashtu: Divi: 12 kombinime maskash dhe modelesh sfondi
Shtimi i përmbajtjes në linjën e krijuar për këtë qëllim
Në këtë pikë, maska e sfondit dhe animacioni i lëvizjes së modelit janë përfunduar. Gjithçka që duhet të bëjmë është të shtojmë përmbajtjen që duam në rreshtin që krijuam më parë për përmbajtjen.
Për këtë shembull, ne kemi shtuar një titull të rremë që të mund të shohim se si do të duket animacioni i sfondit me tekst statik.
Rezultati përfundimtar
Le të hedhim një vështrim në rezultatin përfundimtar të dizajnit tonë.
Shkarkoni DIVI tani!!!
Përfundim
Është e mahnitshme se sa e lehtë është të krijosh sfonde kaq të bukura me opsionet e sfondit të Divi. Plus, shtimi i animacionit me efektet rrotulluese të Divi u jep jetë të re këtyre modeleve.
Për një pamje të ndryshme, mund të provoni maska dhe modele të ndryshme në secilën shtresë. Nëse dëshironi më shumë frymëzim se si ta përdorni maska dhe modele sfond, shikoni këto 12 kombinime të maskave të sfondit dhe modeleve
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.
Mos hezitoni të konsultoheni edhe me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
