Si të përzieni kopjen në lëvizje me cilësimet e pozicionit të Divi dhe efektet e lëvizjes

Mënyra se si përdorni në mënyrë krijuese veçoritë e integruara të Divi mund të bëjë një ndryshim në dizajnin e faqes suaj. Efektet lëvizëse të Divi, për shembull, ju lejojnë të krijoni ndërveprime të bukura lëvizëse. Sot ne po shtojmë një mësim tjetër në listën tuaj të gjërave që mund të bëni me efektet e integruara të rrotullimit të Divi. Në mënyrë të veçantë, ne do t'ju tregojmë se si të bashkoni kopjen lëvizëse. Në pamje të parë, kopja vendoset nën imazhin shoqërues. Megjithatë, sapo të lëvizni në një pikë të caktuar, kopja do të shfaqet mbi imazhin e produktit dhe do të fillojë të përzihet me imazhin. Kjo çon në një efekt tërheqës që duket i lehtë. Ju gjithashtu do të jeni në gjendje të shkarkoni skedarin JSON të paraqitjes falas!

Le të shkojnë.

studim

Përpara se të zhytemi në tutorial, le të hedhim një vështrim të shpejtë në rezultatin në madhësi të ndryshme të ekranit.

zyrë

Telefon

Shkarkoni paraqitjen FALAS

Për të marrë në dorë paraqitjen falas, do t'ju duhet t'i shkarkoni ato së pari duke përdorur butonin më poshtë. Për të hyrë në shkarkim, do t'ju duhet të abonoheni në listën tonë të postimeve Divi Daily duke përdorur formë më poshtë. Si pajtimtar i ri, do të merrni edhe më shumë përfitime Divi dhe një paketë Divi Layout falas çdo të hënë! Nëse jeni tashmë në listë, thjesht shkruani adresën tuaj të emailit më poshtë dhe klikoni shkarkim. Nuk do të "reabonoheni" ose nuk do të merrni email shtesë.

Le të fillojmë të rikrijojmë!

Shto 2x seksione mbajtëse vendesh

Shto një seksion të ri

Filloni duke shtuar një seksion mbajtës vendi në faqen në të cilën po punoni.

sizing

Hapni cilësimet e seksionit dhe ndryshoni lartësinë në cilësimet e madhësisë.

Seksioni i klonit

Klononi seksionin një herë. Kjo ju lë me dy seksione mbajtëse vendesh në faqen tuaj. Këto seksione mbajtëse vendesh do t'ju ndihmojnë të shihni efektin përfundimtar pasi të keni kaluar tutorialin. Në një faqe interneti të drejtpërdrejtë, seksionet e mbajtësve të vendeve do të zëvendësohen me seksione normale që përdorni në të gjithë faqen.

Shto seksion të ri midis seksioneve të mbajtësve të vendeve

Pasi të jenë vendosur seksionet e mbajtësit të vendeve, shtoni një seksion të ri midis seksioneve të mbajtësve të vendeve.

Ngjyrë e sfondit

Hapni cilësimet e seksionit dhe përdorni një ngjyrë të bardhë të sfondit.

• Ngjyra e sfondit: #ffffff

ndarje

Kaloni në skedën e dizajnit të seksionit dhe ndryshoni vlerat e mbushjes së sipërme dhe të poshtme në përputhje me rrethanat:

• Mbushja e sipërme: 10vh
• Mbushja e poshtme: 10vh

Shtoni rreshtin # 1

Struktura e kolonës

Vazhdoni duke shtuar një rresht të ri në seksion duke përdorur strukturën e mëposhtme të kolonës:

sizing

Pa shtuar ende asnjë modul, hapni cilësimet e rreshtit, shkoni te cilësimet e madhësisë dhe ndryshoni vlerat maksimale të gjerësisë dhe gjerësisë.

• Gjerësia: 100%
• Gjerësia maksimale: 100%

Shtoni një modul teksti në kolonë

Shto një kopje

Moduli i vetëm që na nevojitet për këtë rresht është një modul teksti. Shtoni një kopje sipas zgjedhjes suaj.

Cilësimet e tekstit

Kaloni në skedën e dizajnit të modulit dhe ndryshoni cilësimet e tekstit në përputhje me rrethanat:

• Shkronja e tekstit: Montserrat
• Pesha e shkronjave të tekstit: Ultra e trashë
• Stili i fontit të tekstit: shkronja të mëdha
• Ngjyra e tekstit: # fff2ea
• Madhësia e tekstit: 11vw
• Lartësia e rreshtit të tekstit: 1 em
• Rreshtimi i tekstit: në qendër

Shtoni rreshtin # 2

Struktura e kolonës

Shtoni një rresht tjetër në seksion duke përdorur strukturën e mëposhtme të kolonës:

