Before you add content we recommend to configure the 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.
Design
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
Conditional Play
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.
Conditions can be set to display the zone depending on 'Times', 'Days', Dates' or 'Weather'. These settings (time, date & weather) are taken from the device it is showing on.
To add conditional play to a zone, select the zone and add the conditions using the conditional play option and then pressing 'Save'.
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.
Conditional play options are:
Days - specify which days of the week the zone will display on
Time - specify the time period in which the zone will display on
Dates - specify which date period the zone will display on
Weather - specify the temperature threshold(s) the zone will display on
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 page 2 by choosing 'Tap' as our interaction, 'Show Page' as our action and 'Page 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
Visibility
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.
Global
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.
Lock
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.
