Gå til hovedindhold

Sådan føjes en animeret tæller til at rulle på Divi

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

Animerede taltællere er populære på nettet som en måde at vise numeriske data for at fremhæve værdien af ​​tjenester, casestudier osv. Divi har et dedikeret nummertællermodul, som let kan generere animerede nummertællere.

Men i denne vejledning viser vi dig, hvordan du opretter digitale tællere, der animeres i at rulle ved hjælp af Divi. Ved hjælp af Divis positionsmuligheder og rulleeffekter skal vi designe et simpelt layout til at vise en dato med rullenumre.

Del 1: Oprettelse af titelsektionen

I denne første del opretter vi en enkel titel til layoutet.

Først skal du tilføje en række med en kolonne til sektionen.

Registrer et divi-sektionsmodul

Føj derefter et nyt tekstmodul til linjen.

Opdater indholdet af tekstmodulet med følgende:

Gem datoen
Gem datoen 1

Opdater derefter overskriftstekststil som følger:

  • Overskrift 2 Skrift: Prata
  • Element 2 Tekststørrelse: 130px (desktop), 70px (tablet), 40px (telefon)
Divi titelændring

Del 2: Oprettelse af tællere med rulleanimation

I denne næste del opretter vi de tre tællere, der animerer de rullende numre, indtil de stopper for at vise en dato (måned, dag og år). Hver tæller bygges ved hjælp af i alt 5 tekstmoduler og et separatormodul. Det første tekstmodul fungerer som tællerens etiket (dvs. måned, dag, år). De næste fire tekstmoduler vil hver indeholde et andet nummer (i gang), som animeres ved rulning ved hjælp af de lodrette bevægelsesforskydninger i Divi. Det nederste separationsmodul hjælper med at skjule antallet af tal.

Sådan gør du.

Tilføj en anden linje

Under den eksisterende række skal du tilføje en anden række til en kolonne.

Linieindstillinger

Inden du tilføjer et modul, skal du opdatere rækkeparametrene som følger:

  • Tagrendebredde: 1
  • Polstring: 0px høj, 0px lav
Divi kantkonfiguration

Kolonneparametre

Åbn derefter kolonneindstillingerne, og opdater udfyldningen som følger:

  • Polstring (skrivebord): 100px lav
  • Polstring (tablet og telefon): 0px lav
Konfiguration af divi-kolonneafstand

Tilføj et tekstmodul

Føj derefter et tekstmodul til kolonnen.

Tilføj et divi-tekstmodul

Indhold / etiket

For indholdet af tekstmodulet skal du tilføje ordet "måned".

Angiv månedsdelingen

Indstillinger for tekstdesign

Når du har tilføjet indhold, skal du opdatere designindstillingerne som følger:

  • Baggrundsfarve: #ffffff
  • Tekst font: Talk
  • Tekststørrelse: 40px
  • Højde på tekstlinjen: 2em
  • Bredde: 100%
  • Polstring: 20 pixels øverst, 20 pixels i bunden, 20 pixels til venstre, 20 pixels til højre
  • Nederste kantbredde: 5 stk
  • Farve på den nederste kant: #eeeeee
Position

Opdater derefter placeringsindstillingerne under den avancerede fane som følger:

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

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

Tilføj et tekstmodul til det første nummer

Når det første tekstmodul er på plads, kan vi begynde at tilføje de numre, der bevæger sig på rullen. For at tilføje det første nummer skal du tilføje et nyt tekstmodul under det eksisterende "Måned" -tekstmodul.

Tilføj historiefortællermodul

Tilføj nummer / indhold

Opdater derefter tekstet moduletiketten for at læse “num1” for lettere læsning. Opdater derefter indholdet med nummeret "01".

Tilføj divi nummer modul

Designindstillinger for nummer

Opdater følgende under fanebladet Design:

  • Tekstskrift: Prata
  • Tekst Tekstfarve: # 8ab2d3
  • Tekst Tekststørrelse: 70px
  • Tekstbrevafstand: 4px
  • Tekstlinje Højde: 1.5 em
  • Polstring: 20px tilbage
Divi farve konfiguration

BEMÆRK: Tallene har en tekststørrelse på 70px og en linjehøjde på 1.5 em, hvilket betyder, at den samlede højde på tekstmodulet vil være tæt på 100px. Dette er vigtigt at huske på, hver gang vi begynder at tilføje de lodrette bevægelsesforskydninger. For eksempel vil tilføjelse af en lodret forskydning af “1” til tekstmodulet flytte tekstmodulet nøjagtigt 100px, hvilket er højden på tekstmodulet.

Rulleeffekter for første nummer

Føj følgende rulleeffekter til tekstmodulet.

Opdater følgende under fanen Lodret bevægelse:

  • Aktivér lodret bevægelse: JA
  • Start offset: 1 (ved 10%)
  • Gennemsnitlig forskydning: 0 (ved 20%)
  • Slut offset: -1 (ved 30%)

Opdater følgende på fanen Fade In og Fade Out:

  • Aktivér fade ind og ud: JA
  • Indledende opacitet: 0% (ved 10%)
  • Gennemsnitlig opacitet: 100% (ved 20%)
  • Endeopacitet: 0% (til 30%)

