40+ Squarespace Tips & Tricks From 10 Squarespace Experts

 
40+ Squarespace Tips & Tricks From 10 Squarespace Experts --> Click through for full post!

Today I’ve teamed up with nine amazing Squarespace experts so we could collectively give you our best tips and tricks for building out a website in Squarespace. I’M SO EXCITED TO SHARE THIS POST WITH YOU!

I simply asked these experts to give their absolute top Squarespace tips. There were no parameters, just unfiltered thoughts on the most essential things they think you should consider when creating your site.

I’ve organized the tips into categories since they cover such a broad spectrum. You’ll find tips on:

  • Building Out Your Site

  • Designing Various Pages in Squarespace

  • Blogging on Squarespace

  • Squarespace Features + Content Blocks

  • Quick + Easy Coding Customizations

  • General Customizations + Branding Ideas

  • SEO Advice

  • Awesome Squarespace Resources

(Some of the tips fit into multiple categories so you’ll see repeats here and there, but I thought it was worth it in case you landed on this post for help with one specific category.)


Before diving in, I also want to say how incredibly thankful I am for the input of these experts. This post is a true collaborative effort and these guys are worth a solid internet stalk, especially since all of them provide helpful content on their own websites.

I’ve included their websites and samples of their work at the bottom of the post so be sure to check that section out and show them some love for me 💗

Now let's dive into the tips!


Building Out Your Site:


Think about the website features you want before choosing a template

When choosing a template, we (at Bold & Pop) go off a few basic features that are specific to the individual template. Do we want a parallax structure? Do we want the banner to span the whole width of the site? Do we need a sidebar for the blog? Knowing these requirements helps us choose a template with those must-have items, but also allows us the freedom to customize the template for a one-of-a-kind site. // Mallory from Bold & Pop

(^^from Melanie: check out this site for a side-by-side comparison of all the templates + their built-in features)

Map out your site content before building your site

Creating a website can be overwhelming for anyone if you don’t know where to start. There are SO MANY tiny details that go into building out a great site, so I always start with a pencil, paper and a list of site goals/features I want to highlight.

After I’ve identified the major pages of the site I map out what will be linked up to the main navigation, what will go in the footer and what will be housed in Squarespace’s unlinked page section. From there (still working with pencil + paper) I sketch out a general idea for each page. With this I can see what kind of imagery, graphics + copy are needed and it makes it SO MUCH EASIER when I get ready to build out the actual site.

I’ve got a free workbook in my resource library that I created to help you develop strategy behind your site design, with ample space to write out your copy for each page. // Melanie from MBD


Test out different templates

One of the perks of Squarespace is that you can see what your website will look like via different template layouts. This can be done by going to Design > Template > Install New Template > then browse + choose the template you want. If you're going through a site redesign you can edit the new template on your backend while your live site stays the same. Once you're done customizing the new template, simply set your desired template to "live."

This is helpful when I'm not totally in love with the look of a site and I can easily see how it will look if formatted differently. I can do a preview to see how it looks and play with the design a bit more. Just remember that setting a template as your "live" template makes it "official" and visible to the world! // Jessie from Untethered Design
 

Embrace creative problem solving + research Squarespace’s content blocks

I have one HUGE tip when it comes to designing a website on the Squarespace platform: don’t be afraid to show how creative you can be. Just about everything you see on Wordpress, Wix, Weebly, etc. can be done within Squarespace. Yes, it can take a little bit of CSS for some bits but there are not any limitations in design within the Squarespace platform. Take a peek at all of the different blocks that Squarespace offers. Think about the different areas you can use them with. My favorite type of block is the summary block. That and the image block are definitely the most used blocks in all of my site designs. // Melanie from Melanie Craft Co

I have one HUGE tip when it comes to designing a website on the Squarespace platform: don’t be afraid to show how creative you can be. // Melanie from Melanie Craft Co


Look at your website through the eyes of your site visitors

