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
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
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.
After that, click Upload Plugin, and choose the file you’ve downloaded for Elementor Countdown Timer.
Login to our store.
Go to Account-> Downloads
Download the plugin. You’ll get a zip file on your computer.
On your WordPress website, install the zip file like you install any other plugin.
Activate the plugin.
And you are done Please activate the license for automatic updates, support.
Step 2: Getting Started with 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:
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.
At first, you’ll see the Countdown timer options; You can drag & drop over an element from the sidebar under the General Elements section.
This is something you can also get with Countdown Timer for Elementor.”
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
- 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 Duration: With 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 Countdown: With 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.