Reference library

Article number: 305392

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:

  1. Create a new content layout.
  2. In the relevant location in the layout place the following markup:
<sitekit:zone id="zone name"/>  
  1. Arrange one or more zones in line with the design and advice above.
  2. Save and publish the content layout.

sitekit:zone takes the following arguments

 attribute  used for
 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 
 only (optional)  can be set to either 'text' or 'image'. It locks the zone so that it can only be used for either text or images.

 

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.

Related questions