Add CMS grids and carousels

Grids and carousels are the structural sections of a CMS page. Each section contains one or more widgets, and multiple sections can be added to a page and reordered as needed. This page explains how to add and configure all section types, and how to clone sections across locales.

A CMS page must exist before you can add sections to it. See Add pages to a portal if you have not yet created a CMS page.

To add a grid or carousel:

Navigate to the CMS page you want to edit.
Select the cog icon at the top right of the portal view, then select Portal Settings.
In the top navigation bar, select Page Editor.

An + Add Section button appears in the centre of the page.

Add a grid

Select + Add Section.
Select Grid from the menu.

A grid appears on the page with default settings (8 rows). A toolbar displays at the top of the grid with the following controls:
- Up and down arrows: reposition the grid on the page once multiple grids have been added.
- + icon: add a widget to the grid.
- Cog icon: open grid settings.
- Pages icon: duplicate the grid.
- Bin icon: delete the grid.
  
  To add further grids, hover over an existing grid to reveal + Add Section buttons above and below it, then select the position where you want the new grid to appear.

Configure grid layout

Select the cog icon on the grid to open the settings panel.
Select the Layout tab.
Adjust the following as required:
- Rows: The number of rows in the grid (1–100, default 8).
- Column Gap: The horizontal spacing between grid cells in px (default 8, no maximum).
- Row Gap: The vertical spacing between grid cells in px (default 8, no maximum).
  
  Changes apply to the grid automatically as you make them.

Configure a grid background

A grid can have a colour, image, or video background. Only one background type can be applied at a time.

In the grid settings panel, select the Background tab.
Select a background type:
- None: No background is applied (default).
- Colour:
  1. Select a colour from the portal’s theme colours.
  2. Adjust the opacity using the slider (default 100%).
- Image:
  1. Select Choose Asset. The DAM asset picker opens, showing assets in the current domain. To switch domain, select the domain menu at the top right of the picker.
  2. Select an asset and select Select. The picker closes and the background image displays in the grid.
  3. Adjust the background opacity using the slider.
  4. To replace the image, select Replace Asset. To remove it, select Delete.
- Video:
  1. Select Choose Asset. The asset picker opens showing video files only.
  2. Select a video and select Select. The picker closes and the video displays as the grid background.
  3. Adjust the background opacity using the slider.
  4. To replace the video, select Replace Asset. To remove it, select Delete.

Configure grid padding

In the grid settings panel, select the Container tab.
Optionally update the grid title from the default value of Grid.

Giving grids descriptive titles makes them easier to identify when cloning content across locales.
Enter padding values in px for Top, Right, Bottom, and Left (0–100px).

Vertical and horizontal values are linked by default, meaning the value entered for Top is automatically applied to Bottom, and the value entered for Right is automatically applied to Left. To set each side independently, select the link icon to unlink them.

Add a carousel

Carousels display content in a horizontally scrollable format. Each carousel contains one or more slides, each of which can have a colour, image, or video background.

Select + Add Section.
Select Carousel from the menu.
Select the cog icon on the carousel to open the settings panel.

Configure carousel layout and behaviour

Select the General tab.
Set an Autoplay Delay in seconds if you want the carousel to cycle through slides automatically (default 0, meaning autoplay is off). Increments using the arrows are 0.5 seconds.
Adjust Rows, Column Gap, and Row Gap as required, using the same ranges as for grids.
Select whether to display Arrows and Dots on the published carousel.

Arrows allow users to move forward and back through slides manually. Dots indicate the total number of slides and highlight the current slide. Both are selected by default.

Configure carousel slides

Select the Slides tab.
Select Slide 1 and choose a background type from the Background Type menu: Colour, Image, Video, or None.
For Image or Video backgrounds, select Choose Asset and select the required asset from the DAM asset picker.
To add further slides, select the option to add a new slide and repeat the process for each.

Configure carousel padding and margin

Select the Container tab.
Enter Padding and Margin values in px for Top, Right, Bottom, and Left as required.

Vertical and horizontal values are linked by default. Select the link icon to set each side independently.

Save and publish

Once you have finished configuring your grids or carousels, save your work using the buttons at the top right of the page editor.