Think about the journey you want to take your site visitors on. Some things to be mindful of:

  • Don’t overwhelm your site visitors with an unorganized + cluttered navigation.

    • I like to limit navigation links to 6 (max) and I almost never include a link to the home page since most visitors know that clicking the logo will take them there.

    • Utilize Squarespace’s folder option to create dropdown menus for pages that can be grouped together.

    • It's best to be straightforward vs clever with your navigation link titles. For example, if you call your blog "The Hive", just title it as "Blog" in your navigation then slap a graphic that says "The Hive" in the banner of your blog page - otherwise you risk the chance of someone never clicking over to that page because they have no idea what it even is.

  • Use headlines (h1, h2, h3) and bolded text so that site visitors can scan your site and process the most important aspects (people do this to determine if they’re interested in your content; if it piques their interest they’ll stick around, if it doesn’t they’ll peace out). // Melanie from MBD


Designing Various Pages in Squarespace:


Fake a blog sidebar

Some templates don't come with a sidebar, so I have to fake it. To do this, I use different content blocks to add a photo, small bio, social links, etc. Then each time I make a new post, I just duplicate the previous post and change out the main content so that the faux-sidebar stays consistent. // Erin from Erin Alexander Design Studio
 

Customize your 404 Error page

Squarespace's default 404 page leaves a lot to be desired! A custom designed 404 error page gives you the opportunity to share your own message (we're big fans of witty error messages!) and help reinforce your brand personality. We recommend using a Squarespace cover page to build your 404 page. // Tom From Hive Social

(^^from Melanie: check out this post for a tutorial showing you how to customize your 404 page!)

A custom designed 404 error page gives you the opportunity to share your own message and help reinforce your brand personality. We recommend using a Squarespace cover page to build your 404 page. // Tom From Hive Social


Design a landing page

When designing sales pages or any other page where you want to keep the reader focused on what you have to show, you can hide the header and footer using a little CSS (Design > Custom CSS):

<!--- REMOVE MENU AND FOOTER --->
#preFooter, #footer, #header, .sqs-announcement-bar {
display: none;
}

This is great if you’re trying to hold the reader’s attention and avoid unnecessary distractions like menu items, announcement bars, social media icons etc. // Sally from Dream Board Digital
 

Easy style editing

Squarespace does this thing in the Style Editor that only lets you customize elements located on the page you’re on when you go into the editor, which can cause you to go back and forth between pages to finish customizing everything on your site.

To work around this, you can build out a hidden page with all of the design elements (header 1, header 2, small button, large button, etc.). Then, whilst on this page, head in and edit the style settings so you can see exactly how everything will look across your website all on one page. // Sally from Dream Board Digital

For easy customizing in the Style Editor, create an unlinked page with all of your design elements added in. Then customize from that page so you can see how everything will look across your website all on one page. // Sally from Dream Board Digital


Customize your Password-protected pages

Squarespace lets you make any page on your site password protected, but what’s even better is that they let you customize how the page looks. Check out this tutorial for instructions. // Melanie from MBD
 

Create an amazing portfolio

If you’re a creative who’s building a business you probably already know you need to showcase your work in a professional way. And I know portfolio building is where a lot of people can feel uninspired or stuck (womp womp). But if you can figure out the story you want to tell then create a template to repeat for each project, you’re well on your way to curating a beautiful portfolio that your site visitors will love.

To help you out I wrote a post detailing 6 of my best tips for creating an awesome portfolio + even show you 6 real life examples for how you can set yours up in Squarespace too, so be sure to check it out here. // Melanie from MBD


Blogging with Squarespace:


Blog sidebar workaround for templates without this feature (option 1)

Squarespace has been moving towards blogs without sidebars, so if you love the look and feel of a template whose blog doesn’t offer this feature, know that you can create a whole new page to house your posts then manually add in a faux sidebar.

You’ll write your blog posts like normal, just make sure your blog is in the unlinked pages so it doesn’t show up in your navigation. Then create a blank page in your linked pages and use a grid summary block to feed your posts into it. You can place a column of image blocks, text blocks, etc., beside it to create your “sidebar”.

