Denna handledning kommer utöver en handledning som vi gjorde för några dagar sedan. Vi har verkligen visat dig hur du lägger till rullande text i en kolumn på Divi. Idag kommer vi att visa dig hur du använder samma teknik, för att lägga till en "superhjälte"-sektion (uttryck som används för dskriva ett stort område av en webbsida utformad för att locka uppmärksamhet och framhäva vissa element).

Låt oss börja.

Lägg till den fördefinierade layouten

För att lägga till layouten på din sida, öppna inställningsmenyn längst ned i byggaren Divi och klicka på plussymbolen. I popupfönstret Ladda från bibliotek väljer du Job Recruiter Layout Pack. Klicka sedan för att använda startsidans layout.

Modell mall divi

Ta bort ytterligare innehåll med layouten

När presentationen har laddats in på sidan, distribuera wireframe-vyn och ta bort alla innehåll av presentationen, förutom rubriken i full bredd och avsnittet precis under den.

Design modifiering avsnitt divi

Skapa markeringstextanimering

Som du kan se används ordet "anställd" redan som ett stort textdesignelement i en textmodul i det andra avsnittet. Vi ska förvandla denna textmodul till ett lyhörd designelement för texthögtalare. Nyckeln till att göra texten rektangel lyhörd är att se till att linjen och textmodulen spänner över webbläsarens fönster. Vi kan göra detta med 100% bredd. Då kan vi använda längdenheten vw för textstorleken. Detta gör texten väl anpassad till webbläsarens bredd. Därefter kommer vi att använda samma principer som vi använde tidigare för att illustrera vårt exempel på enkel rullningstext.

Så här gör du det.

Uppdatera parametrarna för linjen

Som nämnts tidigare måste raden vara 100% för att designen av detta responsiva textval ska fungera. Detta gör att vår textmodul kan använda enheter av längd vw relativt webbläsarens bredd. Eftersom vår fördefinierade layout redan har en linje med 100% bredd behöver vi inte göra någonting.

Divi line modulbreddskonfiguration

Vi måste dock justera resten av inställningarna enligt följande.

  • Marginal: -24vw ner
  • Transformera översätt Y-axeln: -24vw
  • Horisontellt överflöde: dold
  • Vertikalt överflöde: dold

Konfiguration av Divi Line-inställningar

Den negativa nedre marginalen är att ta bort det negativa utrymmet som finns kvar varje gång vi flyttar raden med kommandot transform translate. Och vi måste dölja radöverflödet för vår valstexteffekt.

Uppdatera textdesignen för textmodulen

Nu är allt du behöver göra att uppdatera textmodulen för att konvertera den till ett stort textdesignelement.

Öppna textmodulen och uppdatera följande:

  • Texttextfärg: rgba (255,255,255,0.16)
  • Texttextstorlek: 36vw
  • Marginal: -100% till vänster, 100% till höger

Textstorleken använder en längdenhet vw, så texten passar bra i webbläsaren.

Divi-textmodulkonfiguration

Lägg till en animering i textmodulen

  • Animeringsstil: Bild
  • Animeringsriktning: vänster
  • Animeringstid: 10000ms
  • Animationsintensitet: 100%
  • Animering av hastighetskurvan: linjär
  • Upprepa animering: Loop

Konfiguration av Divi-textanimeringSlutlig design

Kontrollera nu den slutliga designen.

Hyrd animationsdiviAvslutande tankar

Textrutor kan vara ett praktiskt verktyg för webbdesign. De är inte begränsade till att endast fungera som ticker. De kan också lägga till ett intressant animationselement till din webbdesign. Och det bästa är det Divi gör det enkelt att skapa och designa alla möjliga vackra saker. Jag hoppas att den här handledningen hjälper dig att skapa enkla urvalstexter när du behöver dem.

Hoppas att höra från dig i kommentarerna.

Till din hälsa!