Velika slova pružaju okvir za tekst koji se pomera site Web koji privlače čitaoce korisnim isječcima sadržaja. Nazivaju se i tikeri (ili tikeri vijesti) i često se koriste za prikaz stalnog toka ažuriranja vijesti na vrhu ili dnu stranice. . Obično se animacija pomicanja radi s jednom linijom sadržaja u petlji tako da se informacije više puta prikazuju. Nažalost, the <marquee>Od html tag je zastarjela, mi se oslanjamo na CSS i JavaScript stvoriti okvire ovih dana. Međutim, s Divi-om možete stvoriti jednostavan pravokutnik za odabir bez brige o prilagođenom kodu.

U ovom uputstvu ćemo objasniti kako je lako stvoriti jednostavan tekst odabira pomoću Divi-a. Vidjet ćemo čak i kako pauzirati pomicanje animacije teksta pri prelasku mišem i kako dodati veliki pomični tekst kao jedinstveni element dizajna za zaglavlja.

Počnimo.

pregled

Šta vam je potrebno za početak

Da biste započeli, potrebno vam je sljedeće:

1. Le Divi tema instaliran i aktivan
2. Nova stranica stvorena za izgradnju od nule na prednjem dijelu (vizualni konstruktor)

Nakon toga imat ćete prazno platno za početak dizajniranja u Divi-ju.

Početak začeća

Evo kako to učiniti.

Započnite kreiranjem redovnog odjeljka s redom stupca.

• Maksimalna širina: 200px
• Tapaciranje: 10px na vrhu, 10px na dnu
• Okrugli uglovi: 10px
• Box Shadow: vidi screenshot
• Vodoravni preliv: skriven
• Vertikalni preliv: skriven

Dodajte tekstualni modul

Kad je redak dovršen, dodajte novi tekstualni modul.

Zatim ažurirajte sadržaj tijela jednim redom teksta. Za sada, pazite da se red teksta ne podijeli u drugi red.

• Tijelo: "Ovo je rečenica"

Dizajn tekstualnog modula

Ažurirajte parametre dizajna tekstualnog modula na sljedeći način:

• Granica: -100% s lijeve strane, 100% s desne strane

Ovo pozicionira tekstualni modul s lijeve strane linije. Od kada vidljivost skriveni red je skriven, modul će biti skriven sve dok ne dodamo animaciju da ga učinimo vidljivim.

• Animacija Style: Slide
• Smjer animacije: Tačno
• Trajanje animacije: 5000ms
• Intenzitet animacije: 100%
• Pokretanje neprozirnosti animacije: 100%
• Animacija krivulje brzine: linearna
• Ponovite animaciju: Petlja

rezultat

Da vidimo sada rezultat.

Izrada dužih linija teksta

Gornjim jednostavnim odabirom dizajna teksta ograničili smo širinu retka teksta na istu širinu kao i linija. Međutim, ako želimo da se stvori više linija teksta sa iste širine, mi ćemo morati da podesiti postavke malo.

Prvo, na modulu teksta i telo teksta zamenite sledećim:

Ovo je faza s vezom

Dodajte više širine i margine kako bi stali u najduži redak teksta

Kao što ste mogli primijetiti, tekst je podijeljen u tri retka umjesto u jedan.

Stoga, moramo prilagoditi margine i intenzitet animacije.

• Širina: 207%
• Granica: -207% s lijeve strane, 207% s desne strane
• Intenzitet animacije: 75%

Trik je ovdje povećati širinu i ažurirati vrijednosti margina tako da ostane samo dovoljno prostora za jedan redak teksta. zatim prilagodite intenzitet animacije tako da nema velike pauze između petlje animacije.

rezultat

Evo konačnog rezultata.

Pauzirajte odabranu tekstualnu animaciju u letu

Pošto je ovaj pravougaonik izbor uključuje vezu, to će biti teško za korisnike da kliknu na link dok se krećete. Međutim, možemo dodati malo isječak CSS teksta modul koji će pauzirati animaciju na hover.

Dodajte ekstrakt CSS animacije da biste zaustavili prelet

Da biste dodali CSS kod isječak, otvorite postavke teksta modula i dodajte sljedeće običaj CSS glavni element u kartici hover :

animacija-igra-stanje: pauzirano;

Konačni rezultat

Dakle, vidite krajnji rezultat. Imajte na umu da se animacija teksta zaustavlja kada se pokazivač zadrži iznad teksta, omogućavajući korisniku da klikne na vezu.

To je to za ovaj tutorijal, nadam se da ste naučili da dodate scrolling tekst Divi.