{"id":8007,"date":"2019-06-06T07:52:01","date_gmt":"2019-06-06T07:52:01","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=8007"},"modified":"2023-02-03T11:50:45","modified_gmt":"2023-02-03T11:50:45","slug":"jetelements-countdown-timer-widget-how-to-create-a-countdown-timer","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/","title":{"rendered":"How to Create a Countdown Timer"},"content":{"rendered":"\n<p><strong>Countdown Timer<\/strong> widget of <strong>JetElements<\/strong> is a perfect tool for adding a timer with a countdown to your website. Due date countdown shows both you and your users exactly how much time it is left to the specific event or to finish some task or project. A website countdown timer can increase sales of an online store or improve the user experience of a blog. You can use the <strong>Countdown Timer<\/strong> widget for different purposes, everything depends on your needs.<\/p>\n\n\n\n<p>From this tutorial, you will learn how to create a countdown timer for your website in a few clicks. Let\u2019s start.<\/p>\n\n\n\n<p class=\"style-title-numecal\"><b><span>1<\/span> Step<\/b> <strong>\u2014 Activate Countdown Timer widget<\/strong><\/p>\n\n\n\n<p>First of all, make sure that you\u2019ve activated the <strong>Countdown Timer<\/strong> widget. To check this, open your<strong> WordPress Dashboard <\/strong>and navigate to the <strong><em>JetPlugins<\/em><\/strong><em> &gt; <\/em><strong><em>JetElements Settings<\/em><\/strong><em> &gt; <\/em><strong><em>Available Widgets<\/em><\/strong> and turn on the <strong>Countdown Timer<\/strong> widget.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/countdown-timer-enable.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/countdown-timer-enable-2x.png 2x\" alt=\"enabling of countdown timer\" class=\"wp-image-20366\"><\/figure><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>2<\/span> Step<\/b> <strong>\u2014 Add and customize a Countdown Timer widget<\/strong><\/p>\n\n\n\n<p>After that, open the needed page in Elementor and drag-n-drop the widget to the section where you want to place it.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/countdown-timer-widget.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/countdown-timer-widget-2x.png 2x\" alt=\"Countdown Timer widget\" class=\"wp-image-20368\"><\/figure><\/div>\n\n\n\n<p>In the <strong>General <\/strong>settings block, you can enable or disable <strong>Days<\/strong>, <strong>Hours<\/strong>, <strong>Minutes<\/strong>, and <strong>Seconds<\/strong> in your widget, and choose <strong>Labels <\/strong>for them. That\u2019s a great option because you can remove every single element in the countdown timer. Moreover, you can add a <strong>Blocks Separator<\/strong> option if you want to see any.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/countdown-general-settings-1.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/countdown-general-settings-1-2x.png 2x\" alt=\"Countdown Timer General settings\" class=\"wp-image-20360\"><\/figure><\/div>\n\n\n\n<p><strong>Actions After Expire<\/strong> drop-down menu allows you to choose what happens when the timer stops. <strong>Redirect <\/strong>means that the user will be sent to another page. You also can choose to <strong>Show Message<\/strong> or <strong>Hide Timer<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/countdown-general-settings-2.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/countdown-general-settings-2-2x.png 2x\" alt=\"Countdown Timer General settings\" class=\"wp-image-20362\"><\/figure><\/div>\n\n\n\n<p>In the <strong>Settings <\/strong>menu block, there are options to customize the countdown timer even further.<\/p>\n\n\n\n<ul>\n<li><strong>Type<\/strong>. Here you can choose one of three types of countdown timers. Due Date will make the timer count time from the moment user opens it to the date you type into the Due Date bar. Using Dynamic Tags, you can choose not a static date but the one filled in by the user. Evergreen Timer will show every user the set number of Hours and Minutes left, no matter when he opens it. Endless Timer allows you to set the date and time of the <strong>Start Timer<\/strong> and then will reset it every defined number of <strong>Hours <\/strong>and <strong>Minutes<\/strong>.<\/li>\n\n\n\n<li><strong>Item Size<\/strong>. Here you can choose how big will the days\/hours\/minutes\/seconds blocks be. <strong>Auto <\/strong>will automatically make the blocks fit the content. <strong>Fixed <\/strong>will allow you to choose <strong>Width <\/strong>and <strong>Height<\/strong>. <\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/countdown-settings.png\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/countdown-settings-2x.png 2x\" alt=\"Countdown Timer settings\" class=\"wp-image-20364\"><\/figure><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>3<\/span> Step<\/b> <strong>\u2014 Do Countdown Timer designing<\/strong><\/p>\n\n\n\n<p>The last thing here is <strong>Style<\/strong> settings. You\u2019re able to style up your website countdown timer according to your needs and taste with the help of different options.<\/p>\n\n\n\n<p>When you\u2019re done with all settings, click on the &#8220;<strong>Publish<\/strong>&#8221; button and preview the results.<\/p>\n\n\n\n<p>That\u2019s all you have to do. Now you know how to create a <strong>Countdown Timer<\/strong> using <strong>JetElements<\/strong> plugin. Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial explains what steps you have to take to create a Countdown Timer with the help of the JetElements plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[517],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JetElements | How to use a Countdown Timer widget | Crocoblock<\/title>\n<meta name=\"description\" content=\"Check how to show how much time is left to the specific event with the Countdown timer widget from the JetElements plugin for Elementor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetElements | How to use a Countdown Timer widget | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Check how to show how much time is left to the specific event with the Countdown timer widget from the JetElements plugin for Elementor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-03T11:50:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/countdown-timer-enable.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/\",\"name\":\"JetElements | How to use a Countdown Timer widget | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-06T07:52:01+00:00\",\"dateModified\":\"2023-02-03T11:50:45+00:00\",\"description\":\"Check how to show how much time is left to the specific event with the Countdown timer widget from the JetElements plugin for Elementor.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Countdown Timer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetElements | How to use a Countdown Timer widget | Crocoblock","description":"Check how to show how much time is left to the specific event with the Countdown timer widget from the JetElements plugin for Elementor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/","og_locale":"en_US","og_type":"article","og_title":"JetElements | How to use a Countdown Timer widget | Crocoblock","og_description":"Check how to show how much time is left to the specific event with the Countdown timer widget from the JetElements plugin for Elementor.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/","og_site_name":"Help Center","article_modified_time":"2023-02-03T11:50:45+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/countdown-timer-enable.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/","name":"JetElements | How to use a Countdown Timer widget | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-06T07:52:01+00:00","dateModified":"2023-02-03T11:50:45+00:00","description":"Check how to show how much time is left to the specific event with the Countdown timer widget from the JetElements plugin for Elementor.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-countdown-timer-widget-how-to-create-a-countdown-timer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create a Countdown Timer"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/8007"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=8007"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=8007"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=8007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}