Listing Category: Countdown Timer

Introduction to the Divi Number Counter Module – How to style it

In this post, we’ll delve into the module’s available options, and show you three beautiful ways to style it, with step-by-step instructions for how to achieve each look….

Create a Countdown Timer With a Full Screen Background Video

In today’s tutorial, I’m going to show you how to use a full screen background video in your countdown timer, to “build suspense” in a fun and remarkable way…

Create a Countdown Timer with an Animated Gradient Background

Have you noticed that gradients seem to be making a comeback in the design world? Whether it’s subtle minor gradients for a texture effect, or multi-color animating gradients, design conscious companies of all sizes are embracing the gradient trend. That’s why in today’s post I’m going to show you how to create a gorgeous countdown timer with a subtle animated gradient background. Whatever you may be counting down to, or building suspense for, this countdown is sure to impress your website visitors….

Create a Bold Colorful Countdown Timer Module

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…

Create a Gorgeous Seasonal Transparent Countdown Timer

Like any part of your website though, the countdown timer shouldn’t just be a boring element that is only there to serve it’s functional purpose. It can also be a beautiful part of the page that further brands the company. Unlike yesterday’s bold & colorful countdown timer that is meant to jump off the page, today’s customized countdown timer is meant to beautifully blend right into the page like it’s part of a piece of artwork; almost as if it’s part of the background image itself….

Style Divi’s Countdown Timer Module

Adding a countdown timer to your website can be a very effective way to engage your website visitors. 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….

Remove Zero Digit from Countdown Timer in Divi

In countdown timer, by default there are three digits in Day(s) even if you have any of the days. Suppose we want to count back until 27 days then in the day(s) section the days will be “026”. So we can see that there is an extra 0 in days and we can also remove zero digit…

Countdown Timer Shortcode

Today we are going to show how the Countdown Timer Shortcode works. You can use this Divi module in any “coming soon” page. This is really an attractive way to represent the countdown. Countdown Timer Shortcode [crayon-57bfa06ce7dd0943810104/] Above code will create the Countdown Timer as shown below:- Countdown Timer In-depth:- Countdown timer creates animated graphical […]

Number Counter Shortcode

We are here with a new shortcode guide for this week as we promised to have a shortcode in each week. This time we will see how the number counter shortcode works…

Remove the Leading Zero on Countdown Module Days

“The Divi Theme’s countdown module allows you display a running timer which counts down to a given date and time. By default, the timer shows leading zeros, with the days always being shown as having 3 digits, like so: If the event is close, the leading zero on the days is unnecessary and looks a bit clumsy. To sharpen things up, we can hide the first digit of the days if it is a zero, using a combination of CSS and jQuery. Here’s the jQuery: jQuery(function($){ setTimeout(function(){ var days = $(‘.et_pb_countdown_timer .days .value’).html(); if (days.substr(0,1) == ‘0’) { $(‘.et_pb_countdown_timer .days .value’).css(‘width’, ‘2ch’); } }, 100); }); And here’s the accompanying CSS, to make sure everything looks correct: .et_pb_countdown_timer .days .value { white-space: nowrap; overflow: hidden; vertical-align: top; direction: rtl; } @media (max-width: 767px) { .et_pb_countdown_timer .days .value { vertical-align: text-bottom !important } } The result should be something like…”