Creating an SEO friendly website is not enough to get your customers to make a purchase or order a service.
It would be best if you appealed to their emotions. And one effective way is by building a sense of urgency using a countdown popup.
Incorporating a countdown popup will see your sales increase, and the discount will attract new customers.
But, you need to build a compelling countdown popup that is eye-catching, professional, and one that will not interfere with your site’s user-friendliness.
This tutorial will show you how to create a countdown popup using Elementor. And the best part is that you do not need to have any coding skills to hack it.
We will be using Elementor due to its easy drag-and-drop page builder. It also allows you to work from the front-end, enabling you to see the popup as it will appear in the visitor’s browser.
Elementor provides numerous ready-made templates, but we will be building one from scratch.
Here’s a quick index to help you navigate this article:
So let’s dive in.
Create a Countdown Popup
Before you follow this guide, you have to install both the Elementor page builder plugin and the Elementor Pro plugin on your website.
If you are new to Elementor, you can check out how to get started with the Elementor guide on our website.
We will create a popup that offers an 80% discount on the first order for new users. They will get the discount if they buy something within 24 hours of their first visit.
When a user lands on our website for the first time, they will see this popup, and 24 hour countdown will start when the page is loaded.
Now let’s start designing our popup.
After installing Elementor on your WordPress website, go to the WordPress dashboard > Templates > Popups. From here click on ‘Add New Popup’.
Now you will see a form like the image below. As we will create a popup, select the type of template: ‘Popup’.
Give a name to your popup template that you will create. We have decided ‘Countdown Popup’ for our popup template’s name. After that, click on the ‘Create Template’ button.
Now you will see the Elementor template library. Here you will find almost every type of popup template. Search for ‘Hello Bar’ in the left corner.
You can choose from these ‘Hello Bar’ popup templates for your sales promotion:
We will not use these popup templates. We will build our own custom popup from scratch.
Close the popup template library by clicking the ‘X’ in the right top corner. Now you will see the Elementor dashboard like in the image below.
Step 1: Change the Popup Setting
After clicking the popup settings icon, the first thing that appears is the popup settings tab.
Go to Popup settings > Settings Tab. To make the popup full screen, set its width to 100 VW and the height to 300 px.
In vertical, set the popup to appear at the top.
Entrance animation: Fade in. When the popup opens, it will be animated in ‘Fade In’ mode. Set its animation duration to 2.2 seconds so that it can be animated for 2.2 seconds.
Go to Popup Settings > Style Tab. Select a background color for the popup: 4EBBC6. Next, set a border around the popup. Border type > Solid and it’s width: 20. The border color will be white.
Now our popup will look like the one in this image:
Step 2: Create a Section With Four Columns
Now create a section with four columns and set its vertical-align to the middle.
Step 3: Design a Heading
Drag a heading widget and drop it into the first column. From the layout tab remove the heading default text and write ‘Get 80% OFF on your first order’.
Go to the Style tab. Set the heading text’s color to ‘Black’. After that, edit the typography. Use the default font family and font-weight: 300.
Look at the heading now:
Step 4: Edit the Button Widget
Drag a button widget and drop it to below the heading.
Go to Edit buttons > Content Tab. Change the button text to ‘Buy Now!’.
After that, go to Edit buttons > Style Tab. Make these changes according to these values of properties:
Text Color: Black, Background Color: Transparent(No Color), Border Type: Solid. Only set the border at the bottom. Border width: 2px, Border radius: None. Last, set 2px padding at the bottom.
Step 5: Design the Countdown Timer
Search for ‘Countdown’ in the Elementor library. Drag the ‘Countdown’ widget from the left side and drop it to the second column. Expand the second column on the right side.
Go to Edit Countdown > Content. Under type, set ‘Evergreen timer’. This means when new users land on a website, the countdown will be started.
Set the timer to 24 hours and hide the ‘days’.
Lastly, define what will happen after actions expire.
Actions after expire: Hide Show Message. Here compose your message: ‘Sorry! The sale has expired, see you next time.’
This means when the 24 hours expire for a user, the popup will be hidden and it will show the message that we have written in the message box.
If you want, you can change the timer design from the style tab.
Step 6: Edit the Image Widgets
So far, we have two more blank columns left. Drag two ‘image’ widgets from the left side and drop them in the third and fourth columns.
Choose two images for these two columns.
If you want, you can set animation for these two images from the ‘Advanced Tab’.
Besides all of these options, you can also edit anything that you want and design it all your own way using the Elementor popup builder.
Here is the final design of our popup:
After completing the designs, click on the ‘Publish’ button to set conditions, triggers, and advanced rules.
Conditions: As we will show this popup to the entire site, choose ‘entire site’ from the middle bar of the Conditions’ settings.
After completing this, click the ‘next’ button.
Now dive into the next step.
Triggers: In the trigger settings, click the ‘Yes’ button under ‘On-Page Load’ and set the duration to 3 seconds so that the popup can load after 3 seconds of the first-page loading.
After completing this, go to the ‘Advanced Rules’.
Advanced Rules: Let’s set the ‘Advanced Rules’ now. We will show the popup only one time. So select ‘One’ under the ‘Show up to X times’.
Lastly, hide the popup for logged in users. After you finish configuring the settings under ‘Advanced Rules’, click on the ‘Save & Close’ button.
Done. You have successfully created a countdown popup using the Elementor popup builder.
Conclusion: How to Create a Countdown Popup Using Elementor
Adding a countdown popup that starts whenever a new user accesses your website may sound like a complicated process that requires an expert. But this guide will enable you to create one easily, like the boss you are.
Elementor provides excellent design capabilities that allow you to create a popup in your ideal size and design. You can set a text font color and background that matches your brand.
You can also add images and an animation feature to make it catchy.
As you create a countdown popup using Elementor, pay attention to the trigger that will make the countdown popup show and where it will appear. It should not interfere with the visitor’s ability to navigate the site.
In case you have any questions, feel free to reach out to us.
Read More Elementor Tutorials:
- How to Get Started With Elementor
- Elementor Pro Discount
- Elementor vs Elementor Pro
- How to Use the Elementor Free Page Builder
- How to Use the Elementor Theme Builder
- How to Add a Popup With Elementor
- Create a Cookie Consent Popup Using Elementor
- How to Create an Under Construction Website Using Elementor
- How to Create a Login Form Popup With Elementor
- How to Create a Subscribe Form Popup With Elementor
- How to Create a Related Popup Using Elementor
- How to Create a 404 Web Page With Elementor
- How to Create a Mega Menu WIth Elementor
Leave a Reply