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
