Kalo te përmbajtja kryesore

Si të krijoni një tranzicion pa probleme me efektet lëvizëse në Divi

Divi: tema më e lehtë për t'u përdorur nga WordPress

Divi: Tema më e mirë e WordPress të të gjitha kohërave!

më shumë Shkarkimet e 901.000, Divi është tema më e popullarizuar e WordPress në botë. Është i plotë, i lehtë për t'u përdorur dhe vjen me më shumë se shabllona falas 62. [Rekomanduar]

Kur dizajnoni faqen e shërbimeve tuaja, ju doni të siguroheni që vizitorët tuaj të vërejnë të gjitha shërbimet e ndryshme që ju ofroni. Në shumë raste, ky do të jetë vetëm një shërbim specifik që ata po kërkojnë, por nëse ofroni një mënyrë të efektshme në strukturën tuaj të shërbimit, vizitorët tuaj ka më shumë të ngjarë t'i trajtojnë të gjithë. 

Në këtë manual, ne do t'ju tregojmë se si të bëheni krijues me efektet e lëvizjes së Divi dhe të krijoni një tranzicion të përsosur të shërbimit. Ju gjithashtu mund të shkarkoni skedarin JSON falas!

Le të shkojnë.

Rezultati i mundshëm

Para se të zhyteni në tutorial, le të hedhim një vështrim në rezultatin në madhësi të ndryshme të ekranit.

Kalimi ndërmjet pjesës divi

1, rikrijoni strukturën e elementeve

Shtoni seksionin # 1

ndarje

Filloni duke shtuar një seksion të ri në faqen ku po punoni. Hapni cilësimet e seksionit dhe ndryshoni vlerat e mbushjes në madhësi të ndryshme të ekranit.

  • Mbushja e sipërme: 80px (desktop dhe tablet), 0px (telefon)
  • Mbushja e poshtme: 80px
Seksioni i parametrave Divi

Shto një rresht të ri

Struktura e kolonës

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

sizing

Pa shtuar më shumë module, hapni parametrat e linjës dhe zbatoni ndryshimet e mëposhtme në parametrat e dimensionimit:

  • Përdorni një gjerësi të ulluqeve me porosi: Po
  • Gjerësia e zorrës së trashë: 1
  • Gjerësia: 90%
  • Gjerësia maksimale: 1580px
Konfigurimi i ndarjes së ndarjes

ndarje

Pastaj shtoni një diferencë të sipërme dhe të poshtme.

  • Marzhi i sipërm: 200px
  • Marzhi i poshtëm: 200px
Konfigurimi i ndarjes së vijës Divi

Shtoni një modul teksti në kolonën 1

Shto përmbajtje H2

Timeshtë koha për të shtuar module, duke filluar me një modul teksti në kolonën 1. Vendosni çdo përmbajtje H2 që dëshironi.

Shërbimet tona të ofruara nga ekspertët e momentit

Cilësimet e tekstit H2

Shkoni te skeda e modelit dhe ndryshoni cilësimet e tekstit H2 si më poshtë:

  • Titulli 2 Policia: Tremujori
  • Titulli 2 Madhësia e tekstit: 80px (desktop), 50 px (tabletë), 40px (telefon)
  • Lartësia e rreshtit 2 të kokës: 1.2em
Drejtori i policisë divi

ndarje

Pastaj shtoni një diferencë më të ulët në tabletë dhe telefon.

  • Marzhi i poshtëm: 50 pixel (vetëm tablet dhe telefon)
Konfigurimi i ndarjes së tekstit Divi

Shtoni një modul teksti në kolonën 2

Shto përmbajtje

Le të kalojmë në kolonën e dytë. Aty moduli i parë që na duhet është një modul teksti me disa përmbajtje përshkrimi.

Kuti për tekstin divi i përmbajtjes

Cilësimet e tekstit

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

  • Shkronja e tekstit: kabina
  • Stili i shkronjave të tekstit: shkronja të mëdha
  • Ngjyra e tekstit: # 000000
  • Madhësia e tekstit: 18px (desktop), 15px (tabletë), 13px (telefon)
  • Hapësira e shkronjave të tekstit: 3px (desktop), 1px (tablet dhe telefon)
  • Lartësia e vijës së tekstit: 3em
