SIMPLE COUNTDOWNS HOW TO
SIMPLE COUNTDOWNS FULL
SIMPLE COUNTDOWNS SERIES
SIMPLE COUNTDOWNS FREE

Now, we’re going to add our image to the section as a background image. We’ll be back to tweak the settings for the module in a bit, but for now click the green checkbox to save the module settings.

In our example, we added “ Launching Soon…” as our title. You can optionally choose a countdown timer title as well. You’ll then be prompted to choose a date to count down to. Now, Insert a one column row, and add a countdown timer module to the row. Otherwise, create a new section if you’re adding this to your existing Divi page. If you’ve created a new page, then there’s already a blank section in place for us. Simply skip this first step if you’d like to add the countdown timer to an existing page. Keep in mind you don’t have to create a new page though. This particular countdown works well as a landing page for a website, so let’s create a new page in WordPress, give it a title, enable Divi, and head to the Visual Builder. Now that we have our image chosen and prepared, it’s time to head to Divi. Here’s a before and after of the image that has been edited. If you don’t have Photoshop, there are other cheaper (or free) alternatives, such as the Pixlr Editor, that can be great for making simple image edits.

SIMPLE COUNTDOWNS HOW TO

I then played around with the opacity until I got it just right– just as a previous tutorial of ours shows how to do, step by step. To darken the image for today’s tutorial, I used Adobe Photoshop to a Fill Layer of black.

SIMPLE COUNTDOWNS FREE

My favorite source of free images is, and that’s where I found the image for today’s tutorial.Īfter you have an image chosen, it can be helpful to darken the image a bit to put the focus on the countdown timer. There are a lot of places online to purchase stock images, as well as find free images too. Since the colors of the countdown timer are neutral, and the background is semi-transparent, it leaves us a lot of room to play with different images and have it still look great. The majority of this countdown timer is achieved through Divi settings and CSS, so there isn’t a lot of prep work that we need to do. However, we do need to choose and retouch a background image.Īs I mentioned previously, you’ll have a lot of flexibility with choosing an image. Subscribe To Our Youtube Channel Preparing the Design Elements Creating the “Simple Elegance” Divi Countdown Timer Module Design So you can follow along and use it as-is, or use as a jumping off point for creating something unique to you. The great thing about this example is you can use lots of different styles of images with different color palettes and it will still look great. The subtle semi-transparent background color of the countdown timer gives it separation, and helps it stand out from the background, but still allows the background image to show through.

SIMPLE COUNTDOWNS FULL

What makes this countdown timer unique is the full screen background image behind the countdown.

SIMPLE COUNTDOWNS SERIES

But, this mini series is meant to take the design several steps forward in order to hold down the title of being “impressive.” So let’s take a look at what we’ll be creating today. Now there’s nothing wrong with using the Divi countdown module with it’s default settings. Below is a screenshot of the Divi countdown module with the default settings. The Divi Countdown Module: Before & Afterīefore we dive in, it’s important to see what we’re starting with. But, instead of just showing you the design, I’m going to dive deeper and provide a tutorial on all aspects of the design process so you can learn how to do it yourself.

In this mini series, I’m going to share with you 5 different ways that you can style Divi’s countdown timer in an impressive way. Whether you want to create urgency for a special offer or promotion, build suspense before an epic product or website launch, or count down to a specific event such as a wedding or concert, countdown timers can be the perfect “added touch” to your WordPress website. Stay tuned this week for all five unique examples of Divi’s countdown module, with a tutorial on how to achieve each one!Īdding a countdown timer to your website can be a very effective way to engage your website visitors. This post is part 1 of 5 in our mini series titled 5 Impressive Ways to Style Divi’s Countdown Timer Module.

Simple countdowns