A Hello Bar, also called an announcement bar, is a banner at the top of your page, inside the page header. Use it to share a sale, an event, or a new Offer where every visitor sees it first, and link it to a page, file, or popup so visitors can act on it.
This article covers the Hello Bar in the page editor for the Website Builder and Kajabi Pages, and the header announcement for the Premier Legacy Templates.
Note: This guide refers to the latest page template available with the Website Builder and Kajabi Pages. If you are using the Premier Legacy Templates, please refer to Add an announcement to a Premier page.
Add a Hello bar
Design your website pages with the Website Builder to include an announcement bar in your header:
From the Dashboard, click Website, then click Website Pages or Landing Pages.
Click the Title of the page to open the editor.
In the sidebar panel, click Header.
Click Add block.
Select Hello bar.
Customize your Announcement Text, Announcement Action, and Block Settings.
Click Save to keep your changes.
Customizing a Hello bar
Text
Enter the text displayed in your Announcement Block.
Action
Select an action if you want to create a clickable announcement:
Go to a Landing Page: Redirect your users to a landing page built with Kajabi
Go to a Checkout Page: Open the Checkout Page for Offers built with Kajabi
Download a file: Upload a file from your hard drive for your users to download when the announcement is clicked
Go to a URL: Paste a URL to open any page when the announcement is clicked
Open two step optin popup: Connect your two step optin to your announcement to encourage users to submit a form. Learn how to add a two step optin popup
Go to a section on this page: Redirect your visitors to a specific section of the page after the announcement is clicked
Note: When using the Go to a URL action, be sure to enter a full URL (e.g., https://kajabi.com/).
Open in new tab
Enable this setting to trigger your action in a different tab of your user's browser.
Block settings
Background
Select a Background Color for your Announcement to stand out for your users.
Clicking Background Color will open your site color palette.
If you prefer to use a custom color, click the color wheel and then either enter your RGB color code or use the sliders to choose your color:
The vertical bar allows you to select the hue
The square box allows you to adjust the brightness and saturation of your color
The horizontal bar allows you to adjust the opacity of your color
Alignment
Open the Alignment Block Setting to change the horizontal text alignment in your Announcement Banner.
Add an announcement to a Premier page
If you use the Premier Legacy Templates, which may be outdated, show an announcement above your page header from the header settings instead.
From the Dashboard, click Website, then click Website Pages or Landing Pages.
Click the Title of the page to open the editor.
In the sidebar, click Header.
Scroll to the bottom and locate Optional Announcement.
Check the Show Announcement checkbox to enable the announcement bar above your Header.
Customize your announcement.
Click Save to keep your changes.
Customize a Premier announcement
Note: The announcement only displays if the Header is enabled on the page.
Announcement link URL
Choose to have your announcement act as a button to:
Lead to a Landing Page
Lead to a Checkout Page
Add a downloadable file
Lead to a URL for another page
Open the Two Step Optin Popup