Spacers: Your Squarespace website's invisible super power
Spacers are invisible design elements that add blank space to any part of a website page. I call them a website super power because they are incredibly useful for adding space around elements on a page.
Note: This post applies to the Squarespace Classic Editor, not the Squarespace Fluid Engine Editor, which uses a sticky grid for placing elements within the grid. When using the Fluid Engine Editor, you don’t usually need to add spacers.
Read the Weebly version of this blog post here.
Spacers replace several word processing features
Having come from the world of word processing, it took me a little while to understand that spacers take the place of several word processing features. In website design, spacers can create page margins, add vertical spacing before and after paragraphs, increase padding around images or other design elements, and simulate hidden text boxes to force images to resize.
Many older Squarespace templates include spacers
Many Squarespace templates I’ve used in the past had some built-in spacers, so it’s helpful to understand their purpose as you get ready to update your website. You can choose to remove or resize the spacers included in your chosen design. As you become comfortable designing your own pages, you may also want to add spacers to create a particular page effect. Spacers are treated like any design block you can add to a page, such as text, images, buttons, and lines. In this blog post, you’ll see examples of spacers used on Squarespace website pages.
Spacers are often disregarded for cell phone displays
Whenever you’re designing a website, it’s important to use the Mobile Preview feature to see how your website will look on smaller screens and make sure that the page looks good on all size screens. Squarespace has built-in responsive designs that rearrange the design blocks on a page to respond to a narrower screen size when your website is viewed on a tablet or a phone.
I’ve noticed that Squarespace ignores many spacers when they resize a website to fit a cell phone screen, especially those spacers that form page margins on the side. At other times though the spacers are maintained as extra space between elements on a page. If a spacer causes too much extra space when a page is viewed on a cell phone, you’ll have to decide if the spacer is valuable enough to keep or if you can do without it so the page is attractive on all size screens.
Placement and sizing tips for spacers
Before adding a spacer, place the text and images and other design elements where you want them on the page. Then add the spacer, so you can clearly see what effect it has on the page design. Spacers can be resized both vertically and horizontally. To resize a spacer vertically, drag the spacer up or down from its lower edge. To resize a spacer’s width in the Squarespace classic editor, drag the spacer from its edge.
Using spacers as page margins
When you created a new website on Squarespace 7.0 and chose a premade design, you probably saw spacers in use somewhere.
The spacers are used on pages where less content is expected, such as About and Contact pages.
Example in Squarespace of spacers being used to enlarge page margins
By the same token, spacers may be omitted from pages that will have large amounts of content, such as Features and Details. You can always add spacers to the left and right side of the design elements on the page if you want extra spacing beyond what is provided.
Using spacers to add extra space before and after design blocks
Anything that you place on a page has its own predetermined spacing above and below. If you need to add more space to give the element more “breathing room,” you can add a spacer before or after the element. I’ve used this technique many times to add extra space above or below paragraphs of text, images, lines, buttons, slideshows, files, forms, social media icons, and footers.
After you place the spacer where you want it, you can drag the spacer vertically to increase or decrease the height of the spacer. Preview the design as it will look on cell phones to make sure that the spacer doesn’t cause unwanted blank space. If it does, you should probably remove the spacer and adjust the page design so it works for all size screens.
Using spacers as side padding
I don’t use spacers as side padding as often as I use spacers for page margins and vertical spacing, but I have seen side padding built into premade designs and it can come in handy when you need some extra space on one or both sides of a design element.
One example of side padding is for adding space on one side of an image to increase its distance from text or from an image next to it. Side padding is also helpful for increasing the distance between two columns of text. To add side padding, place the spacer to the right or left of an element, then resize the spacer horizontally to make it wider or narrower than the size provided by default.
Side padding can also be used to center something on a page, deepening any page-margin spacers or page or section settings. This strategy can be useful for setting something apart, such as an image or a long quote. To achieve this effect, you add and resize spacers on either side of the design element.
Example in Squarespace of spacers on either side of centered text
Preview the design as it will look on cell phones to make sure that the spacers don’t cause unwanted blank space. If they do, you should probably remove them and adjust the page design so it works for all size screens.
Using spacers to make images smaller
The last technique I want to show you is a variation of adding side padding to images. I have only needed to use this technique a few times, but it is handy for images you place individually into rows in a placement where you can’t use a gallery or grid that would lay out images in rows automatically. All the images should be the same original size and shape, so you’re not trying to match up images of different-sized dimensions.
Example in Squarespace of spacers used to size images
Say, for example, you have five images that you want to display across two rows and they are separated by some heading text. You place the first three images on the first row and place the last two images on the second row after the text. To force the images in the second row to be the same size and centered under the first row, add a spacer to the left and right of the second row of images. (You may need to add a divider line between the two rows to temporarily separate the two rows while you’re adding the spacer.) Sizing the spacers equally causes the images to resize as well. Keep adjusting the size until the images are centered under the first row.
What do you think?
Now that you’ve seen all the ways in which spacers can be used when designing your Squarespace website, do you agree that although they don’t stand out in a crowd because they’re, well, invisible, your website pages wouldn’t be the same without spacers’ super holding power?
6/16/23 - This post was updated to mention using the Squarespace Classic Editor. The newer Squarespace Fluid Engine Editor is a sticky grid editor that doesn’t require the use of spacers for precise placement.
