The Announcement Bar shows a notice across the top or bottom of your site, with an optional call to action button, a schedule and a live countdown. Use it for sales, product launches, shipping notices, events or news.
Requires Essential Elements Pro.
Switch it on: Essentials → Modules → Announcement Bar.
Configure it: Essentials → Announcement Bar.
Content
| Setting | What it does | Default |
|---|---|---|
| Message | The bar’s text. Basic formatting is allowed: links, bold and italic. | "Free shipping on all orders this week!" |
| Button Text | The call to action button’s label. | "Shop now" |
| Button URL | Where the button links to. Leave empty to hide the button. | (empty) |
| Open in New Tab | Open the button link in a new tab. | Off |
Formatting the message: write simple HTML in the message box:
<strong>Black Friday:</strong> 40% off everything. <a href="/shop/">See the deals</a>Layout
| Setting | What it does | Default |
|---|---|---|
| Position | Top or Bottom of the screen. | Top |
| Sticky | Keep the bar visible while scrolling. A bottom bar is always sticky. | On |
| Dismissible | Show a close (×) button. | On |
| Hide After Closing For | How many days the bar stays hidden for a visitor who closed it (0–365). Use 0 to hide it only until they close the browser tab, so it shows again on their next visit. | 7 |
| Background Color | Bar background. | #1e2440 |
| Text Color | Message text. | #ffffff |
| Button Color | Button background. | #6528f7 |
| Button Text Color | Button label. | #ffffff |
How dismissal is remembered: the close choice is stored in the visitor’s own browser (local storage, or session storage when set to 0 days). No cookie is set and nothing is sent to your server. If you change the message and want everyone to see it again, closed bars will stay closed until their days run out.
Schedule
Dates use your site timezone (Settings → General → Timezone). Leave both empty to show the bar at all times.
| Setting | What it does | Default |
|---|---|---|
| Start Date | The bar appears from this date and time. | (empty) |
| End Date | The bar disappears at this date and time. It even disappears on an open page, the moment the time passes. | (empty) |
| Countdown | Show a live countdown (days, hours, minutes, seconds) to the End Date. Requires an end date. | Off |
Using a page cache? The end date and countdown run in the visitor’s browser, so cached pages handle them correctly. The start date is checked when the page is generated, so clear your page cache when a scheduled bar is due to start.
Display
| Setting | What it does | Default |
|---|---|---|
| Show On | Entire site, Front page only, or Selected post types only. | Entire site |
| Post Types | Used with Selected post types only. | Post |
| Exclude Pages | Comma-separated post or page IDs to skip, for example 12, 45. Handy for checkout or landing pages. | (empty) |
| Devices | Desktop and mobile, Desktop only or Mobile only. | Desktop and mobile |
Working with other modules
A bottom bar automatically lifts the Scroll to Top button, the Click to Chat button and a bottom Progress Bar, so none of them are covered. A sticky top bar reserves its own space, so it doesn’t overlap your header.
Recipes
Weekend flash sale with a countdown: set the message, Button URL to your sale page, a Start Date of Friday 18:00 and an End Date of Sunday 23:59, and switch Countdown on. The bar appears on time, counts down, and removes itself when the sale ends.
Cookie-free shipping notice: position Bottom, Dismissible on, Hide After Closing For 30 days, and Show On Entire site.
Mobile app promotion: set Devices to Mobile only and link the button to your app store page.
Troubleshooting
I can’t see the bar. Check, in order: ① the module is switched on; ② you haven’t closed it yourself (open a private window, or wait out Hide After Closing For); ③ the current time is between the start and end dates; ④ the page isn’t excluded and matches Show On and Devices; ⑤ your page cache isn’t serving a copy from before the start date.
The bar overlaps my sticky header. Some themes use a fixed header with a very high z-index. Turn Sticky off, or use a bottom bar.