Hur man visar en animerad räknare i WordPress

Sannolikheten är stor att din webbplats har imponerande siffror att dela, som antal kunder, års erfarenhet, framgångsrika projekt eller vunna priser.

Utmaningen är att få besökare att faktiskt märka och bry sig om dessa framgångar istället för att scrolla förbi dem. Det är där animerade nummerantalare lyser.

När dina statistikvärden räknas upp från noll när besökare når det avsnittet, skapas en liten firande av din framgång. Denna rörelse fångar uppmärksamhet och gör dina prestationer mer betydelsefulla och trovärdiga.

Genom vår erfarenhet av att optimera WordPress-sajter för bättre engagemang har vi upptäckt att det är enklare än de flesta tror att lägga till dessa animationer.

Vi visar dig exakt hur du lägger till dem med 2 enkla metoder.

Innan du lägger till en nummerantalanimation i WordPress… 📊

Innan vi går in på "hur", låt oss snabbt fundera på var dessa animerade räknare fungerar bäst på din WordPress-webbplats:

• Hem hjältesektioner för att visa upp stora framgångar
• Produktsidor för att lyfta fram kundnöjdhetsgrad
• Om-sidor för att visa företagets milstolpar
• Landningssidor för att betona sociala bevis
• Prissektioner för att visa kundbas eller besparingar

Från vår erfarenhet har vi funnit att strategisk placering är lika viktig som själva animationen. Till exempel använder OptinMonster effektivt en nummermätare för att visa optimerade besöksessioner per månad, och placerar den precis där potentiella kunder fattar sina beslut.

Att lägga till och anpassa en nummervisa i WordPress kräver vanligtvis redigering av kod. Detta kan vara knepigt för nybörjare som inte vet hur man skriver kod.

Med det sagt, låt oss se hur du kan visa en animerad nummervisa i WordPress. Vi kommer att täcka 2 enkla metoder med hjälp av en premium webbplatsbyggare och ett gratis plugin.

Du kan klicka på länkarna nedan för att hoppa till ditt föredragna avsnitt:

• Alternativ 1: Skapa en landningssida med nummerantalanimation med en sidbyggare
• Alternativ 2: Lägg till en snabb nummermätaranimation på valfri sida med en plugin
• Bonus: Lägg till en fängslande animerad bakgrund 🌟

Alternativ 1: Skapa en landningssida med nummerantalanimation med en sidbyggare

Om du bygger en landningssida och vill ha full kontroll över hur dina nummerantal ser ut och beter sig, är en sidbyggare ditt bästa val.

Vi har testat dussintals WordPress sidbyggare genom åren, och SeedProd sticker konsekvent ut för sina omfattande anpassningsmöjligheter, särskilt för dynamiska element som nummermätare.

För mer information kan du kolla in vår djupgående SeedProd-recension.

Det första du behöver göra är att installera och aktivera SeedProd. Om du behöver hjälp, se vår guide om hur man installerar en WordPress-plugin.

När SeedProd har aktiverats kommer det att be dig ange licensnyckeln. Du hittar licensnyckeln i ditt kontoområde och i köpbekräftelsemejlet.

Därefter behöver du gå till SeedProd » Landningssidor från din WordPress-adminpanel.

SeedProd låter dig skapa professionellt designade anpassade landningssidor, inklusive en kommande-sida, underhållslägesida, inloggningssida och 404-sida.

Klicka på knappen ‘Lägg till ny landningssida’.

Därefter kan du välja en SeedProd-mall för din landningssida och visa den animerade nummerräknaren.

Håll muspekaren över en mall och klicka på den orangea kryssknappen.

Ett popup-fönster öppnas nu. Ange bara ett sidnamn och en sid-URL.

Klicka sedan på knappen 'Spara och börja redigera sidan'.

Detta startar SeedProd dra-och-släpp-byggaren.

Därefter kan du redigera din sidmall genom att lägga till olika block eller klicka på befintliga element på sidan.

För att lägga till en animerad nummervisa, dra helt enkelt blocket Räknare från menyn till vänster och släpp det på mallen.

Därefter kan du välja Räknarblocket för att anpassa det ytterligare.

