Columns, Spacers & the Sidebar / Table of Contents

Most of the time you stack sections one above another, but sometimes you want finer control over layout: two things side by side, a bit of breathing room between sections, or a helpful navigation column running alongside a long page. These tools handle exactly that. Columns and the Spacer are sections you add like any other; the Sidebar and Table of Contents are turned on for a whole page at once.

Columns

The Columns section lets you place two or three columns side by side, and each column holds its own stack of sections. That means you can put a paragraph of text next to a photo, two Feature Cards beside each other, or a form alongside a map, any combination you like. On phones, columns automatically stack into a single vertical list so everything stays readable on a small screen.

Settings you can adjust:

Number of columns: choose 2 or 3.
Column width: set how wide each column is relative to the others, so you can make one column wider than its neighbor (for example, a wide text column beside a narrow sidebar-style column).
Gap: the amount of space between the columns.
Vertical alignment: line the columns up at the top or center when they're different heights, or choose Equal height to stretch the columns to match.
Mobile stack order: decide which column appears first once they stack on phones, so your most important content leads.
Match row heights: makes side-by-side items the same height for a tidy, even look.

Inside each column you add sections from a focused menu. Most of the common sections are available, so you can build genuinely rich side-by-side layouts, not just plain text.

Spacer

The Spacer adds a controlled amount of empty vertical space between two sections. It's the simplest way to give your page a little more breathing room exactly where you want it, without changing the sections around it.

Size: from Tiny up through XL, so you can add just a touch of space or a generous gap.
Divider line: optionally show a thin horizontal line in the space to visually separate what's above from what's below.

Page Sidebar & Table of Contents

A sidebar is a narrow column that runs alongside your main content, useful on long pages and blog posts for navigation and quick actions. Unlike the sections above, you don't drag a sidebar into the page. You switch it on for the whole page or post instead. It's off by default, so your existing pages are unaffected until you decide to turn it on.

On a page or a blog post, the settings sit in the panel down the right-hand side of the editor, beside your other page settings, so you can turn a sidebar on without opening a tab to do it. What goes in the sidebar is on the Sidebar tab, since that's content rather than a setting. A Content Type works differently on purpose: an item's sidebar belongs to the item's own page, so its settings stay with the Inner Design tab where they can't be mistaken for settings for the listing.

Turn on Show a sidebar and you can set:

Side: whether the sidebar sits on the left or the right of your content.
Width: how wide the sidebar column is.
Sticky: whether the sidebar stays in view and follows along as the reader scrolls, or scrolls away normally with the page.

On phones, the sidebar moves below your main content so the page stays easy to read on a small screen.

Covering only part of the page

By default the sidebar runs the full height of your page, beside every section from top to bottom. That isn't always what you want. A big hero banner usually looks best stretching edge to edge, and a closing call to action often does too. Two settings let you keep those full width and give the sidebar just the middle:

Start the sidebar after: how many sections stay full width before the sidebar begins, counting from the top. Leave it at 0 to start at the very top. Set it to 1 to let your hero run edge to edge first, then bring the sidebar in from the second section on.
End the sidebar after: the sidebar stops after this many sections, again counting from the top. Leave it empty to run all the way to the bottom of the page. Set it to a number and everything past that point goes back to full width.

So on a page with a hero, four content sections, and a closing call to action, setting Start after to 1 and End after to 5 gives you a full-width hero, a sidebar beside the four middle sections, and a full-width call to action at the end. Both counts include every section, so it's worth counting down your section list before you type a number.

These two settings are available on pages and on Content Type item designs. Blog posts don't have them: a post's writing is fixed leading content that any extra sections follow, so a post keeps the straightforward whole-page sidebar.

One helpful side effect: the automatic table of contents lists exactly the sections the sidebar sits beside. Headings inside a full-width hero or a full-width closing section aren't listed, which keeps the contents list honest about what's actually next to it.

When the sidebar is on, you can add an automatic Table of Contents. It's built for you from the headings in your content. You don't list the links by hand. As a reader scrolls, the current section is highlighted in the list, and clicking any entry jumps straight to that part of the page. It's ideal for long articles, guides, and detailed service pages. You control:

Heading text: the title shown above the list, such as "On this page" or "Contents."
Include sub-headings: choose whether to list only your main headings or also the smaller sub-headings beneath them, so you can keep the list short or make it detailed.

Because the list comes from your headings, the best way to get a clean Table of Contents is simply to use clear, well-structured headings in your content.

Sidebar widgets

Below the Table of Contents, you can add compact widgets to the sidebar: smaller versions of familiar sections that suit a narrow column. Available widgets are:

Rich Text: a short note, bio, or set of links.
CTA: a small call to action with a button.
Form: a compact contact or enquiry form.
Newsletter: an email signup.
Lead Magnet: a small email-gated giveaway.
Testimonial: a single customer quote.
Gallery: a small set of photos.

A common setup on a blog post is the Table of Contents at the top of the sidebar, followed by a Newsletter signup and a CTA, so readers can navigate the article and take a next step without leaving the page.

Was this helpful?