How to add and style buttons on a Squarespace banner image - video tutorial

How to add and style a squarespace banner image button

Isn’t it funny how something so small can pack a big punch? One little tweak and all of a sudden WHAM, you’ve got a totally different result.

I’ve noticed that small yet intentional elements can heighten design in a major way, and this is particularly true when you look at header images.

Many modern websites are styled with a large, full-width banner image that greets you when you first land on a page. There’s often a background image with text overlay on top.

But if you want to take your design a step further and incorporate a really effective call to action? That’s where the beloved button comes in.

There are several ways to add a button over a banner image on an individual page of your Squarespace website, and the process will look a little different depending on which template you’re using. This particular video tutorial shows how to do this with the template family that includes Bedford, Anya, Bryant and Hayden.

Once you’ve added a button to a banner image on one of those particular templates, you can also style it as you see fit.

If you’ve ever wondered how to add a button to a banner image, I hope this video shows you how easy it is to set up!

Note: want to watch more of my Squarespace video tutorials? I've linked to them at the bottom of this post or you can head over to my Youtube channel to binge them now. #aintnoshame

How to add and style a banner image button

In this video you will learn:

How to add a button to a Squarespace banner image
How to add a second button to a banner image
How to style buttons on banner images

*This video shows a demo website using the Bedford template*

How to add a button to a banner image

Log onto your Squarespace website and select the page that you want to work with (index or regular)
Go to Page settings, select text in the description you want to turn into a button by highlighting the text
Add link (either to external website, files or website content)
Save

How to add a second button to a banner image

Follow the same steps above but highlight a second section of text to turn into a button

How to style a button on a banner image

Select the page that has the button on the header/banner image that you want to style
Go to Design > Style Editor then click the button (on the right) so that it gives you the styling options for that particular button element
Select your button styling preferences
Save

Final Thoughts

Adding a button to a banner image is a small tweak that has a big impact. As a call-to-action (CTA), it can be hugely effective since it immediately captures your eye and indicates to the user that they should do something here. These buttons are a great design element and knowing that you can style them in just a few quick clicks is an added bonus. Try playing around with buttons on your website and see how you can make the page look and function exactly how you’d like!

Now it’s your turn to tell me, have you tried adding a button to a banner image before? Do you like the look? What do you use for your call to action point? How is it styled on your website? I’d love to know so leave me a comment down below!

Want to create your own stunning, professional Squarespace website? I build custom sites and I’d love to work with you. If you’d rather take the DIY route, I highly recommend the online course Website that Wows. It's a simple, step-by-step program designed to help coaches and service-based entrepreneurs create their own client-winning website from scratch. Plus, it's beginner-friendly with no coding required! You can start with a free trial here.