多区域布局

下页介绍了多区域布局的用法,并涵盖以下主题:

  • 概述
  • 创建多区域布局
  • 前提条件
  • 在一个或多个区域中使用单个资产
  • 在一个或多个区域中使用序列内容

概述

多区域 布局允许您创建多个区域内容并使用可以组合到单个屏幕中的各种资源,如视频、图像和文本。您可以拖入图像、视频和文本,使其融为一体,创造直观的数字体验。

根据项目要求,有时您需要在渠道中使用多个区域并将其作为一个完整的单位进行编辑。例如,某个产品序列具有相关社交媒体信息源,该信息源在单个渠道的三个不同区域中运行。

前提条件

在开始实施此功能之前,请确保您对以下方面具有概念性知识:

创建多区域布局

在创建渠道时,您可以使用不同的模板在渠道中创建区域。 您可以添加单个图像、视频或嵌入式渠道,以便在序列中显示多个资产。

创建渠道

  1. 选择 Adobe Experience Manager 链接(左上方),然后选择​屏幕。或者,您也可以直接转到:http://localhost:4502/screens.html/content/screens

  2. 导航到​渠道​文件夹,然后单击操作栏中的​创建

  3. 从​创建​向导中选择​1x2分屏渠道

  4. 单击​下一步​并输入​title​作为​MultiZone

  5. 单击​创建​以完成渠道创建。

在一个或多个区域中使用单个资产

您可以在所有单独区域中使用单个资产,如图像或视频。 请按照以下步骤实施:

  1. 将内容添加到渠道

    1. 导航到​Zones —> 渠道—> MultiZone
    2. 选择​MultiZone​渠道,然后单击操作栏中的​编辑​以打开编辑器。
  2. 将图像添加到渠道

    要在两个区域中播放单个图像或视频,只需在渠道编辑器中将图像拖放到每个区域即可,如下图所示:

    图像

在一个或多个区域中使用已排序的内容

如果希望区域在不同区域中显示图像和视频的序列,请按照以下步骤了解详细信息。

  1. 创建渠道文件夹

    1. 导航到​Zones —> MultiZone —> 渠道 ,然后单击操作栏中的​创建
    2. 从​创建​向导中选择​渠道文件夹,然后单击​下一步
    3. 输入​EmbeddedChannels​的标题,然后单击​创建

    screen_shot_2018-12-19at125428pm

  2. 将另外两个渠道添加到渠道文件夹

    1. 导航到​Zones —> 渠道 —> EmbeddedChannels ,然后单击操作栏中的​创建
    2. 从​创建​向导中选择​序列渠道​以创建标题为​Zone1​的渠道。
    3. 选择​Zone1​并单击操作栏中的​编辑​以打开编辑器。
    4. 将很少的图像拖放到此渠道。
    5. 同样,在​EmbeddedChannels​文件夹中创建另一个标题为​Zone2​的序列渠道。
    6. 将视频拖放到此渠道。

    下图显示了渠道​Zone1​和​Zone2:

    screen_shot_2018-12-19at125930pm

    添加到​Zone1​序列渠道编辑器的图像如下所示:

    screen_shot_2018-12-19at125930pm

    添加到​Zone2​序列渠道编辑器的视频如下所示:

    screen_shot_2018-12-19at125930pm

  3. 将嵌入式序列(组件)添加到主渠道(MultiZone)

    1. 导航到​Zones —> 渠道 —> MultiZone

    2. 单击操作栏中的​编辑​以打开编辑器。

    3. 将​嵌入式序列​组件拖放到这两个区域。

    4. 在其中一个区域中选择嵌入式序列。

    5. 单击编辑器中某个嵌入式序列的​配置(扳手)图标。

    6. 将渠道路径选为​Zones —> 渠道 —> EmbeddedChannels —> Zone1,如下图所示。

    7. 同样,将​Zone2​添加到编辑器中的其他嵌入式序列组件。

      图像

创建位置和显示屏

您必须创建一个位置和显示屏来视图Screens播放器中的内容。 请按照以下步骤创建位置和显示屏。

  1. 创建位置

    1. 导航到​Zones —> Locations​文件夹。
    2. 选择​位置​文件夹,然后单击操作栏中的​创建
    3. 从​创建​向导中选择​位置,然后单击​下一步
    4. 在​Title​中输入​SanJose,然后单击​创建
  2. 创建显示屏

    1. 导航到​Zones —> Locations​文件夹。
    2. 选择​SanJose​位置,然后单击操作栏中的​创建
    3. 从​创建​向导中选择​显示,然后单击​下一步
    4. 将​标题​输入为​休息室,然后单击​创建

将渠道分配给显示

您必须将渠道分配给显示屏以视图内容。 请按照以下步骤将渠道分配给显示屏。

  1. 将渠道分配给显示屏

    1. 导航到​Zones —> 位置 —> SanJose—> Lobby

    2. 选择​休息室​显示屏,然后单击操作栏中的​分配渠道

    3. 在​渠道路径​中输入​MultiZone​渠道的路径。

    4. 将​支持的事件​设置为​初始负载空闲屏幕​和​计时器

    5. 单击​保存

      图像

    6. 同样,您也必须将另外两个嵌入渠道(Zone1​和​Zone2)分配给此显示屏。

    7. 将所有三个渠道分配给​Lobby​显示屏后,您应能够从显示仪表板视图分配的渠道。

      图像

      重要

      一旦将主渠道(在本例中为​MultiZone)分配给显示屏,则必须将另外两个嵌入式渠道​Zone1​和​Zone2​也分配给同一显示屏。

注册设备

设置位置和显示屏后,请按照以下步骤注册设备并为设备分配显示屏。

  1. 注册设备

    1. 导航到​Zones —> Devices​文件夹。

    2. 选择​Devices​文件夹,然后单击操作栏中的​Device Manager

    3. 单击​设备注册​并从列表中选择挂起的设备。

      注意

      设备的标题必须与​设备注册​选项卡中显示的设备令牌(令牌​字段)匹配。

    4. 如果标题与设备令牌匹配,则选择设备,然后单击操作栏中的​注册设备

    5. 如果注册代码与Screens播放器​设备注册​选项卡中的代码匹配,请单击操作栏中的​验证

      图像

    6. 将​Title​输入为​Chrome-Device1​并单击​注册

    7. 选择​指定显示​并选择设备配置的路径。

    注意

    如果您尝试视图Screens播放器中的内容,请确保为分配给显示屏的每个渠道单击渠道仪表板中的​更新脱机内容

查看结果

使用上述步骤实施多区域布局后,将显示以下输出。

选中Screens播放器以视图显示两个不同区域中内容的输出。 左侧和右侧区域(两者都使用嵌入式序列作为组件)。

左侧区域是序列渠道,右侧区域包括视频。

new2-1

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now