Announcement bar
The site-wide announcement bar and its CTA variant.
Announcement bar
Description
The announcement bar is the strip of messaging across the top of the site. There are two versions and they are edited in different places: the standard bar takes its messages from the Website settings, while the CTA version is built entirely in Elementor.
In WordPress the standard bar is called the notification bar rather than the announcement bar. They are the same thing.
How to edit
The standard bar — the messages live in the Website settings:
- In WordPress admin, open General website settings and go to the Global settings tab.
- Find the Notification bar section.
- Tick Enable to show the bar, or untick it to hide the bar across the whole site.
- Add, edit, or remove messages under Notifications.
- Save, then check the top of any page.
The CTA version — the content sits in the template:
- Go to Elementor → Theme Builder.
- Search for
Announcement Barand openCK – Announcement Bar – CTA. - Edit the message and the button directly in the template.
- Save, then check a page that uses it.
Variants
| Template | What it is | Where the content is edited |
|---|---|---|
CK – Announcement Bar | The standard bar | The messages come from the Website settings |
CK – Announcement Bar – CTA | A version with a button, for campaigns | Everything is edited in the template |
Notification bar settings
The Notification bar section of the Global settings tab has two parts:
| Setting | What it does |
|---|---|
| Enable notification bar | One Enable tick box that turns the bar on or off across the site. |
| Notifications | A repeating list of messages, where each row has one required Notification message. |
Add as many messages as you need. As the note on the setting points out, when the bar is enabled every message in the list scrolls through it, so there is no way to keep a message in the list but hide it. To stop showing a message, remove its row.
The template controls how the bar looks and the Website settings control what it says, which is why turning the bar off is a tick box here rather than a change in Elementor. The Enable tick box covers the standard bar only — the CTA version is a separate template and is turned on and off in Elementor.
Because these are site-wide settings rather than page settings, a change here appears on every page at once.
Writing messages
- Keep messages short. The bar is a single line, and long copy is the main cause of awkward wrapping on mobile.
- Bold text and links inside a message only appear on mobile. They are hidden on screens 1024px and wider, so do not rely on a link inside a message being visible on desktop.
Classes
Primary classes used by the announcement bar:
| Class | What it's for |
|---|---|
ck-announcement-bar | Main wrapper |
ck-announcement-bar__text | The message text |
ck-announcement-bar__icon | The icon beside the message |
ck-announcement-bar__btn | The button on the CTA version |
Styling is done through a combination of the built-in page builder options as well as custom CSS where needed.