Letar du efter ett sätt att displaya en animerad nummerräknare på din WordPress site?
Showing a number count hjälper till att genomföra dina besökares uppmärksamhet och allow you att visa milstolpar, nöjda customers, framgångsrika projekt completed och annan viktig statistik på din website.
I den här artikeln visar vi dig hur du visar en nummerräkningsanimation i WordPress.
Varför add to en nummerräkningsanimation i WordPress?
Att visa en nummerräknare på din WordPress website är ett bra sätt att engagera användare och genomföra deras uppmärksamhet.
Du kan använda den för att displayed viktig statistik på din site, gillar antalet månatliga besökare eller antalet artiklar på en WordPress blogg.
På samma sätt kan du använda ett animerat räkneverk för att displayed completed projects, the number of satisfied customers, the number of clients, milestones achieved by your business, and other crucial information.
OptinMonster använder till exempel en nummerräknare för att visa månatliga optimerade besökarsessioner.
Att lägga till och customize en nummerräkning i WordPress kräver vanligtvis att man editerar kod. Detta kan vara knepigt för Beginnare som inte vet hur man skriver kod.
Med detta sagt, låt oss se hur du kan visa en animerad nummerräknare i WordPress. Vi kommer att täcka 2 enkla metoder med hjälp av en premium website builder och en gratis plugin.
You can click the links under to jump ahead to your preferred section:
Metod 1: Visa en nummerräkningsanimation med hjälp av SeedProd
Det bästa sättet att add to en animerad nummerräknare i WordPress är genom att använda SeedProd. Det är den bästa page buildern för WordPress som erbjuder massor av alternativ för customomize.
För denna tutorial kommer vi att använda SeedProd Pro-versionen eftersom den innehåller avancerade block och tillåter dig att add en räknare. Det finns också en SeedProd Lite-version som du kan prova gratis.
Det första du behöver göra är att installera och aktivera SeedProd. Om du behöver hjälp, vänligen se vår guide om hur man installerar ett plugin för WordPress.
Vid aktivering kommer SeedProd att be dig att enter license key. Du kan hitta license key i your account area och i köpbekräftelsen i email.
Därefter måste du heada över till SeedProd ” Landing Pages från din WordPress adminpanel.
SeedProd låter dig skapa professionellt utformade custom landing pages, inklusive en coming soon page, maintenance mode page, login page och 404 page.
Gå vidare och klicka på knappen ”Add New Landing Page”.
Efter det kan du välja en SeedProd template för din landing page och visa den animerade nummerräknaren.
Håll bara hovern över en template och click på den orangefärgade knappen för att kontrollera.
Ett popup-fönster kommer nu att öppnas. Enter bara ett sidnamn och sidans URL.
Därefter klickar du på knappen ”Save and Start Editing the Page”.
Detta kommer att starta SeedProd drag and drop-byggaren.
Därefter kan du editera din page template genom att lägga till olika block eller clicka på befintliga element på sidan.
För att add to en animerad nummerräkning, drag and drop Counter blocket från menyn till vänster och släpp det på templates.
Efter det kan du välja Counter block för att customize det ytterligare.
Det finns till exempel alternativ för att ändra räknarens start- och slutnummer, enter ett nummerprefix och suffix samt edit av rubriken.
Därefter kan du byta till tabben ”Avancerat” under Counter block-inställningarna till vänster.
Här hittar du fler alternativ för att ändra stil, färg, avstånd, font och mer för ditt Counter block.
Klicka sedan på ”Save” toggle högst upp.
You can now choose ”Publicera” from the dropdown menu.
För att se den animerade nummerräknaren i action, gå vidare och besök din WordPress site.
Så här gillade vi det på vår demo site.
Metod 2: Visa en nummerräkning animation med hjälp av räknare nummer
Ett annat sätt för you att add number count animation i WordPress är genom att använda Counter Number plugin.
Det är ett gratis plugin för WordPress som är lätt att använda och låter dig skapa enkla nummerräknare för din webbplats.
Först måste du installera och aktivera pluginet Counter Number. För mer detaljer, vänligen se vår guide om hur man installerar ett plugin för WordPress.
Efter aktivering kan du gå till Counter Numbers ” Alla rä knare från din WordPress dashboard och klicka på knappen ”Add New Counter”.
Efter det kan du enter en Rubrik för ditt motnummer.
I den gratis versionen kan du bara välja den vanliga designmallen. Om du vill ha fler templates och alternativ för customize, föreslår vi att du använder SeedProd.
Därefter kan du add to detaljer för räknaren. Det finns alternativ för att editera rubriken på räknaren, välja en icon och enter värdet på räknarens nummer.
Du kan lägga till så många räknare som du vill genom att klicka på knappen ”Add New Counterbox” längst ner.
Förutom det får du fler alternativ för customize från panelen till höger.
Till exempel låter pluginet dig ändra räknarens rubrikfärg, nummerfärg, icon-storlek, fontstorlek, fontfamilj och mer.
När du har gjort ändringarna rullar du tillbaka högst upp och publicerar din räknare.
Därefter kan du heada till Counter Numbers ” Alla räknare från din WordPress dashboard.
Gå vidare och kopiera Counter Shortcode. Det kommer att se ut ungefär så här:
[COUNTER_NUMBER id=41]
Efteråt kan du placera din animerade nummerräkning var som helst på din website, från posts och pages till sidebars.
Lägg bara till en new post eller page eller edit en befintlig. När du är i content editor klickar du bara på ”+”-tecknet och add to ett Shortcode block.
Därefter kan du klistra in kortkoden för räknarnumret i blocket.
Härifrån kan du previewa och publicera din page eller post för att se den animerade nummerräkningen i action.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar en nummerräkningsanimation i WordPress. Du kan också se vår tutorial om hur du lägger till en animerad bakgrund i WordPress och vårt expertval av de bästa WordPress-temabyggarna för att designa ditt perfekta theme.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Har du en fråga eller ett förslag? Lämna gärna en kommentar för att starta diskussionen.