Squarespace: How To Use Spacers To Create Columns

Photo by KOBU Agency on Unsplash

Do you know how to create columns in your Squarespace site? Do you find it intimidating? Spacebar Agency is ready to simplify the process for you!

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.

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:

  1. Double-click into the page to enter editing mode.
  2. 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.
  3. Repeat Step 2 twice to manually add in two more spacers.
  4. These spacers will appear across the page lengthwise, one on top of the other. In other words, you’ll have three rows of spacers.
  5. Next, drag each spacer, positioning all three in ONE row, side by side (each spacer will be resized as you do this).
  6. 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.)
  7. Below the first spacer, add an image block, and below that, add a text block.
  8. Repeat Step 7 for the other two spacers.
  9. For each of the three image blocks, drag in the icon you want in each column.
  10. Go into the three text boxes and edit them, adding the writing you want for each.
  11. 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!
  12. 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

Photo by Hal Gatewood on 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.

  1. Click the “Edit Footer” box that appears when you hover over the bottom of the page template you’re using.
  2. Remember that your footer will appear on every page of your Squarespace site — you don’t have to edit every page individually.
  3. Add a section below the footer just to give you more space to edit.
  4. Now, add four spacers to your footer; these spacers will appear as four rows.
  5. Drag the four spacers and arrange them next to each other in one single row.
  6. Below each of the four spacers, add a text box.
  7. Edit each of the four text boxes, adding in the information you want for each column.
  8. Remove the spacers.
  9. 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?

Spacebar Agency has 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!

Be sure to also sign up for our free newsletter delivered to your inbox every month, providing industry insights that can make your site truly stand out.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store