Table of Contents
Many people use Squarespace to build their websites because it is user-friendly and has many built-in features. One thing you may want to customize on your Squarespace website is the button color.
Buttons are essential in increasing website conversions because they are your call-to-actions, and they should pop out on a web page and encourage your customers to click on them. Luckily, Squarespace provides an easy way to change button colors.
Before you start changing button colors, you need to understand the four types of button blocks on Squarespace:
These buttons inherit the same master settings you’ve set in the Design Menu. However, if you want specific site portions to have a different colored button, it’s simple to edit.
Squarespace also assigns levels to help categorize buttons according to their importance. There are primary, secondary, and tertiary buttons, and you determine which belongs to which level.
Here’s a step-by-step guide to changing your button colors on Squarespace:
If you’re working with Squarespace 7.1, changing button colors is straightforward:
If you’re working with Squarespace 7.0, you need to use site-wide tweaks to change the colors of your buttons, and this will affect all the site buttons and not just a particular button.
Aside from changing the button colors, there are other things you can do to make them stand out. Squarespace recommends letting your buttons use global colors to make sure they match the overall web design. You don’t want to deviate too much from the standards unless you want to risk your website looking unpolished and unprofessional.
You can choose oval, square, round, pill, underline, or petal. When selecting a shape, remember that the shape adjusts depending on the text you put inside. The button may not look as expected if you have written a long text. Squarespace recommends a maximum of 25 characters.
You can change the horizontal (left and right) and the vertical (top and bottom) inner padding of the button. Inner padding refers to the space separating the text from the edges of the button. A properly balanced button helps draw the eyes to the text inside.
You can control the outline of a button to make it stand out. For buttons without a background color, you can set the outline thickness. For buttons with background colors, changing the outline thickness affects the padding outside the button.
Changing the button color and its properties on your Squarespace website is a simple way to customize the look of your site. Following the steps above, you can easily change the color to match your brand or aesthetic.
However, remember that Squarespace has made it easy and intuitive for design styles to match and work together. The designers know how to create button styles that cohesively drive conversions. Be careful of veering away from these design styles, as you can harm your site rather than improve it.
But don’t let this hamper your brand’s style and prevent you from experimenting. Sometimes, tweaking a button’s style or the text inside is all that’s required to achieve high conversions.
For more informative articles about customizing your Squarespace site, check out this blog by Page Kits.
When creating a business, you become a part of a community. This mindset is what Richard Kelly operates on in his role as Social Community Manager.