Designing a Dismissible Header Promo Bar in JupiterX for Site-Wide Announcements

A promo bar positioned above the header of your website can be an effective method for sharing site-wide announcements, promoting sales, or highlighting important information. Ease of use is key: visitors should be able to dismiss the bar and continue browsing without obstruction. With JupiterX, you can create a customizable and dismissible promo bar without writing a single line of code.

To begin, assume you have an established header on your live website. Follow these steps to create your promo bar popup:

1. In the WordPress admin area, navigate to JupiterX > Popups.
2. Click "Add New Popup" and enter a name that reflects the purpose of your promo, such as "Summer Sale Promo."
3. After naming your popup, click "Create," and you'll be taken to the Elementor editing area to construct your promo content.

Configuring Your Promo Bar Settings 

In the Elementor editor:

1. Click the gear icon located at the top center to open popup settings.
2. For a full-width promo bar, set the Width to 100vw .
3. Select "Custom" for the Height and pick a range between 50px-100px  based on your needs.
4. Center the content by setting the Content Position to 'Center'.
5. In the Layout pane, align the promo bar to the top of your page by choosing 'Top' for vertical alignment.
6. Activate the option "Convert to header toolbar," which makes the promo bar part of your website's header. This option will push the page content down so that the popup does not overlap the header or other page contents. Once the user clicks the dismiss button, the content will slide back up.

Defining Additional Popup Settings 

Proceed to:

1. Fine-tune the promo bar's behavior in the Popup Settings > Advanced section, deciding how and when the popup should be displayed or hidden.
2. Add your promotional content, such as titles, buttons, or any other widgets that align with your campaign.
3. If you want the entire promo bar to serve as a clickable area, select the parent container in Elementor:
   • Go to the Advanced tab and look for Wrapper Link.
   • Insert the destination URL to make the entire promo bar lead to your chosen page or offer.

Publicizing and Managing Display Conditions 

Once your promo bar is ready:

1. Hit "Publish" to save your work.
2. Determine where your promo bar should appear by specifying the Display Conditions. You might want it site-wide or only on certain pages.
3. Configure the Triggers to define when your promo bar will pop up. This could be based on how much time a user has spent on the site, how far they’ve scrolled, or on their first visit to the page.

A dismissible promo bar is not only a stylish way to broadcast messages but also respects your visitors’ browsing experience by enabling them to remove the bar at will. Thanks to JupiterX, achieving such functionality on your site is straightforward and can be tailored to various scenarios, from user roles to time-specific displays.

By following these steps, you will have added an interactive element that is both informative and non-intrusive. JupiterX's tools cater to your creative and marketing needs, providing nuanced control over the delivery of your site's announcements and promotions. Should you need further guidance or encounter any questions while implementing your dismissible promo bar, JupiterX support is ready to assist.