How to customize your Squarespace Announcement Bar

TRANSCRIPT

Hi, I'm Nick, and in this video, we're going to explore the custom styling and animation options for your Squarespace announcer bar using SquareKicker. In the second part of this video, we will look at using the announcement bar as a secondary navigation.

To get started, you will need to enable the Squarespace announcement bar. You can find this either in the Squarespace website tools under the website tab or in the marketing tools under the marketing tab enable the announcement bar and type in your message. You can also change specific words to bold italic and underlined and even create external or internal links to other pages on your site. And in a little bit, we will show you how these can be used to create even more customizations using SquareKicker.

Customizations

Now that your Squarespace announcement bar is enabled, we can customize this using SquareKicker using the announcement bar tool found in both the page and site wide tools of your SquareKicker menu. Here, you will find all your styling options.

The first thing we're going to customize is the layout. You can add a margin around your announcement bar to create an inset design or individually set the margin for each side. If you would like to announcement bar that stays in place as you scroll, you can fix it to the top, bottom or either side of your screen.

I'll head into the background now and select a background color for my palette. When your announcement bar is fixed and you change the transparency of your background color. This allows your announcement bar to blend into your site. Try playing around with the background gradients using transparent colors.

Take things to the next level by increasing your transparency of your background and choose from one of the list of filters such as grayscale, the invert blur or custom where you can apply a mix of these filters including a hue rotation which changes the colors of the background as the website passes through the filter.

The border tool allows you to add a border around your announcement bar. You can customize the color thickness, the sides and even around the corners.

The font tool gives you the ability to style the text in and outs of bar such as the font family, the color and more. You also have control to style each font type that you're using, such as the bold, italic, underline and links.

The announcement bar is also equipped with a hover option. You can style many aspects of the announcement bar on hover including background, border text and the close button.

Add or remove spacing in your announcement bar by using the vertical or horizontal spacing options or select custom to add spacing to a specific side.

In the corner of your announcement bar is a close icon and you can customize the size, the color and hover of this icon with SquareKicker. You can also hide the close icon if you want to remove the ability for your visitors to close your announcement bar.This is particularly useful if you want to repurpose the bar as a secondary navigation, which I'll show you during the second part of this video.

You can control the visibility of your announcement bar, which can be useful if you do not want to show this on every page.

There are two ways to achieve this:

If you want to hide the announcement bar on most pages, but show it on a single or a few pages, go to the site settings, announcement bar, visibility and toggle hide, then go to the page settings of the page you would like it to be visible and toggle, hide off.

If you want to show the announcement bar on most pages and hide it on a single or a few pages, leave your side settings as they are and on the page, you would like it to not show toggle the hide button on.

Lastly using the device toggles, you can customize your announcement bar for each size screen to ensure everything looks good on every device.

Creating a Secondary Navigation

A unique way to repurpose a Squarespace feature is a secondary navigation bar with links to specific places on your site or an important call to action. In this example, I'm going to create a fixed secondary navigation with anchor links.

First head to the announcement bar text and add your navigation. Making sure to set each link with a hashtag followed by the same anchor link section ID created using the SquareKicker anchor links tool.

If you haven't created SquareKicker anchor links before watch our tutorial on creating anchor links, fix the announcement bar to the top bottom or side of the screen and use the margin to space it away from the edge.

We can't wait to see what you create with SquareKicker and all the uses you will find for the announcement bar tool.

Thanks for watching and we look forward to seeing you again soon.

Read more about how to use the announcement bar in our blog.