Content containers

Your Experience can display in different layouts by using Display Modes. These layouts use containers to publish Elements inside.

Creating containers

1

Setting your display mode

1. Inside an Event, navigate to Event Settings → Display Mode → General

2. Choose which Display Mode you'd like to use. For this example we'll use "Tabs"

3. Create a memorable name for your Default container ID. For this example we'll call it "Live"

2

Configuring your display mode

1. Scroll down to Tabs Mode and change the Highlight type to "Bar" for now

2. Select Create New Containers Item and set ID as "Live" - this will be our default container as defined in step 3

3. Under Display Name let's call it "Tab one" for now

4. Scroll down to hit the BACK button and you'll see your containers list now contains an item named "Tab one" - but we want to create multiple tabs

5. Replicate steps 2, 3 and 4 but use a different ID and Display Name for each, until you have your desired number of tabs set up

6. Hit Save changes once you've configured your tabs

3

Your Event is now in tabs mode

When your Event is live, you will see three different tabs in the frontend Experience. The next section explains how publishing Elements into those containers works

Publishing to containers

1

Create or edit any Element

2

Open your Element and navigate to the Converters tab

There is a field titled "Container ID" - this is where you specify which container(s) your Element should be displayed inside.

3

Your Element currently appears in your default container

If left empty, your Element will be displayed inside your Display Mode's Default Container ID. Whilst setting our Display Mode above, we made this the container ID "Live" - so any Elements without a container ID defined will appear there.

4

Insert the ID of the container you'd like your Element to appear inside

Insert the ID of another tab in the Container ID field and hit Save.

5

Your Element will now appear inside the container you specified

6

Make your Element appear in multiple containers

The same Element can be displayed in multiple containers using comma-separated values. For example if we had three tabs with the IDs "Live" // "Scores" // "Competition" we could insert the following Container IDs to make our Element appear in tabs 1 and 3:

Live, Scores

Containers (such as tabs) remain present in your front end Experience even when no Elements are displayed inside them