Hur man lägger till en nedräkningstimer-widget i WordPress (3 enkla sätt)

Att lägga till en nedräkningstimer på din WordPress-webbplats kan göra den mer engagerande. Oavsett om du lyfter fram en produktlansering, markerar ett viktigt datum eller bygger förväntan inför ett evenemang, så fyller en nedräkningstimer jobbet effektivt.

Till exempel har vi använt nedräkningar på våra webbplatser för att lyfta fram produktförsäljning, Black Friday-erbjudanden och mer.

Med bara några få steg kan du ställa in denna iögonfallande widget på din webbplats. Den fångar inte bara uppmärksamhet utan håller också din publik informerad.

I den här artikeln kommer du att lära dig tre enkla sätt att lägga till en nedräkningstimer på din WordPress-webbplats. Även om du inte är tekniskt kunnig, har vi dig täckt.

När och varför använda en nedräkningstimer-widget?

Nedräkningstimer är mångsidiga och kan användas i olika scenarier. De skapar spänning och brådska, vilket uppmuntrar besökare att agera.

Lanserar du en ny webbplats? En nedräkningstimer kan bygga förväntan och skapa en buzz. Du visar timern på en vacker kommande sida för att uppmuntra besökare att kolla de senaste uppdateringarna.

Ett annat utmärkt tillfälle att använda en nedräkningstimer är för kommande reor eller kampanjer i din webbutik. Genom att visa en timer informerar du dina kunder om tidsbegränsade erbjudanden, vilket ökar försäljningen och engagemanget.

Nedräkningstimer kan också gynna evenemangsarrangörer. Oavsett om det är ett webinarium, en konferens eller en social sammankomst, hjälper det att ställa in en timer deltagarna att veta exakt när evenemanget kommer att äga rum.

Under webbplatsunderhåll är nedräkningstimrar också användbara. De låter besökare veta när webbplatsen kommer att vara tillgänglig igen så att du kan hålla dem informerade och minska frustrationen.

För mindre användningsområden, som att markera en personlig milstolpe eller en årsdag, lägger nedräkningstimrar till en extra touch på din WordPress-sida.

Nu kan du visa en nedräkningstimer i dina inlägg, sidor och sidofältswidgetområde.

Nedräkningstimers kan också läggas till i lightbox-popup-fönster, flytande fält, scrollboxar och andra designelement för att engagera besökare och få dem att återvända till din webbplats.

Eftersom det finns så många användningsområden för en nedräkningstimer, har vi listat 3 olika metoder för att lägga till en nedräkningstimer-widget i WordPress:

• Metod 1: Lägga till en widget för nedräkningstimer med pluginet Countdown Timer Ultimate (gratis)
• Metod 2: Lägga till en nedräkningstimer-widget med OptinMonster (Rekommenderas)
• Metod 3: Lägga till en nedräkningstimer-widget med SeedProd

Videohandledning

Prenumerera på WPBeginner

Om du föredrar skriftliga instruktioner, fortsätt bara att läsa.

Metod 1: Lägga till en widget för nedräkningstimer med pluginet Countdown Timer Ultimate (gratis)

Countdown Timer Ultimate är ett enkelt plugin som låter dig lägga till en grundläggande nedräkningstimer på din webbplats.

I den här handledningen kommer vi att använda det kostnadsfria pluginet, eftersom det har alla verktyg som behövs för att skapa en nedräkningstimer.

För att komma igång, det första du behöver göra är att installera och aktivera pluginet Countdown Timer Ultimate. Om du behöver hjälp kan du se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering vill du gå till Nedräkningstimer » Lägg till timer från ditt WordPress-adminområde.

På nästa skärm kan du ge din timer en titel. Skriv helt enkelt in valfri titel i fältet 'Lägg till ny timer'.

Därefter kan du skrolla ner till området 'Nedräkningstimer – Inställningar' för att ställa in nedräkningstimerns utgångsdatum och tid.

När du har hittat fältet 'Utgångsdatum & Tid', välj datumet från datumväljaren. Sedan kan du dra reglagen för 'Timme', 'Minut' och 'Sekund' för att justera utgångstiden.

