Configuring JupiterX Popups

Introduction to JupiterX Popups 

In the digital realm, popups are the attention-grabbing call to action modal windows that catch a user's eye amidst their web journey on your site. These interactive elements come to life at crucial moments, often triggered by a user's action or behavior, and are designed to focus their attention. JupiterX provides a robust system for creating, customizing, and deploying popups on your WordPress website, which we'll explore in this detailed guide.

Starting with Popup Creation 

To craft a popup in JupiterX:

1. Navigate to JupiterX > Popups from your WordPress admin dashboard.
2. Here, you can create a new popup from scratch or edit an existing one. Click the "Popup Settings" gear icon in Elementor's panel to access its diverse configurations.

Designing and Setting Up Your Popup

General Settings:

You'll assign a title to your popup for backend identification purposes and set its status—whether it's in draft, pending review, private, or ready to be published.

Layout Settings:

Define your popup's dimensions and position:

• Width: Specify using pixels (px) or viewport width (vw).
• Height: Choose between 'Fit to Content', where the popup adapts to the inner content's height; 'Fit to Screen', which stretches to the full viewport height; or 'Custom', where you can define an exact height.
• Content Position: Align your content vertically within the popup as top, center, or bottom.
• Horizontal and Vertical Position: Set the popup's screen position horizontally (left, center, right) and vertically (top, center, bottom).

Special Features:

• Convert to Header Toolbar: When set to top, this option enables you to craft promo bars that sit above site content and can be dismissed.
• Overlay: Control the visibility of the background overlay that can dim the page behind the popup.
• Close Button: Opt whether to show or hide the button to close the popup.

Animation Settings:

• Entrance Animation: Decide on how the popup appears with options like fade, zoom, etc. Preview each effect to find the perfect fit.
• Exit Animation: Similarly, select the style for the popup's departure.
• Animation Duration: Adjust the timing of animations in milliseconds.

Custom CSS:

Input custom CSS that specifically applies when this popup is active on the page, offering further stylistic customization targeted only at the popup experience.

Popup Style Configuration:

• Background Customization: Transform the visual base of your popup by choosing a solid color, an engaging image, or a vibrant gradient. This sets the stage for the content you intend to display.
• Border Definition: Borders frame your popup and give it definition. In JupiterX, you have the freedom to opt-out or select from a variety of border styles - from a classic solid to a more whimsical dotted, dashed, or grooved. This choice can accentuate the popup's theme or the urgency of its message.
• Corner Softness: The Border Radius setting allows you to soften or sharpen the corners of your popup. Rounded corners often lend a friendlier, softer touch, while sharp corners can indicate something more sleek and modern.
• Internal Breathing Room: Padding is crucial for ensuring that the content inside your popup doesn’t feel squeezed. Adjusting the padding creates a cushion of space around your popup's elements, making for a more pleasant viewing experience.
• External Spacing: The Margin setting determines the space around the outside of your popup, which is critical when your popup design interacts closely with other page elements.
• Shadow Effect: A Box Shadow adds depth and prominence to your popup, helping it stand out from the webpage it overlays, making the call to action truly pop.

Content Style:

• Padding & Margin: Similarly to the Popup's overall padding and margin, you can adjust these settings for the content within the popup, refining how your message is framed against the popup background.
• Background Selection: Set a distinct background for your popup's content as an additional layer of style. This option can work in concert with or provide contrast to the main popup background for a dynamic effect.

Close Button Styling

• Positioning the Close Button: In JupiterX, you can position your Close button on the inside or outside of the popup frame for optimal user interaction.
• Fine-Tuning Placement: Use sliders to pinpoint the Close button's exact vertical and horizontal placement, ensuring it's exactly where it should be, whether for aesthetics or user experience.
• Normal | Hover State Customization: Adapt the icon color and background of the Close button to match your style for both its idle state and when the user hovers over it. This responsiveness adds a layer of interactivity and polish.
• Sizing: Control the Icon Size to make certain it's noticeable, but not dominating, and the Box Size to provide sufficient clicking area without overwhelming the popup's design.
• Border and Box Shadow: Define the Close button's border type, width, color, and even give it a shadow for added user focus.

Overlay Specifics

• The Underlying Canvas: The Overlay is what sets your popup apart from the rest of the site by offering a backdrop that can be customized with a color, image, or gradient. This is your chance to minimize background distractions and ensure the popup gets the spotlight.

Advanced Settings:

