Creating editable zones
Creating zones in content layouts is straightforward and uses a modified version of the Sitekit namespace markup. Before beginning though you need to consider your site design.
The key thing to think of is that you need to think in columns rather than grids. Your user can put any number of editable elements on top of each other in zoned columns you specify so your main design decision is the proportion of the columns. e.g. 3 columns, a 2 to 1 ratio etc. Bear in mind that you can still do grids to create overarching hero banners and then use conditional logic to blank them if they're not populated by any element. Typical examples of zone layouts are below:
To create a zone based content layout do the following:
- Create a new content layout.
- In the relevant location in the layout place the following markup:
<sitekit:zone id="zone name"/>
- Arrange one or more zones in line with the design and advice above.
- Save and publish the content layout.
sitekit:zone takes the following arguments
|id||can be any meaningful name, e.g. 'left-column', 'header' etc|
|hidden||if set to true can be used to prevent it displaying front-end, i.e. it becomes visible in admin only|
|title||supported in admin only because no markup is rendered for the zone itself front-end|
|class||supported in admin only because no markup is rendered for the zone itself front-end|
When you create a new page using the newly created zone layout the empty zones will be highlighted with green dots. You can drag text blocks or image blocks from the palette on the left into any of the zones. The blocks in each zone can be freely dragged around to re-order them in zones or moved into different zones. To delete a block, you can drag it and drop it onto the trash. Changes can be saved or published.