How to add a button to your announcement bar

Do you want to make your website more engaging but do not have much idea about announcement bar tricks? But why worry when you are here? I’ll describe how to add a button to your announcement bar to make it catchy. By applying a small snippet of code, you can transform a link within your Squarespace website’s announcement bar into a fully-fledged button.

This functionality presents an excellent opportunity for highlighting events or encouraging opt-ins.

 Notice: The utilization of Announcement Bars falls under the domain of premium features. Access to this feature is exclusively available to individuals holding a business or commerce-oriented Squarespace subscription.

How to add a button to your announcement bar?

If you want to add a button to your announcement bar, you’ll have to follow the steps given below:

Step 1: 

• Enable the announcement bar

Step 2:

• Add a button

Let’s see how these actions will be performed in order to get the desired results to make your website more captivating.

Important: This method works for both versions of Squarespace; 7 and 7.1.

Step one: Enable the Announcement bar

Once you’ve logged in to Squarespace;

1. You’ll find the Marketing option in the upper left corner of the screen.
2. Click on Marketing and locate the Announcement bar.
3. Open the Announcement bar and enable it.
4. Enter the text according to your need.
5. Insert a link to the text and click the save button.

Step two: Add a Button

1. Go to the Designs.
2. Locate Custom CSS and open it.
3. Copy the code given below to add a button to the announcement bar.

.sqs-announcement-bar-text a { 
position: relative; 
text-decoration: none!important; 
margin: 5px!important; 
padding: 4px!important; 
border: 1px solid #FFF!important; 
font-weight: 600!important; 
line-height: 2.5em}

Remember : Don’t forget to change the color code (#FFF) and the numeric values according to your sites need.

Paste the copied code in the custom CSS. This action will change the announcement bar into a button.

In order to change the hover effect, copy the code given below and paste it in Custom CSS.

Be sure to change the color codes according to your own need.

 .sqs-announcement-bar-text a:hover { 
background:#000;
color:#FFF;
border: 1px solid #FFF!important; 
}

Final Thoughts

In conclusion, incorporating a button into your announcement bar can greatly enhance user engagement and visibility of your important messages. By following the simple steps outlined in this blog post, you can effectively communicate your key information and drive action from your audience. Remember that a well-designed announcement bar with a strategically placed button can serve as a powerful tool to direct visitors towards your desired goals, whether it’s signing up for updates, exploring new products, or taking any other desired action. Keep experimenting with different button text, colors, and placements to find the combination that resonates best with your audience and aligns with your website’s objectives.

FAQs (How to add a button to your Announcement Bar)