Kalo te përmbajtja kryesore

Si të shtoni një sportel të animuar për të lëvizur 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]

Numëruesit e numrave të animuar janë të njohur në internet si një mënyrë për të shfaqur të dhëna numerike për të nxjerrë në pah vlerën e shërbimeve, studimet e rasteve, etj. Divi ka një modul të veçantë të numëruesit, i cili mund të përdoret për të gjeneruar me lehtësi numërues të numrave të animuar.

Sidoqoftë, në këtë manual, ne do t'ju tregojmë se si të krijoni sportele dixhitale që gjallërohen gjatë lëvizjes duke përdorur Divi. Duke përdorur opsionet e pozicionit dhe efektet e lëvizjes së Divi, ne do të hartojmë një plan urbanistik të thjeshtë për të shfaqur një datë me numrat e lëvizjes.

Pjesa 1: Krijimi i seksionit të titullit

Në këtë pjesë të parë, ne do të krijojmë një titull të thjeshtë për paraqitjen.

Së pari, shtoni një rresht të një kolone në seksion.

Regjistroni një modul të seksionit divi

Pastaj shtoni një modul të ri teksti në rresht.

Përditësoni përmbajtjen e modulit të tekstit me sa vijon:

Ruaje datën
Ruani datën 1

Pastaj azhurnoni stilin e tekstit të kokës si më poshtë:

  • Titulli 2 Font: Prata
  • Pika 2 Madhësia e tekstit: 130px (desktop), 70px (tabletë), 40px (telefon)
Modifikimi i titullit Divi

Pjesa 2: Krijimi i sporteleve me animacion lëvizës

Në këtë pjesë tjetër, ne do të krijojmë tre sportele që do të gjallërojnë numrat lëvizës derisa të ndalojnë për të shfaqur një datë (muaj, ditë dhe vit). Secili sportel do të ndërtohet duke përdorur gjithsej 5 module të tekstit dhe një modul ndarës. Moduli i parë i tekstit do të shërbejë si etiketë e banakut (d.m.th. muaji, dita, viti). Katër modulet e ardhshme të tekstit do të përmbajnë secili një numër tjetër (në progres) i cili do të animohet gjatë lëvizjes duke përdorur ndërprerjet e lëvizjes vertikale në Divi. Moduli më i ulët i ndarjes do të ndihmojë në fshehjen e tejmbushjes së numrave.

Ja se si.

Shtoni një rresht të dytë

Nën rreshtin ekzistues, shtoni një rresht tjetër në një kolonë.

Cilësimet e linjës

Para se të shtoni një modul, azhurnoni parametrat e rreshtit si më poshtë:

  • Gjerësia e zorrës së trashë: 1
  • Mbushje: 0px e lartë, e ulët 0px
Konfigurimi i kufirit Divi

Parametrat e kolonës

Pastaj hapni cilësimet e kolonës dhe azhurnoni plotësimin si më poshtë:

  • Mbushje (tavolinë): 100px ulët
  • Mbushje (tabletë dhe telefon): 0 pikë e ulët
Konfigurimi i ndarjes së kolonës Divi

Shto një modul teksti

Pastaj shtoni një modul teksti në kolonë.

Shtoni një modul të tekstit divi

Përmbajtja / etiketa

Për përmbajtjen e modulit të tekstit, shtoni fjalën "muaj".

Specifikoni divi muaj

Cilësimet e hartimit të tekstit

Pas shtimit të përmbajtjes, azhurnoni cilësimet e dizajnit si më poshtë:

  • Ngjyra e sfondit: #ffffff
  • Shkronja e tekstit: Flasim
  • Madhësia e tekstit: 40px
  • Lartësia e vijës së tekstit: 2em
  • Gjerësia: 100%
  • Padding: 20 pixel në krye, 20 pixel në fund, 20 pixel në të majtë, 20 pixel në të djathtë
  • Gjerësia e poshtme e kufirit: 5px
  • Ngjyra e kufirit të poshtëm: #eeeeee
pozitë

Pastaj nën skedën e përparuar, azhurnoni opsionet e pozicionit si më poshtë:

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]

  • Pozicioni: Relativ
  • Indeksi Z 1
Modul wordpress i Pratës

Shtoni një modul teksti për numrin e parë