Klicka helt enkelt på ‘Klar’ för att fortsätta till nästa steg.

Nästa steg är att definiera timeretiketten.

För att visa indikatorerna för dagar, timmar, minuter och sekunder i din nedräkningstimer, fortsätt och markera alla rutor i fältet ‘Timeretikett’.

Nu, låt oss skrolla ner på sidan och byta till fliken ‘Design’ för att styla nedräkningstimern.

I den första sektionen, ‘Designinställningar,’ kan du välja en design och ställa in timerstorleken.

Tyvärr kan gratisanvändare bara välja designen ‘Cirkelstil 1’ för timern. I ‘Timerbredd’ kan vi dock definiera hur bred vår timer ska vara. Här ställer vi in den på 850 px.

Under ‘Timerbredd’ hittar du avsnittet ‘Cirkelstilinställningar’.

Det första du vill göra är att välja en animation. Du har två alternativ: ‘Jämn’ och ‘Tics.’

När du har bestämt dig för timeranimationen kan du ställa in cirkelns förgrunds- och bakgrundsbredd genom att dra i reglagen.

Därefter kan du fortsätta att anpassa nedräkningstimerns färger.

I inställningarna för ‘Klockbakgrundsfärger’ kan du justera bakgrundsfärgen och individuellt ändra färgen för dagar, timmar, minuter och sekunder.

När du är nöjd med inställningarna, klicka på knappen ‘Publicera’.

Visa din nedräkningstimer-widget i WordPress

Nu när du har ställt in din nedräkningstimervidget är det dags att lägga till den på din webbplats.

Klicka först på menyalternativet ‘Nedräkningstimer’ från din WordPress-webbplats. Timern du just skapade kommer att listas i tabellen ‘Nedräkningstimer’.

Bredvid din nedräkningstimer ser du en kortkod som du behöver kopiera.

Efter att ha kopierat kortkoden vill du öppna ditt inlägg eller din sida där du vill visa nedräkningstimern.

Härifrån kan du klicka på knappen '+ ' för att lägga till Shortcode-blocket. Klistra sedan helt enkelt in denna kortkod i innehållsområdet på ditt WordPress-inlägg eller din sida.

Kontrollera sedan att du klickar på knappen ‘Uppdatera’ eller ‘Publicera’ för att spara dina ändringar.

Du kan nu besöka din webbplats för att se nedräkningstimer-widgeten i aktion.

Om du använder ett klassiskt tema kan du också lägga till denna nedräkningstimer i din webbplats sidofält.

Gå helt enkelt till sidan Utseende » Widgets. Klicka sedan på knappen ‘+’ i sektionen ‘Huvudsidofält’ och sök efter Shortcode-blocket.

Klicka bara på den när den visas och klistra in nedräkningstimerens kortkod.

När du är klar, glöm inte att klicka på knappen ‘Uppdatera’ för att spara dina widgetinställningar.

Du kan nu besöka din webbplats för att se nedräkningstimern i sidofältet eller ett widget-redo område.

Metod 2: Lägga till en nedräkningstimer-widget med OptinMonster (Rekommenderas)

OptinMonster är det bästa WordPress popup-pluginet på marknaden, men det gör mycket mer än bara popups. Det hjälper dig att konvertera besökare som lämnar webbplatsen till prenumeranter och kunder.

Med OptinMonsters funktion för nedräkningstimer kan du integrera nedräkningstimern i ett ljuslådepopup-fönster, sidofältswidget, flytande fält eller någon annan OptinMonster-kampanjtyp.

Verktyget erbjuder ett smart sätt att visa en nedräkningstimer med en vacker design. Det låter dig till och med skapa evighets-nedräkningstimer i WordPress.

En evig nedräkningstimer startar en nedräkning för varje enskild besökare. Timern börjar sedan när personen kommer till din webbplats. Den kallas också för en dynamisk nedräkningstimer.

Besök först OptinMonster-webbplatsen och registrera dig för en plan som uppfyller dina behov.

När du är klar kan du installera pluginet OptinMonster på din WordPress-webbplats. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Detta plugin kommer att ansluta din WordPress-webbplats till OptinMonster-appen. Efter aktivering kan du klicka på knappen ‘Anslut ett befintligt konto’ och följa anvisningarna för att starta integrationsprocessen.

