🔖 Sections

How to Add a Section on the Canvas

How to Save a Section to the Design System

How to Duplicate a Section

How to Re-Organize Sections on the Page

How to Style a Section

Sections are the first building blocks of any web page.

Think of them as chapters in a book. Each section serves a purpose to keep the story interesting.

At the end of each section, you want the reader to take action, read on or click on a button.

How to Add a Section on the Canvas

We can drag a section anywhere onto the page.

If you’re working on a blank page, big blue buttons will invite you to add a new section:

If you’re working on a page that already has one or more sections, you can browse template sections in the “Add” menu > “Templates”:

How to Save a Section to the Design System

How to Duplicate a Section

You can find sections in other sub-menus:

• “Project components” lists all the sections from your project
• “My design systems” lists all the sections available in your workspace

In the “Duplicate sections” sub-menu, you can see all the sections used in your project, page by page.

You can copy or create a new instance of an existing section by dragging it onto the Canvas or in the Navigator:

“Create an instance” – if you want changes you make in the section to be applied to all the instances of this section throughout your project.

“Create a copy” – if you want to create an independent copy of an existing section so that the changes you make in the copy do not affect the original section.

How to Re-Organize Sections on the Page

The Sections you see in the Navigator are usually displayed from top to bottom on the Canvas.

There are exceptions to this, like sidebars and hidden sections that appear in the Navigator but not on the Canvas, but it helps to think of Sections as the logical succession of the content on the page.

A classic list of Sections on a blog article page:

• Top navigation menu
• Sidebar navigation with related articles
• Hero section with a big heading, excerpt, featured image, and author info
• Article content
• Comments section
• Call-to-action to subscribe to the newsletter
• Footer

If you need to re-organize the content on the page, you can select a Section, then drag-and-drop it elsewhere on the Canvas or in the Navigator.

Sometimes, it’s tricky to select a Section and you end up selecting a Container instead.

You can ensure that you are selecting a Section, by clicking on the Section icon in the Navigator or on the Canvas:

How to Style a Section

Sizing

By default, blank sections will take up the entire width of the page:

When you add content inside the Section, the height of the Section will adjust automatically.

As you put something inside like a heading, it adds to the height of the section, same thing with a paragraph or a button.

That said, you can override the automatic width and height of the section.

You can set a box width or minimum height, use viewport width and viewport height or pixels to size your section:

Spacing

You can add margins and padding to give a bit more breathing room to your design:

Remember to check if it still looks good on mobile devices and adjust accordingly.

Background

You can set a background color to a section, add an image or video: