Krijimi i efekteve të rrotullimit duke përdorur Section Divider është një teknikë e thjeshtë dhe argëtuese që mund t'i japë jetë Site Web duke perdorur WordPress theme Divi. Një ndarës seksioni vazhdon të jetë një element dizajni i gjithanshëm, i dobishëm për të shtuar një prekje kreativiteti në tranzicionet tuaja të përmbajtje e faqes.
Por me efektet lëvizëse të Divi, ndarësit e seksioneve bëhen edhe më interesante! Truku është të izoloni një seksion të dedikuar për stilin e zgjedhur të ndarësit. Më pas mund të shtoni të gjitha llojet e lëvizjeve të krijuara nga rrotulla në seksion për të krijuar efekte të bukura lëvizëse si sfond për përmbajtje e faqes.
Le të fillojmë!
Rezultati i mundshëm
Këtu është një përmbledhje e dizenjove që do të jemi në gjendje të arrijmë pas përfundimit të këtij udhëzimi.
Si të krijoni ndarësin e seksionit të lëvizjes së animuar me Divi
Krijimi i dy seksioneve të përmbajtjes
Shtoni një rresht
Për të filluar, krijoni një rresht me një kolonë në seksionin e paracaktuar.
Marzhi i seksionit (për testet)
Për qëllime testimi, shtoni një diferencë të lartë në seksion, në mënyrë që të kemi hapësirë për lëvizje. Hapni cilësimet e seksionit dhe shtoni sa vijon:
- Marzhi i lartë: 80vh
Shto një modul teksti
Në rreshtin e një kolone, shtoni një modul të ri teksti.
Përmbajtja e modulit të tekstit
Brenda të përmbajtje të trupit, shtoni titullin H2 vijues:
<h2>Section Avec Séparateurs</h2>
Modeli i modulit të tekstit
Nën cilësimet e projektimit, azhurnoni sa vijon:
- Shkronja e tekstit: Roboto
- Shtrirja e tekstit: qendra
- Pika 2 Ngjyra e tekstit: # bae0d8
- Kreu 2 Madhësia e tekstit: 80px (desktop), 50 px (tabletë), 30px (telefon)
Shtoni një pjesë të dytë të përmbajtjes
Sipas seksionit të mëparshëm, shtoni një seksion të ri të rregullt.
Shtoni një rresht
Në seksionin e ri, shtoni një rresht në një kolonë.
Shto një modul teksti
Pastaj shtoni një modul të ri teksti në rresht.
Modeli i modulit të tekstit
Tani mund ta mbajmë brenda trupit përmbajtjen e parazgjedhur të mbushjes. Le të kalojmë në skedën e dizajnit dhe të azhurnojmë sa vijon:
- Shkronja e tekstit: Roboto
- Ngjyra e tekstit të tekstit: #dddddd
- Madhësia e tekstit: 16px
- Lartësia e vijës së tekstit: 1,5 em
- Rreshtimi i tekstit: majtas
- Gjerësia maksimale: 400 px
- Shtrirja e modulit: qendra
Cilësimet e seksionit
Sigurohuni që të hiqni ngjyrën e paracaktuar të sfondit të seksionit, por jepni asaj një sfond plotësisht transparent. Pastaj mund të heqim mbushjen e sipërme dhe të shtojmë një diferencë të poshtme për qëllime të provës së lëvizjes.
Për ta bërë këtë, hapni cilësimet e seksionit dhe azhurnoni si vijon:
- Ngjyra e sfondit: rgba (0,0,0,0)
- Marzhi i poshtëm: 80vh
- Mbushje: 0px
Krijimi i ndarësit të seksionit të animuar
Pasi të përmbushen dy seksione të përmbajtjes, ne jemi të gatshëm të shtojmë seksionin për ndarësit tanë të seksionit të animuar.
Shto një seksion të ri
Shkoni përpara dhe krijoni një seksion të ri të rregullt në mes të dy seksioneve të përmbajtjes.
Konteksti i seksionit
Dhe përsëri, hiqni ngjyrën e paracaktuar të sfondit të seksionit, por duke azhurnuar sa vijon:
- Ngjyra e sfondit: rgba (0,0,0,0)
Dizajni i ndarjes së seksionit
Mos u shqetëso, ne do të krijojmë ngjyrën tonë të sfondit me ndarësit e seksioneve. Për ta bërë këtë, klikoni në skedën e dizajnit dhe shtoni një ndarës të sipërm dhe të poshtëm në seksion si më poshtë:
Dizajn superiore superiore
- Stili kryesor i ndarësit: shihni screenshot
- Ngjyra e ndarësit të sipërm: # 524fbf
- Lartësia e ndarësit të sipërm: 20vw
- Përsëritja horizontale e ndarësit të sipërm: 0,6x
- Rrokullisja e ndarësit të sipërm: horizontale
Dizajn më i ulët ndarës
- Stili i ndarjes së poshtme: shihni screenshot
- Ngjyra ndarëse e ulët: # 524fbf
- Lartësia e ndarësit të poshtëm: 20vw
- Përsëritja horizontale e ndarësit të poshtëm: 0,5x
- Pjerrësia e pjesëve të poshtme: horizontale dhe vertikale
Lartësia e seksionit dhe mbushja
Meqenëse kjo pjesë është thjesht për dizajnin e ndarësit, ne mund të heqim qafe lartësinë dhe mbushjen, në mënyrë që të shfaqet vetëm stili i ndarësit dhe asnjë hapësirë e panevojshme nuk vjen midis dy seksioneve të përmbajtjes. Përditësoni sa vijon:
- Lartësia: 0px
- Mbushje: 0px e lartë, e ulët 0px
Efektet e lëvizjes së ndarësit të seksionit
Pastaj jepni seksionit efektet e mëposhtme të lëvizjes:
Nën skedinë Lëvizja horizontale ...
- Aktivizoni lëvizjen horizontale: PO
Ne mund t'i mbajmë cilësimet e paracaktuara për këtë në pamjen e zyrë .
Pastaj azhurnoni parametrat horizontale të lëvizjes në tablette :
- Fillimi i kompensimit: 3 (me 0% të dritares)
- Kompensimi mesatar: 0 (me 50% të pamjes)
- Kompensimi përfundimtar: -3 (në 100% të pamjes)
Nën skedinë Shkallëzimi i efektit lart dhe poshtë , azhurnoni më poshtë në zyrë ...
- Shkalla e fillimit: 200% (në 0% të dritares)
- Shkalla mesatare: 150% (në 45% -65% të pamjes)
- Shkalla përfundimtare: 150% (në 100% të pamjes)
Pastaj azhurnoni efektin Shkallëzimi Lart dhe Poshtë në tablette si më poshtë:
- Shkalla e fillimit: 400% (në 0% të dritares)
- Shkalla mesatare: 300% (në 45% -65% të pamjes)
- Shkalla përfundimtare: 400% (në 100% të pamjes)
Arsyeja kryesore që ne kemi nevojë për të rregulluar efektet e lëvizjes në tabletë (dhe telefon) është për shkak të vlerave horizontale të lëvizjes duke përdorur njësi me gjatësi pixel (dmth. 3 = 300 piksele), të cilat janë absolute dhe nuk rregullohen me gjerësinë e shfletuesit.
Tani le të shohim rezultatin përfundimtar të ndarësit tonë të pjesës së lëvizshme.
Mendimet e fundit
Animimi i ndarësve të seksioneve në rrotull është një mënyrë argëtuese dhe efektive për të sjellë në jetë një faqe në internet. Shpresoj se kjo ju jep një frymëzim për të ndezur dizajne edhe më kreative vetë.
