Spacers: Your Weebly 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.
Read the Squarespace 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.
Any Weebly website page can include spacers
Spacers are design elements you can choose for a page, just as you can add text, images, buttons, and lines. As you become comfortable designing your own pages, you may also want to add spacers to create a particular page effect to push text or images to the left or right side of the page or to add extra blank space above or below other text or images.
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. Weebly websites 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 Weebly 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 from its lower edge. To resize a spacer horizontally to make it wider, drag the vertical bar next to the spacer.
Pro tip: To change the width precisely, hold the SHIFT key while dragging the bar.
Using spacers as page margins
Spacer element as page margin
To create wider margins on your pages, use equally sized spacers to the left and right of the content on the page. This creates the effect of adding page margins as you would in a word processor.
Margin spacers are useful for pages where less content is expected and the page looks too sparse otherwise, such as a Contact page.
By the same token, spacers may be omitted from pages that will have large amounts of content, such as Features and Services. 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 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.
Use the Mobile Preview view to see how the spacer 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
Side padding may be 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. Resize the 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.
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.
Example in Weebly of spacer elements on either side of centered text and image
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 using a spacer to show images in a grid
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 design that lays 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
You have five images that you want to display across two rows and they are separated by some heading text.
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.Add a spacer to the right of the second row of images to force the images in the second row to be the same size as those in the first row.
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.
Pro tip: To change the size precisely, hold the SHIFT key while dragging the bar.You may need to adjust the final size of the images too by dragging the vertical 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?