sizing

Pa shtuar ende asnjë modul, hapni cilësimet e rreshtit dhe ndryshoni cilësimet e madhësisë si më poshtë:

• Përdorni gjerësinë e personalizuar të ulluqit: Po
• Gjerësia e kanalit: 2
• Gjerësia: 90%
• Shtrirja e linjës: në qendër

Shto modul të imazhit në kolonë

Ngarko një imazh

Shtoni një modul imazhi në kolonën e rreshtit. Ngarko një imazh të zgjedhjes suaj.

radhitje

Kaloni në skedën e dizajnit të modulit dhe ndryshoni shtrirjen e imazhit në përputhje me rrethanat:

sizing

Më pas shkoni te cilësimet e madhësisë dhe detyrojeni modulin me gjerësi të plotë.

Shtoni një modul butoni në kolonë

Shto një kopje

Modi tjetër dhe i fundit që do të shtojmë në kolonë është modaliteti i butonit. Përdorni një kopje të zgjedhjes suaj.

Rreshtimi i butonit

Shkoni te skeda Dizajn dhe ndryshoni shtrirjen e butonit.

Cilësimet e butonit

Më pas stilojeni butonin si më poshtë:

• Përdorni stile të personalizuara për butonin: Po
• Madhësia e tekstit të butonit: 16 px
• Ngjyra e tekstit të butonit: # 000000
• Ngjyra e sfondit të butonit: #ffffff
• Gjerësia e kufirit të butonit: 0 px
• Hapësira e shkronjave të butonave: 2 px
• Fonti i butonit: Montserrat
• Pesha e shkronjave të butonit: bold
• Stili i fontit të butonit: shkronja të mëdha

ndarje

Përdorni gjithashtu vlerat e personalizuara të mbushjes në cilësimet e ndarjes.

• Mbushja e sipërme: 20 px
• Mbushja e poshtme: 20 px
• Mbushja e majtë: 5%
• Mbushja e djathtë: 5%

Shtoni pozicionimin absolut në rreshtin 1

Pasi të keni përfunduar rreshtin e dytë, kthehuni në rreshtin # 1. Hapni cilësimet e rreshtit, shkoni te skedari i avancuar dhe bëni seksionin absolut. Duke bërë këtë, rreshti dhe moduli i tekstit brenda do të vendosen poshtë rreshtit që përmban modulin e imazhit.

• Pozicioni: Absolut
• Vendndodhja: Qendër

Klononi rreshtin n ° 1 dhe vendosni kopjimin nën rreshtin n ° 2

Për të lejuar që moduli i tekstit të shfaqet mbi imazhin, do të na duhet një rresht tjetër me një vlerë më të lartë të indeksit z. Klononi rreshtin e parë dhe vendosni kopjimin poshtë rreshtit të dytë.

Aplikoni efektet në rreshtin 3

Rritja e indeksit Z

Hapni rreshtin e kopjuar dhe ndryshoni indeksin z në skedën e avancuar.

Ndrysho ngjyrën e tekstit

Hapni modulin e tekstit në rresht dhe ndryshoni ngjyrën e tekstit.

Aplikoni modalitetin e përzierjes në linjë

Pastaj hapni cilësimet e rreshtit dhe ndryshoni modalitetin e përzierjes në cilësimet e filtrave.

Përdorni efektin e lëvizjes në modulin e tekstit në rreshtin # 3

Shtoni një efekt fade in dhe fade out

Plotësoni udhëzuesin duke rihapur pjesën e tekstit, duke shkuar te efektet e lëvizjes dhe duke aktivizuar efektin e zbehjes dhe të zbehjes. Kjo eshte!

• Aktivizo fade in and fade out: Po
  • Opaciteti i fillimit: 0%
  • Errësirë ​​mesatare: 0% (deri në 26%)
  • Opaciteti përfundimtar: 100% (në 28%)
• Shkaktësi i efektit të lëvizjes: Mesi i elementit

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.

zyrë

Telefon

Mendimet e fundit

Në këtë artikull, ne ju kemi treguar se si të bëheni krijues me efektet e integruara të lëvizjes së Divi. Në mënyrë të veçantë, ne ju kemi treguar se si të përzieni kopjen me lëvizje. Në fillim, kopja duket të jetë poshtë imazhit. Pas lëvizjes, kopja shfaqet sipër imazhit dhe bashkohet me imazhin. 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ë.

Nëse dëshironi të mësoni më shumë rreth Divi dhe të merrni më shumë falas për Divi, sigurohuni që të abonoheni në faqen tonë gazete me email dhe tek ne Kanali YouTube në mënyrë që të jeni gjithmonë një nga njerëzit e parë që njihni dhe përfitoni nga kjo përmbajtje falas.