Select Save as Draft to save your changes without making them visible to users.
Select Publish to make your changes live.

To close the editor, select the X button at the top right. Published sections display on the CMS page without grid markers.

Add a tabset

Tabsets host multiple grids as named tabs, with the ability to add the same or different content across multiple tabs.

Select + Add Section.
Select Tabset from the menu.

A tabset appears on the page with default of 1 tab. A toolbar displays at the top of the tabset with the following controls:
- Up and down arrows: reposition the tabset on the page once multiple grids, carousels, tabsets or section templates have been added.
- + icon: add a widget to the tabset
- Cog icon: open tabset settings.
- Pages icon (+): duplicate the tabset.
- Pages icons: copy and paste the tabset.
- Bin icon: delete the tabset.

Configure tabset styles

In the settings panel, select the Styles tab.
Expand Tab interface and modify the navigation gap in px (default is 32) and set the navigation alignment for the tabs of the tabset with options of Left, Centre, Right or Stretch.
Optionally select a background colour from the portal’s theme colours and adjust the opacity using the slider.
Set a Border Radius by updating the px value which will update all corners of the widget. Alternatively, select Show individual border radius controls and update each corner’s px value.

Configure tabset padding

In the tabset settings panel, select the Container tab.
Optionally update the tabset title from the default value of Tabset.

Giving tabsets descriptive titles makes them easier to identify when cloning content across locales.
Enter padding values in px for Top, Right, Bottom, and Left (0–100px).

Vertical and horizontal values are linked by default, meaning the value entered for Top is automatically applied to Bottom, and the value entered for Right is automatically applied to Left. To set each side independently, select the link icon to unlink them.

Add tabs

To add further tabs, select tab 1, and at the bottom of the tabset select + Add Tab. Repeat to add more tabs as required. Alternatively, select the cog icon on the tabset toolbar to open the settings panel and add tabs.

Select a tab. A toolbar displays at the top of the tab with the following controls:

Left and right arrows: reposition the tab within the tabset once multiple tabs have been added.
+ icon: add a widget to the tab.
Cog icon: open tab settings.
Pages icons: copy and paste the tab.
Bin icon: delete the tab.

Configure tab layout

Select the cog icon on the grid to open the settings panel.
Select the Layout tab.
Adjust the following as required:
- Rows: The number of rows in the tab (1–100, default 8).
- Column Gap: The horizontal spacing between tab cells in px (default 8, no maximum).
- Row Gap: The vertical spacing between tab cells in px (default 8, no maximum). Changes apply to the tab automatically as you make them.

Configure tab styles

In the settings panel, select the Styles tab.
Expand Tab interface and modify the Navigation Gap in px (default is 32) and set the Navigation Alignment for the tabs of the tabset with options of Left, Centre, Right or Stretch.
Optionally select a background colour, image or video. Colours are from the portal’s theme colours. Image or video selection opens an asset picker, select an asset as required. Adjust the opacity using the slider.
Set a Border Radius by updating the px value which will update all corners of the tab. Alternatively, select Show individual border radius controls and update each corner’s px value.

Configure tab

In the tab settings panel, select the Container tab.
Optionally update the tab’s label and title from the default value of Tab.

Giving tabs descriptive labels and titles makes them easier to identify when cloning content across locales.
Enter padding values in px for Top, Right, Bottom, and Left (0–100px).

Vertical and horizontal values are linked by default, meaning the value entered for Top is automatically applied to Bottom, and the value entered for Right is automatically applied to Left. To set each side independently, select the link icon to unlink them.

Section templates

A list of pre-defined Hero and Header section templates are available to select from.

Add a section template

Select + Add Section.
Select Section Templates from the menu.
A Template Library modal opens.
The Sections tab is loaded by default.

Each section template includes placeholder image and text, offering a visual representation of how the template will look on a CMS page, helping users to make an informed selection.

Available section templates

Heroes - background, logo, text, CTA:

Left Aligned.
Centre Aligned.
Right Aligned.

Headers - background, text, CTA:

Left Aligned.
Left Aligned Stacked (CTA displayed under text).
Centred Aligned.
Right Aligned.

Introductions - background, text:

Introduction.
Contrast Introduction.

