{"id":13999,"date":"2024-04-12T05:37:32","date_gmt":"2024-04-12T05:37:32","guid":{"rendered":"https:\/\/sastraessentialaddons.com\/?post_type=docs&p=13999"},"modified":"2025-01-17T06:27:18","modified_gmt":"2025-01-17T06:27:18","password":"","slug":"countdown","status":"publish","type":"docs","link":"https:\/\/spexoaddons.com\/documentation\/countdown\/","title":{"rendered":"Countdown"},"content":{"rendered":"

How to Configure & Style Countdown<\/h2>\n

Elementor Countdown Widget<\/b><\/a>\u00a0helps you bring your Elementor website to life with a dynamic, animated countdown with an evergreen timer. This element is perfect for creating hype about a new product launching, or for Coming Soon pages. It comes with tons of cool customization options so you can add your own unique touch, and even lets you choose an Expiry Action for when your countdown is over.<\/p>\n

How to Activate Countdown Elementor Widget<\/h2>\n

To activate this\u00a0Spexo Widgets<\/b><\/a>\u00a0element, find the\u00a0\u2018Countdown\u2019<\/b>\u00a0element from the\u00a0‘Search’<\/b>\u00a0option under the\u00a0\u2018ELEMENTS\u2019<\/b>\u00a0tab. Drag and drop the element anywhere on the page.<\/p>\n

\"Countdown<\/p>\n

After you have dragged and dropped the element into any empty section of your page, you should be able to see it on your site like this by default.<\/p>\n

How to Configure the Content Settings<\/h2>\n

After activating the Countdown element, switch to the \u2018Content\u2019<\/b> tab and you will see several options like \u2018General<\/b>\u2019, \u2018Content<\/b>\u2019, and \u2018Expire Actions<\/b>\u2019.<\/p>\n

General<\/h3>\n

From the\u00a0\u2018General\u2019, <\/b>you can choose the timer type as \u2018Due Date<\/b>\u2019.<\/p>\n

If you choose the \u2018Due Date<\/b>\u2019 option,\u00a0you will be able to set your \u2018Countdown Due Date<\/strong>\u2019 by choosing a specific date from the drop-down calendar. After that, you have the option to set the appearance of your countdown\u2019s label by selecting either the \u2018Block<\/strong>\u2019 option or the \u2018Inline<\/strong>\u2019 option from the Content.<\/p>\n

\"Countdown<\/p>\n

Content<\/h3>\n

From the\u00a0\u2018Content\u2019<\/b>, you can adjust the appearance of your evergreen countdown\u2019s label by selecting either the \u2018Block<\/b>\u2019 option or the \u2018Inline<\/b>\u2019 option from the Label Position settings.<\/p>\n

Besides, you can select which labels you want to display. You can also set custom labels here. If you want, you can add a countdown separator and set the positioning for it too.<\/p>\n

\"Countdown<\/p>\n

Expire Actions<\/h3>\n

From the\u00a0Expire Actions<\/b> you can choose the expire type for your countdown. You can choose to hide timer, hide element, display a personalized message, or redirect your visitors to a different page or even add any saved template if you have them.<\/p>\n

\"Countdown<\/p>\n

Click to See Live Demo<\/a><\/h3>\n

How to Style Countdown<\/h2>\n

To style your\u00a0Countdown<\/b>\u00a0click on the\u00a0\u2018Style\u2019<\/b>\u00a0tab and play around with the settings there.<\/p>\n

General<\/h3>\n

From here, you can customize the look of your countdown by enabling a gradient background, or simply sticking to a solid color background if that\u2019s your preference. If you want you can also add an image as your countdown background.<\/p>\n

Besides, you can tweak the space between the boxes in your countdown, adjust the space below the countdown container, and change the margin and padding. Moreover, you can add a border type and set the border radius, and also add a box shadow as well.<\/p>\n

\"Countdown<\/p>\n

Content<\/h3>\n

You can set countdown digit colors and the countdown typography colors. You can also change the font size and font type from these settings. You can also choose the alignment of your countdown from here and separator border radius and separator color.<\/p>\n

\"Spexo<\/p>\n

Final Outcome<\/h2>\n

By following these basic steps and changing these settings, you can create an eye-catching countdown for your Coming Soon pages or Product Launch pages with Countdown<\/b>.<\/p>\n

\"Spexo<\/p>\n

By using Countdown<\/b>, this is how you can create a stunning countdown to get your visitors excited and increase your conversion in the process.<\/p>\n

If you require any help, feel free to\u00a0contact our support<\/b><\/a>\u00a0for further assistance.<\/p>\n","protected":false},"excerpt":{"rendered":"

How to Configure & Style Countdown Elementor Countdown Widget\u00a0helps you bring your Elementor website to life with a dynamic, animated countdown with an evergreen timer. This element is perfect for creating hype about a new product launching, or for Coming Soon pages. It comes with tons of cool customization options so you can add your […]<\/p>\n","protected":false},"author":14494,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-13999","docs","type-docs","status-publish","hentry","doc_category-creative-elements"],"acf":[],"year_month":"2026-04","word_count":559,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Nayan Bagia","author_nicename":"nayanbagia","author_url":"https:\/\/spexoaddons.com\/author\/nayanbagia\/"},"doc_category_info":[],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/spexoaddons.com\/wp-json\/wp\/v2\/docs\/13999","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spexoaddons.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/spexoaddons.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/spexoaddons.com\/wp-json\/wp\/v2\/users\/14494"}],"version-history":[{"count":0,"href":"https:\/\/spexoaddons.com\/wp-json\/wp\/v2\/docs\/13999\/revisions"}],"wp:attachment":[{"href":"https:\/\/spexoaddons.com\/wp-json\/wp\/v2\/media?parent=13999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}