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 both 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:
-
Select a colour from the portal’s theme colours.
-
Adjust the opacity using the slider (default 100%).
-
-
Image:
-
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.
-
Select an asset and select Select. The picker closes and the background image displays in the grid.
-
Adjust the background opacity using the slider.
-
To replace the image, select Replace Asset. To remove it, select Delete.
-
-
Video:
-
Select Choose Asset. The asset picker opens showing video files only.
-
Select a video and select Select. The picker closes and the video displays as the grid background.
-
Adjust the background opacity using the slider.
-
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.
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.
Clone a section to another locale
Grids and carousels 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 Copy 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 and carousels from that page. If a grid or carousel 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.