En animeret tæller er en sjov og effektiv måde at vise statistik på til dine besøgende. Animation vises ved hjælp af "lat-loading" for at gøre hjemmesiden virkelig engagerende. Du kan placere så mange tællere som du gerne vil inde i dette modul.

Her ses et eksempel på hvordan det kan se ud

Hvordan tilføjer jeg et animeret tæller modul?

Trin 1

Før du kan tilføje en animerettæller-modul til din hjemmeside skal du først ind i web byggeren. Når dit Awork biz tema er blevet installeret på din hjemmeside, skal du ind i den visuelle bygger og derfra tager tingene fart.  

Trin 2

Når du har trykket på den visuelle bygger, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inde i rækker. Hvis du starter en ny side, skal du huske at tilføje en række til din side først.

Trin 3

Find det nye modul i modullisten, og klik på det for at tilføje det til din side. Modullisten er søgbar, hvilket betyder at du også kan skrive "bar counters" og derefter trykke “Enter” for at automatisk finde det. Når modulet er tilføjet, vil du blive mødt med modulets liste over muligheder. Disse muligheder er opdelt i tre hovedgrupper: Indhold, Design og Avanceret.

Trin 4

Inden for fanen "indhold" finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt, der styrer det, der vises i dit modul, findes altid i denne fane. Her ses et antal af punkter du kan redigere i. 

Trin 5

Du kan nu ændre i følgende:

• Procentdele: som standard vises tallene i procentsatser i tælleren. Denne tekst kan deaktiveres ved hjælp af denne indstilling.
• Baggrundsfarve: med denne indstilling kan du justere baggrundsfarven på hver tæller.
• Tæller baggrundsfarve: denne indstilling giver dig mulighed for at justere baggrundsfarven på den fyldte linje. Disse baggrundsfarve indstillinger overlejrer den foregående baggrundsfarve indstilling.
• Admin etiket: dette vil ændre modulets etiket i byggeren for nem identifikation.
• Design muligheder: inden for designfanen finder du alle modulets stylingsindstillinger, såsom skrifttyper, farver, størrelser og mellemrum. Dette er den fane, du vil bruge til at ændre, hvordan dit modul ser ud. Hvert modul har en lang liste over design indstillinger, som du kan bruge til at ændre næsten alt.

• Titel tekstfarve: som udgangspunkt er alle tekstfarver til at starte med hvid eller mørkegrå. Hvis du ønsker at ændre farven på tekstfarven, kan du gøre dette i farvevælgeren.
• Titel bogstavsafstand: bogstavsafstanden påvirker mellemrummet mellem hvert enkelt bogstav. Hvis du ønsker at justere mellemrummet mellem hvert bogstav, kan du her benytte dig af skyderen til at justere dette eller du kan angive din ønskede værdi for afstanden til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste “px” eller “em” efter den størrelses værdi du ønsker at benytte dig af.
• Titel linjehøjde: linjehøjden påvirker mellemrummet mellem hver linje af din tekst. Hvis du ønsker at justere linjehøjden, kan du her benytte dig af skyderen til at justere dette eller du kan angive din ønskede værdi for afstanden til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste “px” eller “em” efter den størrelses værdi du ønsker at benytte dig af.
• Procent tekst: her kan du justere skrifttype, vægt, størrelse, farve, afstand, linjens højde og meget mere.
• Kanten: her kan du justere størrelse, farve, afstand og meget mere.
• Avanceret Indstillinger: på den avanceret fane finder du muligheder, som mere erfarne webdesignere kan finde nyttige, som f.eks. Brugerdefinerede CSS- og HTML-attributter. Her kan du anvende tilpasset CSS til et af modulets mange elementer.

• CSS ID: indtast et valgfrit CSS ID, der skal bruges til dette modul. Et ID kan bruges til at oprette brugerdefineret CSS-styling, eller at oprette links til bestemte afsnit på din side.
• CSS klasse: indtast valgfrie CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at oprette brugerdefineret CSS-styling. Du kan tilføje flere klasser, adskilt med et mellemrum.
• Brugerdefineret CSS: brugerdefineret CSS kan også anvendes til modulet og et hvilket som helst af modulets interne elementer. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje brugerdefineret CSS direkte til hvert element. CSS-input til disse indstillinger er allerede pakket ind i stilkoder, så du behøver kun at indtaste CSS-regler adskilt af semikolon.
• Synlighed: denne indstilling lader dig styre hvilke enheder dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller computer individuelt. Dette er nyttigt, hvis du vil bruge forskellige moduler på forskellige enheder, eller hvis du vil forenkle det mobile design ved at fjerne visse elementer fra siden.

Trin 6

Du kan nu ændre indstillingernefor den individuelt tæller indstillinger. Der kan ændres i følgende:

Titel: titlen, der er defineret her, vises over din tæller. Lad den være tom, hvis ingen titel ønskes.

Procent: denne værdi definerer, hvor fyldt tælleren vil være. Du kan indtaste en værdi mellem 1% og 100%.

Baggrundsfarve: med denne indstilling kan du justere baggrundsfarven for hver tæller. Disse indstillinger gælder for den del som ikke er udfyldt i tælleren.

Tæller baggrundsfarve: denne indstilling giver dig mulighed for at justere baggrundsfarven på den fyldte linje. Disse baggrundsfarve indstillinger overlejrer den foregående baggrundsfarve indstilling.

Trin 7

Individuelt design indstillinger. Der kan ændres i følgende:

• Etiket Farve: ændrer farven på stregens titeltekst, der vises over streg tælleren.
• Procent Farve: denne indstilling ændrer farven på procentent, der vises inde i bjælken.
• Individuelle avanceret indstillinger: brugerdefineret CSS kan også anvendes til modulet og et hvilket som helst af modulets interne elementer. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje brugerdefineret CSS direkte til hvert element. CSS-input til disse indstillinger er allerede pakket ind i stilkoder, så du behøver kun at indtaste CSS-regler adskilt af semikolon.

Trin 8

Du har nu lavet en animeret tæller