BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Guide

Announcement Bar Pro

How to set up and style the Announcement Bar widget in Elementor.

Announcement Bar shows one message or several rotating messages, each with an optional icon and link, plus a button and a close button. It can sit where you place it or stay fixed at the top or bottom of the screen, run between two dates and show only to logged in or logged out visitors.

Part of: Bright Addons Pro.

See the widget page and live demo

Set it up

  1. Add the Announcement Bar widget to a header template or the top of a page.

  2. In Messages edit the rows: enter the Text, and optionally an Icon, Link Text and Link.

  3. With more than one message, choose a Change Effect and set Show Each Message For (seconds).

  4. Optional: open Button, switch on Show Button and fill in Button Text and Button Link.

  5. In Position and Behaviour choose a Position and, for a top bar, keep Push the Page Down on.

  6. Set Close Button and After Closing, then choose who sees the bar with Show To.

  7. For a timed notice switch on Show Between Two Dates and set From and Until.

Content options

Messages

Option What it does
Text The message. The list holds one row per message, and rows without text are skipped.
Icon An optional icon in front of the message.
Link Text The text of the link after the message.
Link Where the link goes. The link shows only when both text and address are set.
Change Effect Slide Up or Fade, used when there is more than one message.
Show Each Message For (seconds) How long each message stays, from 2 to 60 seconds.
Previous and Next Arrows Adds arrows to move between messages by hand.

Button

Option What it does
Show Button Adds a button to the bar.
Button Text The button label.
Button Link Where the button goes.
Button Icon An optional icon, placed with Icon Position.

Position and Behaviour

Option What it does
Position Where the Widget Is Placed, Sticky at the Top of the Screen or Sticky at the Bottom of the Screen.
Push the Page Down Makes room for a sticky top bar so it does not cover the page.
Stack Order (z-index) Sets which layer a sticky bar sits on.
Close Button Shows a button that closes the bar.
After Closing Show again on the next page, stay closed for this visit, or stay closed for a number of days.
Days How many days the bar stays closed, from 1 to 365.
Announcement Name Change it for a new announcement so visitors who closed the old one see the new one.
Show To Everyone, Visitors Who Are Not Logged In or Logged-In Users.
Show Between Two Dates Turns on the schedule.
From The start date and time. Empty starts now.
Until The end date and time. Empty means no end.
Bright Addons Pro

Unlock this and 70+ more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Bar

    background, padding, content width, space between parts, text alignment, border, radius and shadow.

  • Text and Link

    typography, text color, link and link hover colors, icon size and icon color.

  • Button

    typography, icon size and spacing, normal and hover colors, border, radius and padding.

  • Close Button and Arrows

    size, color, background, hover colors, padding and radius.

Tips

  • Sticky bars are shown inline inside the editor so they stay easy to select.

  • A bar that has not started yet is printed hidden and shown by the script on time, so the schedule also works on cached pages.

  • The closed state is stored in the visitor's browser, not in an account, so it applies per browser.

  • Messages do not rotate on their own for visitors who prefer reduced motion. Add the arrows so they can still read every message.

Questions and answers

Will a closed bar come back?

That depends on After Closing. It can show again on the next page, stay closed for the visit, or stay closed for the number of days you set.

How do I show a new announcement to people who closed the last one?

Change the Announcement Name. The closed state is tied to that name, so the new bar shows again.

Which time zone does the schedule use?

The site time zone set in WordPress. The server clock decides, not the clock of the visitor’s device.

Does the sticky top bar cover my header?

Not with Push the Page Down on. It makes room at the top of the page that matches the height of the bar.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides
[ba_docs_nav]