Creating a dynamic grid with content groups

Overview

When creating your experiences, you can utilise content groups to dynamically populate the grid component.

When selecting a dynamically-populated grid, you have two options available to you:

Grid – No Child
Grid – With Child

Grid – No Child

A typical scenario for a grid with no child is a grid of brands, features or industries, which do not require a subsequent detailed page on each grid item.

You may be using this as a navigational aid to other pages, or simply to showcase a list of information.

How to create a Grid – No Child

Create a content group that you would like to use
Go to sections
Either select an existing section, or create a new section
Insert a page
Select “Grid“
Select “No Child“
A tab will appear above the component list called “Content“
Go to the tab “Content“
Go to “Items“
From the dropdown list of “Content Group” select the relevant content group
From the list of content group items, select all items or select individual items by clicking the relevant checkbox(es)
Go to “Slots“
Assign the relevant content group items to the grid card slots
Click “Confirm” and your grid will be dynamically populated.

Note: Grids are not automatically updated with new items that are added to a content group, this ensures that only items that are ready are visible to end users. Please see – Updating a Content Group for Use in a Dynamic Carousel or Grid

Grid – With Child

A typical scenario for a grid with child is a grid of products, services or reference points, which require a more detailed page (the ‘child’ page) on each grid item.

As well as the grid being dynamically populated, the child page is also dynamically populated through a template which you can create.

How to create a Grid – With Child

Creating your Grid

Create a content group that you would like to use.
Go to sections
Either select an existing section, or create a new section
Insert a page
Select “Grid“
Select “With Child“
A tab will appear above the component list called “Content“
Go to the tab “Content“
Go to “Items“
From the dropdown list of “Content Group” select the relevant content group
From the list of content group items, select all items or select individual items by clicking the relevant checkbox(es)
Go to “Slots“
Assign the relevant content group items to the grid card slots
Click “Confirm” and your grid will be dynamically populated, with a child page added.
It is advised at this point to rename the pages appropriately.

Populating your Child Page

Within the child page select a component. A Block Page is recommended
Within the block page, insert a block
Click on the inserted block
Attach content to that block

Previewing your content

Click on “Page Settings“
Click on the dropdown under “Preview content item“
Select any item from your content group to see how your template appears with different items within your content group

Grid Card Slots Explained

Each item in the grid is contained within a card.

The cards can be populated using slots. These slots are shown in this visual:

To populate these slots, select any value from the dropdown list for each slot. The options available will be determine by the content group chosen.

Only applicable field types will be shown (e.g. media fields for image).

If a slot is left “Unassigned” then it will not appear on the card.

Attach Content

With a block selected, click on the attach content button, highlighted below.

Then from block slots, choose any available fields which are present in the content group selected.

Only appropriate fields will be displayed – such as text for text blocks, and media for any media-related blocks. These fields are established when you create your content group.