How to customize your Squarespace announcement bar and create rotating text animations

Set up your announcement bar in Squarespace

1. In Squarespace, open Pages under the Website menu. Scroll to Marketing Tools toward the bottom of the page. Open Announcement Bar. 
2. TIP: a faster way to find various settings in Squarespace is to use the search function by pressing the forward slash key (/) and typing in your query. 
3. Enable the announcement bar with the toggle.
4. Type in your message.
5. Style your text with bold, italic, and underline.
6. Optional: create external or internal links.

Note that, as described below, you can add multiple messages that rotate through with the SK Rotating Announcement Bar tool. To do this, add each new message on a new line at step 4. 

Read the Squarespace guide for more information on the native settings for the announcement bar. 

Customize your announcement bar with SquareKicker design tools

1. In Squarespace Edit mode, navigate to the top-level SquareKicker menu.
2. Open Site settings. 
3. Select Announcement Bar under the Design tab. 
4. Edit Background, Border, Font, Layout, Spacing, Close Icon, Visibility.

Make these customizations to your announcement bar with SquareKicker.

• Customize the layout: add a margin around your announcement bar to create an inset design or individually set the margin for each side. Choose to fix it to the top, bottom, or either side of your screen so the announcement bar stays in place as you scroll.
• Style your background: select a background color from your palette. A fixed bar will blend creatively with your site if you change the transparency of your background color. Experiment with background gradient.
• Get creative with filters: with a transparent background, choose from filters such as grayscale, invert, blur, or custom. 
• Add a border: customize the color, thickness, size, sides, and add rounded corners.
• Play with fonts: style the font family, color, and more. 
• Add a hover effect: create two versions of the announcement bar by adding hover to the background, border, text, or close button.
• Control visibility: hide the close button so your message won’t be missed. Choose which pages the announcement bar displays on. To do this, open the Announcement Bar tool at the top-level SquareKicker Menu, in Page settings and toggle off/on visibility for each page. 
• Make it responsive: use the device toggle to customize your announcement bar for each screen size. 

Share multiple messages with rotating announcements

1. Open and enable the announcement bar.
2. Type in each message you want to share on your announcement bar, starting each message on a new line. 
3. Enter Edit mode. 
4. Open the top-level SquareKicker menu and open Site settings. 
5. Navigate to the Advanced tab and select the Rotating Announcement Bar tool. 
6. Enable the tool with the toggle.
7. Choose a mode: Fade, Slide, Scroll, or Typewriter. Each mode provides a different transition animation for your messages. 
8. Customize your animation by adjusting the settings. 
9. If you update your message/s after enabling the tool, you'll need to refresh your browser to see your changes. 

Add advanced customizations to your announcement bar text

Fade

1. Set speed: This determines how quickly the animation moves or changes. Use the slider or enter a percentage value. A higher speed will create more movement on the page so experiment to see what will achieve your desired effect. 
2. Set Transition Delay: This determines how long each message will stay visible on the announcement bar before changing to the next one. Use the slider to adjust the delay. The delay is expressed in seconds. 

Slide 

1. Set Speed and Transition Delay as above. 
2. Set Direction: Slide creates a vertical movement with the message sliding in from the top or bottom of the bar. Select Up or Down. 

Scroll

1. Set Speed as above. 
2. Set Spacing: increase the size of the gap or space between messages with the slider.
3. Set Direction: Scroll moves the text left-to-right (or right-to-left) horizontally across the width of the screen to create a ticker tape effect. This is suitable for one long message or several shorter messages. 

Typewriter 

1. Set Speed and Transition Delay as above. 
2. Set Cursor Style: you can choose the shape of the blinking cursor that appears at the end of the message as it is being typed. Choose from Pipe, Underscore, or Block. You can also choose to have no cursor. 
3. Toggle on/off Irregular Typing: As with the cursor and the backspace animation (below), this effect makes for a more "authentic" typewriter animation. When toggled off, typing of each letter in the message will be even and regular. By default, this setting is toggled on and gives your typewriter animation a more organic, human-is-typing feel with subtle, uneven pacing between each letter. 
4. Toggle on/off Backspace Animation: This animation removes each letter in the message one at a time, as though being erased by the backspace (or delete) key. If toggled off, the message will be removed as a whole before transitioning to the next message. 

Have fun with your announcement bar animations!

Turn your announcement bar into a secondary navigation menu

The SquareKicker Announcement Bar tool allows you to choose the position of your bar, so you can fix it to the bottom, left, or right of the screen, as well as the more traditional top position. Once you’ve decided on position, you can add links and customize the font, background, colors, and many other aspects of this feature. You can then use it as a menu to provide a cleaner navigation experience for your site visitors. You can read more about secondary navigation options in this blog or watch the tutorial above.