Shkronjat e mëdha të tekstit ofrojnë një kuti teksti lëvizëse tek ju Site Web që angazhon lexuesit me fragmente të dobishme nga përmbajtje. Ata quhen gjithashtu tregues (ose lajmërues) dhe shpesh përdoren për të shfaqur një rrjedhë të qëndrueshme të përditësimeve të lajmeve në krye ose në fund të faqes. . Zakonisht, animacioni lëvizës bëhet me një rresht të vetëm përmbajtje në një lak në mënyrë që informacioni të shfaqet në mënyrë të përsëritur. Për fat të keq, të <marquee>Etiketa html është e vjetëruar, ne mbështetemi në CSS dhe JavaScript për të krijuar marques këto ditë. Sidoqoftë, me Divi, mund të krijoni një drejtkëndësh të thjeshtë përzgjedhjeje pa u shqetësuar për kodin personal.

Në këtë tutorial, ne do t'ju tregojmë se sa e lehtë është të krijoni tekst të thjeshtë të theksuar me Divi. Madje do të shikojmë se si të ndalojmë animacionin e tekstit në lëvizje në lëvizje dhe si të shtojmë tekst të madh lëvizës si një element i vetëm dizajni për kokat tuaja.

Le të fillojë.

studim

Çfarë duhet të filloni

Për të filluar, ju nevojiten këto:

1. Le Tema divi i instaluar dhe aktiv
2. Një faqe e re e krijuar për të ndërtuar nga e para në pjesën e përparme (konstruktor vizual)

Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.

Fillimi i Konceptimit

Për këtë shembull të parë, ne do të krijojmë një drejtkëndësh të thjeshtë teksti për një rresht të tekstit. Për ta bërë këtë, ne do t'i japim një rreshti një gjerësi maksimale me tejmbushjen e fshehur. Tjetra, ne do të shtojmë animacionin rrëshqitës looping në një modul teksti që përmban vijën e tekstit në mënyrë që të rrëshqasë vazhdimisht në vijë, si një drejtkëndësh.

Ja se si ta bëjmë atë.

Filloni duke krijuar një seksion të rregullt me ​​një rresht të një kolone.

Pastaj, para se të shtoni një modul, azhurnoni rreshtin me një gjerësi fikse, kutinë e hijes dhe rrezen, si më poshtë:

• Gjerësia maksimale: 200px
• Mobilje tapiceri: 10px në krye, 10px në fund
• Qoshet e rrumbullakëta: 10px
• Shadow Box: shih screenshot
• Rrjedhja horizontale: e fshehur
• Vërshimi vertikal: i fshehur

Shtoni modulin e tekstit

Kur linja të përfundojë, shtoni një modul të ri teksti në rresht.

Më pas përditësoni përmbajtje të trupit me një rresht të vetëm teksti. Tani për tani, sigurohuni që rreshti i tekstit të mos ndahet në një rresht tjetër.

• Trupi: "Kjo është një fjali"

Modeli i modulit të tekstit

Azhurnoni parametrat e dizajnit të modulit të teksteve si më poshtë:

• Margjina: -100% në të majtë, 100% në të djathtë

Kjo pozicionon modulin e tekstit jashtë së majtës së rreshtit. Meqenëse dukshmëria e fshehur e linjës është e fshehur, moduli do të fshihet derisa të shtojmë animacion për ta bërë atë të dukshëm.

• Stili i animacionit: Slide
• Drejtimi i animacionit: Djathtas
• Kohëzgjatja e animacionit: 5000ms
• Intensiteti i animacionit: 100%
• Animation duke filluar opacitetin: 100%
• Animimi i kurbës së shpejtësisë: lineare
• Përsëriteni animacionin: Lak

Rezultat

Le ta shohim rezultatin tani.

Krijimi i vijave më të gjata të tekstit

Në hartimin e thjeshtë të hartimit të tekstit më lart, ne e kufizuam gjerësinë e rreshtit të tekstit në të njëjtën gjerësi si vija. Sidoqoftë, nëse duam të krijojmë një rresht më të gjatë teksti me të njëjtën gjerësi, do të duhet të rregullojmë pak cilësimet.

Së pari, në modulin e tekstit dhe zëvendësoni trupin e tekstit me sa vijon:

Kjo është një fazë me një lidhje

Shtoni më shumë gjerësi dhe diferencë për t'iu përshtatur rreshtit më të gjatë të tekstit

Siç mund ta vini re, teksti është i ndarë në tre rreshta në vend të një.

Prandaj, ne duhet të rregullojmë marzhin dhe intensitetin e animacionit.

• Gjerësia: 207%
• Margjina: -207% në të majtë, 207% në të djathtë
• Intensiteti i animacionit: 75%

Qëllimi këtu është që të rritet gjerësia dhe të azhurnohen vlerat e margjinës në mënyrë që të mbetet vetëm hapësirë ​​e mjaftueshme për një rresht të vetëm teksti. Pastaj rregulloni intensitetin e animacionit në mënyrë që të mos ketë asnjë ndërprerje të madhe midis animacionit looping.

Rezultat

Këtu është rezultati përfundimtar.

Ndalo animacionin e tekstit të përzgjedhjes

Meqenëse kjo përzgjedhje e xhamave përfshin një lidhje, do të jetë e vështirë për përdoruesit të klikojnë në linkun gjatë lëvizjes. Sidoqoftë, ne mund të shtojmë një copë të vogël css në modulin e tekstit që do të ndërpresë animacionin.

Shto copë CSS për të ndaluar animacionin në rri pezull

Për të shtuar copën css, hapni cilësimet e modulit të tekstit dhe shtoni kodin e mëposhtëm të personalizuar CSS në elementin kryesor nën skedën e rri pezull :

animacion-lojë-gjendje: pauzë;

Rezultati përfundimtar

Tani shikoni rezultatin përfundimtar. Vini re se animacioni i tekstit ndalet kur kursori rri pezull mbi tekst, duke e lejuar përdoruesin të klikojë në lidhjen.

Kjo është e gjitha për këtë manual, shpresoj se ju ka mësuar se si të shtoni një tekst lëvizës në Divi.