Back to contents

How to create a new popup template from scratch (based on JetPopup)

Get to know how to create a popup from scratch using JetPopup plugin. This plugin allows to create beautiful popups and has library with pre-designed popups.

JetPopup plugin is one of the best addons 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.

add new popup

Step 2 — Provide a new popup with the title and click Edit with Elementor button. After that, Elementor editor will open automatically.

name the popup

Step 3 — Feel free to use versatile widgets and settings to make your popup eye-catching.

customization of the popup

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 and options. There are three available conditions:

display conditions for a popup
  • 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.

Step 5 — Additionally, you can specify user roles of your site to which this popup will be available.

available for roles option

Step 6 — In the Settings block, you can also select an animation effect for the popup.

animation settings option

Step 7 — Select the trigger event from the Open Event dropdown:

open event option
  • 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 intents to exit the page;
  • on 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 showed again in the Repeat showing popup in option.

repeat showing popup in option

Step 9 — After you have applied all 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 JetPopup plugin.