How-to guideGet a task done

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.

Widget actions

The following table details the list of available widget actions and the portal types they are available in.

Portal type Assets link Print templates link Digital templates link Projects link Internal page link External link Download assets Preview assets Create project

Dashboard

YES

YES

YES

YES

YES

YES

YES

YES

YES

Content

YES

YES

YES

-

YES

YES

YES

YES

-

Adaptations

-

YES

YES

-

YES

YES

-

-

-

Collaborate

-

-

-

YES

YES

YES

-

-

YES

Brand Portal

YES

YES

YES

-

YES

YES

YES

YES

-

Assets

YES

YES

YES

-

YES

YES

YES

YES

-

Projects

-

-

-

YES

YES

YES

-

-

YES

Analytics

-

-

-

-

YES

YES

-

-

-

Help

-

-

-

-

YES

YES

YES

YES

-
Projects link is currently only available in project search widget.

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, you are redirected to the chosen destination in a new tab.

  2. In the Styles tab, 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.

  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 your 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, you are redirected 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, you are redirected 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.

    • 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 or templates from a specified lens, linking through to an asset list page.

The asset grid widget is available in assets, brand portal, adaptations, content, and dashboard portals.

In the General tab, the widget interaction menu defaults to Open Link. You can change this to None.

  1. Select a link type:

    • Asset Listing Link:

      1. Enter a page title if required.

      2. Select a lens from the available options.

      3. Include assets from subdomains, Include assets from parent domains and Show only public checkboxes. Make a selection as required, they are all unchecked by default.

      4. Select a sort by order.

      5. Select search by options. Name, Keywords, Types, States and Privacy are selected by default.

    • Internal Link: Select a destination page if required.

  2. In the Layout tab, adjust columns, rows, and gaps as required.

  3. Set the image size to Contain or Cover:

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

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

  4. (Optional) In the Styles tab, 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.

  5. Select Save and Publish when done.

    In the published widget, if an asset listing link or print template listing link was configured, results are filtered by the search term and the configured lens. If a digital template listing link was configured, results are filtered to show digital templates matching the keywords selected. If an internal link was configured, selecting an asset directs you to the selected asset list page where matching results display. If other link types are configured, you are redirected to a dynamically created asset list page, displaying all relevant assets.

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, brand portal, adaptations, content, and dashboard portals.

In the General tab, the widget interaction menu defaults to Open Link. You can change this to None

  1. Select a link type:

    • Asset Listing Link:

      1. Enter a page title if required.

      2. Select a lens from the available options.

      3. Include assets from subdomains, Include assets from parent domains and Show only public checkboxes. Make a selection as required, they are unchecked by default.

      4. Select a sort by option.

      5. Select search by options. Name, Keywords, Types, States and Privacy are selected by default.

    • Digital Templates Listing Link

      1. Enter a page title if required.

      2. Select keywords.

      3. Select a sort by option.

    • Print Templates 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.

      3. Include assets from subdomains and Include assets from parent domains checkboxes. Make a selection as required, they are unchecked by default.

      4. Select a sort by option.

      5. Configure the search fields. Name and Keywords are selected by default.

    • Internal Link: Select a destination page if required.

  2. In the Styles tab, 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.

  3. In the Container tab, optionally rename the widget. Enter margin / 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.

  4. Select Save and Publish when done.

    In the published widget, you can enter a free-text search in the search field. If an asset listing link or print template listing link was configured, results are filtered by the search term and the configured lens. If a digital template listing link was configured, results filtered to show digital templates matching the keywords selected. If an internal link was configured, you are redirected to the selected asset list page where matching results display. If a destination page was not configured, you are redirected to the first page they can access within the selected destination portal.

Typography widget

Typography widgets display font families from typography assets stored in the DAM. You 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 you to download the font files from the published widget.

  3. In the Styles tab, optionally select a text and background colour from the portal’s theme colours and adjust the background colour 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.

  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, you 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 Styles tab, 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.

  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.

Project search widget

