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 allows you to 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, please 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 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

  1. Select the Adobe Experience Manager link (top left) and then Screens. Alternatively, you can go directly to: http://localhost:4502/screens.html/content/screens.

  2. Navigate to Channels folder and click Create from the action bar.

  3. Select 1x2 Split Screen Channel from the Create wizard.

  4. Click Next and enter the title as MultiZone.

  5. 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:

  1. Adding Content to the Channel

    1. Navigate to Zones –> Channels–> MultiZone.
    2. Select the MultiZone channel and click Edit from the action bar to open the editor.
  2. 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:

    image

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.

  1. Creating a Channel Folder

    1. Navigate to Zones –> MultiZone –> Channels and click Create from the action bar.
    2. Select Channels Folder from the Create wizard and click Next.
    3. Enter the title as EmbeddedChannels and click Create.

    screen_shot_2018-12-19at125428pm

  2. Adding two more channels to Channel Folder

    1. Navigate to Zones –> Channels –> EmbeddedChannels and click Create from the action bar.
    2. Select Sequence Channel from the Create wizard to create a channel titled as Zone1.
    3. Select Zone1 and click Edit from the action bar to open the editor.
    4. Drag and drop few images to this channel.
    5. Similarly, create another sequence channel titled as Zone2 in EmbeddedChannels folder.
    6. Drag and drop a video to this channel.

    The following figure shows the channels Zone1 and Zone2:

    screen_shot_2018-12-19at125930pm

    The images added to editor of Zone1 sequence channel are shown below:

    screen_shot_2018-12-19at125930pm

    The video added to editor of Zone2 sequence channel is shown below:

    screen_shot_2018-12-19at125930pm

  3. Adding Embedded Sequences (component) to main channel (MultiZone)

    1. Navigate to Zones –> Channels –> MultiZone.

    2. Click Edit from the action bar to open the editor.

    3. Drag and drop the Embedded Sequence component to both the zones.

    4. Select the embedded sequence in one of the zones.

    5. Click the Configure (wrench) icon to one of the embedded sequences in the editor.

    6. Select the channel path as Zones –> Channels –> EmbeddedChannels –> Zone1, as shown in the figure below.

    7. Similarly, add the Zone2 to another embedded sequence component in the editor.

      image

Creating a Location and a Display creating-location

Create a location and a display to view the content in the Screens player.

  1. Creating a Location

    1. Navigate to Zones –> Locations folder.
    2. Select the Locations folder and click Create from the action bar.
    3. Select Location from the Create wizard and click Next.
    4. Enter the Title as SanJose and click Create.
  2. Creating a Display

    1. Navigate to Zones –> Locations folder.
    2. Select the SanJose location and click Create from the action bar.
    3. Select Display from the Create wizard and click Next.
    4. 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.

  1. Assigning Channel to the Display

    1. Navigate to Zones –> Locations –> SanJose–> Lobby.

    2. Select the Lobby display and click Assign Channel from the action bar.

    3. Enter the path to the MultiZone channel in Channel Path.

    4. Set the Supported Events as Initial Load, Idle Screen, and Timer.

    5. Click Save.

      image

    6. Similarly, you must assign the other two embedded channels (Zone1 and Zone2) to this display.

    7. Once you assign all three channels to the Lobby display, you should be able to view the assigned channels from the display dashboard.

      image

      note important
      IMPORTANT
      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.

Registering the Device registering-device

Once you have set up a location and a display, follow the steps below to register the device and assign display to the device.

  1. Registering the Device

    1. Navigate to Zones –> Devices folder.

    2. Select the Devices folder and click Device Manager from the action bar.

    3. Click Device Registration and select 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.

      1. If the title matches the device token, then select the device and click **Register Device** from the action bar.

    4. If the registration code matches the code in the Screens player Device Registration tab, click Validate from the action bar.
      image

    5. Enter the Title as Chrome-Device1 and click Register.

    6. Select Assign Display and select 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

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 an embedded sequence as a component).

The left zone is a sequence channel and the right zone includes a video.

new2-1

recommendation-more-help
adce462a-f916-4dbe-9ab5-0b62cfb0f053