Därefter ser du ett popup-fönster dyka upp. Välj helt enkelt den e-postadress du använde för att registrera dig för ett OptinMonster-konto och klicka på knappen 'Anslut till WordPress'.

Pluginet kommer nu att ansluta din WordPress-webbplats till ditt OptinMonster-konto.

När du har anslutit kan du börja skapa en ny kampanj från din OptinMonster-instrumentpanel. Gå helt enkelt till OptinMonster » Kampanjer och klicka på knappen ‘Skapa din första kampanj’.

Pluginet erbjuder en mängd olika kampanjtyper och mallar att välja mellan.

Du kan använda vilken kampanjtyp som helst och lägga till nedräkningstimern till den. För den här handledningen använder vi kampanjtypen ‘Popup’. Sedan använder vi mallen ‘Få en rabattkod’.

Ett popup-fönster där du måste namnge mallen kommer att visas. Namnet är endast för din referens, så du kan använda vad du vill.

Till exempel döpte vi vår kampanj till ‘Countdown Timer’.

När du har gjort det, klicka på ‘Starta Byggande.’ OptinMonster kommer sedan att omdirigera dig till byggargränssnittet.

Härifrån utforskar vi "Block"-sektionen i den vänstra panelen. Dra sedan helt enkelt blocket "Nedräkning" och släpp det i förhandsgranskningen i den högra panelen när du ser det.

Därefter kan du välja ‘Nedräkningstyp’ från rullgardinsmenyn i sidopanelen. Det finns två alternativ, ‘Statisk’ och ‘Dynamisk’.

Nu beror valet mellan de två typerna helt på ditt mål. En statisk timer, som namnet antyder, förblir fixerad vid ett enda slutdatum och tid, vilket gör den idealisk för engångsevenemang som en produktlansering eller webbinarium.

Men tänk om du vill skapa en återkommande känsla av brådska? Det är där den dynamiska timern kommer till nytta.

Låt oss säga att din webbutik har en blixtrea varje vecka. En dynamisk timer återställs automatiskt efter varje försäljningsperiod, vilket kan vara till stor hjälp.

För den här guiden skapar vi en dynamisk nedräkningstimer för att marknadsföra veckovisa blixtförsäljningar.

Välj sedan ‘Dynamisk’ från rullgardinsmenyn och ställ in utgångsdatum och tid. Därefter kanske du också vill aktivera alternativet ‘Konverteringsspårning?’ för att samla in kampanjinsikter.

Om du vill kan du anpassa hur nedräkningstimern ser ut.

Byt helt enkelt till fliken ‘Avancerat’, så hittar du anpassningsalternativ för att ändra timerns bakgrundsfärg, typsnitt, skuggor och mer.

När allt är inställt, gå över till fliken ‘Visningsregler’.

Det är här du kontrollerar exakt när och på vilka sidor ditt popup-fönster ska visas. Standardinställningen är efter 5 sekunder på varje sida, men du kan enkelt anpassa den efter dina behov.

Alternativt kan du dra nytta av OptinMonsters MonsterLink.

Den här funktionen låter dig utlösa popup-fönstret så att det visas när användare klickar på en länk eller knapp på din webbplats. Besökare får därmed direkt kontroll över när de vill se ditt erbjudande eller meddelande.

För att använda MonsterLink måste du först klicka på rullgardinsmenyn ‘tid på sidan’. Välj sedan helt enkelt ‘När (Utlösare)’ och sedan ‘MonsterLink (Vid klick)’.

När den har lagts till kan du klicka på ‘Kopiera MonsterLink-kod.’ Du behöver den i inbäddningsprocessen.

Sedan kan du ta bort den andra visningsregeln genom att klicka på papperskorgsikonen.

Nu är det dags att publicera kampanjen med nedräkningstimern. För att göra detta, låt oss gå till fliken 'Publicera'.

Härifrån kan du ändra status från ‘Utkast’ till ‘Publicera’. Därefter klickar du helt enkelt på knappen ‘Spara’ och avslutar redigeraren.

