5 Squarespace Design Hacks (No Code Needed!)

One of the (many!) things we love about designing websites on Squarespace is how easy the platform can be for “non-designers” to build and maintain.

While there’s certainly much more customization potential if you’re able (and willing) to work with code in the back-end of the website, there are also plenty of simple tricks to customize your site in Squarespace’s built-in editing interface—no coding required!

Here are a few of our favorite (code-free!) Squarespace design hacks:

Adjust image focal points

Is your banner image not displaying as you’d like, or the image is cut off awkwardly on mobile? You can easily adjust the focal point of any image in Squarespace’s image editor.

To adjust the focal point of a banner image, you’ll open the editor for the banner and pull the image focal point (the circle icon you see in the middle of the image below) to where you’d like it and click “save.” (The same process applies to image blocks.)

 
How to adjust image focal points in Squarespace // 5 Squarespace Design Hacks (No Code Needed!) // Five Design Co.
 

When repositioning image focal points, remember to check your work on both desktop and mobile screen sizes to make sure they’re displaying properly!

Customize Spacer blocks for mobile

If you use spacer blocks to add spacing on your pages but find that while they work well for desktop screen sizes, they add too much spacing on mobile, there’s a simple trick to eliminate that extra space on mobile only:

Instead of using one spacer block (first example below), use two side-by-side (second example below) and they’ll cancel out on mobile.

How to customize Squarespace spacer blocks for mobile // 5 Squarespace Design Hacks (No Code Needed!) // Five Design Co.

Make line breaks smaller

You may notice that the Squarespace editing interface uses a standard paragraph line break every time you hit enter. For example:

Line 1

Line 2

However, sometimes you may want to reduce the line break spacing, like so:

Line 1
Line 2

To do this is simple: just hold down shift while you’re pressing enter! Your line break will now be magically smaller.

Create full-width sections

If you’d like to include full-width sections on your website (like the example below), there is a simple way to do so without coding.

 
How to create full-width sections in Squarespace // 5 Squarespace Design Hacks (No Code Needed!) // Five Design Co.
 

Head to your Pages tab and create an Index Page:

  • Click the + like you would to add a standard page, but choose Index. The Index will be the “main page” housing multiple sections within it. (You can add this either in your Navigation or Not Linked sections, depending on whether or not you’d like this page to appear in your site navigation.)

  • Within your Index, add sections by clicking + Add Section.

How to create full-width sections in Squarespace // 5 Squarespace Design Hacks (No Code Needed!) // Five Design Co.
  • The banner in each section will give you the opportunity to create a full-width section on your main page:

    • To create a full-width image, add an image to the banner in the desired section.

    • To create a solid color background, upload an image that’s simply the solid color you’d like. You’ll just need to create the image, 2000px-wide, in the design software of your choice. (Though the background color could also be set with code, this method allows you to change the background color without code.)

  • Depending on your template, you can either add text on top of the banner image in the “Page Description” section, or if you’re using one of the Brine family templates, you can add additional blocks (text, button, image, etc.) right on top of the banner just as you would to any other part of the page.

  • Tip: When adding text in non-Brine templates, note that unformatted text will inherit your banner body font, bold text will inherit the banner header font, and a link in the last line will turn into a button. For non-Brine templates, banner overlay fonts can be set in the Style Editor (Design > Site Styles).

Note that this trick for full-width sections applies to pages, but not blog posts.

Create a related posts reel

Hopefully you have a blog on your website! (If not, here’s why blogging is one of our favorite strategies to grow your business and brand.)

It’s a great idea to connect your blog readers to additional content by adding a Related Posts reel to your blog posts (like ours below)—and creating this is actually quite simple!

You’ll just add a summary block linked to your Blog. Within the summary block you can choose your layout (we suggest carousel or grid). You’ll also be able to customize the number of posts displayed, size and orientation of images, meta data displayed, and font size.

(For reference, we use the carousel layout with 3 items per row, 3:2 aspect ratio and “medium” font size. We choose to display the title and thumbnail but no additional metadata.)

You can also set your summary block to display only featured posts, or only posts in certain categories or tags.

Tip: The posts will be displayed in reverse chronological order (aka newest first), so you may need to take precaution that a blog post does not promote itself in the Related feed. To do this, we set our summary blocks to display related content by specific tags and just ensure that we’re calling upon a tag that is not included in our current post.


More Squarespace web design questions?

Let us know what you’re working on and we’ll see if we can help!

 

And don’t forget to grab our free Website Checklist!

Everything you need to build & optimize your Squarespace website:

Website Checklist: DIY your Squarespace website // Five Design Co.

MORE LIKE THIS


Pin it !

 
Some of our favorite Squarespace design hacks (no code needed!) // Helpful tips to make your DIY Squarespace website more beautiful, functional & professional.
Some of our favorite Squarespace design hacks (no code needed!) // Helpful tips to make your DIY Squarespace website more beautiful, functional & professional.