Squarespace is the perfect platform if you’re looking for an professional and responsive website template. The templates are easy to use, with great customisation options so you can still have a unique looking site that fits with your branding.
In today’s post, I’m going to show you just how easy it is to customise your template using the Squarespace design panel.
Design Panel Overview
When you first log into your Squarespace website, your window will look a little something like the photo below. The majority of the screen will be taken up with a preview of your website and the panel on the left gives you can overview of all your options.
Today we are going to focus on the design elements of customising your template. If you click on 'design' tab, it will take you through to the design panel.
This gives you an overview of all your design options.
Logo & Title
The 'logo & title' tab is where you upload your logo image. There is also the option to add a 'site title' and 'tagline'. The 'site title' is basically the name of your site, which is displayed in search engines, as well as at the top of the window your website is open in. The 'tagline' only shows on some templates.
If you scroll further down the panel, you also have the option to add a favicon and social sharing icon. A favicon is the tiny little icon that appears next to the 'site title' at the top of your open browser window. A social sharing icon, is the image that is shown whenever you share your website link on social media platforms.
The 'template' tab shows you the current Squarespace template you are using. You can click the 'install new template' button to browse through the other templates and install a new one. Note that if you change your template you will loose all the customisation amendments that you made to the current template, so don’t rush to switch without doing your research and giving it some thought.
The 'style editor' panel is where you will find the bulk of the template customisation options. We will go more in depth into the style editor options later in the post.
Here you can change the text, fonts and colours and adjust the styling of the buttons, banners and headers.
Checkout page style editor
This is where you can customise the checkout screen your customers will get to if they make a purchase from your website. Here you have the option to change the background colour, show your site logo and change the title and button colours.
This is only for if your website has a shop feature, or you sell products or services through your Squarespace site. As you can see I haven’t edited mine as I don’t currently have a shop feature on my site.
The lock screen is the page your visitors will see if you have a password protection on any pages of your website. This can be used for ‘member only’ sections of your site.
In this panel you have the option to add a logo, change the background colour, add an image or border and change the text colours, fonts and sizes
The announcement bar allows you to display a message at the top of your website. In this panel you can choose to enable or disable it and add your message and a click through link.
As you can see from the pink bar at the top of my website in the photo below, I use this to inform my visitors about my free brand style guide kit when they sign up to my newsletter. You could also use this to inform visitors about any upcoming products/discounts etc.
To customise the colours and text of the announcement bar, you have to go into the style editor, I’ll show you how to do that later in the post.
Mobile information bar
The mobile information bar is displayed at the bottom of your website when viewed on a mobile device. It gives visitors quick access to your contact information. In this panel you only have the option to enable or disable it. But you can edit the information shown, in the 'settings' panel, under 'business information'.
The Squarespace badge displays the Squarespace logo with "Powered by Squarespace" text. You have the option to enable or disable it in this panel.
If you enable it you can choose between black or white colour options and choose where on the site you want it to be displayed. Personally I would keep it disabled, unless you particularly want your visitors to know your using squarespace
Custom CSS allows you to add CSS coding to change certain features on your site. Unless you know a lot about CSS i would stay away from this, as it can mess up the template if you get it wrong.
However, if you want to add your own custom coding, click the 'open in new window' button and the CSS editor will appear.
The advanced settings allow you to add custom fonts from Adobe Typekit. You can enter your Id in the box if you wish to do this.
You also have the option to disable the mobile style of your template. This stops your website appearing as a mobile view on mobile devices. Instead the website will show how it does on a desktop screen. I would leave this feature enabled as the mobile optimised view allows visitors to navigate your site better on mobile devices.
Using the Style Editor to Customise Your Template
As I mentioned earlier, the style editor is where you make the bulk of the customisation options to your template. This is where you can really start to change the header, banners, fonts and colours to make your template reflect the branding of your business.
When the 'style editor' panel is open you can hover over each design option and a blue box outline will appear over the part of the website template that it changes. You can also click around on the part of the page you wish to customise and it will take you to the section of the style editor you need to make those changes. Bare in mind, any changes you make in the style editor will effect the website as a whole, not just the page you are currently viewing.
The options shown in the style editor panel vary across all the templates. Different Squarespace templates have different features, so the customisation options are different for each one.
I’ll explain all the customisation options available to me. I’m using the Hayden template.
The 'site header' options allow you to customise how the header appears. This is the grey section with the logo and navigation on my website.
For my template, I have the options to change the header colour, adjust the size of the logo, and enable header to be transparent on banner images.
The 'site navigation' options allow you to change the font, colour and size of the navigation text.
On my template there is also the option to enable a navigation button and change colour, however not all templates have this feature.
On my website, the banner is the large image of stationary, with the text and button overlay.
The banner options allow me to add a colour overlay to the image, adjust the text fonts and colours and change the button font and colour. This works great as a landing page to feature something important on your site.
Not all website templates include a banner feature, so be sure to check if this is important to you.
The 'main content' block allows you to change the colour of your page background and change the fonts and colours of your headings, page text and links. This allows you to customise the page text and headers to your chosen fonts and colours to reflect your brand style.
The 'prefooter' section allows you to change the background and text colour. I use the prefooter to feature my style guide kit for my newsletter as it appears at the bottom of every page.
The 'footer' is commonly used to display social media links, navigation links and copyright text. You can customise this section by changing the background colour, text colour and navigation link font and colour.
On my template I also have the option to center align the footer content.
Another great way to ensure your site reflects your brand style is to change the button colour to match your colour palette. Within the style editor, you have the option to change the button style, shape, colour and text. You can choose between square, rounded or pill shaped buttons and solid, outline or raised button styles.
Earlier I showed you how to enable to announcement bar and change the text. Within the style editor, you can change the background colour and text formatting. As you can see from the photo below, I chose a pink background with white text.
Reset all to defaults
If you don’t like the changes you made you can click the ‘reset all to defaults’ button at the bottom of the style editor, however this will change all customisation you made within the style editor back to how it was before you made any amendments. Only click this if you want to scrap everything and start over.
I hope this post has helped some of you out and showed you just how simple customising your template in squarespace really is.
If you have any questions please leave them in the comments below and I will do my best to answer!