Bento box tutorial

The Bento box container content type is the container for the Bento box item content type. A Bento box item represents an individual box within the container and up to 9 can be displayed per container. This guide covers both content types

Creating sections

Below is the structure for the Bento box. It contains a Parent section and a single child section. The parent section will hold the the Bento box container. The child section will hold the the individual Bento box item content types.

bento-box-structure

  • Create the parent section and child section first (i.e. the pages).
  • Then add the Bento box item CTs to the child section.
  • Then add the Bento box container CT to the parent section.

It is recommended to follow the steps in the above sequence. The Select Child Section field in the Bento box container is mandatory (see the ). If there is no child section to link to then the CT can't be saved. 

Bento box item

Image showing a child section with 6 Bento box items

Bento box child section

Image showing a Bento box item

Bento box item


Bento box container

Bento box container

Bento box item Content Type

ID: 458
Name: Bento box item
Description: Individual item (box) that will be displayed by the bento box container

Content Element Details

NameDescriptionSizeTypeRequired
NameThe Name element80 CharactersPlain Texttrue
TitleBento box title. Use <br> to shift text to a new line.120 CharactersPlain Textfalse
Background imageOptional background image for bento box item80 CharactersMediafalse
IconBento box icon (jpg or png)80 CharactersMediafalse
Popup titleOptional popup title80 CharactersPlain Textfalse
Popup descriptionOptional description700 CharactersHtmlfalse

Bento box item

Image showing a child section with 6 Bento box item content types. Up to 9 can be output per container.

Bento box child sectionBelow is an image showing a Bento box item

Bento box item

Bento box container Content Type

ID: 457
Name: Bento box container
Description: This is the container to house all bento box items. Up to 9 items can be output per container.

Content Element Details

NameDescriptionSizeTypeRequired
NameThe Name element80 CharactersPlain Texttrue
Title80 CharactersPlain Textfalse
Select Child Section80 CharactersSection/Content Linktrue

Bento box container

An image showing a Bento box container. Please note Select Child Selection field is mandatory so you must first create the child section.

Bento box container