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.

Model sjabloon divi

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.

Ontwerp modificatie sectie divi

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.

Divi line module breedte configuratie

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

Divi line instellingen configuratie

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.

Divi tekst module configuratie

Voeg een animatie toe aan de tekstmodule

  • Animatiestijl: dia
  • Animatierichting: links
  • Animatieduur: 10000ms
  • Animatie-intensiteit: 100%
  • Animatie van de snelheidscurve: lineair
  • Herhaal animatie: Loop

Divi-tekstanimatieconfiguratieDefinitief ontwerp

Controleer nu het definitieve ontwerp.

Gehuurde animatiediviFinal 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!