Defining layouts
What is a layout?
Layouts define the structure of a page part.
For example, a layout divides a page part into two columns with a 8-4 span ratio.
Layouts can nest modules and other layouts, but not templates.
The next paragraph describes the JSON fields that define layouts.
Defining layouts
The layouts' definition is a JSON array of layout definitions.
The fields that define a layout are:
| Name | Type | Is Mandatory | Description |
|---|---|---|---|
| key | Object | Yes | Represents the unique human-readable identifier of the layout |
| slots | Array of string | Yes | List of container names (slots) that can contain layouts or modules |
| label | String | Yes | Friendly name of the layout shown on the Page Builder |
| description | String | No | Description of the layout shown as helper in the Page Builder |
| design | Object | Yes | It defines the layout's structure in terms of number of rows. For each row, it defines the row's number of columns. In turn, each column can be split in rows. The rows definition is recursive. |
| properties | Object | Yes | Properties defined on this module |
key (object fields)
| Name | Type | Is Mandatory | Description |
|---|---|---|---|
| id | String | Yes | Unique identifier (PascalCase, no spaces) |
| namespace | String | Yes | Group of layouts the layout belongs to. By convention, use the format {page-type-name}_Layout. |
design (object fields)
Same definition as in the template JSON.
columns (object fields)
Same definition as in the template JSON.
properties (object fields)
Same definition as in the template JSON.
Samples
4-4-4
The 4-4-4 layout splits the slot in three columns with the same width:
This is it JSON definition:
▼ "root": {
▼ "key": {
"id": "Columns444"
"namespace": "react_Layout"
}
▼ "slots": [
"0": "col1"
"1": "col2"
"2": "col3"
]
"label": "4-4-4"
"description": "It allows to add a 3 columns layout with same width"
▼ "design": {
▼ "rows": [
▼ "0": {
▼ "columns": [
▼ "0": {
"elementType": 2
"width": 33
▼ "rows": [
▼ "0": {
▼ "columns": [
▼ "0": {
"elementType": 0
"name": "col1"
"width": 100
▼ "rows": [
]
}
]
}
]
}
▼ "1": {
"elementType": 2
"width": 33
▼ "rows": [
▼ "0": {
▼ "columns": [
▼ "0": {
"elementType": 0
"name": "col2"
"width": 100
▼ "rows": [
]
}
]
}
]
}
▼ "2": {
"elementType": 2
"width": 33
▼ "rows": [
▼ "0": {
▼ "columns": [
▼ "0": {
"elementType": 0
"name": "col3"
"width": 100
▼ "rows": [
]
}
]
}
]
}
]
}
]
}
▼ "properties": [
▼ "0": {
"name": "removeSectionHtmlTag"
"typeName": "Boolean"
"category": "SEO"
"description": "Remove section html tag for seo optimization if not needed"
"displayName": "Remove section html tag"
"isBrowsable": true
}
▼ "1": {
"name": "isFullWidth"
"typeName": "Boolean"
"category": "Visual"
"description": "Set true if you want a full screen view"
"displayName": "Full screen view"
"isBrowsable": true
}
▼ "2": {
"name": "hideLayout"
"typeName": "Boolean"
"category": "Visual"
"description": "Turn off the layout temporarily"
"displayName": "Hide layout"
"isBrowsable": true
}
▼ "3": {
"name": "colorSchema"
"typeName": "String"
"category": "Visual"
"description": "Default value is light"
"displayName": "Color Schema"
"isBrowsable": true
▼ "pickList": {
▼ "values": [
▼ "0": {
"value": "light"
"description": "Light"
}
▼ "1": {
"value": "dark"
"description": "Dark"
}
]
}
}
▼ "4": {
"name": "removeSpacingTop"
"typeName": "Boolean"
"category": "Visual"
"description": "Set true if you want to remove the top spacing"
"displayName": "Remove top spacing"
"isBrowsable": true
}
▼ "5": {
"name": "removeSpacingBottom"
"typeName": "Boolean"
"category": "Visual"
"description": "Set true if you want to remove the bottom spacing"
"displayName": "Remove bottom spacing"
"isBrowsable": true
}
▼ "6": {
"name": "verticalAlignment"
"typeName": "String"
"category": "Visual"
"description": "Default value is top"
"displayName": "Vertical Alignment"
"isBrowsable": true
▼ "pickList": {
▼ "values": [
▼ "0": {
"value": "top"
"description": "Top"
}
▼ "1": {
"value": "centered"
"description": "Centered"
}
]
}
}
]
}
8-4
The 8-4 layout splits the slot in two columns, the left one double-width of the right one:
This is it JSON definition:
▼ "root": {
▼ "key": {
"id": "Columns84"
"namespace": "react_Layout"
}
▼ "slots": [
"0": "col1"
"1": "col2"
]
"label": "8-4"
"description": "It allows to add a 2 columns layout: first 66%, second 33%"
▼ "design": {
▼ "rows": [
▼ "0": {
▼ "columns": [
▼ "0": {
"elementType": 2
"width": 66
▼ "rows": [
▼ "0": {
▼ "columns": [
▼ "0": {
"elementType": 0
"name": "col1"
"width": 100
▼ "rows": [
]
}
]
}
]
}
▼ "1": {
"elementType": 2
"width": 33
▼ "rows": [
▼ "0": {
▼ "columns": [
▼ "0": {
"elementType": 0
"name": "col2"
"width": 100
▼ "rows": [
]
}
]
}
]
}
]
}
]
}
▼ "properties": [
▼ "0": {
"name": "removeSectionHtmlTag"
"typeName": "Boolean"
"category": "SEO"
"description": "Remove section html tag for seo optimization if not needed"
"displayName": "Remove section html tag"
"isBrowsable": true
}
▼ "1": {
"name": "isFullWidth"
"typeName": "Boolean"
"category": "Visual"
"description": "Set true if you want a full screen view"
"displayName": "Full screen view"
"isBrowsable": true
}
▼ "2": {
"name": "hideLayout"
"typeName": "Boolean"
"category": "Visual"
"description": "Turn off the layout temporarily"
"displayName": "Hide layout"
"isBrowsable": true
}
▼ "3": {
"name": "colorSchema"
"typeName": "String"
"category": "Visual"
"description": "Default value is light"
"displayName": "Color Schema"
"isBrowsable": true
▼ "pickList": {
▼ "values": [
▼ "0": {
"value": "light"
"description": "Light"
}
▼ "1": {
"value": "dark"
"description": "Dark"
}
]
}
}
▼ "4": {
"name": "removeSpacingTop"
"typeName": "Boolean"
"category": "Visual"
"description": "Set true if you want to remove the top spacing"
"displayName": "Remove top spacing"
"isBrowsable": true
}
▼ "5": {
"name": "removeSpacingBottom"
"typeName": "Boolean"
"category": "Visual"
"description": "Set true if you want to remove the bottom spacing"
"displayName": "Remove bottom spacing"
"isBrowsable": true
}
▼ "6": {
"name": "verticalAlignment"
"typeName": "String"
"category": "Visual"
"description": "Default value is top"
"displayName": "Vertical Alignment"
"isBrowsable": true
▼ "pickList": {
▼ "values": [
▼ "0": {
"value": "top"
"description": "Top"
}
▼ "1": {
"value": "centered"
"description": "Centered"
}
]
}
}
]
}