Pasi të jetë vendosur moduli i parë i tekstit, ne mund të fillojmë të shtojmë numrat që do të lëvizin në lëvizje. Për të shtuar numrin e parë, shtoni një modul të ri teksti nën modulin ekzistues të tekstit "Muaji".

Shto modul teksti tregimtar

Shtoni numrin / përmbajtjen

Pastaj azhurnoni etiketën e modulit të tekstit për të lexuar "num1" për referencë më të lehtë. Pastaj azhurnoni përmbajtjen me numrin "01".

Shto modulin e numrave divi

Cilësimet e projektimit për numrin

Nën skedën e dizajnit, azhurnoni sa vijon:

  • Shkronja e tekstit: Prata
  • Ngjyra e tekstit të tekstit: # 8ab2d3
  • Madhësia e tekstit të tekstit: 70px
  • Hapësira e shkronjave të tekstit: 4px
  • Lartësia e vijës së tekstit: 1.5em
  • Mbushja: 20px majtas
Konfigurimi i ngjyrave Divi

SHENIM: Numrat kanë një madhësi të tekstit prej 70px dhe një lartësi prej 1.5em, që do të thotë që lartësia totale e modulit të tekstit do të jetë afër 100px. Kjo është e rëndësishme të mbani në mend sa herë që fillojmë të shtojmë kompensimet lëvizëse vertikale. Për shembull, shtimi i një kompensimi vertikal të "1" në modulin e tekstit do të lëvizë modulin e tekstit saktësisht 100px që është lartësia e modulit të tekstit.

Efektet lëvizni për numrin e parë

Shtoni efektet e mëposhtme të lëvizjes në modulin e tekstit.

Nën skedën vertikale të lëvizjes, azhurnoni sa vijon:

  • Aktivizoni lëvizjen vertikale: PO
  • Fillimi i kompensimit: 1 (me 10%)
  • Kompensimi mesatar: 0 (me 20%)
  • Përfundimi i kompensimit: -1 (me 30%)

Në skedën Fade In dhe Fade Out, azhurnoni sa vijon:

  • Aktivizoni zbehet brenda dhe jashtë: PO
  • Opaciteti fillestar: 0% (me 10%)
  • Opaciteti mesatar: 100% (me 20%)
  • Hapësia e mbarimit: 0% (në 30%)

Sigurohuni që të vendosni këmbëzën për efektin e lëvizjes në krye të klipit:

  • Shkak i efektit të lëvizjes: Elementi i sipërm
Teksti divi i modulit të animimit të konfigurimit

Krijoni modulin e tekstit për numrin e dytë

Kopjoni numrin e parë

Pasi të krijohet numri i parë, kopjoni atë për të krijuar modulin e tekstit të numrit të dytë. Pastaj azhurnoni etiketën në pamjen e shtresave për referencë më të mirë.

Kopjoni modulin e tekstit divi 1

Përditësoni numrin / përmbajtjen

Hapni parametrat e modulit të dytë të tekstit dixhital dhe azhurnoni përmbajtjen me numrin "02".

Ruaj numrin 2 divi

Pozicioni i azhurnuar

Pastaj azhurnoni opsionet e pozicionit si më poshtë:

  • Pozicioni: Absolut
  • Kompensimi vertikal: 126px
Pozicioni modifikues i modulit të tekstit divi

Azhurnoni efektet lëvizëse

Pastaj azhurnoni efektet lëvizëse si më poshtë:

Në skedën Lëvizja vertikale, azhurnoni sa vijon:

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]

  • Fillimi i kompensimit: 1 (me 20%)
  • Kompensimi mesatar: 0 (me 30%)
  • Përfundimi i kompensimit: -1 (me 40%)

Në skedën Fade In dhe Fade Out, azhurnoni sa vijon:

  • Opaciteti fillestar: 0% (me 20%)
  • Opaciteti mesatar: 100% (me 30%)
  • Hapësia e mbarimit: 0% (në 40%)
Divi i efektit të lëvizjes së animacionit

Krijoni një modul teksti për numrin e tretë

Kopjoni numrin e dytë

Për të krijuar modulin e tekstit për numrin e tretë, kopjoni modulin e tekstit për numrin e dytë.

Kopjoni numrin e modulit të tekstit 3