Parametri i tekstit Divi

Shtoni një modul ndarjeje në kolonën 2

dukshmëri

Moduli tjetër dhe i fundit që na duhet në këtë kolonë është një modul i ndarjes. Sigurohuni që opsioni "Trego ndarësin" të jetë i aktivizuar.

  • Trego ndarësin: Po
Ndarës i dukshëm

Linjë

Pastaj ndryshoni ngjyrën e linjës së modulit.

Krijoni me lehtësi faqen tuaj të internetit me Elementor

Elementor ju lejon të krijoni me lehtësi çdo dizajn të faqes në internet me një pamje profesionale. Ndaloni të paguani shtrenjtë për ato që mund të bëni vetë. [Pa]

  • Ngjyra e linjës: # 000000
Sfondi me ngjyra ndarëse

sizing

Pastaj bëni disa ndryshime në parametrat e madhësisë.

  • Pesha e ndarësit: 3px
  • Gjerësia: 28%
Madhësia e ndarësit të divit

ndarje

Ne gjithashtu shtojmë një diferencë të lartë.

  • Marzhi i sipërm: 10px
Hapësira e moduleve të ndarësit Divi

Shtoni seksionin # 2

ndarje

Le të kalojmë në seksionin tjetër të rregullt. Hiqni mbushjen e parazgjedhur të sipërme nga seksioni.

  • Mbushja e sipërme: 0px
Seksioni 2 ndarja e ndarjes

përplot

Fshihni edhe rrjedhjet e tejmbushura.

  • Rrjedhja horizontale: e fshehur
  • Vërshimi vertikal: i fshehur
Fshih mbingarkesat e modulit divi

Shto një rresht të ri

Struktura e kolonës

Vazhdoni të shtoni një rresht të parë duke përdorur strukturën e kolonës së mëposhtme:

Zgjidhni një paraqitje divi

sizing

Pa shtuar më shumë module, hapni parametrat e linjës, hyrni në parametrat e dimensionimit dhe bëni modifikimet e mëposhtme:

  • Përdorni një gjerësi të ulluqeve me porosi: Po
  • Gjerësia e zorrës së trashë: 1
  • Barazoni lartësitë e kolonave: Po
  • Gjerësia: 90%
  • Gjerësia maksimale: 1580px
Seksioni i ndarjes së konfigurimit të ullukut

ndarje

Pastaj hiqni të gjithë mbushjen e paracaktuar të sipërme dhe të poshtme.

  • Mbushja e sipërme: 0px
  • Mbushja e poshtme: 0px
Cilësimet e hapësirës së modulit Divi 1

Cilësimet e kolonës 1

Ngjyrë e sfondit

Pastaj hapni cilësimet për kolonën 1 dhe ndryshoni ngjyrën e sfondit.

  • Ngjyra e sfondit: # f7f7f7
Konfigurimi i sfondit të modulit të linjës Divi

ndarje

Përfundoni cilësimet e kolonës duke shtuar vlera të personalizuara të mbushjes në madhësi të ndryshme të ekranit.

  • Mbushja e sipërme: 200px (tavolinë), 100 px (tablet dhe telefon)
  • Mbushja e poshtme: 200px (tavolinë), 100 px (tabletë dhe telefon)
  • Mbushja e majtë: 8%
  • Mbushja e duhur: 8%
Cilësimet e kolonës së modulit rresht

Cilësimet e kolonës 2

ndarje

Vazhdoni duke hapur cilësimet në kolonën 2. Shkoni te skeda e përparuar dhe shtoni vlera të personalizuara të mbushjes në madhësi të ndryshme të ekranit.

  • Mbushja kryesore: 100px (desktop), 50 px (tablet dhe telefon)
  • Mbushja e poshtme: 200px
  • Mbushja e majtë: 150 px (tavolinë), 0 px (tablet dhe telefon)
Cilësimet e ndarjes së modulit Divi

Shtoni një modul ndarjeje në kolonën 1

dukshmëri

Në kolonën e parë, moduli i parë që na duhet është një modul ndarës. Sigurohuni që opsioni "Trego ndarësin" të jetë i aktivizuar.

