Add widgets to a CMS page

Widgets are the individual content elements placed inside grids and carousels on a CMS page. This page explains how to add and configure each widget type.

A grid or carousel must exist on the CMS page before widgets can be added. See Add CMS grids and carousels if you have not yet added a section to the page.
Not all widget types are available in all portal types. See Widget reference for a full breakdown of widget availability by portal type.

Add a widget

  1. Navigate to the CMS page you want to edit.

  2. Select the cog icon at the top right of the portal view, then select Portal Settings.

  3. In the top navigation bar, select Page Editor.

  4. Select the + icon on the grid toolbar.

  5. Select a widget type from the menu.

  6. Select the cog icon on the widget to open the settings panel.

The following sections describe the configuration options for each widget type.

Text widget

Text widgets display formatted content including headings, body text, lists, and links.

Configure text widget settings

  1. In the General tab, optionally enable a link by selecting the Link checkbox and choosing a link type:

    • Internal: links to a page within the portal.

    • External: links to an external URL.

    • Asset Listing Link: links to an asset list page.

      When the published widget is selected, the user navigates to the chosen destination in a new tab.

  2. In the Background tab, optionally select a background colour from the portal’s theme colours and adjust the opacity using the slider.

  3. In 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.

Edit text content

  1. Select the pen icon on the widget to open the text editor.

  2. Enter your text in the text field.

    The widget height grows dynamically as you add content.

  3. Use the toolbar to format your text:

    • TT: apply a heading style (Heading 1–6) or text style (Text, Text 1, Text 2). Heading and text styles are configured in Configure portal styling.

    • Palette icon: apply a text colour from the portal’s theme colours.

    • B, I, U: apply bold, italic, or underline formatting.

    • List icons: apply numbered lists, bullet points, or indents.

    • Alignment icons: set vertical alignment to top, centre, or bottom.

    • Link icon: add an inline link. Paste a URL directly, or highlight text first to use different link text. For mailto links, use the format mailto:emailaddress@example.com.

      Selecting a URL link in the published widget opens the destination in a new tab. Selecting a mailto link opens the user’s default email application with a new email addressed to the specified address.

  4. Select Save and Publish when done.

Button widget

Button widgets display a labelled button that links to an internal page, external URL, or asset listing.

  1. In the General tab, enter the button label text.

  2. Select a button colour:

    • Primary

    • Secondary

    • Neutral

    • Clear

      The appearance of Primary, Secondary, and Tertiary buttons is configured in Configure portal styling.

  3. Optionally enable a link by selecting the Link checkbox and choosing a link type: Internal, External, or Asset Listing Link.

    When the published button is selected, the user navigates to the chosen destination in a new tab.

  4. In the Container tab, enter padding values in px for Top, Right, Bottom, and Left as required.

  5. Set the button alignment:

    • Left, Centre, Right: horizontal alignment within the widget container.

    • Stretch: button width spans the full width of the widget container.

    • Top, Bottom: vertical alignment within the widget container.

    • Stretch (vertical): button height spans the full height of the widget container.

  6. Select Save and Publish when done.

Image widget

Image widgets display an image selected from the DAM.

  1. In the General tab, select Choose Asset.

    The DAM asset picker opens. Select an image and select Select. The picker closes and the image displays in the widget.

  2. Set the image quality (default High).

  3. Set the image size:

    • Contain: the image is scaled to fit within the widget container (default).

    • Cover: the image is enlarged to fill the widget container entirely.

  4. Optionally enter an image label.

  5. Optionally enable a link. When the published widget is selected, the user navigates to the chosen destination in a new tab.

  6. Optionally set the focus area to control which part of the image is displayed within the widget container.

  7. In the Container tab, optionally rename the widget from its default title. Enter padding values in px for Top, Right, Bottom, and Left as required.

  8. Select Save and Publish when done.

Video widget

