Gå till innehållet

Hur man lägger till en animerad räknare för att rulla på Divi

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]

Animerade nummerräknare är populära på webben som ett sätt att visa numeriska data för att belysa värdet på tjänster, fallstudier etc. Divi har en dedikerad nummerräknarmodul som kan användas för att enkelt skapa animerade nummraräknare.

I denna handledning kommer vi dock att visa dig hur du skapar digitala räknare som animeras när du rullar med Divi. Med Divis positionsalternativ och rullningseffekter ska vi utforma en enkel layout för att visa ett datum med rullningsnummer.

Del 1: Skapa titelsektionen

I den första delen skapar vi en enkel titel för layouten.

Lägg först till en rad med en kolumn i avsnittet.

Registrera en divisektionsmodul

Lägg sedan till en ny textmodul till raden.

Uppdatera innehållet i textmodulen med följande:

Spara datumet
Spara datumet 1

Uppdatera sedan rubrikens textstil enligt följande:

  • Rubrik 2 typsnitt: Prata
  • Artikel 2 Textstorlek: 130 px (skrivbord), 70 px (surfplatta), 40 px (telefon)
Ändring av Divi-titel

Del 2: Skapa räknare med rullande animering

I den här nästa delen skapar vi de tre räknarna som animerar rullningsnumren tills de slutar för att visa ett datum (månad, dag och år). Varje räknare kommer att byggas med totalt 5 textmoduler och en separatormodul. Den första textmodulen fungerar som räknarens etikett (dvs. månad, dag, år). De kommande fyra textmodulerna kommer var och en att innehålla ett annat nummer (pågår) som kommer att animeras vid rullning med hjälp av de vertikala förskjutningarna i Divi. Den nedre separationsmodulen hjälper till att dölja överflödet av siffror.

Så här.

Lägg till en andra rad

Lägg till en ny rad i en kolumn under den befintliga raden.

Linjeinställningar

Innan du lägger till en modul, uppdatera radparametrarna enligt följande:

  • Rännbredd: 1
  • Polstring: 0px hög, 0px låg
Divi kantkonfiguration

Kolumnparametrar

Öppna sedan kolumninställningarna och uppdatera fyllningen enligt följande:

  • Polstring (skrivbord): 100px låg
  • Polstring (surfplatta och telefon): 0px låg
Konfiguration av divi-kolumnavstånd

Lägg till en textmodul

Lägg sedan till en textmodul i kolumnen.

Lägg till en divi-textmodul

Innehåll / etikett

Lägg till ordet "månad" för innehållet i textmodulen.

Ange månadsdelningen

Inställningar för textdesign

När du har lagt till innehåll ska du uppdatera designinställningarna enligt följande:

  • Bakgrundsfärg: #ffffff
  • Textstilsort: Prata
  • Textstorlek: 40px
  • Höjd på textrad: 2em
  • Bredd: 100%
  • Polstring: 20 pixlar längst upp, 20 pixlar längst ner, 20 pixlar till vänster, 20 pixlar till höger
  • Nedre kantbredd: 5 st
  • Färg på den nedre gränsen: #eeeeee
Placera

Uppdatera sedan placeringsalternativen på följande sätt på den avancerade fliken:

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]

  • Position: Relativ
  • Z index 1
Prata wordpress-modul

Lägg till en textmodul för det första numret

När den första textmodulen är på plats kan vi börja lägga till siffrorna som kommer att flyttas på rullningen. För att lägga till det första numret, lägg till en ny textmodul under den befintliga "Månad" textmodulen.

Lägg till storyteller textmodul

Lägg till nummer / innehåll

Uppdatera sedan textmoduletiketten för att läsa “num1” för enklare referens. Uppdatera sedan innehållet med siffran “01”.

Lägg till divi-nummermodul

Designinställningar för nummer

Uppdatera följande under fliken Design:

  • Textsteckensnitt: Prata
  • Text Textfärg: # 8ab2d3
  • Texttextstorlek: 70px
  • Textbokstavsavstånd: 4px
  • Textradhöjd: 1.5em
  • Polstring: 20px kvar
Divi färgkonfiguration

OBS: Siffrorna har en textstorlek på 70px och en radhöjd på 1.5 em, vilket innebär att den totala höjden för textmodulen kommer att vara nära 100 px. Detta är viktigt att komma ihåg när vi börjar lägga till vertikala rörelseförskjutningar. Om du till exempel lägger till en vertikal förskjutning av ”1” i textmodulen flyttar textmodulen exakt 100px vilket är textmodulens höjd.

Ruleffekter för första nummer

Lägg till följande rullningseffekter i textmodulen.

Uppdatera följande under fliken Vertikal rörelse:

  • Aktivera vertikal rörelse: JA
  • Startförskjutning: 1 (vid 10%)
  • Genomsnittlig offset: 0 (vid 20%)
  • Slutförskjutning: -1 (vid 30%)

Uppdatera följande på fliken Fade In och Fade Out:

  • Aktivera fade in och ut: JA
  • Initial opacitet: 0% (vid 10%)
  • Genomsnittlig opacitet: 100% (vid 20%)
  • Slut opacitet: 0% (till 30%)

