How to create and style the Divi countdown timer module

Mark Hendriksen | May 18, 2023 | 0 Comments

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’ll show you in this tutorial.

I will start this tutorial by covering how you can add a countdown timer module to your website and the styling options.

At the end of this tutorial, I have some premium options for countdown timers for the Divi Theme.

Table of contents

How to add a countdown timer module

To create a countdown timer with the Divi countdown timer module, follow these steps:

Open the Divi Builder and add a new section.

Add a section

Add a new row to the section and then add a new column to the row.

Add a row to the section

Click on the “+” icon to add a new module and select the “Countdown Timer” module.

Add the countdown module to the row

In the “Date and Time” settings, enter the date and time that you want the timer to count down to.

Add a date for the countdown timer

In the “Design” tab, you can customize the appearance of the timer.

Click on the “Save” button to save your changes.

How to style the countdown timer module

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:

  • Font family
  • Font size
  • Font color
  • Background color
  • Border color
  • Border width
  • Border radius
  • Text alignment
  • Text spacing

You can find these options by opening the countdown timer module and then going to the design tab.

You can use these options to create a countdown timer that matches the style of your website.

Advanced styling options

By default, the countdown timer looks like this:

Default styling

I prefer more like a tile look something like this:

Advanced styling countdown timer module

I will give you some CSS snippets for some additional styling for your countdown timer that is not available in the default options.

But first, you have to add a class to the countdown module. Open the countdown module and go to the Advanced tab. Under CSS & Classes add the following CSS class “custom-countdown”.

Add a class the the countdown module

After that place the following snippet in Divi > Theme Options > CSS, or in your Divi child theme if you are using one.

.custom-countdown .values {
	background-color: #da181f; /* background color of each tile */
}

.custom-countdown .values {
    padding: 15px 0px 25px 0px; /* padding of the tiles */
    border-radius: 7px; /* border radius of the tiles */
} 
  
.et_pb_countdown_timer .section.values {
    width: 20%; /* width of the tiles */
}   

Explanation of the CSS code

I will give you a short description of the CSS code and how to adjust it.

First snippet

The first snippet is for the background color of the tiles.

.custom-countdown .values {
	background-color: #da181f; /* background color of each tile */
}

You can change the color code to change the background color of the tiles.

Second snippet

This part is for the padding and rounded corners of the tiles. You can adjust these values if you like.

.custom-countdown .values {
    padding: 15px 0px 25px 0px; /* padding of the tiles */
    border-radius: 7px; /* border radius of the tiles */
} 

Third snippet

The last one is for the width of each tile. If you want to make them smaller you can adjust this value.

.et_pb_countdown_timer .section.values {
    width: 20%; /* width of the tiles */
}

Divi Timer Pro – Premium Plugin

Divi Timer Pro Plugin

Divi Timer Pro 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.

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.

Features of Divi Timer Pro

  • Specify a daily cut-off time for next-day order shipping.
  • Notify shoppers of an approaching sale or discount deadline.
  • Create a sense of urgency for a product with limited stock or offered on a first-come, first-serve basis.
  • Encourage buyers to act promptly by creating a sense of urgency, before they reconsider their purchase.
  • To create a sense of urgency and increase FOMO, write unique, engaging copy that captures the user’s attention.
  • Encourage email list subscriptions by running a promotion that offers exclusive downloads or promotions.

Conclusion

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.

You might also like

Leave a Comment

0 Shares
Share
Pin
Tweet