Video widgets display a video file selected from the DAM.

  1. In the General tab, set the video size:

    • Contain: the video is scaled to fit within the widget container.

    • Cover: the video is enlarged to fill the widget container entirely.

  2. Select Choose Asset.

    The DAM asset picker opens, showing video files only. Select a video and select Submit. The picker closes and the video displays in the widget.

    To replace the video, select Replace. To remove it, select Delete.

  3. Configure playback options as required:

    • Show Controls: displays playback controls to the user.

    • Autoplay: the video plays automatically when the page loads.

    • Mute: the video plays without sound.

    • Loop: the video repeats continuously.

  4. In the Container tab, optionally rename the widget from its default title. Enter padding values in px for Top, Right, Bottom, and Left as required.

  5. Select Save and Publish when done.

Asset grid widget

Asset grid widgets display a grid of assets from a specified lens, linking through to an asset list page.

The asset grid widget is available in assets portals only.

  1. In the General tab, select a link type:

    • Asset Listing Link:

      1. Enter a page title if required.

      2. Select a lens from the available options. The lens determines which assets display in the grid.

      3. Select a sort order: Name, Type, State, Date Created, or Date Modified.

    • Internal Link:

      1. Select a destination page.

      2. Select a sort order.

  2. In the Layout tab, adjust columns, rows, and gaps as required. Set the image size to Contain or Cover.

  3. In the Background tab, optionally select a background colour from the portal’s theme colours and adjust the opacity using the slider.

  4. Select Save and Publish when done.

    In the published widget, hovering over an asset displays a See All label. Selecting an asset opens the asset list page, filtered to display assets from the configured lens.

Asset search widget

Asset search widgets display a search field that returns assets from a specified lens.

The asset search widget is available in assets portals only.

  1. In the General tab, configure the search fields. All fields are selected by default and can be deselected as required:

    • Name

    • Keywords

    • States

    • Types

  2. Select a link type:

    • Asset Listing Link:

      1. Enter a page title if required.

      2. Select a lens from the available options. The lens determines which assets are available in the search.

    • Internal Link:

      1. Select a destination page from the available options.

  3. In the Background tab, optionally select a background colour from the portal’s theme colours and adjust the opacity using the slider.

  4. In the Container tab, optionally rename the widget. Enter padding values in px for Top, Right, Bottom, and Left as required. Set the alignment of the search bar within the widget: Top, Centre, or Bottom.

  5. Select Save and Publish when done.

    In the published widget, users can enter a free-text search in the search field. If an asset listing link was configured, results are filtered by the search term and the configured lens. If an internal link was configured, the user is directed to the selected asset list page where matching results display.

Typography widget

Typography widgets display font families from typography assets stored in the DAM. Users can switch between fonts in the published widget and optionally download font files.

  1. In the General tab, select Choose Assets.

    The asset picker opens, listing available typography zip files. Select the required files and select Select. The picker closes and the selected fonts display individually in the widget settings.

    To remove a font, expand it in the settings panel and select Remove Font.

  2. Optionally enable Enable Download to allow users to download the font files from the published widget.

  3. In the Colours tab, optionally select a text colour from the portal’s theme colours. Select a background type: None or Colour. If Colour is selected, choose a colour from the portal’s theme colours.

  4. In the Container tab, enter padding and margin values in px for Top, Right, Bottom, and Left as required.

  5. Select Save and Publish when done.

    In the published widget, users can select a font from the dropdown menu to preview it. If downloads are enabled, a download button displays alongside the font selector.

Colour palette widget

Colour palette widgets display a brand colour palette on a CMS page. Palettes must be created in portal styling before they can be selected here. See Create colour palettes for details.

The colour palette widget is available in brand portals only.

  1. In the General tab, select a layout: Columns or Rows.

  2. Select a palette from the Palette dropdown, or select + Add New Palette to create one without leaving the widget settings.

  3. Toggle Show Values on or off. When on, the hex, RGB, and CMYK values for each colour display in the published widget.

  4. In the Background tab, select a background type: None or Colour. If Colour is selected, choose a colour from the portal’s theme colours.

  5. In the Container tab, enter padding and margin values in px for Top, Right, Bottom, and Left as required. Enter a gap value in px to control spacing between colour swatches.

  6. Select Save and Publish when done.

Related pages