How to Add an Announcement Bar in Elementor (2026)

An announcement bar sits across the top or bottom of your Elementor site and carries one message, whether that’s a sale, free shipping, a launch or a deadline. Visitors see it on every page without you editing a single template.

With WiserNotify, the bar runs through the WordPress plugin. Install it once, pick an announcement template, and the bar appears across your Elementor pages.

Here are the eight steps with screenshots, plus where to show the bar and what to check if it doesn’t load.

How to Add an Announcement Bar in Elementor

Elementor runs inside WordPress, so you don’t paste any code. The WiserNotify plugin connects your site, and the bar is built in your WiserNotify dashboard. The trial runs 7 days, and the walkthrough below shows the whole flow before you start.

Step 1: Open Plugins in WordPress

1. Log in to the WordPress dashboard behind your Elementor site.
2. Click Plugins in the left menu.
3. Click Add New.

Step 2: Install WiserNotify

1. Search for WiserNotify.
2. Click Install Now on the WiserNotify plugin.

Step 3: Activate It

1. Wait for the install to finish.
2. Click Activate.

Step 4: Copy Your API Key

1. Open your WiserNotify dashboard in another tab.
2. Go to the Install pixel page.
3. Click Copy API Key.

Step 5: Paste the Key and Submit

1. Back in WordPress, click Wiser in the left menu.
2. Paste the key into Enter your API Key.
3. Click Submit.
4. In WiserNotify, check that your site shows as detected.

That’s the whole connection. Every Elementor page now loads WiserNotify, including pages you build later.

Step 6: Pick an Announcement Template

1. In WiserNotify, open Widgets and click Add notification.
2. Open the Announcements tab.
3. Pick a template such as Discount, Offer or Reminder, and click Add.
4. Name the widget, enter your site address and click Create & Customize.

Step 7: Design the Bar

1. In Text editor, write the message, such as “Free shipping on orders over $50”.
2. In Click actions, add a button and point it at the sale page, or set it to copy a promo code.
3. In Position & animation, choose top or bottom for desktop and for mobile.
4. In Style, match the colors to your Elementor theme.
5. In Timing control, set a start and expiry date if the offer ends.
6. Click Save, then Next.

Step 8: Choose Pages and Publish

1. Keep All pages, or add URL conditions for the pages you want.
2. Advanced targeting narrows it by country, UTM source or returning visitors.
3. Click Publish.
4. Open your site in a private window and refresh once.

Where to Show the Bar on an Elementor Site

One bar, one message. The pages you show it on decide whether it gets read or ignored.

• Every page, above the header: the classic spot for free shipping or a sitewide sale. Keep it one line so it doesn’t push your Elementor header down too far.
• Landing pages only: a deadline bar on a campaign page, hidden from the rest of the site, using a URL condition.
• Pricing page: an annual discount or a bonus for yearly plans, right where people compare tiers.
• Mobile: set the mobile position separately so the bar doesn’t sit over a sticky mobile menu.

If the bar is time-boxed, pair it with a countdown timer on Elementor on the same page. For wording ideas, these announcement bar examples show what brands write in theirs.

Announcement Bar Not Showing on Elementor?

Most missing bars come down to one of these.

• Plugin installed but not active: the pixel only loads once the plugin is activated and the API key is submitted.
• Cache serving an old page: plugins such as LiteSpeed Cache and WP Rocket can hold the page without the script. Purge the cache, then reload.
• Hidden behind a sticky header: if your Elementor header is sticky, a top bar can disappear under it. Switch the bar to the bottom, or add top spacing to the header.
• Wrong URL rule: one typo in a page condition and the bar never matches. Set it to all pages, confirm it shows, then narrow it.
• Expired dates: if the timing control has an end date in the past, the bar won’t show.

If it’s still blank after a private-window check, WiserNotify’s support chat can look at the pixel with you.

Wrap Up

Adding an announcement bar in Elementor comes down to one plugin and one template. Once the key is in, every new page you build carries the bar without extra work.

Start with a single message on your busiest page, give it an end date, and change it when the offer changes.

Related guides

• Add an announcement bar to any website
• Add an announcement bar to WordPress
• Create an exit popup in Elementor