Introduction to Site Styles!

Introduction to site styles.jpg
Style is a reflection of your attitude and your personality.
— Shawn Ashmore

In this blog post we will talk about site styles (previously Style Editor). When you are creating your own website, it is important you play around with Site Styles! This is the menu where you can set up your branding in order to display the look and the vibe you want on your website! You really want to update the styles from the template if you want stand out from the crowd. Examples of things you can change are the fonts, colours, backgrounds and spacing.

Every template has a couple of standard ‘tweaks’ as Squarespace calls it, there are also tweaks specific to the template. In this blog we will talk about the basic and the tweaks that can be found in every template.

First of all to get to site styles head over to the home menu. Then open the page where you want the changes to be made on. If you want to change something that is site wide then open any page. Once you are on the page you want to change, head back over to home menu. Click on design followed by site styles. Now the site styles will open a menu with all the changes that can be made relevant to that page.

To find the ‘tweaks’ that are specific to your template find the tab called ‘options’ within site styles.

When you make changes or set up your style before designing do note that any ‘tweaks’ that are made will apply for the whole website and all pages. So if you change Header 1 to a different font, all of your header 1’s on your website will change. To be honest, sometimes it is a bit annoying because you might want to have that one change on that specific page. However Squarespace has done this to create a consistent look for your website. If you do want to make specific changes to only one page you will have to use custom code. A lot of people add custom codes like CSS to their websites. Do keep in mind that it could interfere with the Squarespace website functionality. Squarespace does not offer support for issues with custom code.

To find a style tweak click on the area you want to change. For example the text on the page. A blue box appears around the area where you want the change.

Once you have clicked on the area you want changed the site styles shows only the tweaks available for that specific area. This is very handy as the entire list of tweaks is very long and this prevents you from going through the whole list.

If you want to see all options click on ‘Show all’

The most common style changes are:

Typography: Change the font and size

Colours: Click on the small round circle and then you can add your colour code. If you have a brand created for you make sure to incorporate the colours. You want your website to look consistent with your brand.

Size and values: Such as padding, spacing, width and borders. The sizes are measured in pixels.

Aspect ratio:  Your image will crop to the ratio selected.  It does this around the focal point. Now if you have a picture of a person standing and you want the ratio to be 1:1 a square make sure you put the focal point to the face of this person. You don’t want the picture to crop around the legs.

Background image: Not every template has this. It is a tweak that allows you feature a site-wide background image.

Banner image: Not every template has this. It is a tweak that allows you feature a site-wide banner  image.

Side bar: again not every template has this option. However if your template does then this will give you all the tweaks for the side bar

To undo the change you made hit on the arrow pointing in a clock wise direction. This will change your latest change. So you have to click a couple of times if you want to undo more.

You can also click on the dot next to the tweak you changed. Then it changes the latest thing you did to that specific tweak.

Once you are happy with the look of your page make sure to hit the save button. Once you have saved you cannot undo. You can only revert back to the original template of the website. If you want to start completely from scratch again, with the template styles you hit ‘Reset styles to defaults’

I would definitely suggest to play around with it and see what endless possibilities you have!

I blog about squarespace and personal development every Tuesday and Friday. If you have any questions or like me to build you an amazing website click on ‘work with me’ .

with love.jpg