Teksthoofdletters bieden een scrollend tekstvak aan uw Site web dat lezers boeit met nuttige fragmenten uit inhoud. Ze worden ook wel tickers (of nieuwstickers) genoemd en worden vaak gebruikt om een ​​gestage stroom nieuwsupdates bovenaan of onderaan de pagina weer te geven. . Meestal wordt scrollanimatie uitgevoerd met een enkele regel inhoud in een lus zodat de informatie herhaaldelijk wordt weergegeven. Helaas, de <marquee>Omdat html-tag verouderd is, vertrouwen we tegenwoordig op CSS en JavaScript om feesttenten te maken. Met Divi kunt u echter een eenvoudige selectierechthoek maken zonder u zorgen te hoeven maken over de aangepaste code.

In deze tutorial leggen we uit hoe gemakkelijk het is om een ​​eenvoudige selectietekst te maken met Divi. We zullen zelfs zien hoe u scrollende tekstanimatie kunt onderbreken bij zweven en hoe u grote scrollende tekst kunt toevoegen als een uniek ontwerpelement voor uw headers.

Laten we beginnen.

overzicht

Wat je nodig hebt om te beginnen

Om te beginnen heb je het volgende nodig:

1. Le Divi-thema geïnstalleerd en actief
2. Een nieuwe pagina gemaakt om helemaal opnieuw te bouwen op de front-end (visuele constructor)

Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.

Begin van de conceptie

Voor dit eerste voorbeeld maken we een eenvoudige tekstrechthoek voor één regel tekst. Om dit te doen, gaan we een rij een maximale breedte geven met de overloop verborgen. Vervolgens gaan we dia-animatie in een lus toevoegen aan een tekstmodule die de regel tekst bevat, zodat deze herhaaldelijk in de regel schuift, als een rechthoek.

Hier is hoe het te doen.

Begin met het maken van een normale sectie met een rij van een kolom.

Werk vervolgens, voordat u een module toevoegt, de rij bij met een vaste breedte, schaduwvak en straal, zoals:

• Maximale breedte: 200px
• Bekleding: 10px bovenaan, 10px onderaan
• Ronde hoeken: 10px
• Box Shadow: zie screenshot
• Horizontale overloop: verborgen
• Verticale overloop: verborgen

Voeg de tekstmodule toe

Wanneer de regel is voltooid, voegt u een nieuwe tekstmodule toe aan de regel.

Werk vervolgens de inhoud van de hoofdtekst met één enkele tekstregel. Zorg er voorlopig voor dat de tekstregel niet in een andere regel wordt gesplitst.

• Lichaam: "Dit is een zin"

Tekst module ontwerp

Werk de ontwerpparameters van de tekstmodule als volgt bij:

• Marge: -100% links, 100% rechts

Dit positioneert de tekstmodule buiten de linkerkant van de regel. Omdat de verborgen zichtbaarheid van de lijn verborgen is, wordt de module verborgen totdat we animatie toevoegen om deze zichtbaar te maken.

• Animatiestijl: dia
• Animatierichting: Juist
• Animatieduur: 5000ms
• Animatie-intensiteit: 100%
• Animatie Startdekking: 100%
• Animatie van de snelheidscurve: lineair
• Herhaal animatie: Loop

Resultaat

Laten we het resultaat nu bekijken.

Langere tekstregels maken

In het eenvoudige selectietekstontwerp hierboven hebben we de breedte van de tekstregel beperkt tot dezelfde breedte als de regel. Als we echter een langere tekstregel met dezelfde breedte willen maken, moeten we de instellingen een beetje aanpassen.

Allereerst op de tekstmodule en vervang de hoofdtekst van de tekst door het volgende:

Dit is een fase met een link

Voeg meer breedte en marge toe zodat de langste regel tekst past

Zoals u wellicht opmerkt, is de tekst opgesplitst in drie regels in plaats van één.

Daarom moeten we de marge en intensiteit van de animatie aanpassen.

• Breedte: 207%
• Marge: -207% links, 207% rechts
• Animatie-intensiteit: 75%

De truc hier is om de breedte te vergroten en de margewaarden bij te werken, zodat er slechts voldoende ruimte overblijft voor een enkele regel tekst. Pas vervolgens de intensiteit van de animatie aan zodat er geen grote pauze is tussen de looping-animatie.

Resultaat

Hier is het eindresultaat.

Pauzeer de tekstanimatie van de selectie bij zweven

Aangezien deze selectierechthoek een link bevat, zal het moeilijk zijn voor gebruikers om tijdens het verplaatsen op de link te klikken. We kunnen echter een klein css-fragment aan de tekstmodule toevoegen, waardoor de animatie bij zweven wordt onderbroken.

Voeg een CSS-fragment toe om de animatie bij het zweven te onderbreken

Om het css-fragment toe te voegen, opent u de tekstmodule-instellingen en voegt u de volgende aangepaste CSS-code toe aan het hoofdelement onder het zweeftabblad :

animatie-afspeelstatus: gepauzeerd;

Eindresultaat

Bekijk nu het eindresultaat. Merk op dat de tekstanimatie stopt wanneer de cursor over de tekst beweegt, zodat de gebruiker op de link kan klikken.

Dat is alles voor deze tutorial, ik hoop dat het je heeft geleerd hoe je een scrollende tekst op Divi kunt toevoegen.