{"id":16253,"date":"2020-11-18T17:00:08","date_gmt":"2020-11-18T16:00:08","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=16253"},"modified":"2022-01-13T11:09:17","modified_gmt":"2022-01-13T10:09:17","slug":"how-to-add-countdown-timer-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-countdown-timer-in-wordpress\/","title":{"rendered":"How to Add a Countdown Timer in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]In this digital era where online presence plays a major role in promoting your business, <strong>countdown timers have become one of the most effective solutions for bringing attention to any future brand-related happenings<\/strong>. There\u2019s no better way to hype up any time-sensitive occasion or offer than to place a clock-like feature somewhere on your web page that keeps ticking away, naturally creating a sense of urgency and building excitement around any event that is yet to come.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"386\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Eona-Coming-Soon.jpg\" class=\"attachment-full size-full\" alt=\"Eona Coming Soon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Eona-Coming-Soon.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Eona-Coming-Soon-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Eona-Coming-Soon-620x342.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]While there are some great <a href=\"https:\/\/qodeinteractive.com\/theme-shortcode\/countdown-wordpress-themes\/\">WordPress themes with a countdown shortcode<\/a>, with others, you usually need to install one of the available <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-countdown-timer-plugins\/\">WordPress countdown timer plugins<\/a> to add this useful feature to your site. And we will help you learn how to use the potential of your countdown timer to the fullest by <strong>showing you how to add it with two different plugins (one of which is our very own Qi Addons for Elementor plugin), as well as how to do it in Qode themes<strong>.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here are the topics we will cover:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-a-countdown-timer\">What is a Countdown Timer and Why You Should Use One<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-countdown-timer-with-qi-addons\">Adding a Countdown Timer in WordPress With Qi Addons for Elementor Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-countdown-timer-with-countdown-timer-ultimate-plugin\">Adding a Countdown Timer In WordPress With the Countdown Timer Ultimate Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-countdown-timer-element-in-qode-themes\">Adding a Countdown Timer Element in Qode Themes<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/strong><\/strong><\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-a-countdown-timer\"><\/a>What is a Countdown Timer and Why You Should Use One<\/h2>\n<p>[\/vc_column_text][vc_column_text]Acting as an animated clock that shows the remaining time, <strong>a countdown timer is a handy element you can add to your website to build anticipation when it comes to any major events related to your business<\/strong>. Since countdown timers have the natural ability to spark curiosity in people, they can be effective when it comes to generating leads, boosting your sales, and engaging your visitors with your brand in general. To give you a better idea of its versatility and practicality, here are some of the most common instances when adding a countdown widget to your site may prove to be particularly convenient:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>When planning to launch a new product or service<\/strong> \u2013 it\u2019s no secret that any brand-related product or service needs to be effectively promoted in order to gain attention from your visitors, and a countdown timer indicating their release is one of the best ways to do so.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>When launching a new website<\/strong> \u2013 adding a countdown timer to your Coming Soon page is a great way to bring attention to such a big announcement. It can do wonders for user engagement and can get your visitors to come back and check out the end result.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Announcing an upcoming event<\/strong> \u2013 a clock counting down the time until any event you have planned can get your visitors excited and urge them to come back regularly to see how much time is left until the D-day.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>A limited-time offer<\/strong> \u2013 nothing creates a sense of urgency and boosts conversions like adding a countdown timer next to a major discount, coupon-based product, or any limited-time offer. If you have anything you want to sell, consider adding a countdown timer to your website next to your offer. You could be surprised by the results.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are many other examples where a countdown timer feature can be useful to site owners, but we wanted to include some of the most commonly used ones.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that said, let\u2019s take a look at how you can add a countdown timer to your WordPress site.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-countdown-timer-with-qi-addons\"><\/a>Adding a Countdown Timer in WordPress With Qi Addons for Elementor Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you prefer to have plenty of options at your disposal and want to get creative when making your countdown timer, you should look no further than our own <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor plugin<\/a> and its <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/countdown\/\">Countdown widget<\/a>. This widget is fully customizable and allows you to adjust different styles for your countdown timer with the utmost ease. You will be able to <strong>input different labels, hide specific label types<\/strong> (such as minutes and seconds), <strong>set background colors or add images, change typography, adjust the spacing<\/strong>, and more.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Qi-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Qi Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Qi-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Qi-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Qi-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Qi-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you end up installing this plugin, you will also have plenty of other flexible widgets at your disposal (60 widgets in total) completely for free. You will get to customize and combine these widgets in many different ways to create all sorts of pages and sections on your WordPress site \u2013 from item showcases and striking image galleries all the way down to sliders and business-oriented sections.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Before we begin showing you how to add a countdown timer using the Countdown widget, we should note that Qi Addons for Elementor is a plugin that works with Elementor, so you need to have the <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor page builder<\/a> installed first in order to use it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, if you prefer to watch videos, we also have a video that covers the same subject, so make sure to check it out:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/bkwmG8JZerA\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>To get started, go to the backend of your page or post and search for \u201ccountdown\u201d in the Elementor sidebar.<\/strong> You will be able to distinguish the Qi Addons for Elementor Countdown widget from other similar widgets thanks to our trademark red color.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Drag-and-Drop-Qi-Countdown.jpg\" class=\"attachment-full size-full\" alt=\"Drag and Drop Qi Countdown\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Drag-and-Drop-Qi-Countdown.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Drag-and-Drop-Qi-Countdown-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Drag-and-Drop-Qi-Countdown-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Drag-and-Drop-Qi-Countdown-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Drag the element to the right side of the screen<\/strong> and you\u2019ll instantly be able to see what the default widget looks like.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Default-Look.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Default Look\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Default-Look.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Default-Look-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Default-Look-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Default-Look-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, to start customizing, you should <strong>pick the <em>Date<\/em> option in the <em>Content<\/em> tab<\/strong>. This option will allow you to use the calendar to <a href=\"https:\/\/qodeinteractive.com\/magazine\/custom-wordpress-date-and-time-format\/\">choose the date<\/a> you want to countdown to. You will also be able to use the clock right underneath to further adjust the exact time.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"582\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Date-and-Time.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Date and Time\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Date-and-Time.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Date-and-Time-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Date-and-Time-768x461.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Date-and-Time-620x372.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Format<\/em> option below lets you choose the exact format of your countdown, i.e. whether it will show minutes, seconds, etc.. We\u2019ve used \u201cShow All\u201d for our countdown example.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Format.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Format\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Format.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Format-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Format-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Format-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next section contains <em>Labels<\/em> settings. These settings will let you change the text under the numbers. You just have to type in the new word next to the desired label.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Labels.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Labels\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Labels.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Labels-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Labels-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Labels-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There are two tabs you can use here \u2013 one for Singular word forms and another is for Plural forms.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Labels-Singular-Plural.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Labels Singular Plural\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Labels-Singular-Plural.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Labels-Singular-Plural-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Labels-Singular-Plural-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Labels-Singular-Plural-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to the <em>Style<\/em> tab \u2013 here you will get to adjust the styling of your countdown widget and change its look in more detail.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Widget-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Widget Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Widget-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Widget-Style-Tab-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Widget-Style-Tab-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Widget-Style-Tab-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first option on this list is called <em>Justify Content<\/em>. It lets you choose the way the numbers will be spaced within your column. The default option is set to <em>Space Between<\/em> (it creates even gaps but only between the countdown items). You can also change it to <em>Space Around<\/em> (evens out the space on both sides of the countdown items),<em> Space Evenly<\/em> (evens out the space between them), and <em>Center<\/em> (puts the items in the center close together).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Justify-Content.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Justify Content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Justify-Content.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Justify-Content-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Justify-Content-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Justify-Content-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next option, <em>Alignment<\/em>, lets you move your content to the left, center (which is our default), or right.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Alignment.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Alignment\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Alignment.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Alignment-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Alignment-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Alignment-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Digit Color<\/em> option is particularly neat as it allows you to<strong> change the color of the countdown numbers and easily adjust them to your overall website design<\/strong>. You can choose any color from the color picker or simply enter the hex code. We\u2019ve added the hex code (#1e1e1e) to make our numbers appear a dark shade of grey:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Color.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Digit Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Color-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Color-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Color-620x384.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, the <em>Digit Typography<\/em> option contains all the necessary typography-related options. You will be able to set things like <strong>font family, size, weight<\/strong> (we\u2019ve chosen the weight of 500 for our numbers), <strong>transform, style, and decoration<\/strong>. The last three options, however, have more of an effect on the text below the numbers rather than the numbers themselves, and you\u2019ll more likely want to use them when setting your label typography.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"576\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Digit Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Typography-300x178.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Typography-768x457.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Typography-620x369.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you use the <em>Line Height<\/em> option, you will be able to adjust the height of the entire line if you want to, while the <em>Letter Spacing<\/em> option creates more space between the digits.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"572\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Line-Height-and-Letter-Spacing.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Digit Line Height and Letter Spacing\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Line-Height-and-Letter-Spacing.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Line-Height-and-Letter-Spacing-300x177.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Line-Height-and-Letter-Spacing-768x453.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Digit-Line-Height-and-Letter-Spacing-620x366.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Label Color<\/em> option sets the color of the text below the numbers. We\u2019ve added a hex code (#1e1e1e) and made the label color match our numbers:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"580\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Color.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Label Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Color-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Color-768x460.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Color-620x371.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, the<em> Label Typography<\/em> section contains the same options as the <em>Digit Typography<\/em> one. The only thing we\u2019ve changed here is the weight of the labels (we\u2019ve set it to 500 to match the numbers), but you can feel free to change any one of these options according to your preferences.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"593\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Label Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Typography-300x184.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Typography-768x470.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Typography-620x379.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Label Margin Top<\/em> option allows you to create more space between the label and the numbers. You can do so either by using the slider or by entering the desired value. We\u2019ve put 14px for ours.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"517\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Margin-Top.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Label Margin Top\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Margin-Top.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Margin-Top-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Margin-Top-768x410.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Label-Margin-Top-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, the last set of options is <em>Item Style<\/em> which you can use to adjust the look of your items.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>You can change the<em> Background Type<\/em> option to Classic or Gradient<\/strong>. If you choose the Classic background type, you will get to set the color that will appear as the item background.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"549\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Coundown-Classic-Background.jpg\" class=\"attachment-full size-full\" alt=\"Coundown Classic Background\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Coundown-Classic-Background.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Coundown-Classic-Background-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Coundown-Classic-Background-768x435.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Coundown-Classic-Background-620x351.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Simply click on the <em>Color<\/em> option and choose your color either by using the slider or entering a hex code. We\u2019ve chosen the color with the hex code #C88E8E for our example:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Background-Color.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Background Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Background-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Background-Color-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Background-Color-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Background-Color-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want, you can also use the option that allows you to add an image instead of a background color. You can click on the (+) field to add the image from the media library or upload your own.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"541\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Background-Image.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Background Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Background-Image.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Background-Image-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Background-Image-768x429.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Background-Image-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you choose the Gradient background type, you will be able to pick two different colors that will mix together and form a gradient effect for your background. Here\u2019s what it can look like (we\u2019ve added the color that has a hex code of #B2C88E):<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"613\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Color.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Gradient Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Color-300x190.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Color-768x486.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Color-620x392.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Location<\/em> option will allow you to set the amount of space the first color will take up. Like this:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"498\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Color-Location.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Gradient Color Location\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Color-Location.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Color-Location-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Color-Location-768x395.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Color-Location-620x319.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Similarly, you will also be able to change the second color and define the space it takes up right below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"537\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Second-Color.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Gradient Second Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Second-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Second-Color-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Second-Color-768x426.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Second-Color-620x344.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Also, if you use the Linear type, you will be able to change the angle at which the color blend occurs.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"530\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Type-and-Angle.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Gradient Type and Angle\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Type-and-Angle.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Type-and-Angle-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Type-and-Angle-768x420.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Gradient-Type-and-Angle-620x339.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In case you opt for using the Radial type, you will have a whole new set of options at your disposal in the dropdown. Namely, you will get to pick different positions of your first color (such as Center Left, Center Right, Top Center, and so on).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"582\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Second-Color-Type-and-Position.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Second Color Type and Position\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Second-Color-Type-and-Position.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Second-Color-Type-and-Position-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Second-Color-Type-and-Position-768x461.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Second-Color-Type-and-Position-620x372.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, we\u2019re going to switch back to the Classic background type to demonstrate what else you can do with the styling of the countdown widget.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"489\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Classic-Color.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Classic Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Classic-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Classic-Color-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Classic-Color-768x388.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Classic-Color-620x313.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For example, the<em> Item Width<\/em> will allow you to further adjust the space around the countdown items. However, we should note that not all numbers will necessarily have the same width. This can make some numbers fall within the background color, while others won\u2019t (as seen in the picture below):[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"497\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Width.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Item Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Width-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Width-768x394.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Width-620x318.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In case you run into this issue, you can use this option to even everything out. For example, you can fix the width to 200px (like we did) and get something like this:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"494\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Width-Fixed.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Item Width Fixed\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Width-Fixed.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Width-Fixed-300x153.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Width-Fixed-768x392.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Width-Fixed-620x316.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Item Height<\/em> option allows you to do a similar thing. Here\u2019s what your timer can look like depending on your settings (we\u2019ve set it to 200px):[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"499\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Height.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Height\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Height.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Height-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Height-768x395.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Height-620x319.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once again, we\u2019ve reset all these options as we only used them to quickly demonstrate some of the different styles you can create for your countdown element.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Last but not least, the <em>Item Margin<\/em> option allows you to adjust the margins around the countdown items. You can either increase all sides evenly (by using the arrows or typing in a value) or delink these fields and insert specific values to different sides of the margin.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"498\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Margin.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Item Margin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Margin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Margin-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Margin-768x395.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Item-Margin-620x319.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Make sure to<strong> hit the <em>Update\/Publish<\/em> button<\/strong> once you\u2019re done with adjusting your widget settings.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Elementor-Publish.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Publish\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Elementor-Publish.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Elementor-Publish-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Elementor-Publish-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Elementor-Publish-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Also, you can go ahead and preview your page\/post to see what your countdown timer looks like live:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Live-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Live Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Live-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Live-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Live-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Live-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-countdown-timer-with-countdown-timer-ultimate-plugin\"><\/a>Adding a Countdown Timer In WordPress With the Countdown Timer Ultimate Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now, if you only wish to add a simple-looking countdown timer to your site, we recommend installing a plugin called <a href=\"https:\/\/wordpress.org\/plugins\/countdown-timer-ultimate\/\" target=\"_blank\" rel=\"noopener\">Countdown Timer Ultimate<\/a>. The plugin is easy to use and allows you to add a fully functional countdown timer to your pages or posts within minutes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, you need to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install the plugin<\/a> and activate it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, <strong>head to the <em>Countdown Timer &gt;&gt; Add Timer<\/em> page in your WordPress admin<\/strong>, and begin with setting the preferences of your timer.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once there, you should add the title of your timer first, and then proceed to adjust other available options according to your preferences.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Add-New.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Timer Add New\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Add-New.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Add-New-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Add-New-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first option you will notice at the very top is the <em>Expiry Date<\/em> option. Keep in mind that the timer uses the timezone you\u2019ve set in the <em>Settings &gt;&gt; General page<\/em> in your dashboard, so if you wish to change the timezone, you should access this setting to update the timezone of your WordPress site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you do that, you can go ahead and pick the precise date, day and time for the countdown timer.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"384\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Timer Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Settings-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Settings-620x340.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There are also multiple settings related to the looks and animation of your timer, like the ability to choose from two animation styles (Smooth or Ticks), Circle, Background and Countdown Width, as well as the colors of your timer (background color and foreground colors for days, hours, minutes and seconds). If you want, here you can also change the label of your time units.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"398\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Settings-2.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Timer Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Settings-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Settings-2-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Settings-2-620x353.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Hit the <em>Publish<\/em> button when you set your preferences, and then go to the<em> Countdown Timer<\/em> page to copy the countdown timer shortcode.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Timer Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Go ahead and paste the shortcode anywhere on your page or post. To do this in the Classic editor, simply pick the <em>Text<\/em> screen mode and paste the shortcode into the editor box. Hit the <em>Publish<\/em> button when you\u2019re done.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Shortcode-To-Post.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Timer Shortcode To Post\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Shortcode-To-Post.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Shortcode-To-Post-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Timer-Shortcode-To-Post-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For Gutenberg, click on the (+) icon and choose the <em>Shortcode<\/em> block.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Gutenberg-Block-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Block Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Gutenberg-Block-Shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Gutenberg-Block-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Gutenberg-Block-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Paste the shortcode into the block, and you\u2019re all set.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Gutenberg-Block-Shortcode-Adding.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Block Shortcode Adding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Gutenberg-Block-Shortcode-Adding.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Gutenberg-Block-Shortcode-Adding-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Gutenberg-Block-Shortcode-Adding-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019re done with creating your page or post, you can go ahead and preview it to check out what your new countdown timer looks like.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you prefer to have your countdown timer displayed as a widget, the Countdown Timer Ultimate plugin allows you to do that as well.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do this, go to <em>Appearance &gt;&gt; Widgets<\/em> and insert a <em>Text<\/em> widget to your sidebar area.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Text-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Text Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Text-Widget.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Text-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Text-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, simply paste your shortcode into the text widget, add the title, and hit the <em>Save<\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"400\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Text-Widget-Countdown-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Text Widget Countdown Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Text-Widget-Countdown-Shortcode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Text-Widget-Countdown-Shortcode-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Text-Widget-Countdown-Shortcode-620x354.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can check out the look of your countdown timer widget in your website or blog\u2019s sidebar area.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"386\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Text-Widget-Countdown-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Text-Widget Countdown Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Text-Widget-Countdown-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Text-Widget-Countdown-Preview-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Text-Widget-Countdown-Preview-620x342.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-countdown-timer-element-in-qode-themes\"><\/a>Adding a Countdown Timer Element in Qode Themes<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we already mentioned in the very beginning, many Qode Interactive themes come with a built-in countdown timer feature. The appearance of your countdown clock can depend on the theme\u2019s design, and some of its options may vary slightly from theme to theme, though the basic settings are mostly similar. That being said, setting up a countdown timer in Qode themes is really easy to do and can be done in no time. Let\u2019s take a look at how you can add this element to your site using the Bridge WordPress theme.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you\u2019re in the page builder, you need to select the <em>Add Element<\/em> option (WPBakery).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Bakery-Add-Element.jpg\" class=\"attachment-full size-full\" alt=\"WP Bakery Add Element\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Bakery-Add-Element.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Bakery-Add-Element-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Bakery-Add-Element-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will be met with many different shortcodes, including some Qode-specific ones which are all green in color. You need to find and select the one called <em>Countdown<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"388\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Bakery-Add-Countdown.jpg\" class=\"attachment-full size-full\" alt=\"WP Bakery Add Countdown\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Bakery-Add-Countdown.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Bakery-Add-Countdown-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/WP-Bakery-Add-Countdown-620x344.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Clicking on this element will open the <em>Countdown Settings<\/em>. Here, you will be able to <strong>set the options such as the year, month, day, hour and minute when you want the clock to finish counting down time<\/strong>. You can also set the label for each one of these elements (year, month, etc.).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"450\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Shortcode-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Shortcode Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Shortcode-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Shortcode-Settings-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Shortcode-Settings-620x399.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Another great option that comes included with some of the Qode themes is the Singular Label option.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"450\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Shortcode-Settings-2.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Shortcode Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Shortcode-Settings-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Shortcode-Settings-2-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Shortcode-Settings-2-620x399.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you set the singular month, day, hour, minute, and\/or second label, the original label will switch to the singular one when there\u2019s only number one left (as in one month, one day, one hour, and so on). In other words, here you can set any given time unit to display the text that will further bring attention to your upcoming event. For example, if you want, you can set the hour (or any other) singular label to read something like \u201cOnly one hour left!\u201d[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, you can also set the color of your timer, digit and label font size, font weight, and so on.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"450\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Shortcode-Settings-3.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Shortcode Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Shortcode-Settings-3.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Shortcode-Settings-3-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Shortcode-Settings-3-620x399.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019re done with setting your Timer element, click on <em>Save Changes<\/em> and that\u2019s it. You can go ahead and see your countdown timer in action.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"403\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Preview-2.jpg\" class=\"attachment-full size-full\" alt=\"Countdown Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Preview-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Preview-2-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Countdown-Preview-2-620x357.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;90px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Countdown timers are great tools that will help you attract attention and create hype around any upcoming product release, special offer, or event related to your business. When used properly, they can engage your customers with your brand and can be a great sales booster, too. As you could see above, inserting your countdown timer anywhere into your page, post, or sidebar area is quite easy if you use the help of a plugin.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We highly recommend using the Qi Addons for Elementor plugin\u2019s Countdown widget as it allows you to completely customize the look of your timer so that it fits with the rest of your design. On the other hand, if you prefer to have fewer options and simply want to add a basic-looking countdown timer to your site, you should check out the Countdown Timer Ultimate plugin. No matter which option you end up using, just make sure to carefully follow our step-by-step guide and you will be able to add a countdown timer to your WordPress site in no time.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to add a countdown timer in WordPress using our step-by-step guide and create hype and anticipation for any future happenings of your brand. <\/p>\n","protected":false},"author":2,"featured_media":16329,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-16253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=16253"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16253\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/16329"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=16253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=16253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=16253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}