Designing and Activating Popups in JupiterX

Popups can significantly enhance your website's interaction by capturing attention for announcements, subscriptions, promotions, and more. JupiterX streamlines the process of creating and managing popups, allowing for a range of triggers, including the manual activation through a button click. This article guides you through the steps to create your first popup and trigger it using a button within JupiterX.

Creating a New Popup 

Kickstart your popup creation process:

1. Go to your WordPress admin panel and select JupiterX > Popups from the left sidebar.
2. Click on Add New Popup to begin designing from scratch or, for a quicker setup, import a pre-designed template.
3. If choosing to design your popup, the Elementor editor will provide you with intuitive tools to create a custom layout that suits your needs.
4. Once you're satisfied with your design, click ‘Publish’.

Configuring Popup Display Settings 

After designing your popup:

1. In the Popup publish Settings, you’ll need to specify where the popup should be displayed. Options here can range from showing it on specific pages to having it as a site-wide element.
2. Define your triggering criteria. These settings dictate the conditions under which your popup will automatically appear to your users, such as after a set time delay, when a user scrolls to a certain point, or upon exit intention.

Triggering Your Popup with a Button 

To set up a button that triggers your popup:

1. From within the Elementor editor for your popup, click on the gear icon located at the top center of the screen to access the popup settings.
2. Navigate to the Advanced tab where you'll find the Open by Selector option.
3. Enter a unique ID or CSS class (e.g., .subscribe_trigger_button  or #subscribe_trigger_btn ). This will be used to link the popup with the trigger button.
4. Save the popup settings.

Setting Up the Trigger Button on a New Page 

Next, integrate the popup with a button on your site:

1. Create a new page or edit an existing one where you want the trigger button to be located.
2. Drag and drop the JupiterX button widget onto your page and select it to customize.
3. In the button widget settings, switch to the Advanced tab.
4. Enter the same ID or CSS class you designated for your popup into the CSS ID or CSS Class field. Do not include the hashtag (# ) or dot (. ) that you used in the popup settings; just use the identifier name.
5. Save your page.

Testing Your Popup 

To ensure everything is set correctly:

1. Open the page with the trigger button.
2. Click the button and verify that your popup loads as expected.

Popups serve as a versatile tool for engaging site visitors, and with JupiterX, their creation and implementation can be handled with just a few clicks. Whether for promotional campaigns, sign-up forms, or special announcements, controlling the display of popups offers a direct line of communication with your audience.