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
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.