Deze tutorial komt als aanvulling op een tutorial die we een paar dagen geleden hebben gemaakt. We hebben je inderdaad laten zien hoe je scrollende tekst kunt toevoegen in een kolom op Divi. Vandaag laten we je zien hoe je dezelfde techniek kunt gebruiken om een "superheld"-sectie toe te voegen (uitdrukking gebruikt voor dschrijven een groot deel van een webpagina ontworpen om de aandacht te trekken en bepaalde elementen te benadrukken).
Laten we beginnen.
Voeg de vooraf gedefinieerde lay-out toe
Om de lay-out aan je pagina toe te voegen, open je het instellingenmenu onderaan de builder Divi en klik op het plusteken. Selecteer in het pop-upvenster Laden uit bibliotheek het Job Recruiter Layout Pack. Klik vervolgens om de lay-out van de startpagina te gebruiken.
Verwijder extra inhoud met de lay-out
Zodra de presentatie op de pagina is geladen, implementeert u de draadframeweergave en verwijdert u alles inhoud van de presentatie, behalve de koptekst over de volledige breedte en het gedeelte er net onder.
De tekstanimatie voor de selectie maken
Zoals u kunt zien, wordt het woord "ingehuurd" al gebruikt als een groot tekstontwerpelement in een tekstmodule in de tweede sectie. We gaan deze tekstmodule omzetten in een responsief ontwerpelement voor tekstluidsprekers. De sleutel om de tekstrechthoek responsief te maken, is ervoor te zorgen dat de regel- en tekstmodule de volledige breedte van het browservenster beslaan. We kunnen dit doen met 100% breedte. Dan kunnen we de lengte-eenheid vw gebruiken voor de tekstgrootte. Hierdoor wordt de tekst goed aangepast aan de breedte van de browser. Daarna passen we dezelfde principes toe die we eerder gebruikten om ons eenvoudige scrollende tekstvoorbeeld te illustreren.
Hier is hoe het te doen.
Werk de parameters van de lijn bij
Zoals eerder vermeld, moet de rij 100% zijn om het ontwerp van deze responsieve tekstselectie te laten werken. Hierdoor kan onze tekstmodule eenheden van lengte vw gebruiken in verhouding tot de breedte van de browser. Omdat onze voorgedefinieerde lay-out al een lijn heeft met 100% breedte, hoeven we niets te doen.
We moeten echter de rest van de instellingen als volgt aanpassen.
- Marge: -24vw omlaag
- Transformeer vertalen Y-as: -24vw
- Horizontale overloop: verborgen
- Verticale overloop: verborgen
De negatieve ondermarge is om de negatieve ruimte te verwijderen die overblijft elke keer dat we de rij verplaatsen met behulp van de opdracht transform translate. En we moeten de rijoverloop verbergen voor ons selectieteksteffect.
Werk het tekstontwerp van de tekstmodule bij
Nu hoeft u alleen nog maar de tekstmodule bij te werken om deze om te zetten naar een groot tekstontwerpelement.
Open de tekstmodule en update het volgende:
- Tekst tekstkleur: rgba (255,255,255,0.16)
- Tekstgrootte tekst: 36vw
- Marge: -100% links, 100% rechts
De tekstgrootte gebruikt een lengte-eenheid vw, dus de tekst past goed in de breedte van de browser.
Voeg een animatie toe aan de tekstmodule
- Animatiestijl: dia
- Animatierichting: links
- Animatieduur: 10000ms
- Animatie-intensiteit: 100%
- Animatie van de snelheidscurve: lineair
- Herhaal animatie: Loop
Definitief ontwerp
Controleer nu het definitieve ontwerp.
Final gedachten
Tekstvakken kunnen een handig hulpmiddel zijn bij webdesign. Ze zijn niet beperkt tot het functioneren van alleen als tickers. Ze kunnen ook een interessant animatie-element toevoegen aan uw webontwerp. En het beste is dat Divi maakt het gemakkelijk om allerlei mooie dingen te maken en te ontwerpen. Ik hoop dat deze tutorial je helpt bij het maken van eenvoudige selectieteksten wanneer je ze nodig hebt.
Ik hoop van je te horen in de comments.
Voor je gezondheid!