The Creative Potential's blog is a great example of this. She utilizes the carousel summary block up top to show her featured posts, image blocks for her categories, a grid summary block for her posts and an image block on the side of the page for her “sidebar”. // Melanie from Melanie Craft Co

Squarespace has been moving towards blogs without sidebars, so if you love the look and feel of a template whose blog doesn’t offer this feature, know that you can create a whole new page to house your posts then manually add in a faux sidebar. // Melanie from Melanie Craft Co


Blog sidebar workaround for templates without this feature (option 2)

Some templates don't come with a sidebar, but you can just fake it. To do this, use different content blocks to add your photo, bio, social links, etc. Then each time you make a new post, just duplicate the previous post and change out the main content so that the faux-sidebar stays consistent. // Erin from Erin Alexander Design Studio
 

Create a "related posts" feature at the bottom of your blog posts

When blogging, make full use of summary blocks. My favorite way to use them is to showcase related posts at the bottom of my articles. You can do this by assigning a category to each of your blog posts then simply add a summary block at the end of your posts that filter to this category. // Lavinia from Starlight Studio
 

Blogging + content marketing

Use your blog to level up your marketing game and drive traffic to your site. Check out my guide to setting up a blog in Squarespace (it also includes the best templates for blogging, broken down by popular features). And be sure to check out my free content planning guide (inside of my resource library) that walks you through planning your editorial calendar for your blog, opt-ins + newsletter/social media marketing. // Melanie from MBD


Squarespace Features + Content Blocks


Play around with image block layout options (1)

Squarespace has so many features that allow you to customize the look and feel of your website, so take the time to explore those features. One of our favorites is the new image block layouts. Rather than just having a photo with a caption underneath it, you can now: make a collage with text on a colored box, lay text over a colored background, make a card style photo + a few other options. You can even integrate buttons on these layouts. This gives you more flexibility with your design while also giving your site a customized look. // Mallory from Bold & Pop
 

Play around with image block layout options (2)

I love that Squarespace recently added new styles for images blocks! They add so much more style and offer better scalability when your site is viewed from different devices.

I like to use the "poster" style image block to create a button, then when someone sees it on mobile it will automatically resize. This is also way better for SEO than adding an image that already has the text on it. // Erin from Erin Alexander Design Studio

I like to use the "poster" style image block to create a button, then when someone sees it on mobile it will automatically resize. This is also way better for SEO than adding an image that already has the text on it. // Erin from Erin Alexander Design Studio


Summary blocks are your BFF

I use summary blocks all over my site to customize different content I want to highlight. For example, I use a summary block to highlight case study posts as my portfolio, but they are also listed in my main blog, too. // Erin from Erin Alexander Design Studio
 

Create a "related posts" feature with Summary blocks

When blogging, make full use of summary blocks by using them to showcase related posts at the bottom of your articles. // Lavinia from Starlight Studio
 

Utilize the instagram content block 

It's a simple way to add visuals to a page with little effort on your part. It's also great for linking to one of your social media platforms, allowing visitors to experience you and your brand outside of your site. // Jessie from Untethered Design
 

Pop up windows

Squarespace recently integrated the use of pop-up windows. (Go to: Settings - Marketing - Promotional Pop-Up.)

Take advantage of them! It's a great way to put your opt-in in front of someone quickly or to get them to sign-up for your email list easily, instead of spending time scrolling through your site (although it's still important to have these sign-ups in several clear + visible places around your site!) // Jessie from Untethered Design

Take advantage of Squarespace's pop-up windows! They're a great way to get your opt-in in front of someone quickly // Jessie from Untethered Design


Fake a blog sidebar

Some templates don't come with a sidebar, so I have to fake it. To do this, use the different blocks to add a photo, small bio, social links, etc. Then each time I make a new post, I just duplicate the previous post and change out the main content so that the faux-sidebar stays consistent. // Erin from Erin Alexander Design Studio


General Customization + Branding Ideas

Custom graphics

