You have finally decided to take the leap and go all in on your business…
What do you need to look professional and stand out as an authority in your niche?
If you want to chat about how I can support your business - book a free consultation!
and I’m super passionate about website design and making YOUR business stand out!
My goal is to help women launch an aligned website for their business because I know how much value it will bring!
With a beautiful website that's designed to convert you will attract more clients and in turn bring in more reveneu. This will allow you to live life on your terms!
You want your website to be unique to your brand and to do this every element needs to be aligned with your vision for your business
When creating a brand you choose your color scheme, you have a logo, you choose fonts, all of these things keep consistency throughout your brand (brands are so much more than just these elements but that’s a topic for another day).
But even more than that you want to think about all of the shapes and how they are presented on your website as well.
Shapes of the blocks you are using, shapes of the images and the content within these images. And also – the shapes of your buttons on Squarespace! Your buttons really can add to your brand aesthetic in such a unique way!
And the great thing is that within Squarespace you have the opportunity to switch up your buttons throughout your website if you choose to. I wouldn’t do any more than two different button shapes though as this can become slightly distracting! You want to keep your designs clean and consistent!
Buckle up and let’s get editing!!
First things first…
We want to set your button designs before we start adding them to your website.
The best thing to do is start by setting all of your design settings first – fonts, colors, buttons etc. so when you start your website build you know exactly what everything is going to look like!
Log into the back end of your website
Select Design on the left hand side
Select Site Styles
And then Select Buttons on the right hand side
This is where you will create your button styles that will be used throughout your website!
referencing the image above…
There are three tabs right up top with the headings “Primary, Secondary and Tertiary” Depending on which one you want to edit – that’s the one you will select. You have the opportunity to set different styles for each of these buttons if you choose to!
I would keep my text pretty consistent throughout the website so it doesn’t look like there’s too much going on.
A good practice is to set one button with the Headings text you have previously set for your fonts and then one button with your Paragraph text. Two fonts are best practice! A third font can be sprinkled throughout the website but not used super consistently!
And you can go even further by selecting whether the button will be filled or just outlined by either selecting “fill or no fill”.
You can also choose to customize the rounded corners to your own preference.
This is to change how thick or thin the outline of your button is.
You will really see the difference here when you are working with a no fill button.
The little square with the vertical lines will add/remove padding on the sides of the button (adjusting the width)
The little square with the horizontal lines will add/remove padding above and below the button (basically adjusting the height of the button)
You can go through each button type (primary, secondary and tertiary) to select individual settings.
You have quite a few color themes to work with here. I honestly usually only use 3-4 different settings throughout a website to keep it looking very clean and aesthetic. But this is totally up to you and it really depends on the website!
When you choose a template from squarespace it will come with the colors pre selected for you. Or you can change your color settings to your brand colors!
For the purpose of this blog and sticking to the theme of buttons – I will show you how to edit the color theme for your button!
As you can see you are able to change the color for each button type here. So when you add a button you can select which button setting you want and the colors will apply automatically! (I’ll be showing you how to edit your button block on your website page next).
Log into the back end of your Squarespace website and click “Edit” on the page you want to work on
You will see the button block pop up on the left hand side. You can click and drag this to where you would like to place it.
When you start to click and drag a grid will pop up in the background as you can see in the image below.
The Pencil icon will take you to more editing options.
If you select the arrow next to primary you can select between the three different button styles you have previously set in your button settings.
The two icons of layered squares next to this are to either bring the button to the back or the front when layering blocks.
The two squares with solid lines are to duplicate and next to that is the trash can to remove the block.
When you select the design tab you can change which style setting you want for the button – primary, secondary or tertiary.
You can also select edit button styles here when you select the drop down arrow next to the button selection. This is a shortcut to edit your button settings.
You can also select fit or fill. This is going to either fit the button within the block or stretch the button to fill the block.
You can play around with this setting to see what you like better visually on your website!