Multi-zone Layout multi-zone-layout
The following page describes the usage of multi-zone layout and covers the following topics:
- Overview
- Creating Multi-zone Layout
- Prerequisites
- Using Single Assets in one or more Zones
- Using Sequenced Content in one or more Zones
Overview overview
Multi-zone Layout lets you create multiple zone content and use various 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 that runs in three separate zones on a single channel.
Prerequisites prerequisites
Before you start implementing this functionality, make sure you have the conceptual knowledge on:
Creating Multi-zone Layout creating-multi-zone-layout
While creating a channel, you can use different templates 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
-
Click the Adobe Experience Manager link (top left) and then Screens. Alternatively, you can go directly to:
http://localhost:4502/screens.html/content/screens
. -
Navigate to Channels folder and click Create from the action bar.
-
Click 1x2 Split Screen Channel from the Create wizard.
-
Click Next and enter the title as MultiZone.
-
Click Create to complete the channel creation.
Using Single Assets in one or more Zones using-single-assets-in-one-or-more-zones
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
- Navigate to Zones > Channels> MultiZone.
- Click the MultiZone channel and click Edit from the action bar.
-
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:
Using Sequenced Content in one or more Zones using-sequenced-content-in-one-or-more-zones
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
- Navigate to Zones > MultiZone > Channels and click Create from the action bar.
- Click Channels Folder from the Create wizard and click Next.
- Enter the title as EmbeddedChannels and click Create.
-
Adding two more channels to Channel Folder
- Navigate to Zones > Channels > EmbeddedChannels and click Create from the action bar.
- Click Sequence Channel from the Create wizard to create a channel titled as
Zone1
. - Click
Zone1
and click Edit from the action bar. - Drag and drop few images to this channel.
- Similarly, create another sequence channel titled as
Zone2
in EmbeddedChannels folder. - Drag and drop a video to this channel.
The following figure shows the channels
Zone1
andZone2
: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.
-
Drag and drop the Embedded Sequence component to both the zones.
-
Click the embedded sequence in one of the zones.
-
Click the Configure (wrench) icon to one of the embedded sequences in the editor.
-
Click 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.
-
Creating a Location and a Display creating-location
Create a location and a display so you can view the content in the AEM Screens player.
-
Creating a Location
- Navigate to Zones > Locations folder.
- Click the Locations folder and click Create from the action bar.
- Click Location from the Create wizard and click Next.
- Enter the Title as SanJose and click Create.
-
Creating a Display
- Navigate to Zones > Locations folder.
- Click the SanJose location and click Create from the action bar.
- Click Display from the Create wizard and click Next.
- Enter the Title as Lobby and click Create.
Assigning Channels to the Display channel-channel
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.
-
Click 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.
-
Click Save.
-
Similarly, assign the other two embedded channels (
Zone1
andZone2
) to this display. -
After you assign all three channels to the Lobby display, you should be able to view the assigned channels from the display dashboard.
note important IMPORTANT After you assign the main channel (in this case, MultiZone) to the display, it is mandatory to assign the other two embedded channels Zone1
andZone2
also to the same display.
-
Registering the Device registering-device
When 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.
-
Click the Devices folder and click Device Manager from the action bar.
-
Click Device Registration and click the pending device from the list.
note note NOTE 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 click 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. -
Click Assign Display and click the path to the device config.
note note NOTE 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. -
Viewing the Result viewing-the-result
When you implement multi-zone layouts using the preceding steps, the following output displays.
Check the Screens player so you can view the output that displays the content in two different zones. The left and the right zones (both use an embedded sequence as a component).
The left zone is a sequence channel and the right zone includes a video.