Squarespace: How To Use Spacers To Create Columns
Image Source: Unsplash
Do you know how to create columns in your Squarespace site? Do you find it intimidating?
Read on to learn how to format your pages and footers with columns for beautiful, functional results. We provide the basics of creating columns using spacers, and we’ll teach you how to create columns for icons on a page and for a footer.
Table of Contents in Detail Hide
Create Columns Using Spacers
A good way to think about setting up columns in Squarespace is to answer this question: How can you use spacers effectively within Squarespace?
Let’s say you want to create three columns on a page underneath centered text that already exists on the page. In this example, each column will have an icon on the top and text below the icon. Here are the steps to accomplish this:
Double-click into the page to enter editing mode.
Manually add a spacer by clicking the plus sign below the centered text, finding “Spacer” in the pop-up box, selecting it, and adding it to the page.
Repeat Step 2 twice to manually add in two more spacers.
These spacers will appear across the page lengthwise, one on top of the other. In other words, you’ll have three rows of spacers.
Next, drag each spacer, positioning all three in ONE row, side by side (each spacer will be resized as you do this).
In this way, you’re using the spacers as a tool to structure three separate columns of identical width. (Doing this is especially important for responsiveness for mobile devices.)
Below the first spacer, add an image block, and below that, add a text block.
Repeat Step 7 for the other two spacers.
For each of the three image blocks, drag in the icon you want in each column.
Go into the three text boxes and edit them, adding the writing you want for each.
Once you’ve created your three columns with the icon and text you want, you can get rid of your spacers – you don’t need them anymore!
After removing your three spacers, save your work.
As you’ll see, spacers can come in very handy for creating perfectly sized columns on your Squarespace page.
Columns Are Attractive Design Elements
Image Source: Unsplash
Adding columns allows you to set up your page in a way that’s attractive and useful for visitors scanning your page for relevant information.
You can create columns to separate out key categories related to your business. For example, you can use columns to visually differentiate any of the following:
Services you offer
Business accolades or credentials
Primary product categories
Specific benefits to your customers or clients
Important pages your visitors will find helpful (such as About, FAQs, and Contact)
Packages you offer
And more!
Design A Footer
Next let’s go over how to structure a footer in Squarespace. In this example, we walk you through designing a footer that has four sections.
Click the “Edit Footer” box that appears when you hover over the bottom of the page template you’re using.
Remember that your footer will appear on every page of your Squarespace site – you don’t have to edit every page individually.
Add a section below the footer just to give you more space to edit.
Now, add four spacers to your footer; these spacers will appear as four rows.
Drag the four spacers and arrange them next to each other in one single row.
Below each of the four spacers, add a text box.
Edit each of the four text boxes, adding in the information you want for each column.
Remove the spacers.
Save your work.
Once you’ve practiced adding columns to your pages and footers, you can play around with spacers to create additional design looks that mix and match area layouts for a great overall Squarespace design.
Got Questions?
We’ve designed hundreds of beautiful Squarespace sites for clients in a wide range of industries. In addition, we’ve helped scores of website designers come up to speed quickly with the Squarespace platform to create functional, attractive, and user-friendly sites.
Another area we specialize in is Squarespace SEO. We provide our audiences with plenty of free resources they can use to build great SEO into their sites right from the start.
We invite you to access our free guides that cover essential topics, such as:
How to rank on Google
Irresistible upsells for your projects as a Squarespace designer
Common Squarespace designer questions answered
Best practices for optimizing SEO
And more!
