Site styles basics on Squarespace 7.0 & 7.1
There are some significant differences in the way that the Design editing is layed out, between Squarespace versions 7.0 and 7.1. Pretty much a majority of the design editing takes place within the Site Styles panel (in the Design tab) on Squarespace 7.0. But, on Squarespace 7.1, there is a combination of setting your site styles within the Design tab as well as in the editing (using the pencil icon) section on the Page that you’re creating.
Squarespace have introduced some key changes within Squarespace 7.1, some of which we’ll go through in this blog post.
We have recorded a couple of quick videos to show you around the two different kinds of Site Styles below.
Site Styles Squarespace
Site Styles Squarespace 7.0 Navigation
In Squarespace 7.0, you will be able to set the various site styles within the Design tab, as we have demonstrated in the following video.
When you head into the page you want to edit the design on, you need to go to Site Styles, and then you select the element which you want to style.
Site Title & Logo Editing
As you saw in the video demo earlier, the site title can be set under the Design tab. You can also upload your logo and favicon images into the same section (Squarespace image sizes; how to edit and customise).
Design (mood) Board
NOTE: One thing you will find is that if you make changes to the different types of texts and buttons on one page, these changes would be made globally across the site.
The best thing to do before going ahead and designing the pages of your website, is to set some of the site styles first. If you create a mood/design board like the one below, you can set these styles upfront.
Set the font types and styles you need for the header types and the paragraph text, for the background colour of your website, and for the styles for the 3 button sizes: small, medium and large.
NOTE: setting the main background colour in site styles, sets the background colour for the site globally. Just bear that in mind :-)
Site Styles Squarespace 7.1 Navigation
The site styles are layed out slightly differently in Squarespace 7.1.
These are split out into styles for Fonts, Colours, Animations, Spacing, Buttons, Product Items and, Image Blocks. We have also demonstrated that in the next video below.
Unlike on Squarespace 7.0, you’re not actually able to switch templates once you’ve chosen one, however the good news is that all templates within 7.1 are within the same family. All this means is that the features and style options are the same, so you’re always able to tweak your site to your business and/or brand needs.
Site Title & Logo Editing
As you saw in the video, your site’s title and logo need to be set from within the Edit > Edit Header Section on Squarespace 7.1. Instead of within the Design panel.
Setting the Section Themes
Below is a video to show you how to change the sectional colours on your page, using the section themes. You can also change the styles of each theme in the Design panel > Colors.
The colours in your themes can be set using ‘hsl’ or ‘hex’ codes within the Custom section. You can find the colour codes using sites like Convert a Colour , or, Squarespace makes your life easy by providing a palette of colours to choose from.
As said in the video, it's best to set your themes the way you need before you start with your actual site design.
Design (mood) Board
Once again and as with Squarespace 7.0, you want to set the font, button and background styles before you start designing your website. Trust us when we say, it can be so disheartening if you start making changes on one page, and then realise it's changed the styles on another completely!
Button Styles
In Squarespace 7.0, you can set the button styles for the 3 types - small, medium and large.
Button style
Button shape
Button colour
Text colour
Font style
In some cases where a button is displayed over a banner image or in the footer, you may see an option for an ‘alternate button colour’. This option just helps the button stand out a bit better in cases where the background is distinguished.
Button styles - Squarespace 7.0
You can also change the button styles within image blocks, simply by selecting the button within the image card, collage, stack etc.
In Squarespace 7.1, you’re able to change the site’s button style from within Design > Buttons. You can change the following:
Button Style
Button Shape
Padding
This will change the buttons across the site, with the exception of the padding within a Newsletter Block button (if you have one).
Image Blocks
For image blocks within both Squarespace 7.0 & 7.1, you’re able to change their styles within the Design panel.
For Squarespace 7.0, as for most styling options, head into Site Styles and then select the image block that needs design editing.
For Squarespace 7.1, you need to go to Design > Image Blocks. You will then see a list of all the image blocks, where you can format the positioning of texts, title/button separations and widths.
Image Animations
You can animate the images on your site from within the image blocks. You have this capability directly from within the block, on the third tab - Animations.
Spacer Blocks
Spacer blocks continue to be our favourite element for website design! You use them the same way on both versions Squarespace 7.0 & 7.1!
Go crazy with Spacer blocks … :-)
Pages
Squarespace 7.1 doesn’t have index pages, unlike in Squarespace 7.0. However this was replaced by stacked sections on a page (as we went through earlier).
Free Workbook
The whole idea behind a minimalist concept is to build a site that will need less maintenance over time, and to create a more effective online tool for your business.
If you’re keen on reading more about what it takes to build a minimalist website, hit the download button below to get the free 10-page workbook.
