Counter Up

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 besøgende ruller til dem, 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 animerer fra nul, når det ruller til visning, 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 Counter Up 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 #

Open Counter Up Content 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. Hurtigere animation, renere kort, 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, 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 #

The 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 Style faneblad, Counter Up Box Style dækker det delte kort-look: Baggrundsfarve, Polstring, Margin, Border Type, Grænseradius, og Box Shadow. 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 #

The 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 spinder tallene op fra nul, når sektionen ruller til syne, og sætter sig 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. At tælle til 120 med et M+-suffiks animerer hurtigere og læser renere end at tælle til ni cifre.
• 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 #

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, og tjek prissætning side til Pro-ekstraudstyr som mønstre.