• Overlay Interaction: Determine whether users can close the popup by clicking on the overlay. This can force users to interact directly with the popup content and is particularly useful for crucial announcements.
• Keyboard Behavior: Configure if the ESC key should dismiss the popup. Disabling this can ensure that the user engages with the popup's content or navigational cues.
• Page Scroll: You have the option to disable page scrolling when the popup is active, which can keep the user's attention locked on your popup content.
• Popup Frequency Management: Ensure not to overwhelm users by showing the popup only once with the "Show Once" feature. Additionally, you can specify the re-emergence interval, balancing reminder with nuisance.
• Popup Exclusivity: Avoid bombarding users with multiple popups during the same site visit by choosing to hide this popup if another has been shown.
• Dynamic Content Loading: Use Ajax to load popup content dynamically. This means the popup's information is always current when triggered, which is paramount for news or updates. Furthermore, it optimizes loading times by fetching heavy content only as needed.
• Delayed Close Button: Choose a strategic moment for the close button to appear by setting a delay. This can ensure users have adequate time to digest the popup's content.
• Automatic Popup Closure: Auto-close the popup after a set duration, useful for transient notifications that should not distract users for too long.
• Manual Popup Triggers: Specify elements that will trigger the popup, such as CSS IDs, classes, or data-elements. This gives you flexibility to activate popups in line with user navigation or actions.
• Z-index Settings: Adjust the popup's z-index to handle layering and content overlap, ensuring your popup is never hidden behind other site elements.

Custom HTML Attributes and Custom CSS

• Attributes: Inject specific HTML attributes into your popup for advanced functionality or integration with other tools and scripts.
• Custom CSS: Write your own CSS rules to further personalize your popup's appearance and behavior, tailoring it to even the most specific design requirements.

Display Conditions and Triggers

Specifying Visibility with Conditions

In JupiterX, you can outline exactly on which pages your popups will show:

• Navigate to the publishing settings section in the Elementor editor for your popup.
• Use Conditions to set locations for your popup's appearance. This can include singular pages, such as the home page, or various categories and tags throughout your site.
• To specify certain conditions, choose Include or Exclude to either show or hide the popup in selected areas. For example, if you want a popup to appear only on your home page, select Singular > Front Page as your condition.

This level of specificity ensures your popups are utilized optimally, enhancing user engagement without becoming a nuisance.

Activating Popups with Targeted Triggers

Triggers in JupiterX control how a popup is activated:

• After Inactivity: Ideal for re-engaging users who might have stepped away, this trigger makes the popup appear after the visitor has been inactive.
• On Date Range: Schedule popups to show between specific dates, such as during a promotion or event.
• On Date: Perfect for one-day events or special announcements, this trigger activates the popup on a particular date.
• On Page Exit Intent: Detects when a user is about to exit your site and displays the popup in a final bid to capture their attention.
• On Page Load: Choose a delay in seconds to show the popup after the page has fully loaded, giving users a moment to orient themselves first.
• On Scroll to Element: Trigger the popup when users scroll to a certain element with a specific class or ID — useful for contextual popups aligned with content.
• On Scroll: Based on the user's scroll percentage down the page, this popup can serve as a surprise element of interaction.
• After X Page Views: Set popups to display after a user has visited a certain number of pages, gauging their interest.
• After X Visits: Determine popup display once a user has initiated a set number of sessions on your site, great for returning visitors.
• Time Range: Limit the popup to appear between specified times, with considerations for time zones.
• URL Referrer: Show the popup only if a visitor has come from a designated URL, fitting for marketing funnel or partnership strategies.
• User Browser Language: If language-specific content is key to your audience, this trigger makes a popup appear for users with the specified browser language.
• User Browser: Targeted towards specific browser users, ensuring compatibility and relevance.
• WP User Role: A popup will display for users logged in with certain WordPress user roles, perfect for membership-level content.
• UTM Parameters: Utilize UTM tags like Campaign, Content, Source, and Term to present popups to users arriving from specific marketing campaigns.

Your JupiterX popup is much more than just a message box—it's a full-fledged addition to your site's storytelling. Styling your popup takes careful consideration of design principles and an understanding of how your audience interacts with your site. With JupiterX, every corner, shadow, and color of your popup can be tailored to entice, engage, and delight your visitors.

As you finalize your popup, remember that each styling decision should align with the user experience you wish to create. Focusing on the design and feel of your popup, down to the finest detail, can make all the difference in how effectively it converts visitors into followers, customers, or fans.