Layout files
To create a layout, you need two files:
Layout configuration file
The name for the configuration file is manifest.json.
The content of the layout configuration file includes:
- Metadata
-
Information about the layout.
- Content zones
-
The rules defining the content areas within the layout.
The following snippet shows the basic structure:
{
"name": "three-columns",
"displayName": "Three columns",
"description": "Three columns side-by-side 25/50/25 layout",
"entry": "markup.hbs",
"zones": [
{
"key": "lhs",
"displayName": "Left panel",
"description": "Left panel content area"
},
{
"key": "main",
"displayName": "Main panel",
"description": "Primary content area"
}
{
"key": "rhs",
"displayName": "Right panel",
"description": "Right panel content area"
}
]
}A complete example of the layout configuration file is available at Configuration file example.
Layout template file
The default name for the template file is markup.hbs.
This file uses the Handlebars templating language.
This file defines the HTML template used by the system to render the layout. It contains placeholders for the content blocks that are added to the layout in the Page Builder.
The following snippet shows how a content zone is rendered:
{{#if zones.main}}
<div class="p-2 w-50">
{{zones.main}}
</div>
{{/if}}A complete example of the layout template file is available at Template file example.