Store bokstaver gir en rullende tekstboks til din nettstedet Web som engasjerer leserne med nyttige utdrag fra innhold. De kalles også tickers (eller nyhetstickere) og brukes ofte til å vise en jevn strøm av nyhetsoppdateringer øverst eller nederst på siden. . Vanligvis gjøres rullende animasjon med en enkelt linje av innhold i en loop slik at informasjonen vises gjentatte ganger. Dessverre <marquee>Siden html-taggen er foreldet, stoler vi på CSS og JavaScript for å lage partytelt i disse dager. Imidlertid, med Divi, kan du opprette et enkelt valgrektangel uten å bekymre deg for den tilpassede koden.

I denne opplæringen forklarer vi hvor enkelt det er å lage en enkel markeringstekst med Divi. Vi vil til og med se hvordan du setter rullende tekstanimasjon på pause, og hvordan du legger til stor rulletekst som et unikt designelement for overskriftene dine.

La oss begynne.

undersøkelsen

Hva du trenger for å komme i gang

For å komme i gang trenger du følgende:

1. Le Divi-tema installert og aktiv
2. En ny side laget for å bygge fra bunnen av på front-enden (visuell konstruktør)

Etter det vil du ha et blankt lerret for å begynne å designe i Divi.

Begynnelsen av unnfangelsen

For dette første eksemplet lager vi et enkelt tekstrektangel for en tekstlinje. For å gjøre dette, vil vi gi en rad en maksimal bredde med overløpet skjult. Deretter skal vi legge til looping lysbildeanimasjon til en tekstmodul som inneholder tekstlinjen, slik at den gjentatte ganger glir inn i linjen, som et rektangel.

Slik gjør du det.

Begynn med å opprette en vanlig seksjon med en rad med en kolonne.

Før du legger til en modul, oppdater deretter raden med en fast bredde, skyggeboks og radius, slik:

• Maksimal bredde: 200px
• Polstring: 10px øverst, 10px nederst
• Runde hjørner: 10px
• Box Shadow: se skjermbilde
• Horisontalt overløp: skjult
• Vertikal overløp: skjult

Legg til tekstmodulen

Når linjen er fullstendig, legger du til en ny tekstmodul på linjen.

Oppdater deretter innhold av brødteksten med en enkelt tekstlinje. Foreløpig må du passe på at tekstlinjen ikke deles opp i en annen linje.

• Kropp: "Dette er en setning"

Tekstmoduldesign

Oppdater tekstmoduldesignparametrene som følger:

• Marginen: -100% til venstre, 100% til høyre

Dette plasserer tekstmodulen utenfor venstre side av linjen. Siden linjens skjulte synlighet er skjult, blir modulen skjult til vi legger til animasjon for å gjøre den synlig.

• Animasjonsstil: Lysbilde
• Animasjonsretning: Høyre
• Animasjonens varighet: 5000ms
• Animasjonsintensitet: 100%
• Animasjon Starter opacitet: 100%
• Animasjon av hastighetskurven: lineær
• Gjenta animasjonen: Loop

Resultat

La oss se resultatet nå.

Lager lengre tekstlinjer

I det enkle valgtekstdesignet ovenfor begrenset vi bredden på tekstlinjen til samme bredde som linjen. Men hvis vi vil lage en lengre tekstlinje med samme bredde, må vi tilpasse innstillingene litt.

Først på tekstmodulen og erstatt teksten med følgende:

Dette er en fase med en lenke

Legg til mer bredde og margin for å passe den lengste tekstlinjen

Som du kanskje legger merke til, er teksten delt inn i tre linjer i stedet for en.

Derfor må vi justere margen og intensiteten til animasjonen.

• Bredde: 207%
• Marginen: -207% til venstre, 207% til høyre
• Animasjonsintensitet: 75%

Trikset her er å øke bredden og oppdatere marginverdiene slik at bare nok plass er igjen for en enkelt tekstlinje. Juster deretter intensiteten på animasjonen slik at det ikke er et stort brudd mellom looping-animasjonen.

Resultat

Her er det endelige resultatet.

Sett teksttekstanimasjonen på pause

Siden dette markeringsrektangelet inneholder en lenke, vil det være vanskelig for brukerne å klikke på lenken mens de beveger seg. Imidlertid kan vi legge til et lite css-snutt i tekstmodulen som vil sette animasjonen på pause.

Legg til CSS-kodebit for å sette animasjonen på pause

For å legge til css-kodebiten, åpne tekstmodulinnstillingene og legg til følgende tilpassede CSS-kode i hovedelementet under hover-fanen :

animasjon-spill-tilstand: pauset;

Endelig resultat

Sjekk nå sluttresultatet. Merk at tekstanimasjonen stopper når markøren svever over teksten, slik at brukeren kan klikke på lenken.

Det er alt for denne opplæringen, jeg håper det har lært deg hvordan du legger til en rulletekst på Divi.