What is a zone?
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:
Name – edit the name of the zone
Dimensions; Width and Height - specify the width and height of the zone in px
Position; Top and Left - specify the distance from the top and left in px the zone should be placed.
Position; Rotate - specify the angle the zone will be positioned (0° to 360°)
Background; Image -select an image for the background of the zone
Background; Colour – specify a colour for the background of the zone
Background; Repeat – if using a background image, set if it should repeat or not
Border; Size – specify the size of a border to be added to the zone. (Default: zero will add no border to the zone)
Border; Colour – specify the colour of the border for the zone
Border; Style - specify a border style (solid, dashed or dotted)
Border; Radius – specify the radius of the border corners
Shadow; Offset X - specify the distance of the shadow on the zone on a vertical axis
Shadow; Offset Y - specify the distance of the shadow on the zone on a horizontal axis
Shadow; Blur - specify how much blur you is added to the zone shadow
Shadow; Colour - select the colour of the shadow, including opacity
Animation; Type - choose from a range of animation styles for how the zone will first appear on a page
Animation; Delay - specify how long until the zone should appear after display the page in which it resides
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 our zone is not eligible to show, it will show us a small message.
To find out more information regarding conditional play, click here.
Interactions - Touch events
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:
Gesture – add a specified touch event to the zone (tap, swipe)
Action – specify what you want to happen when the zone is touched (show, hide zones, pages etc)
Target – specify what the touch event will target (new page, another zone etc)
Remove – delete the touch event from the zone
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.
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.
Add a new zone
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.
Duplicate a zone
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.
Delete a zone
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.