This tutorial will walk you through adding a countdown timer to your website using the Divi Visual Builder for WordPress.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

Transcript from the Divi Theme Tutorial


Hello, this is Jimi Blevins.

Today I’ll be walking you through: “How to Add the Countdown Timer Using the Divi Visual Builder.”


So, to get started, let’s go ahead and add (+) our module. Click on “Countdown Timer,” this will automatically pop up most of our settings.


We’ll just give it a title, and let’s say we want this to end on October 1st at 12:30, the timer will update itself and start counting down.


Next, let’s get into the design and make this look a little bit cooler. I’ve got a background image I’ve already put together for this, so we’ll pop that in there. Again most of these are just the default settings that we’re already used to. We can change our header, text color, darken it up so it’s a little more readable, make it bold, make it bigger, and then we can do the same thing with the numbers.


You can also edit the color of the labels, we’ll just do a black for that. You can also change number font size. The label font size seems to be tied to the numbers font size, if you set it first then you can kind of play around with the font size of the numbers. Just remember to change the label font size first so it sets it in without kind of messing up the stylesheet. (Or it will look like this.)


You can also do custom margin, custom padding, and all the standard features that you’ve come to know and love in the “Divi Visual Builder.”

So that pretty much covers: “How to Add A Countdown Timer to Your Website Using the Divi Visual Builder.”

Once again, I’m Jimi Blevins and thank you for watching.