Tekst versaler giver en rulletekstboks til din Websted der engagerer læserne med nyttige uddrag fra indhold. De kaldes også tickers (eller nyhedstickers) og bruges ofte til at vise en konstant strøm af nyhedsopdateringer øverst eller nederst på siden. . Normalt udføres rullende animation med en enkelt linje af indhold i en løkke, så informationen vises gentagne gange. Desværre <marquee>Da html-tag er forældet, stoler vi på CSS og JavaScript for at oprette telt i disse dage. Men med Divi kan du oprette et simpelt markeringsrektangel uden at bekymre dig om den brugerdefinerede kode.

I denne vejledning forklarer vi, hvor let det er at oprette en simpel markeringstekst med Divi. Vi får endda se, hvordan man ruller tekst-animation på pause, og hvordan man tilføjer stor rulletekst som et unikt designelement til dine overskrifter.

Lad os starte.

undersøgelse

Hvad du behøver for at komme i gang

For at komme i gang har du brug for følgende:

1. Le Divi-tema installeret og aktiv
2. En ny side oprettet til at bygge fra bunden på frontend (visuel konstruktør)

Derefter har du et tomt lærred til at begynde at designe i Divi.

Begyndelsen af ​​undfangelsen

Til dette første eksempel opretter vi et simpelt tekstrektangel til en tekstlinje. For at gøre dette skal vi give en række en maksimal bredde med overløbet skjult. Dernæst vil vi tilføje looping slide-animation til et tekstmodul, der indeholder tekstlinjen, så den gentagne gange glider ind i linjen som et rektangel.

Sådan gør du det.

Start med at oprette et almindeligt afsnit med en række i en kolonne.

Inden du tilføjer et modul, skal du derefter opdatere rækken med en fast bredde, en skyggeboks og en radius som følger:

• Maksimal bredde: 200px
• Polstring: 10px øverst, 10px i bunden
• Runde hjørner: 10px
• Box Shadow: se skærmbillede
• Vandret overløb: skjult
• Lodret overløb: skjult

Tilføj tekstmodulet

Når linjen er færdig, tilføj et nyt tekstmodul til linjen.

Opdater derefter indhold af brødteksten med en enkelt tekstlinje. Indtil videre skal du sørge for, at tekstlinjen ikke opdeles i en anden linje.

• Body: "Dette er en sætning"

Tekstmoduldesign

Opdater parametre for tekstmoduldesign som følger:

• Marginal: -100% til venstre, 100% til højre

Dette placerer tekstmodulet uden for venstre side af linjen. Da linjens skjulte synlighed er skjult, skjules modulet, indtil vi tilføjer animation for at gøre det synligt.

• Animationsstil: Slide
• Animationsretning: Højre
• Animationsvarighed: 5000ms
• Animationsintensitet: 100%
• Animation Starter opacitet: 100%
• Animation af hastighedskurven: lineær
• Gentag animation: Loop

Resultat

Lad os se resultatet nu.

Oprettelse af længere tekstlinjer

I det enkle markeringstekstdesign ovenfor begrænsede vi bredden af ​​tekstlinjen til samme bredde som linjen. Men hvis vi vil oprette en længere tekstlinje med samme bredde, skal vi tilpasse indstillingerne lidt.

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

Dette er en fase med et link

Tilføj mere bredde og margen for at passe til den længste tekstlinje

Som du måske bemærker, er teksten opdelt i tre linjer i stedet for en.

Derfor er vi nødt til at justere margenen og intensiteten af ​​animationen.

• Bredde: 207%
• Marginal: -207% til venstre, 207% til højre
• Animationsintensitet: 75%

Tricket her er at øge bredden og opdatere marginalværdierne, så der kun er plads nok til en enkelt tekstlinje. Juster derefter intensiteten af ​​animationen, så der ikke er nogen stor pause mellem looping-animationen.

Resultat

Her er det endelige resultat.

Sæt markeringstekstanimering på pause

Da dette markeringsmarkeringsvalg inkluderer et link, vil det være svært for brugerne at klikke på linket, mens de bevæger sig. Vi kan dog tilføje et lille css-uddrag til tekstmodulet, der holder pause i animationen.

Tilføj CSS-uddrag for at sætte animationen på pause

For at tilføje css-uddraget skal du åbne indstillingerne for tekstmodulet og tilføje følgende tilpassede CSS-kode til hovedelementet under pegefeltet :

animation-play-state: pause;

Endelig resultat

Tjek nu slutresultatet. Bemærk, at tekstanimationen stopper, når markøren svæver over teksten, så brugeren kan klikke på linket.

Det er alt til denne tutorial, jeg håber, det har lært dig, hvordan du tilføjer en rulletekst på Divi.