How to Create a Bold (Yet Elegant) Colorful Countdown Timer Module With Divi

Posted on December 7, 2016 by 14 Comments

How to Create a Bold (Yet Elegant) Colorful Countdown Timer Module With Divi
Blog / Divi Resources / How to Create a Bold (Yet Elegant) Colorful Countdown Timer Module With Divi
Play Button

This post is part 3 of 5 in our mini series titledΒ 5 Impressive Ways to Style Divi’s Countdown Timer Module. Stay tuned this week for all five unique examples of Divi’s countdown module, with a tutorial on how to achieve each one!


In yesterday’s post, IΒ discussed some of the various benefits of using a countdown timer on your WordPress website, and I alsoΒ showed you how to restyle Divi’s countdown timer module with β€œsimple elegance.” In today’s post, I’m going to continue the tutorial series and show you how to use Divi’s countdown timer module to create a bold and colorful website countdown. Let’s get started!

The Divi Countdown Module: Before & After

Just like we did in yesterday’s post, let’s take a look at our starting point. Below is a screenshot of the Divi countdown module with the default settings.

default-divi-countdown-module

Now, let’s take a look at where we’re going.

divi-countdown-bold-colorful

As the title of this post suggests, this countdown timer is designed to be bold. It’s designed to grab the attention of the website visitor and make sure they know something big is coming.

The great thing about this countdown styling is it can be used on any type of website. It’s modern and minimal design allow it to blendΒ nicely with any style of page, while it’s bold colorΒ will snagΒ the user’s attention. Not a fan of the red? Don’t worry, I’ll show you to change it to match any website’s color palette further down in this tutorial.

Creating the β€œBold & Colorful” Divi Countdown Timer Module Design

Subscribe To Our Youtube Channel

Preparing the Design Elements

Another great benefit of this countdown timer styling is there is actually no design elements to prepare! Everything is done with the powerΒ of CSS (and the built in Divi controls too of course!).

Implementing the Design with Divi

Since there’s no design elements to prepare,Β we can head straightΒ to Divi. For the sake of simplicity, I’m going to create a new page for this tutorial, however you can easily follow along if you’d like toΒ add this to an existing page. So I’m going toΒ create a new page in WordPress, enable Divi, and then head on over to the gorgeous new visual builder.

If you’ve created a new page like I have, then there’s already a blank section in place for us. Otherwise, create a new section if you’re adding this to your existing Divi page.

Now we’re going to add aΒ row by clicking on the green (+) circle icon, then click on the icon for the one column row as indicated by the red arrow in the screenshotΒ below.

 

adding-rows-to-divi-visual-builder

Next,Β Divi will automatically prompt you to choose a module from the list. Yep you guessed it, select the countdown timer.

inserting-countdown-timer-in-divi

Adjusting the Module Settings

Now it’s time to start digging into the countdown timer settings.Β The settings modal for the countdown timer shouldΒ automaticallyΒ open once you’ve added the module, however if you already closed it, then hover over the countdown timer thenΒ click on the gear icon in the dark gray set of controls that appears.

Now, here’s the settings we’ll be changing. If there’s a setting that isΒ not mentioned below, then leave it as default.

In theΒ GeneralΒ settings:

  • choose a date to countdown to (I chose January 1st)
  • change background color toΒ #e6434d

Here’s what the General settings should look like:

countdown-timer-settings

Next, click the tab forΒ theΒ DesignΒ settings:

  • change all fonts (Header, Numbers, and Labels) to β€˜Oswald’, with uppercase (TT icon) and bold

countdown-module-divi-advanced-design-settings

Now click save! Here’s what your countdown module should look like so far:

countdown-module-progress

Not bad! Now for the CSS to finish things off!

Adding the Custom CSS

The last thing we need to do is add a little custom CSS magic to take us the rest of the way there!

Before we can start adding the custom CSS though, we’ll need to add our own custom CSS classes so that we’ll only customize the CSS of the single countdown timer module we’re working on now, and notΒ ALL countdown timers that are on the site or will be on the site.

Open up, the module settings, and click over to the CSS tab of the module settings, and addΒ custom-countdown-2Β as the CSS class. You can of course name the CSS class whatever you’d like, but you’ll have to also rename the classes in the below CSSΒ in order for it to work.

countdown-timer-settings-custom-css-class

 