Du kommer sedan att omdirigeras till en OptinMonster-sida, där du måste verifiera din kampanjstatus.

I avsnittet 'Synlighet & Status', ändra statusen 'Väntande' till 'Publicerad'.

Glöm inte att klicka på den gröna knappen ‘Spara ändringar’ för att säkerställa att dina ändringar sparas.

En sak som återstår att göra nu är att lägga till MonsterLink-koden på din WordPress-webbplats.

Först och främst vill du öppna inlägget eller sidan där du vill visa kampanjen med nedräkningstimern.

Till exempel lägger vi till vår till sidan ‘Galleri’ på vår demofotograferingssida. Så, låt oss navigera till Sidor » Alla sidor och klicka på ‘Redigera’ på sidan ‘Galleri’.

På sidredigeraren kan du klicka på "+"-knappen och söka efter blocket "Anpassad HTML". Klicka bara på det för att lägga till det på sidan.

I blocket "Anpassad HTML" klistrar du helt enkelt in MonsterLink-koden du kopierade tidigare.

Här är hur det kan se ut i sidans blockredigerare:

Nu kanske uppmaningen 'Prenumerera nu!' inte passar kampanjens syfte.

Så, låt oss ändra det till ‘Få vår begränsade kampanjkod,’ ‘Lås upp exklusiva rabatter,’ eller något annat som bättre passar sammanhanget. När du är klar kan du ‘Uppdatera’ eller ‘Publicera’ sidan.

Nu, om du besöker sidan, kommer du att se MonsterLink i aktion.

Försök bara att klicka på den, så ser du kampanjpopupen med nedräkningstimern.

Här är hur det ser ut på vår demo 'Galleri'-sida:

Metod 3: Lägga till en nedräkningstimer-widget med SeedProd

SeedProd är den bästa byggaren för teman och landningssidor för WordPress.

Dess dra-och-släpp-byggare låter dig skapa fantastiska landningssidor och lägga till en nedräkningstimer för att fånga dina besökares uppmärksamhet.

För att använda nedräkningstimerfunktionen behöver du SeedProd Pro. Med Pro-planen kan du också få tillgång till olika mallar, sidblock för anpassning, integrationer för e-postmarknadsföring och mer.

Det första du behöver göra är att installera och aktivera SeedProd Pro-pluginet på din WordPress-webbplats. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering kan du gå till SeedProd » Inställningar från din WordPress-instrumentpanel för att lägga till och verifiera din licensnyckel. Du kan få denna nyckel i ditt SeedProd-konto.

Efter att ha angett licensnyckeln kan du klicka på knappen ‘Verifiera nyckel’.

Du kan också installera SeedProd Pro manuellt. Innan du gör det, se till att du har laddat ner SeedProd Pro .zip-filen från ditt SeedProd-konto.

Gå sedan till Plugins » Lägg till ny plugin och klicka på knappen ‘Ladda upp plugin’ så att alternativet ‘Välj fil’ visas. Ladda upp SeedProd Pro .zip -filen.

Efter det, klicka helt enkelt på knappen ‘Installera nu’.

Nu är du redo att skapa en ny landningssida. För att komma igång vill du navigera till SeedProd » Landningssidor.

SeedProd låter dig skapa olika typer av sidor, inklusive kommer snart-sidor, anpassade WooCommerce-varukorgssidor, inloggningssidor och 404-sidor. Du kan också skapa andra landningssidor genom att klicka på knappen 'Lägg till ny landningssida', som en tack-sida eller en sida för att anmäla sig till ett webbinarium.

För den här handledningen kommer vi att använda sidan 'Kommer snart'. Det är en utmärkt plats att lägga till en nedräkningstimer och påminna din publik om en kommande produkt eller händelse.

Låt oss klicka på knappen 'Skapa en Kommer Snart-sida'.

Därefter väljer du en mall för din landningssida.

Även om det finns ett alternativ att skapa en sida från grunden med en tom mall, rekommenderar vi att du använder en mall, eftersom det sparar tid och låter dig redigera designen som du vill.

När du har hittat den perfekta mallen kan du föra muspekaren över den och klicka på 'kontrollera'-knappen för att använda den.

