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)
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
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!
MORE SQUARESPACE TUTORIAL VIDEOS
- How to disable the escape key login on your Squarespace website
- How to add and customize a Squarespace announcement bar
- How to name photos for increased SEO in Squarespace
- How to add and remove pages from the navigation in Squarespace
- 4 Squarespace templates I recommend for business websites
- How to add videos to your Squarespace website
- How to use tags and categories in your Squarespace blog
- Favicons: how to create one in Canva and upload it to your Squarespace website
- How to set up a blog on a 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
- How to update and edit banner images in Squarespace
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!