Okay, now we’re ready to add the custom CSS.Β You’ll have the option of adding the custom CSS to the Divi Theme Options custom CSS box, or the custom CSS box on the individual page settings. The difference is the custom CSS box in the page settings will only add the CSS to the one page, while adding it to Divi Theme Options will add it to every page of the site.

If you think you’ll be adding more countdown timers later with this same styling to other pages, then add the CSS to the Divi Theme Options panel. Otherwise, you canΒ add it to the page settings custom CSS box.

To open up page settings, click on the purple gear icon at the bottom of your screen. If you don’t see the gear icon, click the purple button that you do see to expose the rest of the menu.

divi-visual-builder-page-settings-icon

Then, click on the CSS tab and paste the CSS below into the box like so.

 

.custom-countdown-2 {
 max-width: 620px;
 margin-left: auto;
 margin-right: auto;
 border-radius: 8px;
 box-shadow: 6px 4px 74px #b36e6e;
}
.custom-countdown-2 .value {
letter-spacing: 6px;
background-color: #dc2d43;
padding: 30px 6px !important;
padding-left: 11px !important;
width: 89px !important;
}

.custom-countdown-2 .days {
margin-right: 37px;
}

.custom-countdown-2 div.sep.section p {
display: none;
}

.custom-countdown-2.et_pb_countdown_timer .section.values {
width: 18%; 
}
.custom-countdown-2 .days .value {
 width: 129px !important;
}

If you used the custom CSS box within the individual page settings, then you should have seen it update in real time, thanks to the live updating in Divi’s new visual builder. For learning purposes, it may be helpful to paste the above CSS one chunk at a time. That will help show you what CSS is controlling which element of the countdown timer. This can be a great learning experience if you’re new to CSS.

Be sure to save your changes within the page settings box after pasting the CSS, as well as the page itself.

Now, let’s admire what we created!

bold-and-colorful-countdown-timer-in-divi-completed

Tomorrow:Β How to Create a Countdown Timer with a Animated Gradient Background

I hope you enjoyed today’s countdown timer tutorial. We still have two days left of out miniseries! So check back tomorrow to learn how to add a beautiful animating gradient background to your countdown timer in Divi!

Be sure toΒ subscribe to our email newsletterΒ andΒ YouTube channelΒ so that you never miss a big announcement, useful tip, or Divi freebie!

Divi Anniversary Sale

It's The Divi Anniversary Sale! Save Big For A Limited Time πŸ‘‡

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Anniversary
Premade Layouts

Check Out These Related Posts

Get a Free Wellness Layout Pack for Divi

Get a Free Wellness Layout Pack for Divi

Posted on March 20, 2023 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Wellness Layout Pack that’ll help you get your next Wellness website up...

View Full Post
Divi Plugin Highlight: Divi Gravity Forms

Divi Plugin Highlight: Divi Gravity Forms

Posted on March 19, 2023 in Divi Resources

Divi Gravity Forms is a plugin for the Divi Builder that allows you to customize your Gravity Form from the Divi Builder. The plugin adds a new module to the Divi Builder with options to change the design of every aspect of the form. If you are a Gravity Form user, this plugin will help integrate...

View Full Post

14 Comments

  1. Amazing! Thank you!!

    • Thanks, Johnson. I’m glad you like it.

  2. Great post and useful design, Thank You

    • Thanks, and you’re welcome πŸ™‚

  3. ANyone know what happened to the rest of the post slider tutorials?

  4. The design looks great but isnt mobile responsive – any suggestions?

  5. This is some thing i way looking for . Congrats team great utility.

    We need really good pop-ups now, Look some hack related to it in near future.

    Thanks

  6. Would like to have an evergreen timer option

  7. Nice design and thanks for guidance πŸ˜€

  8. Wow, that’s an awesome tutorial Tim. This alone can change the way we do landing pages on WordPress ( the landing pages are also thanks to Divi’s Magic).

    The urgency thing we use for marketing comes in perfect with the countdown timer. I can’t wait to go put this to use.

    Thank you for taking all the effort, Tim.

  9. Nice looking! Thank you!

    • Thank you, Jordan πŸ™‚

  10. Impressive, very useful thank you Tim

    • I’m glad you found it useful, Denis!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

πŸ‘‹ It's The Divi
Anniversary Sale!
Get The Deal
Before It's Gone!
Join To Download Today