One of our favorite things to do with just about every website we design is add custom graphics. This allows us to infuse more of the company’s branding and give the site a more custom feel, rather than relying solely on Squarespace’s built-in features. You don’t need complex design skills or software to do this either. You can use Canva to easily turn images into graphics, create custom buttons or anything else you need for your website! // Mallory from Bold & Pop

One of our favorite things to do with just about every website we design is add custom graphics. You don’t need complex design skills or software to do this either. You can use Canva to easily turn images into graphics, create custom buttons or anything else you need for your website! // Mallory from Bold & Pop


Customize your 404 Error page

Squarespace's default 404 page leaves a lot to be desired! A custom designed 404 error page gives you the opportunity to share your own message (we're big fans of witty error messages!) and help reinforce your brand personality. We recommend using a Squarespace cover page to build your 404 page. // Tom From Hive Social

(^^from Melanie: check out this post for a tutorial showing you how to customize your 404 page!)
 

Create easy go-to systems for your site’s visual elements

If you want a stress-free way to create cohesion throughout your website, take a little time in your brainstorming process to create systems for yours fonts + colors (← these posts give you lots of ideas and easy formulas to help you do this).

BONUS: once you have these set for your site you can easily apply them to all of your marketing materials (such as social media posts, business cards, letterhead, email signatures + more) to start building consistency + trust in your business. // Melanie from MBD
 

Add a Favicon

It may seem trivial but there's nothing worse than loading up a stunning Squarespace website, only to see the default black cube favicon. It only takes a few seconds to adapt your logo and it really makes a difference! // Tom From Hive Social
 

Customize your Password-protected pages

Squarespace lets you make any page on your site password protected, but what’s even better is that they let you customize how the page looks. Check out this tutorial for instructions. // Melanie from MBD
 

Customize the image associated with your site when someone shares a link from your site

Give yourself your own digital business card to represent your site every time someone shares your content to social media! Whether there are images on the page or not, your social share logo will represent your business for you! Check out this post for instructions. // Michele from The Artist Playbook

Give yourself your own digital business card to represent your site every time someone shares your content to social media! Whether there are images on the page or not, your social share logo will represent your business for you! // Michele from The Artist Playbook

Quick + Easy Coding Customizations


Add a search icon + link to navigation

Although a lot of the new templates have the ability for a search box to be added into the main navigation, we still love the simplicity of featuring a magnifying glass icon! We've got a super easy guide on how to do that here. // Tom From Hive Social
 

Design a landing page

When designing sales pages or pages where you want to keep the reader focused on what you have to show, you can hide the header and footer using CSS (Design > Custom CSS):

<!--- REMOVE MENU AND FOOTER --->
#preFooter, #footer, #header, .sqs-announcement-bar {
display: none;
}

This is great if you’re trying to hold the reader’s attention and avoid unnecessary distractions like menu items, announcement bars, social media icons etc. // Sally from Dream Board Digital


Learn CSS basics to customize your site past the normal customizations.

CSS is one of the easiest ways to make your site feel less template-y. The possibilities for what you can do are literally endless and it’s a great place to start if you want to learn more complex code down the road.

But first you gotta learn the basics, like what CSS even is, how to dig through code to figure out how someone else created something unique on their site + how to add CSS code onto your site. Check out my CSS tech guide if you need a place to get started. // Melanie from MBD

CSS is one of the easiest ways to make your site feel less "template-y". The possibilities for what you can do are literally endless and it’s a great place to start if you want to learn more complex code down the road. Check out my CSS tech guide if you need a place to get started. // Melanie from MBD


And if you wanna check out some quick + easy CSS customizations….

You can go here to learn things like adding an image to your pre-footer area, here to customize your blog’s “read more” link or create an accordion menu + here to create a sticky nav and more. // Melanie from MBD


SEO Advice


Size your images to be optimized for web

Make sure your images are sized appropriately. It helps in the overall speed and performance of your site. If your image needs to be 300px x 300px, uploading a 1000px x 1000px image will bog your site down (since it has to scale the image), which can negatively affect your search engine ranking. // Leanne from Leanne & Co
 

