How to add and style buttons on a Squarespace banner image - video tutorial
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.
Related : How to add and style a button in Squarespace (video tutorial)
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.
MORE SQUARESPACE TUTORIAL VIDEOS
How to disable the escape key login on your Squarespace website
How to add and remove pages from the navigation in Squarespace
Favicons: how to create one in Canva and upload it to your Squarespace website
How to add related posts to the bottom of Squarespace blog posts
How to connect social media accounts to your Squarespace website
How to easily find out which Squarespace template a website is using
LAUNCH YOUR BEST SITE - FREE ECOURSE
Interested in learning more about what it takes to get a website up and running? Sign up for my free 7 day e-course!
*This post contains an affiliate link