A po kërkoni temat më të mira të WordPress dhe shtojcat?

Shkarkoni shtojcat më të mira dhe temat e WordPress në Envato dhe krijoni lehtësisht faqen tuaj te internetit. Tashmë më shumë se shkarkimet e 49.720.000. [EXCLUSIVE]

  • Trego ndarësin: Po
Trego ndarësin divi 1

Linjë

Pastaj ndryshoni ngjyrën e linjës së modulit.

  • Ngjyra e linjës: # 000000
Cilësimet e ndarësit të divit

sizing

Bëni gjithashtu ndryshime në parametrat e madhësisë.

  • Pesha e ndarësit: 3px
  • Gjerësia: 50%
Madhësia e ndarësit të divit

Shtoni një modul teksti në kolonën 1

Shto përmbajtje H3

Moduli tjetër që na nevojitet në kolonën 1 është një modul teksti me përmbajtje H3.

Cilësimi i seksionit të përmbajtjes Divi

Cilësimet e tekstit H3

Kaloni në skedën e dizajnit të modulit dhe ndryshoni cilësimet e tekstit H3:

  • Titulli 3 Policia: Tremujori
  • Ngjyra e tekstit të artikullit 3: # 000000
  • Pika 3 Madhësia e tekstit: 50px (desktop), 40px (tabletë), 35px (telefon)
  • Lartësia e rreshtit 3 të kokës: 1.1em

Shtoni një modul teksti në kolonën 2

Shto përmbajtje

Në kolonën e dytë, moduli i parë që na duhet është një modul teksti me disa përmbajtje përshkrimi.

Cilësimi i modulit të tekstit Divi

Cilësimet e tekstit

Ndryshoni cilësimet e tekstit të modulit si më poshtë:

  • Shkronja e tekstit: kabina
  • Stili i shkronjave të tekstit: shkronja të mëdha
  • Madhësia e tekstit: 18px (desktop), 15px (tabletë), 13px (telefon)
  • Hapësira e shkronjave të tekstit: 3px (desktop), 1px (tablet dhe telefon)
  • Lartësia e vijës së tekstit: 3em
Rregullimi i shkronjave të formës së tekstit Divi

Shtoni një modul butoni në kolonën 2

Shto një kopje

Moduli tjetër dhe i fundit që na duhet është një modul butoni. Vendosni një kopje të zgjedhjes suaj.

Cilësimi i përmbajtjes së modulit të tekstit

Cilësimet e butonit

Pastaj stilo butonin.

  • Përdorni stilet me porosi për butonin: Po
  • Madhësia e tekstit të butonit: 20 piksele
  • Ngjyra e tekstit të butonit: #ffffff
  • Ngjyra e sfondit të butonit: # 000000
  • Gjerësia e kufirit të butonit: 0px
Cilësimi i stilit të butonit Divi
  • Font Butoni: Tremujor
  • Pesha e shkronjave të butonit: e theksuar
Cilësimet e ngjyrave të butonit Divi

ndarje

Shtoni gjithashtu mbushjen me porosi.

  • Mbushja e sipërme: 50px
  • Mbushja e poshtme: 50px
  • Mbushja e majtë: 100px
  • Mbushja e duhur: 100px
Cilësimet e hapësirës së butonit të modulit Divi

pozitë

Dhe ripoziciononi butonin në përputhje me rrethanat:

  • Pozicioni: Absolut
  • Vendndodhja: majtas
Rregullimi i pozicionit të modulit të butonit Divi

Klononi rreshtin sa herë të jetë e nevojshme

Pasi të keni përfunduar të gjithë rreshtin dhe të gjitha modulet e saj, mund të klononi të gjithë rreshtin tri herë.

Moduli i klonit divi

Ndryshoni të gjithë përmbajtjen

Sigurohuni që të redaktoni të gjithë përmbajtjen në rreshta të kopjuar.

Redaktoni përmbajtjen e seksionit divi

2. Aplikoni efektet lëvizëse

Efektet lëvizëse të rreshtit të parë

Lëvizja horizontale

Pasi të keni përfunduar të gjitha linjat në seksionin tuaj, është koha të shtoni efektet e lëvizjes. Hapni vijën e parë të seksionit dhe shtoni lëvizje horizontale.

  • Aktivizoni lëvizjen horizontale: Po
  • Fillimi i kompensimit: -5
  • Kompensimi mesatar: 0 (me 26%)
  • Përfundimi i kompensimit: 0
  • Efekti i lëvizjes së këmbëzës: mesi i elementit
Zbatoni efektet e scrolling divi

Zbehet brenda dhe jashtë

Përdorni gjithashtu një efekt venitje dhe hyrëse.

  • Aktivizoni zbehet brenda dhe jashtë: Po
  • Opaciteti fillestar: 100%
  • Opaciteti mesatar: 100% (me 50%)
  • Hapësia e mbarimit: 0% (në 53%)
  • Efekti i lëvizjes së këmbëzës: mesi i elementit
Konfiguro divi i seksionit të animacionit zbeh

Efektet lëvizëse të rreshtit të mesëm

Lëvizja vertikale

Tjetra, ne do të shtojmë efektet e lëvizjes në të gjitha linjat midis rreshtit të parë dhe të fundit të seksionit. Së pari përdorni një lëvizje vertikale:

Lehtë të krijoni Dyqanin tuaj Online

Shkarko pa pagesë WooCommerce, shtojcat më të mira të tregtisë elektronike për të shitur produktet tuaja fizike dhe digjitale në WordPress. [Rekomanduar]

  • Aktivizoni lëvizjen vertikale: Po
  • Fillimi i kompensimit: -4
  • Kompensimi mesatar: 0 (me 26%)
  • Përfundimi i kompensimit: 0
  • Efekti i shkatjes së lëvizjes: mesi i elementit
Konfigurimi i aniation scrolling Divi

Zbehet brenda dhe jashtë

Aktivizoni gjithashtu një efekt brenda dhe jashtë zbehet.

  • Aktivizoni zbehet brenda dhe jashtë: Po
  • Opaciteti fillestar: 0%
  • Opaciteti mesatar: 100% (nga 27% në 50%)
  • Përfundimi i kompensimit: 0 (me 53%)
  • Efekti i lëvizjes së këmbëzës: mesi i elementit
Animacion i zbehur i linjës Divi

Efektet lëvizëse të linjës së fundit

Lëvizja vertikale

Pastaj hapni rreshtin e fundit të seksionit dhe shtoni lëvizjen vertikale të mëposhtme:

  • Aktivizoni lëvizjen vertikale: Po
  • Fillimi i kompensimit: -4
  • Kompensimi mesatar: 0 (me 26%)
  • Përfundimi i kompensimit: 0
  • Efekti i lëvizjes së këmbëzës: mesi i elementit
Moduli i vijës ndarëse të lëvizjes së animacionit

Zbehet brenda dhe jashtë

Me një efekt venitje dhe dalëse dhe ju jeni mbaruar!

  • Aktivizoni zbehet brenda dhe jashtë: Po
  • Opaciteti fillestar: 0%
  • Opaciteti mesatar: 100% (nga 27% në 50%)
  • Hapësia e mbarimit: 100% (në 53%)
  • Efekti i lëvizjes së këmbëzës: mesi i elementit
Cilësimet e animacionit të paraqitjes së modulit të linjës Divi

Rezultati përfundimtar

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.

Demo përfundimtare

Mendimet e fundit

Në këtë artikull, ne ju kemi treguar se si të krijoni një tranzicion të bukur shërbimi me efektet lëvizëse të Divi. Edhe para se një shërbim të zhduket, tjetri fillon të shfaqet, duke i dhënë një tranzicion të bukur të këndshëm syrit. Kjo qasje do t'ju ndihmojë të theksoni çdo shërbim në një nivel individual. 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ë.

Ky artikull përmban komente 0

Lini një koment

Adresa juaj e emailit nuk do të publikohet. Fusha e kërkuar janë shënuar *

Kjo faqe përdor Akismet për të zvogëluar padëshiruar. Mësoni më shumë për mënyrën se si përdoren të dhënat e komenteve tuaja.

Kthehu në fillim
0 aksionet
pjesë
cicërimë
Regjistrohem