How to Add a Squarespace Announcement Bar
Squarespace announcement bars are a great feature to have on your website. If you’re not sure what they are, they are the thin bars that span the full width of a page at the very top of your website.
Here’s what mine looks like:
You can choose to enable the announcement bar for a set amount of time or always have it visible. And they serve many different purposes:
Announce limited spots left in your 1:1 services
Promote a sale in your shop
Draw attention to a freebie or lead magnet
Showcase a free upcoming webinar or livestream
Here are the quick and easy 3 step directions for adding an announcement bar inside Squarespace for both 7.0 and 7.1.
1. Go to Marketing - Announcement Bar
Refer to the photos below for guidance. You can find Marketing under the main panel of your website.
2. Insert the content
Inside the announcement bar settings, you need to do 3 things.
Click the dropdown to enable the announcement bar.
It will automatically be defaulted to disabled.
Write our your content and call to action
This area isn’t meant to be a paragraph — instead, make it short and sweet. You don’t want your announcement bar to go over 2 lines.
Include a statement and end with a call to action to click for more information or sign up, register, etc.
Note: The only style change you can control here is bolded or regular text.
Add the link
If you click on the gear icon next to the link, you’ll notice different options:
a web address (external pages or blog posts)
page (internal pages or blog categories/tags)
email
phone number
file (for PDFs)
For web address or page, you have the option to open the page in a new window when a site visitor clicks on it. It’s common for internal pages to open up in the same window and external links to open up in a different one.
3. Style it to match your brand colors and fonts
Now we’re going to change the styling options for the announcement bar.
Squarespace 7.0
Go back to the main panel and go to Design - Site Styles.
Click on the announcement bar and you’ll see its options pop up.
Here, you can change:
bar background color
bar text color
bar font, weight, size, letter spacing, and text transformation (uppercase, lowercase)
Squarespace 7.1
You’ll notice that this newer version of Squarespace has slightly different styling settings. The color and font settings are separated.
To change the font:
Click Design
Click Fonts
Click the gear icon in the top one (might say custom if you made a custom font pairing)
Click Advanced
Click Announcement bar text (default to paragraphs)
Use the dropdown menu to change the paragraph size or choose custom
To change the colors:
Click Design
Click Colors
Click on the section that your header is using
Scroll down to announcement bar to change the text color and bar background color to match your branding
And that’s how you add an announcement bar to your Squarespace website and change the style to match your branding.
Have questions or comments? Drop them below!
Looking to uplevel your Squarespace website (or finally launch one) so that you can stand out, get seen, and attract more dream clients?
You might also love these Squarespace blog posts…