How to Design Your CMS Pages and Layouts

By the end of this doc, you'll be able to:

1. Design the template page every item uses
2. Change a CMS section's layout
3. Hide parts of an item, such as an image or button
4. Preview and publish design changes

Before You Begin

• A collection connected to a section.

How CMS Design Works

CMS content appears in two places:

• Template pages — one page per item, such as each blog post, all sharing one layout
• CMS sections — lists on other pages, such as a blog list on your homepage

Every item shares one design, so a change to one applies to all. Remove a button from one item, and it's removed from every item.

Design Your Template Page

Every collection gets a template page automatically.

1. In the CMS, select a collection.
2. Click the "Used in" line under its name.
3. Select the template page.

   It opens on the canvas, showing one of your items.

A template page has two kinds of sections:

• Sections connected to the collection show the current item's content. 
• Regular sections work like any other page. Text and images you add here appear on every item's page.

Change a CMS Section's Layout

This works on any page, including template pages.

1. Select a CMS section on the canvas.
2. Click Replace component in the right panel.
3. Choose a new design.

Your content moves into the new design and stays connected to the collection.

Hide Content You Don't Need

1. Click Layers in the left sidebar.
2. Expand the CMS section, then an item.
3. Hover over a layer, such as Media or Button.
4. Click the eye icon.

   Hidden layers are greyed out with a closed-eye icon. Click it again to show the layer.

Hiding a layer hides it for every item.

Preview and Publish Design Changes

1. Click Preview (play) in the top-right toolbar to check your pages, including on mobile.
2. Click Publish in the top-right corner.

Content changes publish separately, from the CMS.