A zone is a specified area, on a page, within a layout that you add content to. Each page can have an unlimited number of zones, and within each zone you can have unlimited number of content items, (known as playlist items) which in turn make a playlist.

When you first create a layout and you enter the layout builder you will see a zone already on your page with a text playlist item inside. You can either edit this zone, delete the zone to start from scratch or add more new zones.

Before you add your content you will need to configure your zone by editing the 'Zone Options'. Here you can edit the design of the zone, its visibility as well as adding conditional play and interactions. To edit the zone options, your designated zone has to be selected from the list of zones on the left hand side. When a zone has been selected, you will see a green tick next to the zone name, the zone highlighted on your page and the zone options will appear. You can edit a number of zones at the same time by selecting multiple zones and any setting changed will be saved to the zones selected.

Using the design options you can change the zone name, its dimensions and position as well as add a background, border and an animation. 

Select the 'Design' option to edit these options on your selected zone. The dimensions and position of the zone can be set by changing the number values in the boxes provided or by using the drag and drop functionality on the WYSIWYG layout builder, the zone can be dragged and dropped / resized as desired.

Full breakdown of all Design options:

By default, zones will always appear, however if you want to set conditions so the zone only appears when the conditions are met, you can do so by adding Conditional Play to the zone.

To add conditional play to a zone, select the zone and add the rules using the conditional play option.

It is possible to have multiple conditions set for a zone, for instance, if we had a 'Breakfast' zone that we only wanted to display between 07:30 - 11:30, Mon - Fri, we would set up our conditions as per the image below.

If you are designing touch content, you can set interactions on a zone. These could be added to carry out actions such as 'Hide zone', 'Show next page' or 'activate specific playlist item'. 

To add interactions you select the zone and choose 'Interactivity', then 'Add New'. Now choose the touch event type, action and target, before finally pressing pressing 'Save'. You can add multiple touch events to a zone to perform multiple actions as required.
​
We have set an interaction on our zone to, once tapped show zone 2, which is hidden using the visibility option. Our interaction would be 'Tap', 'Show Zone' as our action and 'Zone 2' as our target.

The touch event options available are:

All zones are visible by default. To hide a zone press the visibility button, this will turn the button green and fade your zone out in the  builder so you can still see where it is positioned but will be hidden on playback. 

You could then use either content triggers or touch interactions on other pages, zones or playlist items, to show the zone.

By default, a zone added to a page will only appear on that page, however for multi page layouts it can sometimes be useful to have the same zone appear on all pages. To do this you set the zone to be a Global zone.
​
If you set a zone to be global, it, along with all of its settings and playlist, will appear on each additional page you add to the layout. 

Zones that hold widgets such as the Time widget or RSS widget are a prime example of a 'Global' zone, in that you want that content to be displayed on all of your pages within the layout.

You can lock your zone by pressing the 'Lock' button which would then stop the zone options being edited. You will see the button turn green, making the options unavailable and a padlock icon is applied to the zone. When you need to edit your zone again simply unlock it by pressing the lock button again.

Note: With the zone locked you still have the ability to edit your zone playlist content, this simply locks the zone in place and all zone options. 

If we add conditional play or use any of the visibility, global or lock options, icons will be displayed next to the zones name.

As mentioned before, you can have an unlimited number of zones. To add a zone, simply press the 'Add Zone' '+' button above the list of zones, you will then be able to configure its settings and playlist.

You can also duplicate a zone by selecting the zone(s) you want to duplicate then press 'Duplicate zone'. This will duplicate the zone(s) selected. 

You can duplicate zone(s) from either the left hand side bar: 

or in the zone options panel when a zone is selected:

Zones in the layout builder are layered, meaning whatever is towards the top of the list sits on top. This can be very useful for using image overlays on zones and general layout design.
​
To change the order (hierarchy) of zones on a page, click and hold the relevant zone you want to move in the main layout menu (left hand side on desktop), drag it to the new desired new order / layer and then release.

In a similar way to duplicating a zone, you can delete a zone in a couple of ways. One being to select it and press the delete button from the left hand side bar 

or by deleting it using the zone options once a zone has been selected. 

Note: When you delete a zone, it will also delete the zone playlist.

To find out how to add content your zone, click here

Further Reading: Read here all other Zone Articles.