Use image filenames to up your SEO game

When uploading images, make sure to change the file name. Incorporate key SEO terms so your search engine presence will improve. // Leanne from Leanne & Co

When uploading images, make sure to change the file name. Incorporate key SEO terms so your search engine presence will improve. // Leanne from Leanne & Co


Know that Search engines love new content

Get serious about blogging. Search engines love sites that are constantly being updated (versus just sitting there stagnant) and blogging will help your site stay “active”. Plus blogging can be great for SEO if your posts are helpful and relevant to the type of info people are looking for. // Melanie from MBD
 

Do some quick keyword research to start you off on the right foot

Piggy backing off the tip above, I wanna share my absolute FAVORITE site for keyword research. It’s called Answer The Public and it’s super easy to use. Just type in something related to your industry and it’ll spit out all kinds of lists and charts of phrases people use when searching for that keyword or phrase. // Melanie from MBD
 

Help search engines quickly access important parts of your site.

Utilize headers throughout your site (h1, h2, h3), making sure to be thoughtful with how you use them. Search engines use those to scan your site for useful content, so consider doing keyword research for those too (just make sure you sound like an actual human when incorporating keywords into your copy). // Melanie from MBD


Awesome Squarespace Resources


Hive Social’s collection of Squarespace tips

This is a great collection of quick Squarespace tips from our expert Tom at Hive Social
 

Inspect/view source tool

Have you ever fallen in love with a Squarespaces website but can't figure out which template is being used? Right-click anywhere on their website and select View Page Source. Within this new tab, search (Command+F) for "templateID". It will prompt you a string of letters and numbers, which represent the identifier for the template used on that particular website. If you Google that string of letters and numbers, you'll know what template it is! // Lavinia from Starlight Studio
 

Helpful Chrome extensions

With the way Squarespace is coded, it can sometimes be tricky to find what you're looking with the Inspect Element tool. Instead you can use the Squarespace Collection/Block Identifier Chrome extension to get the name of every collection and block on your webpage with just one click. // Lavinia from Starlight Studio


Square Studio

If you’re looking for some plugins and extra code to enhance your website's functionality and features, check out SquareStudio. They have some really great options with easy instructions on how to implement them. Some examples of plugins include pricing tables, customized loading buttons and gallery blocks. // Sally from Dream Board Digital
 

Side-by-side template + feature chart

Check out this site for a side-by-side comparison of every Squarespace templates + their built-in features. // Melanie from MBD
 

MBD Vault

This is my free resource library and it’s loaded up with all sorts of things to help you with your website, such as a web strategy workbook, my favorite copywriting tips + a guide to my favorite stock photo sites (because I’m sure you know how important good visuals are for your website). // Melanie from MBD

Free resource library for all things website, design, business + marketing

Getting started guides

If you just need a place to start with Squarespace, go here to learn the absolute essentials + here to learn how to customize + optimize your site. // Melanie from MBD
 

SEO / Keyword research

My absolute favorite SEO tool is Answer The Public for keyword research. It’s super easy to use: just type in something related to your industry and it’ll spit out all kinds of lists and charts of phrases people use when searching for that keyword or phrase. // Melanie from MBD


More about THE EXPERTS:

 

Where to find them:

Tom Locke // Hive Social

Design style: refined, elegant


Lavinia Alexoiu // Starlight Studio

Design style: minimal with a heavy focus on user experience


Leanne Flowers // Leanne & Co

Design style: classic, professional, slightly feminine


Jessie Coots // Untethered Design

Design style: clean, simple, fresh, colorful


Melanie Craft // Melanie Craft Co

Design style: minimal, modern, clean

Mallory Musante // Bold & Pop

Design style: bold with major pops of color


Erin Alexander // Erin Alexander Design Studio

Design style: clean, simple, modern, strategic


Michele Lee // The Artist Playbook

Design style: simple, bold


Sally Cochrane // Dream Board Digital

Design style: classic, feminine, purposeful.