Sørg for at indstille udløseren til bevægelseseffekten øverst på klippet:

  • Motion Effect Trigger: Element Top
Konfiguration af animation modul divi tekst

Opret tekstmodulet til det andet nummer

Duplicerer det første nummer

Når det første nummer er oprettet, skal du duplikere det for at oprette det andet nummertekstmodul. Opdater derefter etiketten i lagvisningen for bedre reference.

Kopier divi 1 tekstmodul

Opdater nummer / indhold

Åbn parametrene for det andet digitale tekstmodul, og opdater indholdet med nummeret "02".

Gem nummer 2 divi

Opdater position

Opdater derefter positionsindstillingerne som følger:

  • Position: Absolut
  • Lodret forskydning: 126px
Ændring af position for divi-tekstmodul

Opdater rulleeffekter

Opdater derefter rulleeffekterne som følger:

Opdater følgende på fanen Vertikal bevægelse:

  • Start offset: 1 (ved 20%)
  • Gennemsnitlig forskydning: 0 (ved 30%)
  • Slut offset: -1 (ved 40%)

Opdater følgende på fanen Fade In og Fade Out:

  • Indledende opacitet: 0% (ved 20%)
  • Gennemsnitlig opacitet: 100% (ved 30%)
  • Endeopacitet: 0% (til 40%)
Animation rulle effekt divi

Opret et tekstmodul til det tredje nummer

Duplicerer det andet nummer

For at oprette tekstmodulet til det tredje nummer skal du kopiere tekstmodulet til det andet nummer.

Kopi af tekstmodul nummer 3

Opdater nummer / indhold

Opdater indholdet med nummeret "03".

Rediger divi-tekstmodul

Opdater rulleeffekter

Opdater derefter rulleeffekterne:

Opdater følgende på fanen Vertikal bevægelse:

  • Start offset: 1 (ved 30%)
  • Gennemsnitlig forskydning: 0 (ved 40%)
  • Slut offset: -1 (ved 50%)

Opdater følgende på fanen Fade In og Fade Out:

  • Indledende opacitet: 0% (ved 30%)
  • Gennemsnitlig opacitet: 100% (ved 40%)
  • Endeopacitet: 0% (til 50%)
Rediger tekstmodulanimation

Opret et tekstmodul til det fjerde nummer

Tredje duplikatudgave

Hvis du vil oprette det fjerde nummer til rulletælleren, skal du kopiere tekstmodulet til det tredje nummer.

Kopi af tekstmodul divi nummer 4

Opdater nummer / indhold

Opdater indholdet med nummeret "04".

Konfigurer værdi for divi-tekstmodul

Opdater rulleeffekter

Opdater derefter rulleeffekterne:

Opdater følgende på fanen Vertikal bevægelse:

  • Start offset: 1 (ved 40%)
  • Gennemsnitlig forskydning: 0 (ved 50%)
  • Slut offset: 0 (ved 60%)

Opdater følgende på fanen Fade In og Fade Out:

  • Indledende opacitet: 0% (ved 40%)
  • Gennemsnitlig opacitet: 100% (ved 50%)
  • Endeopacitet: 100% (til 60%)
Animationskonfigurationsmodul 4 divi

Tilføj en lavere separator

Under det sidste tekstmodul skal du tilføje et nyt separatormodul. Dette vil blive brugt til at skjule det nederste overløb af den rullende tekst i visningen.

Tilføj divi separator modul

Vælg derefter NEJ for at få vist separatoren.

Vis ikke diviseparatoren

Stil- og positionsindstillinger

Opdater separatordesignet som følger:

  • Baggrundsfarve: #ffffff
  • Bredde: 100%
  • Højde: 100px
  • Øvre kantbredde: 5px

Opdater følgende under fanen Avanceret:

  • Deaktiver på: telefon og tablet
  • Position: Absolut
  • Placering: nederst til venstre

VIGTIGT: Den plads, som separatoren optager, blev oprettet tidligere ved at tilføje 100 pixels bundpolstring til kolonnen. Hvis du ikke tilføjer denne polstring, overlapper separatoren cifrene.

Oprettelse af yderligere tællere og kolonner

Kopier kolonne 1, og opdater indholdet

Du opretter en ny tæller ved at kopiere kolonne 1. Dette opretter en anden kolonne med alle elementerne på plads automatisk.

Så skal du bare opdatere indholdet i alle tekstmoduler med nye tekster og numre.

Kopier hele kolonnedivi

Kopier kolonne 2, og opdater indholdet

Når indholdet af alle tekstmoduler er opdateret i kolonne 2, skal du duplikere kolonne 2 for at oprette en tredje tæller for året. Opdater derefter indholdet af hvert tekstmodul efter behov.

Endelig resultat

Her er det endelige resultat.

Andre ressourcer

endelige tanker

Dette enkle layout med animerede tællere, der ruller, skal være nyttigt til visning af digitale data på en ny og unik måde. Tøv ikke med at afslutte datokonceptet og bruge tællerne til alt, hvad du kan drømme om!

Denne artikel indeholder kommentarer 0

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
0 aktier
andel
tweet
Tilmeld