Number Counter Widget

Number Counter Widget är ett anpassningsbart sidelement som animerar numeriska data och förvandlar statiska siffror till uppmärksamhetsfångande visuella effekter. Oavsett om du vill visa företagstillväxt, kundnöjdhet eller statistik från sociala medier hjälper den här widgeten dig att presentera dina mest imponerande siffror i ett professionellt och engagerande format.

Viktiga fördelar med Number Counter Widget

Number Counter Widget erbjuder mer än bara visuellt tilltalande effekter — den stärker strategiskt användarengagemang och bygger trovärdighet. Viktiga fördelar inkluderar:

• Dynamisk markering: Visa kritiska milstolpar och prestationer med animerade räknare.
• Ökat förtroende: Stärk social proof genom att visa realtidsmått på ett visuellt tilltalande sätt.
• Anpassningsbar design: Stödjer både minimalistiska och djärva varumärkesstilar för att matcha din varumärkesidentitet.
• Smidig prestanda: Animeringen startar först när widgeten scrollas in i vyn, vilket ger en sömlös användarupplevelse.

Så använder du Number Counter Widget

Du kan konfigurera widgeten i några enkla steg:

Lägg till elementet

Dra Number Counter till din sida från elementlistan.

General 

När du lägger till elementet öppnas dess inställningar automatiskt. Under general-avsnittet kan du börja med att ge elementet ett namn.

Justera sedan typografin för siffran och bildtexten, och ställ in teckenstorleken för både mobil- och skrivbordsvy.

Klicka på ”Add Counter” för varje statistik du vill visa. Du kan valfritt justera bildtexten och lägga till ikoner, logotyper eller badges för att visuellt stödja varje räknare.

Ange sedan start- och slutvärden, och lägg till ett prefix (t.ex. $, +) eller suffix (t.ex. %, M) för att formatera dina mått.

Därefter kan du anpassa räknarlayouten genom att välja antal räknare per rad (1–5) och finjustera avståndet med gap-kontrollerna. 

När du har gjort det styr du animeringshastigheten med skjutreglaget (1 till 15 sekunder).

När du har slutfört övriga avsnitt kan du anpassa färgerna för siffror, bildtexter, räknarbakgrunder och containerns bakgrund.

Du kan också växla till fliken Styles för avancerade anpassningsalternativ som justering av margin och padding, samt kontroll över dina border-stilar.

Granska slutligen animationer och layout i förhandsvisningsläge innan du publicerar för att säkerställa att allt är optimerat.

✍️Viktiga anmärkningar

• Stora tal formateras automatiskt för läsbarhet (t.ex. blir ”2500000” till ”2.5 M”).
• Att lägga till bilder är valfritt och kan aktiveras per räknare.
• Animationer körs bara en gång per sidladdning för smidig prestanda.
• Animeringen startar först när räknaren kommer in i viewporten, vilket ger fokuserat engagemang på skärmen utan onödig aktivitet utanför vyn.

Vanliga frågor

Q: Kan jag anpassa färger för enskilda räknare?

• A: För närvarande gäller globala färginställningar för alla räknare för ett enhetligt utseende.

Q: Kan räknare visa decimalvärden?

• A: Ja, decimaltecken kan användas i både start- och slutvärden.

Q: Startar animeringen om om jag scrollar upp igen?

• A: Nej, räknarna animeras bara en gång när de först scrollas in i vyn.

Q: Är bilder obligatoriska för varje räknare?

• A: Nej, bilder är valfria och kan läggas till selektivt.