How To Add That Skinny Promotional Banner To Your Squarespace Website
I was zooming around Facebook, looking for an answer to a question of my own, when I saw this question:
FB Question: How on earth do you add the little skinny header banner on top that you can write sales and stuff on?
That's a great question but hard to answer if you don't know what Squarespace calls that little skinny header. It’s an Announcement Bar, a small strip at the top of website pages used for promotional content.
If you're a real estate agent or an interior designer with a Squarespace website, you can add an announcement bar to make important information visible to your potential clients. It can be used to share messages or promote your listings and events. You can link your announcement to a contact page, RSVP form, downloadable file, or an external website.
There are a million great ways to use an announcement bar. Here are a few things you can promote:
A time-sensitive blog post
An Open House
A Buyer's Brunch Invitation
A downloadable lead magnet
Here's a quick how-to video where I'll walk you through the steps to add an announcement bar to your Squarespace website. Please note, the Squarespace navigation has changed since this video was recorded. The Announcement Bar can be accessed through marketing tab on the home menu.
Here’s how to add an Announcement Bar in Squarespace:
From the Home Menu:
Marketing in the left panel.
Select Announcement Bar in the left panel.
Select Enable Announcement Bar.
Enter your announcement in the text box. You have basic styling options such as underlining, italics, and bold, plus the option to add a text link. You can even add an emoji. To do so, use the shortcut Ctrl+Cmd+space on Mac or Window + period (.) on Windows.
Optional: Make the announcement bar clickable by adding a link in Clickthrough URL below the text box.
Click Save.
Change the fonts and colors to style your announcement bar.
Squarespace 7.1: How to modify fonts in the Announcement Bar
Open Site Styles from the Design section in the left panel or the paintbrush in the upper right corner of any page you edit.
Select Fonts ➔ Assign Styles.
Click on your Announcement bar or scroll down to Announcement Bar and select Text.
Select the font styles you want and click Save.
Squarespace 7.1: How to modify colors in the Announcement Bar
The announcement bar's color changes with your header’s color theme. To change the color:
Open Site Styles from the Design section in the left panel or the paintbrush in the upper right corner of any page you edit.
Select Colors ➔ Click the pencil icon on your header's theme or the section's theme you want to change. Click on your Announcement bar or scroll down to Announcement Bar to change the background and text colors ➔ Save.
Squarespace 7.0: How to modify the fonts and colors
Open the Site Styles panel ➔ Announcement Bar.
Edit the background color, text color, and font ➔ Save.
Read more from Squarespace Support here.
Whether you call it by its given name or an affectionate nickname like "skinny little header banner," adding an Announcement bar to your Squarespace website is a great way to engage with your online visitors.