Till exempel finns det alternativ för att ändra räknarens start- och slutnummer, ange ett nummerprefix och suffix samt redigera titeln.

Därefter kan du växla till fliken 'Avancerat' under inställningarna för Räknarblocket till vänster.

Här hittar du fler alternativ för att ändra stil, färgschema, avstånd, teckensnitt och mer för ditt Räknarblock.

Klicka sedan på 'Spara'-växlingsknappen högst upp.

Du kan nu välja 'Publicera' från rullgardinsmenyn.

För att se den animerade räknaren i aktion, besök din WordPress-blogg.

Så här såg det ut på vår demosida.

Alternativ 2: Lägg till en snabb nummermätaranimation på valfri sida med en plugin

Ibland kan en sidbyggare vara för mycket när allt du behöver är en enkel nummervärdesräknare. Det är där Counter Number-pluginet kommer in. Det är en gratis, lättviktig lösning som gör en sak och gör det bra: låter dig lägga till nummeranimationer var som helst på din webbplats med enkla kortkoder.

Först måste du installera och aktivera pluginet Counter Number. För mer information, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering kan du gå till Räknarnummer » Alla räknare från din WordPress-instrumentpanel och klicka på knappen 'Lägg till ny räknare'.

Därefter kan du ange en titel för ditt räknarantal.

I gratisversionen kan du bara välja den enkla designmallen.

Därefter kan du lägga till detaljer för räknarnumret. Det finns alternativ för att redigera räknarens titel, välja en ikon och ange räknarens nummer.

Du kan lägga till så många räknarnummer som du vill genom att klicka på knappen 'Lägg till ny räknarruta' längst ner.

Dessutom får du fler anpassningsalternativ från panelen till höger.

Till exempel låter pluginet dig ändra räknartitelns färg, nummerfärg, ikonstorlek, teckensnittsstorlek, teckensnittsfamilj och mer.

Efter att ha gjort ändringarna, scrolla tillbaka till toppen och publicera din räknare.

Därefter kan du gå till Räknarnummer » Alla räknare från din WordPress-instrumentpanel.

Kopiera nu räknarkortkoden. Den kommer att se ut ungefär så här:

[COUNTER_NUMBER id=41]

Därefter kan du placera detta WordPress-designelemnt var som helst på din webbplats, från inlägg och sidor till sidofält.

Lägg bara till ett nytt inlägg eller en ny sida eller redigera en befintlig. När du är i innehållsredigeraren klickar du bara på '+' tecknet och lägger till ett Shortcode-block.

Därefter kan du klistra in kortkoden för räknaren i blocket.

Härifrån kan du förhandsgranska och publicera din sida eller inlägg för att se det animerade nummerantalet i aktion.

Bonus: Lägg till en fängslande animerad bakgrund 🌟

Efter att ha förbättrat din webbplats med engagerande nummervärden, rekommenderar vi att du höjer dess visuella utseende med en animerad bakgrund.

Detta element gör din sida mer interaktiv och fångar din publiks uppmärksamhet så fort de anländer. Dessutom ger det ett högkvalitativt utseende utan att överväldiga ditt innehåll.

Ett enkelt sätt att lägga till en animerad bakgrund är att använda particle.js-biblioteket. Detta lätta JavaScript-bibliotek möjliggör fantastiska visuella effekter med anpassningsbara partiklar.

Du kan finjustera deras storlek, färg, form och rörelse, och de svarar på användarinteraktioner som musrörelser eller klick.

På WPBeginner har vi funnit Seed પ્રોડ્સ inbyggda partikelbakgrundsfunktion imponerande. Med SeedProd är det enkelt att integrera particle.js på dina sidor och kräver ingen kodning.

Den erbjuder olika animationsstilar, och du kan skapa anpassade partikeleffekter som perfekt matchar ditt tema. För att dyka djupare in i denna metod, kolla in vår detaljerade guide om hur man lägger till en animerad bakgrund i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar en nummeranimering i WordPress. Du kan också se vår handledning om hur man lägger till en animerad bakgrund i WordPress och vårt experttips om de bästa WordPress-temabyggarna för att designa ditt perfekta tema.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.