JetPopup plugin is one of the best add-ons for Elementor page builder for creating and adding popups to the pages. In order to make changes in the stylization of the created popups, you don’t need to dig into even a piece of code. All changes can be applied effortlessly using multiple style settings.
Creating a new popup
Step 1 — Navigate to the JetPopup > Add New Popup section in your WordPress Dashboard.
Step 2 — Provide a new popup with the title and click Edit with Elementor button. After that, the Elementor editor will open automatically.
Step 3 — Feel free to use versatile widgets and settings to make your popup eye-catching.
Step 4 — Afterward, click the Settings icon in the left bottom, proceed to the Display Settings block, and set the needed display conditions for the popup. Click the Display Conditions button and the settings window will appear right here. You can define the specific pages where you want to show the popup, as well as specify the pages where the popup shouldn’t be displayed, using the include and exclude options. There are three available conditions:
- Entire Site – if you set the popup for the whole site it will open on any website’s page;
- Singular – you can set the popup for the specific page or post;
- Archive – select this option to set the popup for one of the archive templates.
- Advanced – here you can choose advanced options, such as Url Parameter, Device, and Roles.
Step 5 — Additionally, you can specify user roles of your site to which this popup will be available.
Step 6 — In the Settings block, you can also select an animation effect for the popup.
Step 7 — Select the trigger event from the Open Event dropdown:
- on page load(s) – the popup be displayed when the visitor opens the new page;
- inactivity time after(s) – the popup will be displayed after the visitor has been inactive on the page;
- page scrolled (%) – the popup window appears when the visitor scrolls the page to a certain percent;
- try exit – the popup window will be shown when the visitor intends to exit the page;
- on the date – define the date and time to start showing the popup;
- custom selector click – the popup will open when one clicks it.
Step 8 — Turn on the option and set the timeout caching that popup will be shown again in the Repeat showing popup in option.
Step 9 — After you have applied all the needed settings, click the Publish button to save a new popup.
This is it! Now you can create different layouts of the popup effortlessly with the help of the JetPopup plugin.