Se till att ställa in utlösaren för rörelseeffekten högst upp på klippet:

  • Motion Effect Trigger: Element Top
Konfigurationsanimationsmodul divi-text

Skapa textmodulen för det andra numret

Duplicera det första numret

När det första numret har skapats duplicerar du det för att skapa den andra nummermodulen. Uppdatera sedan etiketten i lagervyn för bättre referens.

Duplicera divi 1 textmodul

Uppdatera nummer / innehåll

Öppna parametrarna för den andra digitala textmodulen och uppdatera innehållet med siffran "02".

Spara nummer 2 divi

Uppdatera position

Uppdatera sedan positionsalternativen enligt följande:

  • Position: Absolut
  • Vertikal offset: 126px
Ändrar position för divi-textmodul

Uppdatera rullningseffekter

Uppdatera sedan rullningseffekterna enligt följande:

Uppdatera följande på fliken Vertikal rörelse:

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Startförskjutning: 1 (vid 20%)
  • Genomsnittlig offset: 0 (vid 30%)
  • Slutförskjutning: -1 (vid 40%)

Uppdatera följande på fliken Fade In och Fade Out:

  • Initial opacitet: 0% (vid 20%)
  • Genomsnittlig opacitet: 100% (vid 30%)
  • Slut opacitet: 0% (till 40%)
Animering rullningseffekt divi

Skapa en textmodul för det tredje numret

Duplicera det andra numret

Du skapar textmodulen för det tredje numret genom att duplicera textmodulen för det andra numret.

Kopiera textmodul nummer 3

Uppdatera nummer / innehåll

Uppdatera innehållet med siffran "03".

Ändra divi-textmodulen

Uppdatera rullningseffekter

Uppdatera sedan rullningseffekterna:

Uppdatera följande på fliken Vertikal rörelse:

  • Startförskjutning: 1 (vid 30%)
  • Genomsnittlig offset: 0 (vid 40%)
  • Slutförskjutning: -1 (vid 50%)

Uppdatera följande på fliken Fade In och Fade Out:

  • Initial opacitet: 0% (vid 30%)
  • Genomsnittlig opacitet: 100% (vid 40%)
  • Slut opacitet: 0% (till 50%)
Redigera textmodulanimering

Skapa en textmodul för det fjärde numret

Tredje duplikatfrågan

För att skapa det fjärde numret för rullningsräknan, kopiera textmodulen för det tredje numret.

Dubblett textmodul divi nummer 4

Uppdatera nummer / innehåll

Uppdatera innehållet med siffran "04".

Konfigurera divi-textmodulvärde

Uppdatera rullningseffekter

Uppdatera sedan rullningseffekterna:

Uppdatera följande på fliken Vertikal rörelse:

  • Startförskjutning: 1 (vid 40%)
  • Genomsnittlig offset: 0 (vid 50%)
  • Slutförskjutning: 0 (vid 60%)

Uppdatera följande på fliken Fade In och Fade Out:

  • Initial opacitet: 0% (vid 40%)
  • Genomsnittlig opacitet: 100% (vid 50%)
  • Slut opacitet: 100% (till 60%)
Animationskonfigurationsmodul 4 divi

Lägg till en nedre separator

Lägg till en ny separatormodul under den sista textmodulen. Detta kommer att användas för att dölja det undre överflödet av den rullande texten i vyn.

Lägg till diviseparator-modul

Välj sedan NO för att visa separatorn.

Visa inte diviseparatorn

Stil- och positionsinställningar

Uppdatera separatorkonstruktionen enligt följande:

  • Bakgrundsfärg: #ffffff
  • Bredd: 100%
  • Höjd: 100px
  • Övre kantbredd: 5px

På fliken Avancerat uppdaterar du följande:

  • Inaktivera på: telefon och surfplatta
  • Position: Absolut
  • Plats: längst ner till vänster

VIKTIGT: Utrymmet som avgränsaren kommer att uppta skapades tidigare genom att lägga till 100 pixlar nedre vaddering i kolumnen. Om du inte lägger till den här stoppningen överlappar avgränsaren siffrorna.

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]

Skapa ytterligare räknare och kolumner

Duplicera kolumn 1 och uppdatera innehållet

För att skapa en ny räknare, duplicera kolumn 1. Detta skapar en andra kolumn med alla element på plats automatiskt.

Då behöver du bara uppdatera innehållet i alla textmoduler med nya texter och nummer.

Duplicera hela kolumn divi

Duplicera kolumn 2 och uppdatera innehållet

När innehållet i alla textmoduler har uppdaterats i kolumn 2, duplicera kolumn 2 för att skapa en tredje räknare för året. Uppdatera sedan innehållet i varje textmodul efter behov.

Slutresultat

Här är det slutliga resultatet.

Andra resurser

Avslutande tankar

Denna enkla layout med animerade rullningsnummerräknare bör vara användbar för att visa digitala data på ett nytt och unikt sätt. Tveka inte att rensa datumkonceptet och använd diskarna för allt du kan drömma om!

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
0 aktier
del
tweet
Enregistrer