Project search widgets display a search field that returns projects from specified project types and states.

The project search widget is available in dashboard, collaborate and project portals only

  1. In the General tab, in the Widget Interaction menu Open Link is selected by default but can be changed to None.

  2. Select a link type:

    • Project Listing Link

      1. Enter a page title if required.

      2. Select a Project Type or multiple from the list of available options.The type determines which projects are available in the search.

      3. Include Subtypes and Include Subprojects checkboxes. Make a selection as required, they are unchecked by default.

      4. Select a Project State or multiple from the list of available options. The state determines which projects are available in the search.

      5. Select a sort by option.

      6. Configure the search fields. Name/ID, Keywords, Types and States are selected by default.

      7. Search Operator. “And” and “Or” are selected by default but can be unchecked.

    • Internal Listing Link: Select a destination page if required.

  3. In the Styles tab, 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.

  4. In the Container tab, optionally rename the widget. Enter margin / 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, you can enter a free-text search in the search field. If a project listing link was configured, you are redirected to a dynamically created project list page with results filtered by the search term and configured types/states. If an internal link was configured, you are redirected to the selected project list page where matching results display. If a destination page was not configured, you are redirected to the first page you can access within the selected destination portal.

Project listing counter widget

Project listing counter widgets display a count of projects from specified project types, states and role affiliations.

The project listing counter widget is available in dashboard, collaborate and project portals.

  1. In the General tab, enter a widget heading and description if required.

  2. Select an icon from the list of available options.

  3. Widget Interaction menu Open Link is selected by default but can be changed to None.

  4. Select a link type:

    • Project Listing Link:

      1. Enter a page title if required.

      2. Select a Project Type from the list of available options.The type determines which projects are available in the search.

      3. Include Subtypes and Include Subprojects checkboxes. Make a selection as required, they are unchecked by default.

      4. Select a Project State or multiple from the list of available options. The state determines which projects are available in the search.

      5. Select a Role from the list of available options.

      6. Select a sort by option.

      7. Configure the search fields. Name/ID, Keywords, Types and States are selected by default.

      8. Search Operator. “And” and “Or” are selected by default but can be unchecked.

  5. In the Styles tab, select a button style of either primary, secondary or tertiary.

    • Select a counter, heading and icon colour from the portal’s theme colours.

    • 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.

  6. In the Container tab optionally rename the widget title. Enter margin and/or 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

  7. Select Save and Publish when done.

    In the published widget, you can enter a free-text search in the search field. If a project listing link was configured, you are redirected to a dynamically created project list page with results filtered by the search term and configured type, state(s) and role.

Gallery widget

Gallery widgets display a rotating set of images or videos in a compact, resizable format.

The gallery widget is available in all portal types.

  1. In the General tab, enter an autoplay delay in seconds, determining how long the gallery displays each asset before cycling to the next. For navigation, select arrows, dots, or both, to display once published.

  2. In the Assets tab, any previously added assets or videos are listed, for example Asset 1 and Asset 2. The default resize mode is Cover, but this can be changed to Contain.

    • Reorder assets by hovering over the "=" handle against an asset and dragging it to a new position in the list.

    • Delete an asset using the red bin icon.

    • Select Add Assets to reopen the asset picker and add further assets. Expand an asset using the arrow to replace it, or add an Accessible Asset Label. Drag the blue dot on an asset’s thumbnail to change its focus point.

  3. In the Styles tab, optionally select a background colour and adjust the opacity using the slider. Set a Border Radius for the widget’s corners.

  4. In the Container tab, optionally rename the widget, and enter margin and padding values in px for Top, Right, Bottom, and Left as required. Resize the widget’s height and width by dragging any edge or corner. There is no minimum width.

  5. Select Save and Publish when done.

    In the published widget, navigation dots and arrows display if enabled, allowing you to cycle through the assets. If autoplay is configured, assets rotate automatically at the interval specified in settings. Videos autoplay muted on entry, with no additional playback settings exposed to the creator.

Related pages