Tal overbeviser hurtigere end sætninger: 5.5K meddelelser leveret, 120M videovisninger. Den Counter Up Widget i Master Addons til Elementor sætter disse statistikker i en række kort, der tæller op fra nul, når siden indlæses, hver med et ikon, et suffiks som K+ eller M+ og sin egen styling.
Denne vejledning bygger en sektion med fire stat fra bunden: elementer, tal, ikoner, layout og kortstylingen, der slutter med de færdige tællere på livesiden.
Hvad Counter Up widget gør #
En widget indeholder et sæt tællerelementer. Hvert element er en stat: et tal, der tæller op fra nul, når siden indlæses, et præfiks eller suffiks omkring det, en titel under det og et valgfrit ikon eller billede på toppen. Widgetten arrangerer emnerne i kolonner og styler dem som en gruppe, så et statistikbånd forbliver konsistent uden at fifle pr. kort.
Før du starter #
- WordPress med elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
- Counter Up-widgetten aktiveret i Master Addons-optionspanelet under Basic Widgets.
- Dine reelle tal. En statistiksektion med opfundne tal gør mere skade end ingen statistik overhovedet.
Sådan tilføjes Counter Up-widget #
I Elementor-editoren skal du søge i Elementer panel til opgøre og træk det ind på siden. Det indlæses med prøveemner, der allerede tæller på lærredet, så animationen er synlig fra første sekund.
Opsæt hvert modelement #
åbne lukke op Counter Up-indhold og klik på et element på listen. Hver enkelt bærer det fulde sæt af per-stat kontroller:
- Type: ingen, ikon eller billede oven på stat. Ikon åbner Elementor-biblioteket; billedet åbner mediebiblioteket.
- Titel: etiketten under nummeret, som “Meddelelser leveret”.
- Nummerpræfiks og suffiks: tekst omkring tallet. Et “$” præfiks eller et “K+” suffiks gør 5,5 til $5,5 eller 5,5K+.
- Nummer: værdien tælleren klatrer til. Decimaler virker, så 5,5 med et K+ suffiks læser 5,5K+.
- Baggrund: en per-vare kortfarve, til hvornår én stat skal skille sig ud.
Suffikstricket holder store tal korte: I stedet for at animere til 120.000.000, tæller demoen til 120 med et M+ suffiks. Kortet forbliver renere, og ingen tæller nullerne for at tjekke.
Per-varen Baggrund farver netop det kort. Nyttigt til at fremhæve en overskriftsstat, eller spring det over og lad den delte boksstil håndtere alle fire:
Vælg kolonner og indholdsposition #
Under varelisten, Kolonner indstiller, hvor mange tællere der deler en række (1, 2, 3, 4 eller 6), med en responsiv vippe pr. enhed. Indholdsposition placerer titlen i forhold til tallet: øverst, venstre, højre eller nederst. Demoen prøver 2 kolonner med side-om-side nummer og titel, og sætter sig derefter tilbage på 4 kolonner stablet.
Afstem ikonerne #
de Ikonindstillinger sektion styrer ikonblokken på hvert kort: Ikon/billede position (venstre, øverste eller højre for stat), Ikon Størrelse, og Ikoncirkel eller billedstørrelse for den farvede disk bag glyffen. Demoen kører 30 pixel ikoner på 86 pixel cirkler.
Style kortene #
I måde faneblad, Counter Up Box Style dækker det delte kort-look: Baggrundsfarve, Polstring, margin, Kanttype, Grænseradius, og kasseskygge. Demoen lander på bløde lyserøde kort med 20 pixel polstring og margin, som adskiller de fire statistikker uden hårde grænser.
Stil tallene, titlerne og ikonerne #
de Content Style sektion opdeles i fire grupper, en pr. element på kortet:
- Ikon stil: glyffarven og cirkelfarven bag. Demoen gør cirklerne dyb lilla med hvide ikoner.
- Nummer Stil: farve og typografi til selve stat, den største tekst på kortet.
- Nummerpræfiks: dens egen farve, typografi, størrelse og margin, så et valutasymbol kan sidde mindre end tallet.
- Titel Stil: farve, typografi og margen for etiketten.
Resultatet på siden #
På live-siden tæller tallene op fra nul i cirka to sekunder efter siden indlæses, og sæt dig derefter på de endelige værdier. Her er det færdige bånd:
Almindelige brugstilfælde #
- Firma statistik bands: kunder tjent, projekter leveret, år i erhvervslivet.
- SaaS bevissektioner: brugere, oppetid, integrationer.
- Porteføljenumre: kampagner kører, indtjening genereret, timers redigering.
- Nonprofit indvirkning: måltider leveret, frivillige, indsamlede midler.
- Kursus- og communitysider: studerende, lektioner, anmeldelser.
Tips til bedre tællere #
- Brug suffikser til store tal. Tæller til 120 med et M+-suffiks læser renere end at tælle til ni cifre.
- Placer tællere højt på siden. Optællingen kører én gang, når siden indlæses, så tællere langt under folden kan afsluttes, før nogen ruller til dem.
- Hold sættet til tre eller fire statistikker. Seks tællere konkurrerer; fire bliver læst.
- Led med det stærkeste antal. Besøgende læser fra venstre mod højre og afslutter muligvis ikke rækken.
- Match ikoncirkler til din palet. Cirkelfarven er det mest synlige stilvalg på kortet; demoens lilla-på-pink virker, fordi begge kommer fra én palet.
- Kontroller antallet af mobile kolonner. Fire kolonner på en telefon klemmer tallene; den responsive Columns-kontrol løser det med et klik.
video tutorial #
Hvis du gerne vil se Counter Up-widgetten i aktion, går denne video gennem hele opsætningen, fra det første element til det animerede statistikband på live-siden:
Ofte stillede spørgsmål #
Hvad er Counter Up-widget i Master Addons?
Det er en Elementor widget til animerede stat sektioner. Hvert element holder et tal, der tæller op fra nul, når siden indlæses, plus et præfiks, suffiks, titel og et valgfrit ikon eller billede. Kolonner, ikonstørrelse og kortstyling deles på tværs af sættet.
Hvordan viser jeg 120M+ i stedet for 120000000?
Indstil Tallet til 120 og Talsuffikset til M+. Tælleren animerer til 120 og viser 120M+. Det samme virker for K+ tusinder og decimalværdier som 5,5 med et K+ suffiks.
Kan hver tæller have sit eget ikon og farve?
Ja. Hvert element vælger sit eget ikon eller billede gennem Type kontrol, og hvert element har sin egen Baggrundsfarve. Delt ikonstørrelse, cirkelstørrelse og kortstyling kommer fra Icon Settings og fanen Style.
Hvornår starter tælleanimationen?
Tallene tæller fra nul til den værdi, du indstiller, så snart siden indlæses, over cirka to sekunder. Animationen afspilles én gang og venter ikke på, at widgetten ruller til syne.
Kan jeg ændre, hvor mange tællere der sidder på række?
Ja. Dropdownen Kolonner i Counter Up Content tilbyder 1, 2, 3, 4 eller 6 kolonner med en responsiv toggle, så et skrivebordsbånd med fire kolonner kan falde til to kolonner på tablets og en på telefoner.
Hvordan adskiller Counter Up sig fra Elementor Counter-widgetten?
Elementortæller viser ét tal pr. widget og lader dig indstille startnummer, varighed og tusindseparator, og det tæller, når tallet ruller til syne. Tæller op holder mange tællere i én widget med ikoner, kortstyling og 1, 2, 3, 4 eller 6 kolonner, og det tæller én gang på sideindlæsning.
Indpakning #
Counter Up-widgeten forvandler almindelige tal til et statistikbånd, der bevæger sig: ikoner pr. vare, præfikser og suffikser, delte kolonner og kortstyling og en optællingsanimation, der tegner øjet nøjagtigt én gang. Gennemse det fulde sæt af Master Addons widgets og udvidelser for at se, hvad der ellers leveres med plugin'et. Den Counter Up produktside sammenligner det med Elementor Counter-widgetten.
