Want to add a countdown timer using elementor widgets in WordPress? A countdown timer creates a sense of urgency and entices your users to take action immediately before the time is up. So, if you’re Working on launching a product? Have a website or app that’s coming soon? adding a countdown timer is a smart way to invite users to buy a product and Coming soon pages can help build excitement around your brand prior to your launch. It’s a great technique to boost sales and user engagement perspective.
In this article, we’ll show you how to easily add a countdown timer in WordPress, step-by-step.

Adding a Countdown Timer element for Elementor in WordPress

Creating a countdown timer is an virtual clock on a landing page that counts down from a certain number or date to indicate the beginning or end of an event or offer and on your online store helps tremendously to convert more visitors into customers. Adding a countdown timer element helps you to create urgency in generating more conversions because “time is running out.” and a compelling reason to buy. They urge users to take action NOW.
Countdown timers can also be used to count down to when an offer becomes available at a specific date and time. However, while countdown timers can certainly help to boost conversions, the process of creating one and adding it to your site can be a tough task… unless you have the right tool.
That’s why Flickdevs software solution has come up with an easy solution.
Let’s go ahead and see how to create and add a countdown timer widget enables you to add countdowns to your page(step-by-step).

Step 1: Install a Countdown Timer plugin for elementor

First, we need to installing a WordPress plugin called Countdown Timer to wordpress . You’ll need a Pro plan for Countdown Timers for more feature or basic free version plugin, so make sure that you have a Pro plan license or better.
Note: Make sure you have your WordPress installation ready, along with Elementor page builder installed.

Try the latest release of

Countdown Timers Pro or free.

Then, you need to download the plugin from the source (which will be a zip file). Next, you need to go to WordPress admin area and visit Plugins » Add New page.
After that, click Upload Plugin, and choose the file you’ve downloaded for Elementor Countdown Timer.
This will bring you to the plugin upload page. Here you need to click on the choose file button and select the plugin file you downloaded.
After you have selected the file, you need to click on the install now button. WordPress will now upload the plugin file from your computer and install it for you. You will see a success message like this after the installation is finished.
Once installed, you need to click on the Activate Plugin link to start using the plugin.

Step 2: Getting Started with Elementor

Before you start to build a product landing page or a sale page with countdown timer for elementor, your first step is to actually to, install the free version of Elementor.
Elementor is an easy to set up drag and drop page builder plugin with which you can build fully functioning websites without working a single line of code. 
Step-by-Step Elementor Installation Guide:
  • Installation of Elementor is same as of any other plugin. Go to your WordPress dashboard and click Plugins > Add New.
  • In the Search field, enter Elementor and choose Elementor page builder to install.
  • After installation, click Activate.
How does it Work?

You start out by creating a normal page in WordPress by going.

On the top left side of the WordPress dashboard, click Pages > Add New

Click Edit with Elementor to enter Elementor Page Builder

You have made it! Now you are in the Elementor Builder as shown below.

Elementor is an advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.

Step 3: Configure the Countdown Timer element setting.

On the top left side of the Elementor Search widgets, click  SearchBox > Type timer or countdown.

At first, you’ll see the Countdown timer options; You can drag & drop over an element from the sidebar under the General Elements section.

Now, all you need to do is Customizing a Countdown Timer element in the same sidebar interface:
A tabbed navigation allows you to jump between the settings of a Countdown Timer element. Each content element can have its own style that is different from the global settings. Adding a headline or text with a different font and color is possible as well as specific margins and padding settings.
Notice above image show that the sidebar now has three different tabs:
  • Content– the most important tab – where you customize Countdown Timer element content and function.
  • Style– this is where you can change colors and typography  text with a different font and color is possible as well as specific margins and padding settings.
  • Advanced – this is where you can add custom margins and padding, as well as other advanced settings. Custom margins are especially helpful for changing Countdown Timerelements’ positioning.

Step 4: Edit and customize your Countdown Timer element

Let’s start with Widget Options – the Countdown Timer element enables you to add countdowns to your page. First, you can choose a countdown type. There’re 2 different countdown timer modes with Restart mode options:
  • Exact Date: If you choose Exact Date timer, the timer will show a date and time on which you want your offer to end to visits your on site.
  • After This Time DurationWith this mode, each user will see a different countdown which starts from each one of your visitors individually as the visitor comes to the page. Instead of setting an ending date, you set timer in the number of days, hours, minutes, and seconds.
  • Cookie Based Timer The countdown will start from each one of your visitors individually. For Example, if your visitor deletes their cookies, or changes browsers, they will still see the correct deadline
  • Restart CountdownWith this mode, you will be able to make the countdown AUTOMATICALLY RESTART for a visitor, after some date and time on which you want your offer after timer countdown down completed.
Now, Create an Action After countdown timer Expiration. There’re 3 different countdown timer mode options available after expiration:
  • Message– Show Message is chosen, enter the message to be shown after the time expires.
  • Redirect to Link– Redirect is chosen, enter the Redirect URL.
  • Hide Timer– Hide is chosen, the countdown will be hidden when the target’s time reached.
Now the next step is to set up your countdown timer display rules.

Go to Names and Visibility of Labels tab on the bottom.

Now you can set up conditions what to display the countdown timer. By default settings, the timer will appear with set timer in the number of days, hours, minutes, and seconds.

You can change it from the toggle options to display the timer block or and label even the text content can be change.

Step 5: Edit style for Countdown Timer element

Boxes
  • Alignment: Align the Countdown’s Timer container box to the left, right, center, or justified
  • Background Color: Choose the background color of the boxes
  • Container Width: Set the width of the Countdown timer box
  • Box Gap: Control the space between boxes
  • Digital Gap: Control the space between digital number and label text.
  • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  • Border Width: Set the border width of the Countdown timer box
  • Border Color: Choose the color of the border within the boxes
  • Border Radius: Set the border radius to control corner roundness
  • Margin: Set the margin within the boxes
  • Padding: Set the padding within the boxes
Digits
  • Background Color: Choose the background color of the Digital number boxes
  • Color: Choose the color of the numerical digits
  • Typography: Change the typography options for the numerical digits
  • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  • Border Width: Set the border width of the Countdown timer box
  • Border Color: Choose the color of the border within the boxes
  • Border Radius: Set the border radius to control corner roundness
Label
  • Background Color: Choose the background color of the label text boxes
  • Color: Choose the color of the Labels’ text
  • Typography: Change the typography options for the Labels’ text
Expire Message
  • Text Color: Choose the color of the Expire Message’s text
  • Typography: Change the typography options for the Expire Message

Step 6: Publish Your Countdown Timer Landing Page or an sales page

Now that you’ve configured all the available options, you’re finally ready to publish your countdown timer on your page.

Liked This Article?
subscribe and get more tips and resources.

1 thought on “Adding a Countdown Timer for Elementor powered WordPress website”

Leave a Comment

Your email address will not be published. Required fields are marked *