Gå till innehållet

Hur man skapar en superhjältezon med animerad text

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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 en rullningstext i en kolumn på Divi. Idag visar vi dig hur du använder samma teknik, för att lägga till en "superhjälte" -avdelning (uttryck som används för att beskriva ett stort område på en webbsida som är utformad för att locka uppmärksamhet och markera 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 ner på Divi-byggaren och klicka på plussymbolen. Välj popup-fönstret Jobbrekryterare i popup-fönstret Ladda upp från bibliotek. Klicka sedan för att använda hemsidans 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 allt innehåll från presentationen utom rubriken i full bredd och avsnittet precis nedanför det.

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.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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 teleskrivare. De kan också lägga till ett intressant element i din webbdesign. Och det bästa är att Divi gör det enkelt att skapa och designa alla möjliga vackra saker. Hoppas att den här handledningen hjälper dig att skapa enkla urvalstexter när du behöver dem.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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

Till din hälsa!

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
2 aktier
del2
tweet
Enregistrer