In this tutorial, we’ll show you how to create a content lock popup using Elementor’s Popup Builder. You’ll also learn how to set a button that triggers a popup, prevent closing on overlay or on the Esc key and more.
well hello there Cassie from Elementor
here today I’ll show you how to use and
design a Content lock pop-up you know
for like sites selling alcohol in the
dashboard under templates add new choose
pop-up and give it a name that you’ll
remember click create template and close
the library window set the width to 600
pixels the height to 800 set the content
position to the center slide the close
button to hide why so that the pop-up
won’t close until the user clicks their
response in entrance animation let’s use
fade in now let’s add some content to
our pop-up and later we’ll finish the
rest of our settings drag in a heading
widget compose your text and design it
the size color box shadow etc drag in a
button widget fill in your answer text
as yes and add an icon in style design
the button border-radius
padding box shadow and more even add
some animation on hover now add another
button and change the text to no here
you can also personalize it with various
settings alrighty
back to setting up the pop-up itself
click the COG icon in the bottom here
under style make it transparent and add
a background image here you can play
around with further settings in the
Advanced tab add padding on the right
and left over to the section settings
style add a thick border of 15 pixels
and some
adding just on the bottom click the
column handle to design its background
choose gradient and radio let’s also add
some box shadow in advanced let’s make
the column jump out of its frame by
adjusting the margin and padding back to
the heading let’s change it from black
to white as well as the buttons color
check it out our pop up looks awesome
we’re aiming to make the yes button
close the pop-up first go to the button
link under dynamic choose pop up and
press popup again choose close pop up
and slide don’t show again
whoever answers no will be sent to a
more age-appropriate site to ensure that
your users respond head on back to popup
settings in the Advanced tab slide on
prevent closing on overlay and Escape
key and click publish
keep in mind for this example you don’t
need conditions triggers or advanced
rules why not because this pop-up is
displayed via clicking a button save and
close so let’s get into the settings of
the button that opens the pop-up so on
our page click on by now
under link dynamic choose pop-up click
pop up again for action open pop-up and
find our pop-up that’s it let’s see it
in action here we see the home page
click Buy Now and then the pop-up
appears well done before we finish
check out this slide trick you can even
configure a click on a pop-up to open
yet another pop-up using a whole other
design not only that within that second
pop-up add a third pop-up endlessly
entertaining right but don’t ever use it
if you still want any friends happy hour
Cheers
subscribe to our YouTube channel for
more pop-up design tips