Footers - background, logo, text, copyright:

Footer.
Contrast Footer.
Minimal Footer (only logo and copyright, no text).
Minimal Contrast Footer (only logo and copyright, no text).

Select a section template

Select a Section template.
Select the Confirm button in the modal.
If applicable, an asset picker modal opens where you can choose a background for the section template.
Select the Select button.

The section is inserted directly below the active grid or carousel of the CMS page.

To proceed without selecting an asset at this stage, select the Cancel button instead. A background can be added later.

Add card widgets

A list of pre-defined grouped widget templates are available to select from.

Add a card widget

Select + Add Section.
Select Section Templates from the menu.
A Template Library modal opens.
Select the Widgets tab.

Each Card widget includes placeholder image and text, offering a visual representation of how the template will look on a CMS page, thereby helping you make the right selection.

There are three different types of Card templates to choose from:

Card - mage, text, and CTA.
Asset Card - text, CTA and background image.
Category Tile - text and background image.

Configure card width

Select a Card template.
From the right-hand panel, alter its width:
- 1/4 (this is the default).
- 1/3.
- 1/2.
- Full.

The template’s width automatically updates in the preview.

Select the Confirm button in the modal.

Select a card image

An asset picker modal opens, where you can choose an image for a Card template or set the background image for an Asset Card or Category Tile template.
Search and select the required asset.
Select the Select button.

To proceed without selecting an asset at this stage, select the Cancel button instead. A background can be added later.

The card template widget is added to the CMS page.

Widget actions menu

On the widget’s actions menu, the standard options are available:

Send Forward/Send Back.
Ungroup.
Settings.
Duplicate.
Delete.

Configure card styles

Select the cog Settings button.
Within the Styles tab, choose a background: colour, image, or video.
Adjust the background colour and opacity, as applicable.

Configure card padding and margin

Select the Container tab.
Set Padding and Margin as required.

Clone a section to another locale

Grids, carousels, tabsets, and section templates can be copied from one locale version of a CMS page to another. This is useful when building out localised pages that share the same structure or content as an existing locale.

See Localise a CMS page for details on managing locale versions of a CMS page.

Navigate to the locale version of the CMS page you want to add content to.
Select + Add Section.
Select Duplicate Existing Section.

A modal opens.
In the right-hand pane of the modal, select the source CMS page and language where the content you want to copy is located.

The Sections list populates with all available grids, carousels, tabsets, and section templates from that page. If a section was given a title during configuration, that title displays in the list. Untitled sections display with the default title, for example Grid.
Select the section you want to copy, either by selecting its title in the list or by selecting its visualisation in the centre of the modal.
Select Confirm.

The modal closes and the copied section appears on the current CMS page.
Edit the copied content as required and select Publish.

Repeat the process for each section you want to copy.

Copy & Paste CMS Page Content

Widgets, widget groups, grids, and carousels can be copied from one CMS page to another, across different portals in the same workspace, and across different workspaces. This is useful for reusing configured content instead of rebuilding it from scratch.

All content within a copied item, including links, layout, styling and configuration, is preserved when pasted.

Navigate to a CMS page and enter Page Editor mode.
Open the actions menu for the widget, widget group, grid or carousel you want to copy.
Select Copy.

You can also use Cmd+C (Mac) or Ctrl+C (PC) to copy, and Cmd+V (Mac) or Ctrl+V (PC) to paste.

Navigate to the destination CMS page. This can be another page in the same portal, a page in a different portal, or a page in a different workspace.
Open the page actions menu and select Paste. The copied item appears on the CMS page, with all properties, links, layout, styling and configuration retained from the original.

Widgets retain all properties and settings, widget groups maintain their structure and contained items, and grids and carousels preserve layout, styling and all contained widgets.

If the destination portal doesn’t support a copied widget or widget action, pasting isn’t possible and a warning message displays. For example, a Project Listing Counter widget can’t be pasted into an Assets Portal.

If copied content references an asset, for example an asset selected from an asset picker in a card widget, and that asset isn’t available in the destination workspace, the asset isn’t carried over.

If you paste content onto the wrong CMS page, select Undo at the top of the CMS page to reverse the action.

Repeat the process for each item you want to copy.