Adding a new section to a page

Audience: all editor roles

Please note this product is in development and you may find videos and documentation don't reflect current functionality. 

Topic covers how to add a section to a page and how to edit it.

Related documentation: Editing a section toolbar, Section Styles configuration

Timed transcript

• Adding a section is the starting point to building content
• Sections are containers for components

• On opening a new page, you'll see a blue plus icon advising you to click it to start creating content
• Clicking the icon displays a menu of available layout options:
  • Columns
  • Fixed grid
  • Flex box
• Selecting 'columns' displays the various layout options
• Choose a column layout
• Use Apply 

• After adding a section, you can amend it in the Edit pane which automatically opens on the right-hand side of the screen
• For example, changing from a 50:50 column layout to a 100% single-column layout
  • the preview page is immediately updated to show a single region

• The empty section appears on the page after applying your chosen column layout
• The section is bordered in blue
• A section toolbar displays at the centre-top of the section
• Hovering over each region within the layout displays additional blue plus icons
  • These blue plus icons are where you begin adding components to each region of the section  

• Add another section above or below an existing one using the plus buttons on the top or bottom border of the section
• You can copy a section to use elsewhere on your page
  • Use the duplication icon on the section toolbar. This is circled in yellow in the following image:

Image

• You can save a section as a template to use elsewhere on your site.
  • Use the stamp icon on the section toolbar. This is circled in yellow in the following image:

Image

0:01
Today we're going to look at adding a section to a new page.

0:06
Adding a section is the starting point to building content.

0:12
So when you open a new page, you'll see there is a blue plus icon.

0:17
It advises you to click this icon to start creating content.

0:21
Let's do that now.

0:25
This displays a menu of available layout options.

0:30
Please note not all of these will be available to you from day one.

0:37
Selecting columns displays the various layout options.

0:42
Let's choose a 50:50 and apply here.

0:48
You can see the empty section on the page.

0:50
It's bordered in blue.

0:53
There's a section toolbar, and when you hover in each of the regions to the left and the right, you see an additional blue icon.

1:03
This is the plus button where you will begin adding a component to each of the section regions.

1:11
Now that you've added a section to the page, you can edit it in the details pane.

1:17
So if you change your mind, you can select one of the other layouts.

1:22
Let's do that and opt for a single column layout.

1:29
Here you can see it's immediately changed it on the page.

1:32
There is now one single region.

1:36
It's possible to add another section underneath or above the current 1 using these plus buttons on the section toolbar.

1:48
You will also have the ability to copy a section and also to save one as a template to use elsewhere on your site.

1:57
This functionality is covered elsewhere in our help topics.

2:03
To start adding content to your section, you need to select the Central Plus button.

2:11
This then displays all of the components you're able to add.

2:15
Please note, not all of these will be available to you.

Back to top