Përditësoni numrin / përmbajtjen

Përditësoni përmbajtjen me numrin "03".

Modifikoni modulin e tekstit divi

Azhurnoni efektet lëvizëse

Pastaj azhurnoni efektet lëvizëse:

Në skedën Lëvizja vertikale, azhurnoni sa vijon:

  • Fillimi i kompensimit: 1 (me 30%)
  • Kompensimi mesatar: 0 (me 40%)
  • Përfundimi i kompensimit: -1 (me 50%)

Në skedën Fade In dhe Fade Out, azhurnoni sa vijon:

  • Opaciteti fillestar: 0% (me 30%)
  • Opaciteti mesatar: 100% (me 40%)
  • Hapësia e mbarimit: 0% (në 50%)
Redakto animacionin e modulit të tekstit

Krijoni një modul teksti për numrin e katërt

Ështja e tretë e kopjuar

Për të krijuar numrin e katërt për banakun lëvizës, kopjoni modulin e tekstit për numrin e tretë.

Kopjoni numrin e divit të modulit të tekstit 4

Përditësoni numrin / përmbajtjen

Përditësoni përmbajtjen me numrin "04".

Konfiguro vlerën e modulit të tekstit divi

Azhurnoni efektet lëvizëse

Pastaj azhurnoni efektet lëvizëse:

Në skedën Lëvizja vertikale, azhurnoni sa vijon:

  • Fillimi i kompensimit: 1 (me 40%)
  • Kompensimi mesatar: 0 (me 50%)
  • Përfundimi i kompensimit: 0 (me 60%)

Në skedën Fade In dhe Fade Out, azhurnoni sa vijon:

  • Opaciteti fillestar: 0% (me 40%)
  • Opaciteti mesatar: 100% (me 50%)
  • Hapësia e mbarimit: 100% (në 60%)
Moduli i konfigurimit të animacionit 4 divi

Shtoni një ndarës më të ulët

Nën modulin e fundit të tekstit, shtoni një modul të ri ndarës. Kjo do të përdoret për të fshehur tejmbushjen e poshtme të tekstit lëvizës në pamje.

Shto modulin ndarës divi

Pastaj zgjidhni JO për të shfaqur ndarësin.

Mos shfaq ndarësin divi

Cilësimet e stilit dhe pozicionit

Përditësoni modelin e ndarësit si më poshtë:

  • Ngjyra e sfondit: #ffffff
  • Gjerësia: 100%
  • Lartësia: 100px
  • Gjerësia e kufirit të sipërm: 5px

Në skedën Advanced, azhurnoni sa vijon:

  • Actaktivizoni në: telefon dhe tablet
  • Pozicioni: Absolut
  • Vendndodhja: majtas

E RANTNDSISHME: Hapësira që do të zërë ndarësi u krijua më herët duke shtuar mbushjen e poshtme të 100 pikselëve në kolonë. Nëse nuk e shtoni këtë mbushje, ndarësi do të mbivendosë shifrat.

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]

Krijimi i sporteleve dhe kolonave shtesë

Kopjoni kolonën 1 dhe azhurnoni përmbajtjen

Për të krijuar një banak të ri, kopjoni kolonën 1. Kjo do të krijojë një kolonë të dytë me të gjitha elementet në vend automatikisht.

Atëherë gjithçka që duhet të bëni është të azhurnoni përmbajtjen e të gjitha moduleve të tekstit me tekste dhe numra të rinj.

Dublikoni të gjithë divin e kolonës

Kopjoni kolonën 2 dhe azhurnoni përmbajtjen

Sapo përmbajtja e të gjitha moduleve të tekstit të azhurnohet në kolonën 2, kopjoni kolonën 2 për të krijuar një numërues të tretë për vitin. Pastaj azhurnoni përmbajtjen e secilit modul teksti sipas nevojës.

Rezultati përfundimtar

Këtu është rezultati përfundimtar.

Burime të tjera

Mendimet e fundit

Kjo paraqitje e thjeshtë me numërues të numrave lëvizës të animuar duhet të jetë e dobishme për shfaqjen e të dhënave dixhitale në një mënyrë të re dhe unike. Mos hezitoni të hiqni dorë nga koncepti i datës dhe përdorni sportelet për gjithçka që mund të ëndërroni!

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