På nästa skärm kommer du till SeedProd dra-och-släpp-sidbyggare under fliken ‘Design’.

Här kan du anpassa landningssidan genom att lägga till eller ta bort sektioner och block. Du kan också formatera sidans layout.

För att lägga till nedräkningstimern, scrolla helt enkelt ner i den vänstra panelen till sektionen ‘Avancerade’ block. Dra och släpp sedan blocket ‘Nedräkning’ var som helst på din landningssida.

När du har lagt till nedräkningsblocket, låt oss anpassa det. Klicka helt enkelt på det, så ser du anpassningsalternativen i den vänstra panelen.

Det finns 3 flikar du kan kontrollera, 'Innehåll', 'Mallar' och 'Avancerat'. Låt oss kontrollera dem en efter en.

I fliken 'Innehåll' kan du välja en nedräkningstyp, ställa in slutdatum och tid, välja en tidszon, justera timerns justering och mer.

Nu går vi vidare till 'Mallar'.

Här låter SeedProd dig välja mellan 5 tillgängliga stilar för nedräkningstimern.

Slutligen har fliken 'Avancerat' flera sektioner.

Avsnittet 'Stilar' låter dig ändra timerns typografiska inställningar, färger och ramar.

Sedan kanske du vill skrolla ner på fliken ‘Avancerat’ till sektionen ‘Animationseffekter’.

Här kan du tillämpa animation för att framhäva nedräkningstimern när besökare ser den. Klicka helt enkelt på rullgardinsmenyn och välj bland tillgängliga effekter, som 'Flash', 'Pulse', 'Swing', 'Wobble' och mer.

Om du vill justera andra element på landningssidan, som texter eller sociala medieknappar, kan du klicka på dem. Då öppnar SeedProd anpassningsalternativen.

När allt är klart, klicka på fliken ‘Sidinställningar’ för att publicera din landningssida med en nedräkningstimer.

Det första du vill göra är att ge landningssidan en titel. Till exempel döpte vi vår landningssida till ‘Kommer snart’.

Därefter kan du ändra 'Sidstatus' från 'Utkast' till 'Publicera'. Du har också möjlighet att visa eller dölja länken 'Drivs av SeedProd'.

Låt oss sedan kontrollera ‘Åtkomstkontroll’ under fliken ‘Sidinställningar’ och hantera vem som kan se din landningssida.

Den här funktionen är verkligen användbar om du vill att vissa personer ska kunna kringgå sidan 'Kommer snart' och arbeta med att utveckla din webbplats. SeedProd låter dig också inkludera och exkludera URL:er där sidan 'Kommer snart' kommer att visas.

Som standard kommer sidan att vara synlig på hela webbplatsen. Du kan dock ändra den så att den bara visas på startsidan eller på specifika URL:er.

Därefter kan du optimera din sida för sökmotorer genom att gå till SEO-inställningarna.

SeedProd låter dig lägga till en SEO-titel, beskrivning, favicon och en social medie-miniatyrbild.

Om du vill lägga till kodavsnitt på din landningssida, gå till avsnittet 'Skript' i Sidinställningar. Här kan du lägga till skript i sidans sidhuvud, brödtext och sidfot.

Till exempel kan du lägga till Google Analytics spårningskod i fältet 'Header Scripts' för att se hur folk använder din landningssida.

När du är klar, se till att klicka på knappen 'Spara'. Du kan också förhandsgranska din landningssida för att säkerställa att allt är korrekt inställt.

Klicka sedan bara på 'X'-knappen för att stänga SeedProd-redigeraren.

Gå nu till SeedProd » Landningssidor och ändra statusen för din 'Kommer snart'-sida till 'Aktiv'.

Det är allt. Din landningssida med en nedräkningstimer kommer att vara live.

Du kan nu besöka din webbplats för att se nedräkningstimern för ‘Kommer snart’ i aktion.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en nedräkningstimer-widget i WordPress. Därefter kanske du också vill kolla in fler coola knep för webbdesign på hur man lägger till en rullande nyhetsflöde och hur man lägger till roterande vittnesmål i WordPress.

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.