Step-by-Step Guide: How to Create a Popup with Elementor (for FREE)

Today you’re going to learn how to create a popup with Elementor for your WordPress website by using Royal Elementor Addons. Check out our video tutorial down below: First things first: To follow along with this go-to guidebook for adding Mega Menu to your Elementor website, you will need to install Royal Elementor Addons (500,000+ active installations). Fortunately, this is as easy as it sounds. Click Add New Plugin in your dashboard’s Plugins section. Search for Royal Elementor Addons, click Install Now and activate the plugin. Now you are ready to learn how to create email subscription popups, promotion sales, countdown popups and many more. Popups could be displayed on page load, page scroll, when visitor decides to leave the page or when a user clicks on a button. Basically, it comes with all kinds of features you might need to create a popup. But before you start creating your Elementor popup, let’s preview a great feature that comes with Royal Elementor Addons — popups Library. Keep reading… Premade Popups: Save Time with Ready-to-Use Templates If you click on the Royal Elementor Addons icon, it will take you to the library of ready-made popups that you can directly import with just one click. Choose the one you like, click on it to preview and finally click on an Insert button. Now let’s dive into creating an Elementor popup. Step 1. Create an Elementor Popup Step-by-Step There are different styles of Elementor popups available: As you can see there are no limits of what you can do when building an Elementor popup. To create a popup you need to go to the WordPress dashboard and in Royal Elementor Addons click on Popup Builder. Click on Create Template, give it a name and click on create template. Next you need to choose where you want to display your template. So click on Add Condition. Since it’s a free version of Royal Add-ons you can only choose Entire Site feature. Save conditions and it will take you to the popup editor. Let’s create your Elementor popup for an email subscription. Click on Add New Container button and choose the structure of your layout. Now go to the widgets list by clicking the “+” icon in the center of your container. Drag and drop an image widget into the container. Next you need to add some text to your popup. So again drag and drop the header widget. You can change its content, alignment, tag, size and font weight. Now let’s add a MailChimp subscription widget (or any other widget). Congrats! You’ve just built your email subscription Elementor popup! Step 2. Elementor Popup Settings Mastery Show Again Delay: Prevent Annoying Popups & Improve UX Let’s go back to the popup settings and the first option you have is to choose how the popup opens up. You’re probably wondering… WHERE IS THE SETTINGS BUTTON?! Well, it’s right in the middle of the top toolbar. In a free version there’s only one option and that’s On Page Load. Next feature allows you to choose the time of the delay between the page load and popup display. If you want to display your popup again to your visitors once they close it you have a few options to choose from. Otherwise leave it to No Delay. Layout Settings: Customize the Perfect Popup Design In layout section you can choose how you want your Elementor popup to be displayed. You can change the background Width and Height (and choose between pixels and percent). There are all kinds of alignment options that you can play with. There are also tons of Entrance Animations that you can choose from (you can change it’s duration). And finally, Z Index is what determines that your popup will always stay on top of other elements of your page. You don’t want it to be overlaid by other elements like sticky navigation or others. So always make sure that it is set to a very high number. If you want your pages not to be scrollable when popup is displayed you can simply activate the Disable Page Scroll feature. Overlay Settings: Control Background Effects for Better Engagement Let’s move on to the Overlay section. Here you can choose if you want to show the overlay or not. There’s also an option to prevent the closing of the popup when someone clicks on the overlay. So if you set it to Yes, then the only option to close the popup will be to click on the close icon on it. Close Button Settings: Optimize User Experience & Conversions Speaking of which. If you go to the Close Button settings, you can choose if you want to display it at all or not. There’s also an option to delay its show up. You can choose the position of the close button (vertical or horizontal). Styling Settings: Make Your Popups Visually Appealing Now we move on to Style section where you can change the Background Type of your popup, change the color or add an image as a background. There’s also an option to change the color of the ScrollBar. There are standard things like Padding and Border Radius as well as Border Type and Box Shadow. Again in Style section there are Overlay and Close Button settings where you can change the color or set the image as a background and stylize the close button. Popup Trigger Button: Maximize Clicks with Smart Placement Now I want to overview a really important feature related to Elementor popups — it’s called Popup Trigger. Click on the “+” icon in the top left corner of your screen to Add Element. Search for Popup Trigger and drag and drop it into your popup. This feature could be really handy if you want to add a button to your popup, which will trigger some kind of action from a customer. But first let’s see how Close Popup action works. It is almost identical to Close Button but has some additional settings like Show Again Delay or Direct to a Specific URL