March 2, 2024

How to create and style the Divi countdown timer module

In this instructional exercise, I will cover how you can make and style a commencement clock with the Divi commencement clock module. This Divi module is ideally suited for counting down to a particular date or time for different purposes, as I'll show you in this instructional exercise.

I will begin this instructional exercise by covering how you can add a commencement clock module to your site and the styling choices.

Toward the finish of this instructional exercise, I have a few premium choices for commencement clocks for the Divi Topic.

How to add a countdown timer module

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

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

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

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 commencement clock module offers an assortment of styling choices that you can use to tweak the presence of the clock. These choices include:

  • Text style family
  • Text dimension
  • Text style tone
  • Foundation tone
  • Line tone
  • Line width
  • Line sweep
  • Text arrangement
  • Text dividing

You can find these choices by opening the commencement clock module and afterward going to the plan tab.

You can utilize these choices to make a commencement clock that matches the style of your site.

Advanced styling options

By default, the countdown timer looks like this:

I prefer more like a tile look something like this:

I will give you some CSS bits for some extra styling for your commencement clock that isn't accessible in the default choices.

On the whole, you need to add a class to the commencement module. Open the commencement module and go to the High level tab. Under CSS and Classes add the accompanying CSS class "custom-commencement".

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 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.

 

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram