Ciitrus Digital YouTube Videos

Popup Trigger on Button Click [Elementor Pro Tutorial]

For additional web design, digital marketing, elementor, and Google Ads tutorials, subscibe to our YouTube channel!

ciitrus digital logo
Hey everyone! It's Frank with Ciitrus Digital. In this Elementor Pro tutorial, I am going to show you how to easily trigger an Elementor Pro popup by clicking a button, or an image!

View the Full YouTube Video Here:

Full Video Transcript (Auto-Transcribed by YouTube):

Hey everyone my name is frank I'm the owner and founder of Citrus Digital, and today we're going to jump into a
tutorial on how to trigger a pop-up after clicking a button in Elementor Pro. So real quick let me just demonstrate what we're going to do - if I click the button, this pop-up form will show up and that is what we're going to do in a the tutorial today.
So let's jump right into it, the first thing you're going to want to do is have a page built out to put your
pop-up on which is where I was just at. That's going to be our page and the second thing you're going to
want to do is go into the Elementor templates section and click on pop-ups, and as you can see this is the pop-up
that I just used. We're gonna build a brand new one for this demonstration so go ahead and click add new
and make sure you name your template something that you're going to remember. So let's name it pop up
on button click and create the template.
Just a quick disclaimer here you do need
elementor pro for this the regular
version of elementor will not work
and uh no other versions of page
builders will work either you're going
to want elementor pro
if you want to just build a very simple
pop-up you can insert one of these
templates here we're going to build a
custom one
so what you'll see is this screen if
you've never built a template before for
a pop-up most of your settings are going
to be here in the bottom left with this
cog wheel
here is where you'll be able to adjust
the width of the pop-up
the height
you can actually make a full screen
and you can make it full width as well
so let's just put this back fit to
content you can change the orientation
to the right left center
top or bottom we're going to stick with
center center
and we are going to have an overlay on
the background here which is this dark
area that shows up outside the template
because it helps draw the eyes to the
center of the template
and we are going to show the close
you can also adjust some things like the
entrance animation
let's have our
pop-up fade in
and exit
we're just going to leave that as the
default i don't like to play around with
these settings too much because i have
had issues in the past
where i couldn't quite figure out what i
did wrong
we got the title set
and if you go here into the style here's
where you can change everything about
pop-up including the box shadow which is
uh just a little bit
of a separator around the outside that
helps it pop some more here you can
actually adjust the overlay
this is the color it auto assigned when
i turn the overlay on you can change it
to any color you want we're going to
keep it all black
and we're just going to add some opacity
let's stop right about there
and the close button in the top right of
the box you can actually adjust in size
and you can actually move it outside the
box if you want but i'm not going to go
over that too much let's just make sure
that pop-up
close button is nice and large there
so we're going to make a two-section
i'm going to go into the advanced tab
and i'm going to add some padding to the
top and the bottom
let's add actually let's not do that
quite yet let's go ahead and throw an
as the background of this right hand
section here so i'm going to open this
column up go to style
click classic background type and i'm
going to add an image let's just do
something really plain
and i'm not quite sure why that didn't
show up let's go ahead and throw a
spacer in here
so after adding the spacer you can see
that the image
was really just blending in pretty well
let's make this
about 500 pixels tall let's go back in
to the column here
and let's position this image in the
and let's change the size to
cover that should be pretty good right
and over on this left side
we're going to add a little bit of a
form so this will be
something for people that want to
collect some leads let's make
make it just like submit your request
for a website proposal that's pretty
click this top left button here to open
the column we're going to add some
padding around the edge here
let's go ahead and add a padding of
go ahead and drag a title in
let's make it schedule
your free
and i want that text a bit smaller so
i'm going to go with my preset html tags
and h3 looks like it fits pretty well
i'm going to go ahead and pull up
a form
and i use the built-in elementor form
ones i used to use
things uh like other plugins for
wordpress but i found that the elementor
form one was the best since it's so
just a little side note there go ahead
drag your form in and i hate to look
with labels we're going to disable those
and let's actually make this content
centered in the box here
go ahead click on the top left in this
column area
choose vertical align middle
and that's looking pretty good pretty
good basic pop-up here
i'm happy with it
let's just change the
oh okay so just a little note here if
you do use an
image as the background it will overlay
over top of your close button
something to be aware of there let me
just go in here and see if i can change
this real quick
make the close button white
yep just need to change the color of the
close button let's add a little bit of
size to that so it's a little bit more
just good user experience so we got our
pop-up built let's publish it
you do have a lot of options in here
we're going to ignore all of these and
go straight to the conditions tab
add condition include entire site
just click next
just keep clicking next save and close
let's wait for this
boom pop-up is live
let's go back
to the page we were just on where we
first started the video
so i'm gonna go exit to my dashboard
go into my pages go into the trusty
testing page and i'm going to edit with
elementor here
so boom here we are
we see we have the big bad button that
we're going to be testing on right now
let's go ahead and add this pop-up form
so that when i click the button it'll
trigger the pop-up
so first thing you do is you enter the
edit here
link area is where you want to focus it
should be blank right here and you'll
see there's a cog wheel and this little
stack here that says dynamic tags go
ahead and click the dynamic tag stack
and scroll down until you see actions
and underneath that you should see
pop-up go ahead and click on pop-up
now it's not quite ready yet because you
still have to select which pop-up you're
using so click over here on the pop-up
pop up
you want to select from the drop down
the name this is why it's important to
name it something you remember because
it will not just show up so
we named ours pop up on button click
make sure that's selected
and then
let's actually add it to an image real
as well
i could try on this background image but
i'm just going to insert an actual image
let's use that picture
here if you want to have it pop up on an
image as well make sure you change the
link to custom url click the dynamic tag
button like last time scroll down to
pop-up click on pop-up and select
the form you just made
and i'm going to click update
you might be tempted to try to test it
on this page but since you're in the
editor it won't work so we're going to
preview the page by clicking this i
button here
when you open the previewed page let's
go ahead test the button first
you see once we click on that it opens
the form we just made and you can easily
exit out
perfect for capturing leads and a ton of
other things especially on e-commerce
website coupons and and all the things
like that
and let's go ahead and test our image up
you see once you click on the image it
pulls up the pop-up as well
if you guys found this tutorial helpful
i would really appreciate it if you
leave a like on the video and if you're
interested in seeing more tips like this
i would appreciate if you subscribed as
other than that that concludes the video
i hope you have an awesome day thanks
for stopping by

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to keep providing you with awesome free educational resources and content! Thank you for support our small business!