Squarespace Customization 101: The Essential Guide

Squarespace
Written By quin
A cutout of a man working on his laptop and big text reading "design your site" with the Squarespace logo.

Welcome to my simple Squarespace customization cheat sheet! These tips will get you up and running so you can design your site and blog with confidence.

The focus of this guide is to provide a complete list of all the core features and options for customizing your Squarespace website and blog.

This guide is for Squarespace version 7.1 and covers the basics (i.e. no coding).

So let’s get to it!

How to Add New Pages + Posts

A Squarespace logo and a graphic of a new blog page with a plus sign and big text reading "add new pages".

How to Add New Pages

  • From your home sidebar menu, click on Pages under Website

  • Click on the + icon and choose which page you’d like to add

    • You can choose a blank page, use a designer layout or work from one of the other templates

  • A new page will pop up for you to edit by adding new sections and blocks

  • You can drag and drop your pages in any order you’d like

  • Move any pages you don’t want to show up in the main menu under the Not Linked section

How to Add New Blog Posts

  • From your home sidebar menu, click Pages under Website

  • Click on Blog and then Blog Content (or add a blog page if you don’t have one yet)

  • Click the + icon in the top right of the menu to add a new post

How to Customize + Edit a Website Page

The Squarespace logo and a graphic of a paint roller over a website with big text reading "customize your site".

Whether you’re adding a new page or looking to edit an existing page, Squarespace makes it easy. Here’s how:

  • From your home sidebar menu, click on Pages under Website

  • Click on the page you’d like to edit and bring up the editor window

  • Hover over the page to bring up your editing options:

    • Add Section

      • This will bring up a window where you can choose existing section templates or create a new blank section (to customize your own from scratch)

    • Edit Section

      • This will bring up a window to change your formatting, colors, background image and more

      • I recommend playing around with each option to learn their functions

      • You can duplicate each section by clicking the double square icon (next to the heart)

      • Move sections up or down by using the arrows

    • + ADD BLOCK

      • You can add various elements to each section, including images, social links and more

      • You can drag and drop each element to the position you’d like on the page

      • You can change the grid layout style in the Edit Section window, under Gap

      • Remember to always check how things look on mobile

        • When editing pages, things will always look different or wonky on mobile

        • You can check your mobile layout by clicking on the phone icon in the upper right corner

Customize + Edit Blog Posts

The Squarespace logo and a graphic of characters editing a blog post with big text reading "customize your blog".

Starting a blog with Squarespace is one of the best ways to grow your site and drive organic traffic. Luckily, Squarespace makes things super easy.

Here’s how to manage and customize all of your Squarespace blog posts.

Customize How Your Blog Posts Look

  • From your home sidebar menu, click on Pages under Website

  • Click on Blog and then Blog content

  • Choose a blog post and open up the editor window

  • Towards the top, click on Edit Section

  • Here, you can change things like content width, text alignment and how your author name shows

Add Elements Within a Blog Post

  • Within your blog post’s editor window, click outside of the main text box

  • Then hover over it and click on the + icon to bring up the elements menu

  • Here, you can add things like images, lines, social icons, code snippets and so much more

Use Third-Party Plugins

You can add a lot of customization to your Squarespace website using custom code and plugins.

For example:

  • Add a blog sidebar

  • Create a table of contents

  • Animations effects

  • Age verification

Invite Visitors to Read More After Each Blog Post

  • At the bottom of your blog post, click the blue + sign

  • Scroll down and choose Summary

  • Go to Select A Page and choose Blog

  • Customize which posts show by editing your Filler Items (categories and tags)

Change Your Template Design

The Squarespace logo and a graphic of a painter painting a website template with big text reading "edit your template".

Your design and template choice aren’t set in stone. You can easily edit your fonts, color palette and more.

To change the basic layout, just double click into any page and using Squarespace’s intuitive drag and drop editor to move things around or add new elements and section.

But what about your fonts and color theme?

How to Edit Your Template’s Design

  • Click on the paintbrush icon in the upper righthand corner

  • This will open up your Site Styles panel, where you can:

    • Change your font style, sizes and spacing

    • Customize fonts for specific areas. For example, to change the title font only:

      • Go to Fonts —> Headings

    • Choose a new color palette by clicking on Colors, then Edit Palette

    • Add animations to change how your page elements appear

    • Customize your forms, buttons and image styles

  • Add a favicon to your Squarespace site

    • Favicons are your browser icons – i.e. the tiny image that shows up in your website browser tab

    • From home menu, click on the ⚙️ icon

    • Click on Favicon under Website

How to Add a Custom Logo Image

Creating your logo in Canva

For logos, I create all of my designs using Canva (which is free).

Here’s how to do this:

  • After creating an account, click on Create a design

  • Towards the bottom of the pop-up menu, choose Custom size

    • I use 900 x 200 px for longer logos or 200 x 200 px

  • Stretch your design to fill the space (without going past the edges)

  • If you have a Canva Pro account, download the image as a PNG with a transparent background

    • Otherwise, download the image and upload it to a free tool like Adobe Express to make the background transparent

