The following page describes the usage of multi-zone layout and covers the following topics:
Multi-zone Layout allows you to create multiple zone content and use a variety of assets such as videos, images, and text that can be combined in a single screen. You can pull in images, videos, and text allowing it all to blend together and create an intuitive digital experience.
As per the project requirements, sometimes you need multiple zones in a channel and edit them as one comprehensive unit. For example, a product sequence with a related social media feed running in three separate zones on a single channel.
Before you start implementing this functionality, please make sure you have the conceptual knowledge on:
While creating a channel, you can use different templates in order to create zones in your channel. You can add a single image, video, or an embedded channel which allows for multiple assets to be shown in a sequence.
Creating a Channel
Select the Adobe Experience Manager link (top left) and then Screens. Alternatively, you can go directly to:
Navigate to Channels folder and click Create from the action bar.
Select 1x2 Split Screen Channel from the Create wizard.
Click Next and enter the title as MultiZone.
Click Create to complete the channel creation.
You can use single assets such as an image or a video in all individual zones. Follow the steps below for implementation:
Adding Content to the Channel
Adding Images to the Channel
To play a single image or a video in two zones, simply drag and drop an image to each zone in the channel editor, as shown in the figure below:
If you want the zones to display sequence of images and a video in the different zones, follow steps below for details.
Creating a Channel Folder
Adding two more channels to Channel Folder
The following figure shows the channels Zone1 and Zone2:
The images added to editor of Zone1 sequence channel are shown below:
The video added to editor of Zone2 sequence channel is shown below:
Adding Embedded Sequences (component) to main channel (MultiZone)
Navigate to Zones --> Channels --> MultiZone.
Click Edit from the action bar to open the editor.
Drag and drop the Embedded Sequence component to both the zones.
Select the embedded sequence in one of the zones.
Click the Configure (wrench) icon to one of the embedded sequences in the editor.
Select the channel path as Zones --> Channels --> EmbeddedChannels --> Zone1, as shown in the figure below.
Similarly, add the Zone2 to another embedded sequence component in the editor.
You must create a location and a display to view the content in the Screens player. Follow the steps below to create a location and a display.
Creating a Location
Creating a Display
You must assign the channels to the display to view the content. Follow the steps below to assign the channel to the display.
Assigning Channel to the Display
Navigate to Zones --> Locations --> SanJose–> Lobby.
Select the Lobby display and click Assign Channel from the action bar.
Enter the path to the MultiZone channel in Channel Path.
Set the Supported Events as Initial Load, Idle Screen, and Timer.
Similarly, you must assign the other two embedded channels (Zone1 and Zone2) to this display.
Once you assign all three channels to the Lobby display, you should be able to view the assigned channels from the display dashboard.
Once you assign the main channel (in this case, MultiZone) to the display, it is mandatory to assign the other two embedded channels Zone1 and Zone2 also to the same display.
Once you have set up a location and a display, follow the steps below to register the device and assign display to the device.
Registering the Device
Navigate to Zones --> Devices folder.
Select the Devices folder and click Device Manager from the action bar.
Click Device Registration and select the pending device from the list.
The title of the device must match the device token (Token field) displayed in the Device Registration tab.
If the title matches the device token, then select the device and click Register Device from the action bar.
If the registration code matches the code in the Screens player Device Registration tab, click Validate from the action bar.
Enter the Title as Chrome-Device1 and click Register.
Select Assign Display and select the path to the device config.
If you are trying to view the content in the Screens player, make sure you click Update Offline Content from the channel dashboard for each of the channels assigned to the display.
Once you implement multi-zone layouts using the preceding steps, the following output displays.
Check the Screens player to view the output that displays the content in two different zones. The left and the right zones (both use embedded sequence as a component).
The left zone is a sequence channel and the right zone includes a video.