In this tutorial, we will show you how to add an engaging Hello Bar using Elementor’s Popup Builder.
This popup triggers when reaching a section on the page with a certain CSS class.
You will also learn how to create a user interaction sequence of popups, and more.
hi oh it’s live from Elementor today
I’ll show you how to create cool
engaging pop-ups that are triggered when
reaching a specific element on this
conference event page they feel as if
they’re part of the webpage and are a
great way to interact with your visitors
in this example they’re prompted with a
question asking them whether or not
they’re interested about staying up to
date for future events let’s refer to
this as the yes/no pop-up if the visitor
chooses yes a second pop-up appears in a
way that feels natural as if it’s part
of the yes/no pop-up it contains a
contact form in order to subscribe to
the newsletter we will call this the
forum pop-up choosing no transitions to
a third pop-up let’s call it the second
thoughts pop-up it also seems part of
the yes/no pop-up and here the visitor
is greeted nicely and given the
opportunity to sign up if they’ve
changed their mind by hitting the button
that triggers the forum pop-up as you
can see this sequence of popups based on
user interactions really engages the
visitor and personalizes the user
experience it might seem a little
intricate but don’t worry I’ll show you
how it’s done
step-by-step all three pop-ups have the
same build we will focus on the pop-up
settings and buttons that trigger them
and create this engaging user
interaction so let’s dive in and start
off with the yes/no pop-up hit command e
to open the finder and choose add new
pop-up name it and hit create template I
have pre-made the pop-ups for this
tutorial so in the library I’ll go to my
templates and insert the yes/no pop-up
great let’s go over some basic settings
for this pop-up
I set the overlay to hide and the
entrance animation to slide in down now
let’s hit publish and check out the
conditions triggers and advanced rules
menu since this is the initial pop-up
it’s the only one that needs conditions
and triggers because the others are
triggered by button clicks I will set
this yes/no pop-up to display on our
main conference event page so in
conditions go to singular all pages and
search for the page and set it let’s
move on to the user actions that trigger
the pop-up to appear hit
next now for this example I will set the
on scroll to element trigger because I
want the pop-up to appear after the user
reaches a specific section on the main
page the class is entered here but first
let’s go over to the main conference
event page and in the editor assign the
class to the section where we want the
yes/no pop-up to be triggered so scroll
down to this section and in the Advanced
tab and the CSS classes type register
pay attention that you type it without
the dot now what we need to do is set
the unscrew two element trigger for the
yes/no pop-up to this class as well so
set it to yes and type the class dot
register pay attention here we do add
the dot this will initiate the sequence
of pop-ups for this pop-up we won’t set
any advanced rules okay grant hit save
and close now let’s check it out go to
the main conference event page and start
scrolling as you can see the s no pop-up
appears when we reach the section we
just set it to cool now let’s say the
visitors interested in signing up and
it’s yes we want the forum pop-up to
naturally appear after clicking the yes
button so let’s create the form pop-up
and go over its settings afterwards I’ll
show you how to set it to appear upon
clicking the yes button like before hit
command e add new pop-up my templates
and I’ll go ahead and insert my pre-med
form pop-up as you can see the overlay
is set to hard as well and the entrance
animation is set to fade in
so it appears naturally on top of the
yes/no pop-up in advanced settings
we set the prevent closing on overlay
and Escape key to yes this way the
visitor will only be able to close the
pop-up by hitting the close button this
pop-up is very similar to the yes/no
pop-up the only difference is that it
contains a form widgets with an email
field and button let’s hit publish we
won’t set any conditions triggers an
advanced rules for this pop-up because
we wanted to appear when clicking the
yes button in the yes/no pop-up ok great
now that we’ve created the form part
hit serving clothes and let’s go back to
the yes/no pop-up and set the yes button
to trigger the form pop-up go to the yes
button widget settings and the link
dynamic choose pop-up and under actions
set the action to open a pop-up and in
the pop-up field search for and select
the form pop-up great now that it’s set
hit update let’s see it in action as you
can see I’ve landed on this conference
event page after scrolling down in
reaching the section we assign the
register clause we see the pop-up
appears very naturally it really does
feel as if it’s part of the page now
let’s hit yes cool the forum pop-up
appears nicely as well the fade in makes
it seem as if it’s all the same pop-up
great now all that’s left is the second
thoughts pop-up visitors will see it
when they hit No in the yes/no pop-up so
let’s create it and go over the settings
afterwards I’ll show you how to set it
to appear when clicking now again hit
command E add new pop-up my templates
and I’ll insert my pre-made second
thoughts pop up the pop-up settings as
well as the Advanced Settings are
identical to the form pop-up so we will
be focusing on the change your mind
button this pop-up gives the visitor an
opportunity to sign up if they’ve
changed their mind the change your mind
button will trigger the form pop-up
allowing them to enter their email and
sign up so like before let’s go to the
batten widget settings and the link
dynamic choose pop-up and under actions
set the action to open a pop-up and in
the pop-up field search for and select
the forum pop-up okay great now hit
publish for this pop-up we won’t set any
conditions triggers and advanced rules
either because we want the pop-up to
appear when clicking no in the yes/no
pop-up hit save and close and let’s go
back to the yes/no pop-up and see how to
set it like before go to the node button
widget settings and a link dynamic
choose pop-up and under actions set the
action to open a pop-up and in the
pop-up field search for and select the
second thoughts pop up great now that
we’ve set all the pop ups and buttons
let’s hit update and see it all in
action one last time let’s start
scrolling there’s is no pop up let’s go
ahead and hit yes that’s a form pop up
now let’s see what happens if we hit no
okay cool that’s a second thoughts pop
up now let’s say we changed our mind
and we hit the button and it leads us
back to the form pop up cool well that’s
it now you know how to create these cool
engaging pop-ups that are triggered when
reaching a specific element on the page
and provide a great way to interact with
your visitors don’t forget to subscribe
to our youtube channel for more tips and
pop-ups tutorials see you later
