Child Elements

The Child Elements attribute type is only available for Content Builder Elements. It is a container that allows you to add other Content Builder Elements to.

Some example uses include:

- Your template is a full-width template but you need to have some content wrapped in a container to set it to a fixed width. The other method for doing this is to create a one-column Grid Element.

- You have a similar example as the first one but you also need some set fields for the wrapper. For example, your design may call for a background image and some heading text but the content could be open-ended in the wrapper. With the Child Element attribute, you can create a Content Builder element with three fields, a text box for the heading, an image upload field, and a Child Elements field. You then have the flexibility to put any other element within the Child Elements container to build out your content.

Examples

Below are some examples of the Child Element attribute in use. Note, you can have other fields in your Content Builder Element in addition to the Child Element field.

Child Elements component

This shows the Child Element field when child elements have been dragged onto it.

Child Element with other elements

Templates

The data for the Child Elements is essentially an array of the rendered child elements.

Array
(
    [elements] => Array
        (
            [0] => Array
                (
                    [content] => 'Rendered content for the first element'
                )
            [1] => Array
                (
                    [content] => 'Rendered content for the second element'
                )
        )
    [elementCount] => 2
)

Let's assume that you've added a Child Elements field to your Content Builder Element and its template variable is children. Below is an example of how you can access and output content.

{% for element in children.elements %}
    {{ element.content }}
{% endfor %}
Variables Description
elements

The array of rendered elements. Each element's rendered content can be accessed in the content variable.

elementCount

The total number of child elements.