Easy Way to Add an Announcement Bar to Squarespace 7.1

Explanation of the Squarespace Announcement Bar.

The Squarespace Announcement Bar is strategically positioned at the top of your webpage, typically adorned with vibrant colors for visual impact. This slender banner serves as a concise platform to showcase brief text accompanied by a link. Its primary purpose is to capture the attention of your site visitors. An illustrative example might be an announcement bar featuring a tempting discount or a special sale message.

Functioning as prime real estate on your website, the announcement bar aims to prompt action from your visitors. Given its prominent location, it's highly likely that most users will take notice. This versatile tool can be employed to drive sales, communicate discounts or offers that might otherwise be overlooked, facilitate newsletter sign-ups through a linked prompt, or even promote a free course, among various other possibilities.

Crucially, this feature is omnipresent across all pages of your site, allowing you to convey a single message at a time. While the announcement bar persists, users retain the flexibility to interact with it or dismiss it from view, enhancing the user experience.

Setting Up Your Squarespace Announcement Banner

Implementing the promotional banner is a straightforward process, and the good news is that it remains consistent whether you're using Squarespace 7.0 or 7.1.

Simply access your site editor and navigate to the following in the sidebar:

• Marketing >

• Announcement Bar >

• Enable Announcement Bar

Upon enabling the Announcement Bar, a preview will appear, showcasing how it will be displayed at the top of your site.

Proceed to input your chosen text, apply any desired formatting and links, then click Save.

Alternatively, if you want the entire bar to be clickable (beyond just the text), insert a web address into the Clickthrough URL field. This field allows for a variety of links, such as those directed to specific pages on your site, external websites, or even files for automatic download. Clicking on the COG/GEAR Icon opens the Link Editor panel, where you can customize your link and its settings.

Once you've made your adjustments, save your changes in the top left corner.

Design Your Announcement Bar

Customizing your Squarespace site allows for comprehensive brand consistency on every page. However, when it comes to a promotional popup, a slight departure from your standard branding can make your announcement bar more eye-catching. Follow these guidelines to personalize elements such as background color, text color, and font styles.

For Squarespace 7.1:

Changing the Announcement Bar Font

• Navigate to Home Menu > Design > Fonts.

• Under Global Text Styles, click Assign Styles.

• Under Announcement Bar > Text, choose a preset style or customize it to your liking.

• Click Save.

Changing the Announcement Bar Colors

• Go to Design > Colors > Section Themes.

• Identify the theme controlling your page header.

• Click the Pencil Icon to edit.

• Under Announcement Bar > Background, adjust the colors.

• Under Announcement Bar > Text, modify the text colors.

• Click Save.

For Squarespace 7.0

• Go to Home Menu > Design > Site Styles.

• Locate the Announcement Bar by searching or scrolling down.

• Edit the feature you want to change.

• Click Save.