How To Setup Custom Zones with ScreenCloud

This guide concerns the legacy version, ScreenCloud Signage (2015). To review information on using zone layouts with the new and current version, ScreenCloud Studio (2019), please see here.

One of the features ScreenCloud offers is zoning. In the past we’ve documented quite heavily how to create a great looking display using zones. This is because we know, without design skills, how challenging it can be to balance a lot of content with a great looking display.

In this guide, we’re going to walk you through how to step outside of the four custom zoning templates ScreenCloud offers, to create your own custom display.

How to Setup Custom Zones with ScreenCloud

Use our simple guide to learn how and when to setup custom zones within ScreenCloud.

1. Log in to ScreenCloud Signage

Visit signage.screen.cloud/ and log in to your signage account (or set up a new one - using our 14-day free trial).

2. Navigate to your screens

Choose 'screens' from the sidebar and you'll see a list of all of the screens you’ve added. Choose the settings icon next to the screen of your choice to enter the Screen Settings panel.

3. Change layout

Next, click “Change Layout”. Here, you can choose from one of the four preset templates for screen zoning.

To create your own custom zoning layout, click “Edit Custom Layout”.

4. Build your screen’s layout

You can build a custom screen layout by providing a position and size for each of your screen zones. The position is given relative to the top left corner of the screen and all of the values are in percentages (i.e. left and width are percentages relative to your screen's width; top and height are relative to your screen's height).

Once you have entered the first section, click “add section” to enter the next one. You can have a maximum of five sections within your screen.

5. Example zone templates

If you wanted to build a 2x2 layout on the screen with four rectangles, two in the top row and two in the bottom row, below are the values you would enter.

This is how the screen would look:

If you wanted to build a 2x3 layout with two sections in the first row and three sections in the bottom row, here’s how you would set the values:

Bear in mind that because the bottom row width values do not add up to 100, you can expect to see a gap when applying three sections in one row. You can also refer to creating advanced custom zone layouts by using our examples at the bottom of this guide in frequently asked questions.

6. Setting content per zone

Once your zones are set, you can click in each section to choose which content to show. Within each section you have the option to choose a schedule, playlist or individual piece of content.

7. Copying the layout from one screen to another

To copy a zoned layout from one screen to another, select the settings panel of the screen you wish to copy the layout to and select “Copy Layout From Other Screen”.

You can then choose which layout you want to copy and apply it to your screen.

8. Managing multiple screens at once

If you’re looking to set up a series of screens with identical zones, you may want to edit multiple screens simultaneously.

To do this first select your screens by ticking each screen you want to edit (they don’t have to be in the same group).

Next choose “Edit Selected Screens” from the top right-hand corner. Then select “Edit Custom Layout”.

Once you have applied your custom layout, this will be applied to all screens within the selection.

Frequently asked questions:

Can I use custom zones with any hardware?

Please bear in mind that only powerful devices can handle multiple content section on screen. We only recommend using a device such as the Chromebox, the Amazon Fire TV Box or a desktop computer for a custom layout that has more than 3 sections as the content will consume a lot of the hardware resources and bandwidth.

Can I use any apps with a custom layout?

Some apps are not compatible with a custom layout that is too narrow and others are only responsive to a certain layout dimension. To test which apps work with your display, you can use the “Preview screen” feature.

Do you have any pre-set templates for advanced custom layouts?

Currently, there are only four pre-set zone layout templates available. You can refer to some examples below of advanced custom zone layouts you can create using our tool with the provided values for each.

i) 2 zone layout with ticker tape on top:

ii) 2 zone layout with middle ticker tape:

Please note, with this layout the middle ticker tape will block content from the zone underneath.

iii) 3 zone layout with middle ticker tape:

iv) 3 zone layout with two ticker tapes:

v) 4 zone layout with two ticker tapes:

vi) 4 zone layout with one ticker tape, side-section, and two main zones:

vii) 3 zone layout flipped with ticker tape on top

For further questions, please contact support@screen.cloud with details.