Animerede taltællere er populære på nettet som en måde at vise tal på. données at fremhæve værdien af tjenester, casestudier mv. Divi har et dedikeret taltællermodul, som nemt kan bruges til at generere animerede taltællere.
Men i denne vejledning skal vi vise dig, hvordan du opretter numeriske tællere, der animerer ved rulning ved hjælp af Divi. Brug af positionsindstillinger og rulleeffekter af Divi, vil vi designe et simpelt layout til at vise en dato med rullende tal.
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.
Føj derefter et nyt tekstmodul til linjen.
Opdater indhold af tekstmodulet med følgende elementer:
Gem datoen
Opdater derefter overskriftstekststil som følger:
- Overskrift 2 Skrift: Prata
- Element 2 Tekststørrelse: 130px (desktop), 70px (tablet), 40px (telefon)
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
Kolonneparametre
Åbn derefter kolonneindstillingerne, og opdater udfyldningen som følger:
- Polstring (skrivebord): 100px lav
- Polstring (tablet og telefon): 0px lav
Tilføj et tekstmodul
Føj derefter et tekstmodul til kolonnen.
Indhold / etiket
for indhold fra tekstmodulet skal du tilføje ordet "måned".
Indstillinger for tekstdesign
Når den indhold tilføjet, 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:
- Position: Relativ
- Z-indeks 1
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 nummer / indhold
Opdater derefter tekstet moduletiketten for at læse “num1” for lettere læsning. Opdater derefter indholdet med nummeret "01".
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
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
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.
Opdater nummer / indhold
Åbn parametrene for det andet digitale tekstmodul, og opdater indholdet med nummeret "02".
Opdater position
Opdater derefter positionsindstillingerne som følger:
- Position: Absolut
- Lodret forskydning: 126px
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%)
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.
Opdater nummer / indhold
Opdater indholdet med nummeret "03".
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%)
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.
Opdater nummer / indhold
Opdater indholdet med nummeret "04".
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%)
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.
Vælg derefter NEJ for at få vist separatoren.
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 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
- Sådan bruges nummertællermodulet på Divi
- Sådan bruges det cirkulære tællermodul på Divi
- Sådan oprettes cirkulære tællere, der kommer til live på Divi
endelige tanker
Dette enkle layout med rullende animerede taltællere burde være nyttigt til visning données digital på en ny og unik måde. Du er velkommen til at droppe datokonceptet og bruge tællerne til alt, hvad du kan drømme om!
