{"id":30205,"date":"2023-05-18T08:34:52","date_gmt":"2023-05-18T06:34:52","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=30205"},"modified":"2023-05-18T08:44:37","modified_gmt":"2023-05-18T06:44:37","slug":"how-to-create-and-style-the-divi-countdown-timer-module","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/","title":{"rendered":"How to create and style the Divi countdown timer module"},"content":{"rendered":"\n<p>In this tutorial, I will be covering how you can create and style a countdown timer with the Divi countdown timer module. This <a href=\"https:\/\/www.markhendriksen.com\/divi-modules-guide\/\">Divi module<\/a> is perfect for counting down to a specific date or time for various purposes, as I&#8217;ll show you in this tutorial.<\/p>\n\n\n\n<p>I will start this tutorial by covering how you can add a countdown timer module to your website and the styling options.<\/p>\n\n\n\n<p>At the end of this tutorial, I have some premium options for countdown timers for the <a href=\"https:\/\/www.markhendriksen.com\/how-to-make-a-website-with-wordpress-and-divi-theme\/\">Divi Theme<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Table of contents<\/h3>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><a href=\"#add-countdown-module\">How to add a countdown timer module<\/a><\/li><li><a href=\"#style-countdown-module\">How to style the countdown timer module<\/a><\/li><li><a href=\"#advanced-styling\">Advanced styling options<\/a><\/li><li><a href=\"#divi-timer-pro\">Divi Timer Pro &#8211; Premium Plugin<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-countdown-module\">How to add a countdown timer module<\/h2>\n\n\n\n<p>To create a countdown timer with the Divi countdown timer module, follow these steps:<\/p>\n\n\n\n<p>Open the <a href=\"https:\/\/www.markhendriksen.com\/divi-builder-plugin-review-by-elegant-themes\/\">Divi Builder<\/a> and add a new section.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"108\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-section.jpg\" alt=\"Add a section\" class=\"wp-image-30214\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-section.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-section-380x60.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-section-300x48.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-section-510x81.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-section-190x30.jpg 190w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-section-567x90.jpg 567w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Add a new row to the section and then add a new column to the row.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"505\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-row-to-the-section.jpg\" alt=\"Add a row to the section\" class=\"wp-image-30215\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-row-to-the-section.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-row-to-the-section-380x282.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-row-to-the-section-300x223.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-row-to-the-section-510x379.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-row-to-the-section-81x60.jpg 81w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-row-to-the-section-121x90.jpg 121w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Click on the &#8220;+&#8221; icon to add a new module and select the &#8220;Countdown Timer&#8221; module.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"505\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-the-countdown-module-to-the-row.jpg\" alt=\"Add the countdown module to the row\" class=\"wp-image-30216\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-the-countdown-module-to-the-row.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-the-countdown-module-to-the-row-380x282.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-the-countdown-module-to-the-row-300x223.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-the-countdown-module-to-the-row-510x379.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-the-countdown-module-to-the-row-81x60.jpg 81w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-the-countdown-module-to-the-row-121x90.jpg 121w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>In the &#8220;Date and Time&#8221; settings, enter the date and time that you want the timer to count down to.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"444\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-date-for-the-countdown-timer.jpg\" alt=\"Add a date for the countdown timer\" class=\"wp-image-30217\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-date-for-the-countdown-timer.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-date-for-the-countdown-timer-380x248.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-date-for-the-countdown-timer-300x196.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-date-for-the-countdown-timer-510x333.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-date-for-the-countdown-timer-92x60.jpg 92w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-date-for-the-countdown-timer-138x90.jpg 138w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>In the &#8220;Design&#8221; tab, you can customize the appearance of the timer.<\/p>\n\n\n\n<p>Click on the &#8220;Save&#8221; button to save your changes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"style-countdown-module\">How to style the countdown timer module<\/h2>\n\n\n\n<p>The Divi countdown timer module offers a variety of styling options that you can use to customize the appearance of the timer. These options include:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li>Font family<\/li><li>Font size<\/li><li>Font color<\/li><li>Background color<\/li><li>Border color<\/li><li>Border width<\/li><li>Border radius<\/li><li>Text alignment<\/li><li>Text spacing<\/li><\/ul>\n\n\n\n<p>You can find these options by opening the countdown timer module and then going to the design tab.<\/p>\n\n\n\n<p>You can use these options to create a countdown timer that matches the style of your website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advanced-styling\">Advanced styling options<\/h2>\n\n\n\n<p>By default, the countdown timer looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"156\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Default-styling.jpg\" alt=\"Default styling\" class=\"wp-image-30218\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Default-styling.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Default-styling-380x87.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Default-styling-300x69.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Default-styling-510x117.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Default-styling-190x44.jpg 190w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Default-styling-392x90.jpg 392w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>I prefer more like a tile look something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"449\" height=\"126\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Advanced-styling-countdown-timer-module.jpg\" alt=\"Advanced styling countdown timer module\" class=\"wp-image-30219\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Advanced-styling-countdown-timer-module.jpg 449w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Advanced-styling-countdown-timer-module-380x107.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Advanced-styling-countdown-timer-module-300x84.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Advanced-styling-countdown-timer-module-190x53.jpg 190w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Advanced-styling-countdown-timer-module-321x90.jpg 321w\" sizes=\"(max-width: 449px) 100vw, 449px\" \/><\/figure>\n\n\n\n<p>I will give you some CSS snippets for some additional styling for your countdown timer that is not available in the default options.<\/p>\n\n\n\n<p>But first, you have to add a class to the countdown module. Open the countdown module and go to the Advanced tab. Under CSS &amp; Classes add the following CSS class &#8220;custom-countdown&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"652\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-class-the-the-countdown-module.jpg\" alt=\"Add a class the the countdown module\" class=\"wp-image-30220\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-class-the-the-countdown-module.jpg 633w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-class-the-the-countdown-module-380x391.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-class-the-the-countdown-module-291x300.jpg 291w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-class-the-the-countdown-module-510x525.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-class-the-the-countdown-module-58x60.jpg 58w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Add-a-class-the-the-countdown-module-87x90.jpg 87w\" sizes=\"(max-width: 633px) 100vw, 633px\" \/><\/figure>\n\n\n\n<p>After that place the following snippet in Divi &gt; Theme Options &gt; CSS, or in your <a href=\"https:\/\/www.markhendriksen.com\/divi-child-theme-essential-guide\/\">Divi child theme<\/a> if you are using one.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:15px\"><code>.custom-countdown .values {\n\tbackground-color: #da181f; \/* background color of each tile *\/\n}\n\n.custom-countdown .values {\n    padding: 15px 0px 25px 0px; \/* padding of the tiles *\/\n    border-radius: 7px; \/* border radius of the tiles *\/\n} \n  \n.et_pb_countdown_timer .section.values {\n    width: 20%; \/* width of the tiles *\/\n}   \n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Explanation of the CSS code<\/h3>\n\n\n\n<p>I will give you a short description of the CSS code and how to adjust it.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">First snippet<\/h4>\n\n\n\n<p>The first snippet is for the background color of the tiles.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:15px\"><code>.custom-countdown .values {\n\tbackground-color: #da181f; \/* background color of each tile *\/\n}<\/code><\/pre>\n\n\n\n<p>You can change the color code to change the background color of the tiles.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Second snippet<\/h4>\n\n\n\n<p>This part is for the padding and rounded corners of the tiles. You can adjust these values if you like.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:15px\"><code>.custom-countdown .values {\n    padding: 15px 0px 25px 0px; \/* padding of the tiles *\/\n    border-radius: 7px; \/* border radius of the tiles *\/\n} <\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Third snippet<\/h4>\n\n\n\n<p>The last one is for the width of each tile. If you want to make them smaller you can adjust this value.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:15px\"><code>.et_pb_countdown_timer .section.values {\n    width: 20%; \/* width of the tiles *\/\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"divi-timer-pro\">Divi Timer Pro &#8211; Premium Plugin<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"380\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-timer-pro.jpg\" alt=\"Divi Timer Pro Plugin\" class=\"wp-image-30222\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-timer-pro.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-timer-pro-380x212.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-timer-pro-300x168.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-timer-pro-510x285.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-timer-pro-107x60.jpg 107w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-timer-pro-161x90.jpg 161w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=44891&amp;url=80055\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Divi Timer Pro<\/a> is a cutting-edge countdown timer module complete with marketing tools for your Divi Visual Builder! With this plugin, you can drive conversions and increase sales by creating scarcity and urgency on your sales pages, landing pages, popups, email opt-ins, and promo bars.<\/p>\n\n\n\n<p>Unlike the ordinary Divi Countdown Timer module, the Divi Timer Pro includes essential features that every marketer needs. For instance, it offers recurrences, customization options, and design settings to optimize its style to suit your preferences.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Features of Divi Timer Pro<\/h3>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li>Specify a daily cut-off time for next-day order shipping.<\/li><li>Notify shoppers of an approaching sale or discount deadline.<\/li><li>Create a sense of urgency for a product with limited stock or offered on a first-come, first-serve basis.<\/li><li>Encourage buyers to act promptly by creating a sense of urgency, before they reconsider their purchase.<\/li><li>To create a sense of urgency and increase FOMO, write unique, engaging copy that captures the user&#8217;s attention.<\/li><li>Encourage email list subscriptions by running a promotion that offers exclusive downloads or promotions.<\/li><\/ul>\n\n\n<div class=\"gb-button-wrapper gb-button-wrapper-3d840ae7\">\n\n<a class=\"gb-button gb-button-72c9ce72 gb-button-text button-for-posts\" href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=44891&amp;url=80055\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">See Demo<\/a>\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The Divi countdown timer module is a powerful tool that can be used to create countdown timers for a variety of purposes. By following the steps in this tutorial, you can create and style a countdown timer that will help you achieve your marketing goals.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">You might also like<\/h3>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\">\n<li><a href=\"https:\/\/www.markhendriksen.com\/wordpress-speed-optimization-guide\/\">How To Speed Up Your Divi Website (Guide)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/divi-child-theme-essential-guide\/\">How to Make a Divi Child Theme<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/how-to-make-a-website-with-wordpress-and-divi-theme\/\">How to Make a Website With Divi Theme in 2024<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/best-divi-plugins\/\">The Best Divi Plugins For 2024<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/best-divi-child-themes\/\">The Best Divi Child Themes For 2024<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/10-divi-woocommerce-layouts\/\">The Best Divi WooCommerce Layouts For 2024<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/how-to-choose-the-best-hosting-for-your-divi-website\/\">How To Choose The Best Divi Hosting In 2024<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, I will be covering how you can create and style a countdown timer with the Divi countdown timer module. This Divi module is perfect for counting down to a specific date or time for various purposes, as I&#8217;ll show you in this tutorial. I will start this tutorial by covering how you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":30225,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-30205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create and style the Divi Countdown Timer Module<\/title>\n<meta name=\"description\" content=\"Learn how to add and style the Divi countdown timer module. Make use of its various styling options, perfect for counting down to any event.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create and style the Divi Countdown Timer Module\" \/>\n<meta property=\"og:description\" content=\"Learn how to add and style the Divi countdown timer module. Make use of its various styling options, perfect for counting down to any event.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-18T06:34:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-18T06:44:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-countdown-timer.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to create and style the Divi countdown timer module\",\"datePublished\":\"2023-05-18T06:34:52+00:00\",\"dateModified\":\"2023-05-18T06:44:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/\"},\"wordCount\":733,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-countdown-timer.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/\",\"name\":\"How to Create and style the Divi Countdown Timer Module\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-countdown-timer.jpg\",\"datePublished\":\"2023-05-18T06:34:52+00:00\",\"dateModified\":\"2023-05-18T06:44:37+00:00\",\"description\":\"Learn how to add and style the Divi countdown timer module. Make use of its various styling options, perfect for counting down to any event.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-countdown-timer.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-countdown-timer.jpg\",\"width\":720,\"height\":400,\"caption\":\"Divi countdown timer module\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to create and style the Divi countdown timer module\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create and style the Divi Countdown Timer Module","description":"Learn how to add and style the Divi countdown timer module. Make use of its various styling options, perfect for counting down to any event.","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:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/","og_locale":"en_US","og_type":"article","og_title":"How to Create and style the Divi Countdown Timer Module","og_description":"Learn how to add and style the Divi countdown timer module. Make use of its various styling options, perfect for counting down to any event.","og_url":"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2023-05-18T06:34:52+00:00","article_modified_time":"2023-05-18T06:44:37+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-countdown-timer.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to create and style the Divi countdown timer module","datePublished":"2023-05-18T06:34:52+00:00","dateModified":"2023-05-18T06:44:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/"},"wordCount":733,"commentCount":0,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-countdown-timer.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/","url":"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/","name":"How to Create and style the Divi Countdown Timer Module","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-countdown-timer.jpg","datePublished":"2023-05-18T06:34:52+00:00","dateModified":"2023-05-18T06:44:37+00:00","description":"Learn how to add and style the Divi countdown timer module. Make use of its various styling options, perfect for counting down to any event.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-countdown-timer.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/05\/Divi-countdown-timer.jpg","width":720,"height":400,"caption":"Divi countdown timer module"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-create-and-style-the-divi-countdown-timer-module\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi tutorials","item":"https:\/\/www.markhendriksen.com\/divi-tutorials\/"},{"@type":"ListItem","position":3,"name":"How to create and style the Divi countdown timer module"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/30205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=30205"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/30205\/revisions"}],"predecessor-version":[{"id":30239,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/30205\/revisions\/30239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/30225"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=30205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=30205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=30205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}