How to add an announcement bar in Elementor
An announcement bar is the thin strip above your header that says “Free shipping over $75” or “Closed 25 and 26 December”. Elementor gives you two ways to build one yourself, and a plugin gives you a third that is faster to change and works even if you move away from Elementor later. This guide walks through all three, with the exact menu paths, and tells you which one fits which situation.
Which method should you use?
If you want to decide quickly: use Elementor’s Floating Bar when you are on free Elementor, want a simple call-to-action bar and are happy to start from a template. Use the Theme Builder header when you already have Elementor Pro and want the bar to be part of your header design. Use a plugin such as Bulletin when the bar changes often (sales, opening hours, stock notices), when you need a countdown or an end date, or when you do not want to open the header template every time the message changes.
The sections below go through each in order.
Method 1: Elementor’s Floating Bar (free)
Elementor added Floating Bars in version 3.24 in 2024. They sit in the same place as the Floating Buttons feature and the basic call-to-action bar is included in the free version.
1. Make sure Flexbox Containers are on
Floating Bars are built with containers, so go to Elementor → Settings → Features and check that Flexbox Container is active. On any site created in the last couple of years it already is.
2. Create the floating element
Go to Templates → Floating Elements and click Add New. Choose Floating Bar as the type, give it a name and continue. Elementor asks you to pick a template; there is no blank canvas, so choose the CTA bar layout closest to what you want.
[Screenshot: Templates → Floating Elements → Add New, with Floating Bar selected]
3. Edit the text, icon and link
The editor opens with the bar’s settings in the left panel. Replace the headline and description, change or remove the icon, and set the button text and URL. The Style tab controls background colour, text colour and button styling.
4. Publish it site-wide
When you publish, free users get a Set as Entire Site link that shows the bar on every page. Only one floating bar can be set this way at a time, so if you need a second one later you have to swap them manually. Pro users get full display conditions instead, for example only on product pages or only for logged-out visitors.
[Screenshot: the publish dialog with Set as Entire Site]
What the Floating Bar cannot do
There is no countdown and no end date, so a sale bar stays up until you unpublish it. The Ticker and Coupon bar types and the 30-plus templates need Pro, and you must start from a template rather than from scratch. Because it floats as a fixed element rather than pushing the page down, it can cover the top of your header on some layouts, so check it on mobile.
Method 2: build it into your header with Theme Builder (Pro)
If you have Elementor Pro and a custom header, the most “native” approach is to add the bar as a container at the top of the header template. Elementor Pro starts at roughly $60 a year for one site at the time of writing, and Theme Builder is in every Pro plan.
1. Open your header template
Go to Templates → Theme Builder → Header and edit the header you are using. If you have not built one yet, create a header first; the announcement bar is a part of it, not a replacement for it.
2. Add a container above the existing header
Drag a new Container to the very top of the template, above your logo and menu row. Set it to full width, give it a background colour that contrasts with the header, and keep the padding small so the bar stays thin.
3. Add the message
Drop a Text Editor or Heading widget into the container. Keep it to one line. If you want a link, add a Button widget beside it or link the text. Centre the content under Layout → Justify Content.
[Screenshot: a slim full-width container above a header in the Theme Builder editor]
4. Tidy up mobile
Switch to Mobile Portrait in the responsive preview. Shorten the text or reduce the font size so the bar does not wrap to three lines. Under Advanced → Responsive you can hide specific elements, such as the button, on small screens.
5. Update and check the sticky header
If your header is sticky (Advanced → Motion Effects → Sticky, a Pro feature), decide whether the bar should stick with it. Usually it should not, because it eats screen space on mobile, so apply the sticky effect to the header row only.
What the Theme Builder method cannot do
The bar is now part of your header design, which is good for consistency and bad for maintenance: every change to the message means opening and updating the header template. There is no scheduling, expiry or countdown unless you add a widget and remove it by hand later, and if you ever leave Elementor the bar goes with the header.
Method 3: use a plugin alongside Elementor
The third route is to leave Elementor alone and run the bar from a small dedicated plugin. Bulletin does exactly this: it injects the bar above or below your header on every page, works with Elementor headers and any theme, and you edit the message from its own screen in the dashboard rather than from the header template.
1. Install Bulletin
Go to Plugins → Add New, search for “Bulletin announcement”, install and activate. You get a Bulletins menu in the sidebar.
2. Add a new bulletin
Click Add New, then in the Message tab type your desktop message. Markdown is supported, so **Free shipping** on orders over $75 — [details](/shipping/) gives you bold text and a link. Add a shorter mobile message below it.
3. Pick the display type
In Display options choose Header and then Above header or Below header. Above header puts the bar at the very top of the page, ahead of your Elementor header. If your header is sticky and the two fight for space, Below header or the Floating at bottom type avoids the overlap.
4. Set colours and size
In Design, choose background and text colours, vertical padding and font size. Match your Elementor global colours by pasting in the same hex values.
5. Preview and publish
Preview on desktop and mobile, then publish. If the bar does not appear, clear your cache plugin; Elementor sites almost always run one.
[Screenshot: Bulletin bar sitting above an Elementor header on the frontend]
That is the free version. Pro adds the parts that Elementor’s own tools lack: a live countdown with an end date so the bar removes itself, a button that can link to a page or open an Easy Popups popup, multiple rotating messages, rules to show the bar only on certain URLs or to logged-in users, a dismiss icon, Google Fonts and custom CSS.
Comparing the three methods
| Floating Bar (Elementor free) | Theme Builder header (Elementor Pro) | Bulletin plugin | |
|---|---|---|---|
| Cost | Free (more templates and types in Pro) | Elementor Pro, from about $60/yr | Free; Pro from $29/yr |
| Pushes page down vs floats | Floats over the page | Part of the header, pushes down | Pushes down (header) or floats (bottom) |
| Edit the message | Edit the floating element | Edit the header template | Own screen in wp-admin |
| Mobile message | Responsive styling only | Responsive styling only | Separate mobile text (free) |
| Countdown / end date | No | No | Pro |
| Show on selected URLs | Pro | Via template conditions | Pro |
| Works without Elementor | No | No | Yes |
Tips that apply to all three
Keep it to one message; a bar with two offers and a phone number is a bar nobody reads. Check the text contrast against the background. Test on a real phone, not just the responsive preview, because a line that fits a desktop wraps on a 375-pixel screen and pushes your menu down. And if the bar has an end date, use a tool that expires it; “Sale ends Sunday” still showing on Thursday is worse than no bar.
Where Bulletin fits
If you only ever want one permanent bar and your header lives in Elementor Pro, building it into the header is perfectly reasonable. If you are on free Elementor, the Floating Bar covers a simple call to action.
Bulletin is the better choice when the bar is going to change. The free version, available on wordpress.org, gives you unlimited bulletins, header, floating-at-bottom and sticky-footer positions, separate desktop and mobile messages, colours, font size, alignment and markdown. You need Bulletin Pro, from $29 a year, for the countdown and automatic expiry, buttons, multiple messages, placement by URL or user, corner display, icons and Google Fonts, custom CSS and multisite support. For a worked example of the Pro features, see our guide to setting up a Black Friday countdown bar for WooCommerce.
FAQ
Can I add an announcement bar in free Elementor without Pro?
Yes. The Floating Bar’s CTA type is included in free Elementor, under Templates → Floating Elements. A plugin like Bulletin also works with free Elementor and does not need Theme Builder.
Will Bulletin conflict with my Elementor header?
No. Bulletin outputs its bar outside the Elementor header, above or below it. If your Elementor header is sticky and sits on top of the bar, switch Bulletin to Below header or Floating at bottom, or add a top margin to the header with one line of CSS.
How do I add a countdown to an Elementor announcement bar?
Elementor’s Floating Bar has no countdown. You can place a Countdown widget inside a Theme Builder header container, but it will not remove itself when it hits zero. Bulletin Pro’s Show Countdown plus Expire bulletin gives you a live countdown that takes the bar down at the end time.
Can the bar show only on certain pages?
With Elementor Pro, use display conditions on the floating element or the header template. With Bulletin Pro, use the Placement tab to include or exclude URLs, with wildcards such as /shop/*.
Want a bar you can change without opening the header template? Install Bulletin free or see what Pro adds.