Spacers: Your website's invisible super power

KerryAThompson.com blog: Spacer bars

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.

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.

Most Squarespace and Weebly designs include spacers

Every new design template I’ve used has some built-in spacers, so it’s helpful to understand their purpose as you build a new website and decide if you want 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. In Squarespace spacers are called spacer elements; in Weebly they are called spacer blocks. They are treated like any design element 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 both Squarespace and Weebly website pages.

Spacers are often disregarded for cell phone displays

Whenever you’re designing a website, it’s important to use the Preview feature to see how your website will look on smaller screens and make sure that the page looks good on all size screens. Both Squarespace and Weebly have built-in responsive designs that rearrange the design elements 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 and Weebly ignore 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 Squarespace, drag the spacer from its edge. With Weebly, resize a spacer’s width by dragging the vertical gray bar next to the spacer; to change the width precisely, hold the SHIFT key while dragging the bar.


Using spacers as page margins

Example in Squarespace of spacer element as page margin

Example in Squarespace of spacer element as page margin

When you create a new website on Squarespace or Weebly and choose a premade design, you will probably see spacers in use somewhere. Most of the designs I’ve used have included left and right spacers to form page margins. In Squarespace, where there are a variety of page designs to choose from, such as About, Contact, Features, and Details, the spacers are used on pages where less content is expected, such as About and Contact pages. By the same token, spacers may be omitted from pages that will have large amounts of content, such as Features and Details. In Weebly, these types of pages are all built with a page type called “Standard Page” so the design will either have spacers on the left and right sides of the page or it won’t. You can always add spacers to the left and right side of the design elements on the page if you want margins and they aren’t there.

Using spacers to add extra space before and after design elements

Example in Weebly of spacer block following text

Example in Weebly of spacer block following text

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. On Weebly, you resize a spacer’s width by dragging the vertical gray bar next to the spacer; to change the width precisely, hold the SHIFT key while dragging the bar.

Example in Squarespace of spacer elements on either side of centered text

Example in Squarespace of spacer elements on either side of centered text

Side padding can also be used to center something on a page, overriding any page-margin spacers or page 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 text element. You may need to add a second set of page-margin spacers next to any design elements below the centered image or text (if page-margin spacers were used at the top of the page) to reinstate the regular page width. 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

Example in Weebly of spacer block used to size images

Example in Weebly of spacer block used to size images

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 situation 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. 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. The second row’s images are bigger than the first row’s because there’s more room to spread out in the second row. To force the images in the second row to be the same size as those in the first row, you add a spacer to the right of the second row of images. Sizing the spacer causes the images to resize as well. Keep adjusting the size until the images reach a size identical to those on the first row. If you’re doing this on Weebly, after sizing the spacer, you may need to adjust the final size of the images too by dragging the vertical gray bar next to the images to achieve equal sizes for each element.

What do you think?

Now that you’ve seen all the ways in which spacers can be used when designing your 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?


Kerry A. Thompson

I offer stress-free design and writing help to get your website launched or updated on Squarespace and Weebly. If you’re struggling to get your website going for your new business or passion project, see the Services page for the types of help I offer and then take me up on a free 30-minute no-obligation consultation. I’d love to hear from you. - Kerry