Text versaler ger en rullande textruta till din webbplats som engagerar läsarna med användbara utdrag ur innehåll. De kallas också tickers (eller nyhetstickers) och används ofta för att visa en stadig ström av nyhetsuppdateringar högst upp eller längst ned på sidan. . Vanligtvis görs rullande animering med en enda rad av innehåll i en slinga så att informationen visas upprepade gånger. Tyvärr, den <marquee>Eftersom html-taggen är föråldrad, förlitar vi oss på CSS och JavaScript för att skapa partytält idag. Men med Divi kan du skapa en enkel markeringsrektangel utan att oroa dig för den anpassade koden.

I den här handledningen förklarar vi hur enkelt det är att skapa en enkel markeringstext med Divi. Vi kommer till och med se hur man pausar rullning av textanimering på svävar och hur man lägger till stor rullningstext som ett unikt designelement för dina rubriker.

Låt oss börja.

undersökningen

Vad du behöver för att komma igång

För att komma igång behöver du följande:

1. Le Divi-tema installerad och aktiv
2. En ny sida skapad för att bygga från grunden på framsidan (visuell konstruktör)

Efter det har du en tom duk för att börja designa i Divi.

Början av befruktningen

För det här första exemplet skapar vi en enkel textrektangel för en textrad. För att göra detta ger vi en rad en maximal bredd med överflödet gömt. Därefter lägger vi till looping slide animation i en textmodul som innehåller textraden så att den upprepade gånger glider in i raden, som en rektangel.

Så här gör du det.

Börja med att skapa ett vanligt avsnitt med en kolumnrad.

Innan du lägger till en modul uppdaterar du sedan raden med en fast bredd, en skuggruta och en radie:

• Maximal bredd: 200px
• Klädsel: 10px längst upp, 10px längst ner
• Runda hörn: 10px
• Box Shadow: se skärmdump
• Horisontellt överflöde: dold
• Vertikalt överflöde: dold

Lägg till textmodulen

När raden är klar lägger du till en ny textmodul till raden.

Uppdatera sedan innehåll av brödtexten med en enda textrad. För nu, se till att textraden inte delas upp i en annan rad.

• Kropp: "Detta är en mening"

Textmoduldesign

Uppdatera textmodulens designparametrar enligt följande:

• Marginal: -100% till vänster, 100% till höger

Detta placerar textmodulen utanför vänster om raden. Eftersom linjens dolda synlighet är dold kommer modulen att döljas tills vi lägger till animering för att göra den synlig.

• Animeringsstil: Bild
• Animeringsriktning: Höger
• Animeringstid: 5000ms
• Animationsintensitet: 100%
• Animering Starta opacitet: 100%
• Animering av hastighetskurvan: linjär
• Upprepa animering: Loop

Resultat

Låt oss se resultatet nu.

Skapa längre textrader

I den enkla markeringstextdesignen ovan begränsade vi bredden på textraden till samma bredd som raden. Men om vi vill skapa en längre textrad med samma bredd måste vi justera inställningarna lite.

Först på textmodulen och ersätt texten med följande:

Detta är en fas med en länk

Lägg till mer bredd och marginal så att den passar den längsta raden med text

Som du kanske märker är texten uppdelad i tre rader istället för en.

Därför måste vi justera marginalen och intensiteten för animationen.

• Bredd: 207%
• Marginal: -207% till vänster, 207% till höger
• Animationsintensitet: 75%

Tricket här är att öka bredden och uppdatera marginalvärdena så att bara tillräckligt med utrymme är kvar för en enda textrad. Justera sedan animationens intensitet så att det inte blir något stort avbrott mellan looping-animationen.

Resultat

Här är det slutliga resultatet.

Pausa markeringstextanimering på svävaren

Eftersom den här markeringsrektangeln innehåller en länk blir det svårt för användarna att klicka på länken medan de rör sig. Vi kan dock lägga till ett litet css-utdrag i textmodulen som pausar animeringen på svävaren.

Lägg till CSS-kod för att pausa animeringen på svävaren

För att lägga till css-kodavsnittet, öppna textmodulinställningarna och lägg till följande anpassade CSS-kod i huvudelementet under fliken :

animation-play-state: pausad;

Slutresultat

Kolla nu slutresultatet. Observera att textanimationen stannar när markören svävar över texten och låter användaren klicka på länken.

Det är allt för denna handledning, jag hoppas att det har lärt dig hur du lägger till en rullningstext på Divi.