Add your logo to the header + footer menus

  • Header menu:

    • Open up your website editor window (any page)

    • Hover over the main menu and click on Edit Site Header

    • Click on ✎ icon of the Site Title & Logo box to upload your logo

  • Footer menu:

    • Open up your website editor window (any page)

    • Click on + ADD BLOCK and then Image

    • Use your logo for the image and size it accordingly

Squarespace Menu Customization

The Squarespace logo with a graphic of a mobile menu and big text reading "menu customization".

Main Menu Customization

  • Rearrange the look of your menu

    • Open the editor window (any page)

    • Hover over the top menu and click Edit Site Header

  • Organize the order of your menu items

    • From your home sidebar menu, click on Pages under Website

    • Click and drag each menu item into the order you’d like

  • Hide pages from showing in your main menu

    • Move any page under Not Linked section

    • Alternatively, toggle off enable page in the page’s settings

  • + ADD ELEMENTS

    • Here you can add a button, social links, cart, account login and a language switch option

  • Add folders for nested subpages

    • From your home sidebar menu, click on Pages under Website

    • Click on the + icon

    • Scroll down and choose Dropdown (under More)

    • Name your folder and drag in (or create) your pages

Footer Menu Customization

  • Scroll down to the bottom of the page in the editor window and hover over your footer

  • Click on Edit Footer

  • Change your background and other details under Edit Section

  • Click on + ADD BLOCK to add text or other elements (like social links) 

  • I like to include my socials, site name and links to relevant pages (such as a contact and privacy policy page)

Squarespace Metadata 101

The Squarespace logo with a graphic of characters working on the SEO of a website with big text reading "meta data".

Metadata includes things like page titles and descriptions and helps search engines better crawl and understand your website. It’s also important information for visitors to know more about your brand.

Edit the Metadata of Your Whole Site

  • From home menu, click on the ⚙️ icon

  • Go to the Marketing tab, then SEO Appearance

  • Add your SEO Title and SEO Site Description here

Edit the Metadata for Individual Pages

  • Go to Pages under Website

  • Hover over each page and click on the ⚙️ icon

  • Change title info, URL and SEO metadata here

Edit the Metadata for Blog Posts

  • From your home sidebar menu, click on Pages under Website, then Blog and Blog Content

  • Hover over the blog post page you’d like to edit and click on the three dots to bring up the settings window

  • Here, you can customize your SEO metadata

    • You can also pull up your settings window by clicking on the date/author name of your blog post while inside the editor window

  • Add Categories and Tags for each post

    • Pull up the settings window and click on Options

    • Add your main categories and tags under Categories and Tags

      • Categories are for more general, main themes (like “Travel”)

      • Tags are more specific (like “Japan Travel”)

      • You can type and find categories and tags you’ve used before

      • Or you can type one in to add a new one

Adding Social Media Icons In Squarespace

The Squarespace logo with a graphic of two people leaning against a phone using social media and big text reading "social links".

Social media icons encourage people to explore your other accounts and supports your brand’s growth.

Where to Put Your Social Media Icons

  • In the main menu

  • In the footer menu

  • Within relevant blog posts and pages

How to Add Social Media Icons

  • In your main menu

    • Click into any page editor — hover over the main menu

    • Click on Edit Site Editor

    • Click on + ADD ELEMENTS

    • Toggle on Social Links

    • Click on the ✎ icon to edit and add your social links

  • In your footer

    • Click into any page editor — hover over the footer menu

    • Click on Edit Site Footer

    • Click on + ADD BLOCK

    • Choose Social Links from the menu

    • Click on the ✎ icon to edit and add your social links

  • Within blog posts and pages

    • For blog posts:

      • Click outside of the text

      • Hover over the text and click on the + icon

      • Choose Social Links

      • Click on the ✎ icon to edit and add your social links

    • For pages

      • Double click into the page editor window

      • Click on + ADD BLOCK

      • Choose Social Links from the elements pop up menu

      • Click on the ✎ icon to edit and add your social links

Want more Squarespace customization options?

Check out my list of must-have Squarespace tools, resources and people to follow!

quin

Hey. My name is Quin.

I’m an artist, musician, blogger and digital creator who loves to travel. And I’m on a mission to inspire more creativity, adventure and carefreeness.

I also spend a lot of time in Japan and drink too much coffee.

Through my websites and passions, I’m building a personal multi-brand. It’s all a creative project and I’m loving every minute of it — everything is art…

So welcome, I’m stoked you’re here! Drop me an email to say what’s up :]

Previous

7 Kick-Ass Squarespace SEO Tips (how I rank all my blogs)
Next

Squarespace 301 Redirects (for URLs, domains and b/w sites)