In this tutorial, we will show you how to add a Hello Bar with an evergreen timer using Elementor’s Popup Builder.
You will also learn how to copy / paste an image widget, use minus margin and more.
hiya Cassie from Elementor here in this tutorial I’ll show you how to create this cool countdown pop-up that is sure to add urgency and skyrocket your sales so head to the dashboard go to templates then pop-ups add a new one and name it and click create template since we’re creating our own design just close this when opening a new pop-up the first thing it appears is the pop-up settings in the panel so let’s go over a few nifty settings slide the width of the screen to a hundred making it fullscreen and the height to 300 in vertical set the pop-up to appear on top slide the overlay off choose fade in and set how fast your animation will fade in in style slide the color to transparent turnoff box shadow and set the size and position of the close button you know that little X to let the design breathe a bit add some space around the entire pop-up in advanced set the padding to 30 pixels now let’s get into the nitty-gritty of designing it add a section with four columns set the content position to the middle and in the style tab change the color to gray drag in a headline and type your title and adjust the font size and weight drag in a button type your text and play around with the font size choose colors and create a border only on the bottom drag in the countdown widget and stretch it out by dragging the columns under type set evergreen timer this means that every user starts fresh from the beginning of the timer when they land on the page set the timer to 24 hours and define what will happen after actions expire hide the whole countdown timer here compose your message under style change the background color and choose all the specific settings that you need font size weight etc in an image widget and she’s a photo from your library adjust the size and in advanced set a minus margin on the bottom so your image floats slightly below the pop-up to make it even zany er add entrance animation here we used rotate in down left to make a pair copy/paste what we just created then swap the image tweak the size and give it a minus margin in entrance animation turn it around with rotate in down right I’ll set click publish so we want this pop-up to appear three seconds after loading for users who haven’t logged in so go to the conditions window shift it to entire site in the triggers tab page load slide to yes and set the duration to make it load after three seconds in advanced rules since we want this sale to be only for new customers let’s hide the pop-up from our logged in users and define how many times you want the pop-up to appear save and close and let’s have a look see after three seconds you’ll see your pop-up in action wicked if you have a short term sale on a product a pop-up with a countdown is a great way to motivate users to act right away make sure you subscribe to our YouTube channel for more videos and pop-ups catch you later
Elementor is the leading website builder platform for professionals on WordPress. Elementor serves web professionals, including developers, designers and marketers, and boasts a new website created every 10 seconds on its platform.