{"id":2773,"date":"2021-06-22T11:07:23","date_gmt":"2021-06-22T11:07:23","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2773"},"modified":"2023-04-24T12:23:38","modified_gmt":"2023-04-24T12:23:38","slug":"add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/","title":{"rendered":"Add a Countdown Timer to WordPress with Elementor&#8217;s Countdown Widget"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2773\" class=\"elementor elementor-2773\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-35cc406a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"35cc406a\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2becf989\" data-id=\"2becf989\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1f2135c elementor-widget elementor-widget-video\" data-id=\"1f2135c\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/o8yn9q5p9rY&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1c62bd39 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1c62bd39\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-440ed347\" data-id=\"440ed347\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-325fa580 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"325fa580\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-8451\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-8451\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-8452\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-8452\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-8451\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-8451\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-8451\" tabindex=\"0\" hidden=\"false\"><p>Learn how to add a countdown timer on WordPress using Elementor&#8217;s Countdown Widget. These countdowns can be very helpful in creating anticipation among your site visitors, increase conversions and sales and enticing people to buy or sign up.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-8452\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-8452\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-8452\" tabindex=\"0\" hidden=\"hidden\"><p>hey youtubers this is Noah from<br \/>Elementor today we&#8217;ll be going over the<br \/>countdown widget this widget enables you<br \/>to add dynamically creative countdowns<br \/>to your page<br \/>so first we&#8217;ll be searching for the<br \/>widget and dragging it in and once it&#8217;s<br \/>direct and you will see the content tab<br \/>and the style tab in the content tab you<br \/>have full control over the countdown<br \/>widget contents so first of all we have<br \/>the due dates here you actually set the<br \/>date and time of your countdown so say<br \/>we give it a month two o&#8217;clock and once<br \/>I step out see how it starts rolling so<br \/>next I have the view which is either<br \/>block or inline meaning the text and the<br \/>numbers will be viewed as block which is<br \/>just like this with the numbers and then<br \/>the text under or in line one next to<br \/>the other now we have for the days hours<br \/>minutes and seconds we have the option<br \/>of setting it as show or hide see for<br \/>each one I could show it or hide it and<br \/>seconds see next I have the show labels<br \/>option where I could set as show or hide<br \/>for the labels meaning the text days<br \/>hours minutes and seconds so I could<br \/>hide them and now I see only the numbers<br \/>now if I choose to show the labels see<br \/>how you have the option of customizing<br \/>of the labels if I activate it I could<br \/>actually edit the days hours minutes and<br \/>seconds text for example instead of days<br \/>I could say weeks etc for the rest of<br \/>them I&#8217;ll just change that back alright<br \/>so that was the content area of the<br \/>widget we&#8217;ll be moving on to the style<br \/>area the widget now here I have full<br \/>control over the boxes<br \/>the content style so in the box of style<br \/>options I have the container width where<br \/>I could choose the actual width of the<br \/>entire container of the widgets and I<br \/>have a background color where I could<br \/>choose the background color of the boxes<br \/>alright and borders type I could choose<br \/>the type of the border or none see solid<br \/>then I could choose the width and the<br \/>color and radius say 20 or 50 etc now of<br \/>course you could leave the radius<br \/>without any border meaning I could set<br \/>the board of type of none and still you<br \/>will see the border radius set as 50<br \/>next I have space between the boxes here<br \/>I could set the space between the boxes<br \/>as it sounds and I have padding which is<br \/>actually the inner space between the<br \/>text and the edge of the boxes so say I<br \/>give it 20 50 80 so those were the boxes<br \/>style options next the content style<br \/>options I have for the digits and the<br \/>label so for the digits I could choose<br \/>the color okay and typography if I<br \/>activate it I could customize the<br \/>typography for example size it up<br \/>family wait transform etc the usuals and<br \/>next I have for the label the color as<br \/>well I could choose the color for it the<br \/>label and just like for the digits I<br \/>could also customize the typography of<br \/>the label size family wait transform<br \/>style line height letter spacing so now<br \/>I&#8217;ll be showing you a few beautiful<br \/>sections that we created with this<br \/>countdown widget let&#8217;s just scroll down<br \/>so here as you can see is a beautiful<br \/>section with this countdown widget now<br \/>how did we do this let&#8217;s head over to<br \/>the style tab boxes we gave it a<br \/>background color of pink and we reduced<br \/>completely the space between the boxes<br \/>next section is let&#8217;s head over to the<br \/>style box this we gave it a background<br \/>color of complete opacity okay<br \/>now you could also give it black if the<br \/>background is completely black and we<br \/>give it a border type of solid color red<br \/>okay next section here we also gave an<br \/>opacity a light opacity and here it&#8217;s<br \/>pretty neat how you could see the image<br \/>background underneath it next section<br \/>this is a really nice section where we<br \/>actually remember we talked about the<br \/>view see your view we until now we only<br \/>saw the block view here it&#8217;s the inline<br \/>view see how neat that looks and here&#8217;s<br \/>another beautiful example for the inline<br \/>view of the countdown widget so<br \/>basically these examples give you the<br \/>idea of how great this widget actually<br \/>is I hope you enjoyed this video for<br \/>more videos and tutorials subscribe our<br \/>youtube channel or<br \/>miss adopts dot Elementor calm<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Learn how to add a countdown timer on WordPress using Elementor\u2019s Countdown Widget. These countdowns can be very helpful in creating anticipation among your site visitors, increase conversions and sales and enticing people to buy or sign up. Transcript hey youtubers this is Noah from Elementor today we\u2019ll be going over the [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":9709,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-2773","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Add a Countdown Timer to WordPress with Elementor&#039;s Countdown Widget - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add a Countdown Timer to WordPress with Elementor&#039;s Countdown Widget - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Learn how to add a countdown timer on WordPress using Elementor\u2019s Countdown Widget. These countdowns can be very helpful in creating anticipation among your site visitors, increase conversions and sales and enticing people to buy or sign up. Transcript hey youtubers this is Noah from Elementor today we\u2019ll be going over the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-22T11:07:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-24T12:23:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Countdown-Widget.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add a Countdown Timer to WordPress with Elementor's Countdown Widget - Academy","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:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/","og_locale":"en_US","og_type":"article","og_title":"Add a Countdown Timer to WordPress with Elementor's Countdown Widget - Academy","og_description":"Overview Transcript Overview Learn how to add a countdown timer on WordPress using Elementor\u2019s Countdown Widget. These countdowns can be very helpful in creating anticipation among your site visitors, increase conversions and sales and enticing people to buy or sign up. Transcript hey youtubers this is Noah from Elementor today we\u2019ll be going over the [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/","og_site_name":"Academy","article_published_time":"2021-06-22T11:07:23+00:00","article_modified_time":"2023-04-24T12:23:38+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Countdown-Widget.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Add a Countdown Timer to WordPress with Elementor&#8217;s Countdown Widget","datePublished":"2021-06-22T11:07:23+00:00","dateModified":"2023-04-24T12:23:38+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/"},"wordCount":851,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Countdown-Widget.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/","url":"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/","name":"Add a Countdown Timer to WordPress with Elementor's Countdown Widget - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Countdown-Widget.jpg","datePublished":"2021-06-22T11:07:23+00:00","dateModified":"2023-04-24T12:23:38+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Countdown-Widget.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Countdown-Widget.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/add-a-countdown-timer-to-wordpress-with-elementors-countdown-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Add a Countdown Timer to WordPress with Elementor&#8217;s Countdown Widget"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2773"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2773\/revisions"}],"predecessor-version":[{"id":9625,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2773\/revisions\/9625"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/9709"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}