Squarespace Customization 101 (template + setup cheat sheet)
This is my simple Squarespace customization cheat sheet. These tips will get you up and running so you can move around your site essentials with confidence.
The focus of this cheat sheet is to review the core features and capabilities of your Squarespace template and dashboard.
This guide is for Squarespace version 7.1 and covers the basics (i.e. no advanced customization moves — we need to walk before we can run).
So let’s get to it.
Table of Contents Show
How to Add New Pages + Posts
Adding new pages and posts is simple and straightforward. Here’s how:
How to Add New Pages
From your home sidebar menu, click on 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
How to Add New Blog Posts
From your home sidebar menu, click on Website
Click on Blog (or add a blog page from the + menu 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
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 Website
Click on the page you’d like to edit and then double click the preview screen to bring up the editor window
Hover over the page to bring up the 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, always check how things look on mobile before finishing (I often need to make mobile adjustments when customizing sections…)
You can check your mobile layout by clicking on the phone icon in the upper right corner
How to Customize + Edit A Blog Post
Starting a blog has a ton of benefits. Luckily, Squarespace makes things easy.
Here’s how to manage and customize your blog posts.
Customize How Your Blog Looks
From your home sidebar menu, click on Website, then Blog
Choose a blog post and double click on it to 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 Blog
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 much much more
Use Third-Party Plugins
You can add a lot of customization to your site using plugins.
For example:
Add a sidebar column to your Squarespace blog
Purchase a third-party plugin like this one from SQSPThemes (~$60)
Here’s another tutorial for this SQSPThemes plugin
Add an automatic table of contents (this is especially helpful for longer posts)
This site offers one for ~$30
Check out Will Myers for some pretty sweet plugins to customize your site with (not just your blog).
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)
How to Change Your Squarespace Design
Your design isn’t set in stone. You can easily edit things like your fonts and color palette.
You can change your main layout by double clicking into each page and using Squarespace’s intuitive drag and drop editor.
Here, you can easily add new sections, new blocks and new elements.
But what about your fonts and color theme?
How to Edit Your Template and Design
From any page, click on the paintbrush icon in the upper righthand corner
This will open up your Site Styles panel. Here you can:
Change your site’s font style, sizes and spacing
Customize font changes to specific areas. For example, to change the title font only:
Go to Design page —> Site Style —> Fonts —> Assign Styles —> Site Title
Choose a new color palette (by clicking on Colors, then Edit Palette)
Add animations to change how your page elements appear
Customize how your buttons and images show up
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 within the Design tab, click on Browser Icon (Favicon)
Upload your favicon image in the box (I just used Canva to create my design)
How to Add A Custom Logo Image
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
Use the dimensions 900 x 200 px (I've found this to be the ideal size for Squarespace logos)
Stretch your design as big as possible 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 as a JPG (smaller file size) and upload it to a free tool like Adobe Express to make the background transparent
Redownload it and head over to your Squarespace site to upload it
Add a logo to your menu header
Double click into your website editor window
Hover over the main menu and click on Edit Site Header
Click on Site title logo to upload your logo
You can add your logo to the footer menu by clicking on + ADD BLOCK and then Image
Squarespace Menu Customization
Your menu is an important part of your site navigation and UX (user experience).
So here’s how to edit things to your liking.
Main Menu Customization
Rearrange the look of your menu
Double click into your site preview to open the editor window
Hover over the top menu and click Edit Site Header
Click on the desktop icon at the top of the mini menu that popped up
Click on Header Layout and choose your new look
You can also edit the spacing and formatting in this window (under the desktop icon)
Organize the order of your menu items
From your home sidebar menu, click on Website
Click and drag each menu item into the order you’d like
Hide pages from showing in your main menu
From your home sidebar menu, click on Website
Hover over the page you’d like to hide and click on the gear icon
Toggle off the Enable Page option
Add folders for nested subpages
From your home sidebar menu, click on Website
Click on the + icon
Scroll down and choose Folder (under More)
Name your folder and drag (or create) any pages you’d like under it
Add a logo and social links
Double click into your website editor window
Hover over the main menu and click on Edit Site Header
Click on Site title logo to upload your logo
Go to Elements and Edit Social Links to add your socials
Add a large menu button for CTAs or important pages
Hover over the main menu and click on Edit Site Header
Click on Elements
Toggle on the Button option and edit the text and link just below
Note, you can edit the button style in your Site Style panel of the Design tab
You can learn some more advanced ways to customize your main menu here
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, size ratios and other formatting 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
Metadata includes things like page titles and descriptions and helps search engines better crawl and understand your website.
So let’s look at how to edit your Squarespace metadata.
Edit the Metadata of Your Whole Site
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 the Pages tab, then hover over each page and click on the gear icon
Change title info, URL and SEO data here
Edit the Metadata for Blog Posts
From your home sidebar menu, click on Website, then Blog
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 and other info or creative aspects
You can also pull up your settings window by clicking on the date/author name of your blog post when you’re 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
Use Categories for more general, main themes (such as “Travel”)
Use Tags for more specific informations (such as “Asia Travel” or “Living Overseas”)
You can type and find categories and tags you’ve used before
Or you can type in a new one to add
Adding Social Media Icons In Squarespace
Social media icons encourage people to explore your other accounts and support brand growth.
So using them in the right places is important.
Where I Put My 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
Double click into any page, and hover over the main menu
Click on Edit Site Editor
Go to Elements
Click on Edit Social Links
Add your social media account link where it says “Add a social link or email”
In your footer
Double click into any page, and hover over the footer menu
Click on Edit Footer
Click on + ADD BLOCK
Scroll down in the pop up menu and choose Social Links
Click on the new social links block and then on the pencil icon to edit things
Within blog posts and pages
For blog posts:
Click outside of the text
Hover over the text and click on the + icon to pull up the elements menu
Choose Social Links and then click on the pencil icon to edit
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 pencil icon of the new block to edit
More Awesome Squarespace Resources
Find courses, workshops, blogs and advanced tips for customizing your Squarespace template
They have a blog full of tutorials and info on how to further customize your site
Want More? Check Out These Sweet Reads!
