传送横幅 carousel-banners
轮播横幅通过轻松创建交互式轮播促销内容并将其交付到任何屏幕,使营销人员能够推动转化。
创建和修改促销横幅中提供的内容可能非常耗时,从而限制您快速发布新内容或使其更具针对性的能力。 轮播横幅允许您快速创建或修改旋转横幅,并添加交互功能,例如链接到产品详细信息或相关资源的热点。 您可以将这些内容交付到任何屏幕,从而更快地向市场提供新的促销内容。
轮播横幅由带有 CAROUSELSET 字样的横幅指定:
在您的网站上,轮播横幅可以如下所示:
在此,您可以通过选择编号来浏览图像。 此外,幻灯片会根据您可以自定义的时间间隔自动旋转。 传送横幅中的图像同时支持热点和图像映射。 用户可以选择或转到超链接或访问概览窗口。
在此示例中,用户已选择了一个图像映射并访问手套的“概览”窗口:
观看如何创建轮播横幅 watch-how-carousel-banners-are-created
观看有关如何创建轮播横幅的演练(持续时间:10分33秒)。 您还将了解如何预览、编辑和交付轮播横幅。
快速入门:轮播横幅 quick-start-carousel-banners
要让您快速启动并运行,请执行以下操作:
-
识别热点和图像映射变量(仅适用于使用Adobe Experience Manager Assets + Dynamic Media的客户)
首先,确定现有快速视图实施使用的动态变量。 这样做有助于在Experience Manager Assets中的轮播横幅创建过程中正确输入热点和图像映射数据。
-
可选:根据需要创建轮播集查看器预设。
如果您是管理员,则可以通过创建自己的轮盘查看器预设来自定义轮盘的行为和外观。 主要好处是,您可以对多个轮播重复使用此自定义查看器预设。 但是,用户可以选择在创作轮播时直接自定义轮播的行为和外观。 当您希望为给定的轮播提供特定设计时,首选使用此方法。
-
上传要使其成为交互式内容的图像横幅。
-
在轮播集中,用户浏览横幅图像并选择热点或图像映射以访问相关内容。
要在Assets中创建传送集,请选择 创建,然后选择 传送集。 将资源添加到幻灯片,然后选择 保存。 您还可以直接在编辑器中编辑轮播集的外观和行为。
-
将一个或多个热点或图像映射添加到图像横幅。 然后,将每个项目与操作(如链接、快速视图或体验片段)关联。 添加热点或图像映射后,可通过发布轮播集来完成此任务。 发布操作将创建可用于复制并应用于您的网站登陆页面的嵌入代码。
请参阅(可选)预览轮播横幅 — 可选。 如果需要,您可以查看轮播集的表示形式并测试其交互性。
-
您可以像发布任何资源一样发布传送集。 在Assets中,导航到轮播集并将其选中,然后选择 Publish。 发布轮播集将激活URL和嵌入字符串。
-
执行下列操作之一:
-
将轮播横幅添加到您的网站页面您可以将复制的轮播横幅URL或嵌入代码添加到网站页面。
- 将轮播横幅与现有快速视图集成。 如果您使用的是第三方Web内容管理系统,则必须将新的轮播横幅与网站上现有的快速视图实施集成。
-
在Experience Manager中将轮播横幅添加到您的网站。 如果您是Experience Manager Sites客户,则可以使用交互式媒体组件将轮播集直接添加到页面。
-
识别热点和图像映射变量 identifying-hotspot-and-image-map-variables
首先,确定现有快速视图实施使用的动态变量。 此方法可帮助您在Experience Manager Assets中的轮播集创建过程中正确输入热点或图像映射数据。
将热点或图像映射添加到横幅图像时,需要分配SKU(库存单位)。 您还可以为每个热点或图像映射分配可选的额外变量。 此类变量稍后用于匹配热点或图像映射与快速视图内容。
正确标识要与热点或图像映射数据关联的变量的数量和类型很重要。 添加到横幅图像的每个热点或图像映射都必须包含足够的信息,以便明确标识现有后端系统中的产品。 同时,请确保每个热点或图像映射所包含的数据不超过所需的数量。 这是因为这会使数据录入过程过于复杂和进行中的热点或者图像映射管理更加容易出错。
有多种不同的方法可以识别一组要用于热点或图像映射数据的变量。
有时,咨询负责现有Quickview实施的IT专家就足够了。 他们可能会知道系统中用于标识快速视图的最小数据集。 但是,可以简单地分析前端代码的现有行为。
大多数概览实施都使用以下范例:
- 用户在网站上激活用户界面元素。例如,选择 概观 按钮。
- 如果需要,网站会向后端发送Ajax请求以加载概览数据或内容。
- 概览数据将转换为内容,为在网页上呈现做准备。
- 最后,前端代码在屏幕上以可视方式呈现此类内容。
然后,方法是访问实施概览功能的现有网站的不同区域。 然后触发概览并获取网页发送的Ajax URL,以加载概览数据或内容。
通常,您无需使用任何专门的调试工具。 现代Web浏览器的功能是Web检查器,这些检查器可以完成适当的工作。 以下是一些包含Web检查器的Web浏览器示例:
- 要在Google Chrome中查看所有传出的HTTP请求,请按F12 (Windows®)或Command-Option-I (Mac)打开开发人员工具面板。 选择“网络”选项卡。
- 在Firefox中,您可以通过按F12 (Windows®)或Command-Option-I (Mac)来激活Firebug插件。 使用其“网络”选项卡,或使用内置的“检查器”工具及其“网络”选项卡。
在浏览器中打开网络监视时,将触发页面上的快速视图。
现在,在网络日志中找到快速视图Ajax URL,并复制记录的URL以供将来分析。 通常,在触发概览时,会向服务器发送大量请求。 通常,快速视图Ajax URL是列表中的第一个页面之一。 它具有复杂的查询字符串部分或路径,并且其响应MIME类型为text/html
、text/xml
或text/javascript
。
在此过程中,请务必访问网站的不同区域,以及不同的产品类别和类型。 原因是快速视图URL具有给定网站类别所共有的部分,但只有在访问网站的其他区域时才发生更改。
最简单的例子是,概观URL中的唯一变量部分是产品SKU。 在这种情况下,将hotspot或图像映射添加到横幅图像时,SKU值是唯一需要的数据块。
但是,在复杂的情况下,除了SKU之外,快速视图URL还具有不同的变化元素。 其中一些元素包括类别ID、颜色代码、大小代码等。 在此类情况下,每个元素都是热点中的单独变量,或者轮播横幅功能中的图像映射数据定义。
请考虑以下概览示例URL及其生成的热点或图像映射变量:
上传图像横幅 uploading-image-banners
如果您已上传要使用的图像,请前进到下一步创建传送集。 启用Dynamic Media后,必须上传轮播中使用的图像。
要上传图像横幅,请参阅上传资产。
创建传送集 creating-carousel-sets
创建传送集:
-
在Assets中,导航到要创建传送集的文件夹,然后转到 创建>传送集。
-
在“轮播横幅编辑器”页面上,选择 点击以打开资产选择器 以选择您的第一张幻灯片的图像。
在“轮播横幅编辑器”页面上,执行以下任一操作:
-
在页面的左上角附近,选择 添加幻灯片 图标。
-
在页面中间附近,选择 点按以打开资产选择器。
选择以选择要包含在轮播集中的资源。 选定资源上有一个复选标记图标。 完成后,在页面的右上角附近,选择 选择。
使用资产选择器,您可以通过键入关键字并选择 返回 来搜索资产。 您还可以应用过滤器来优化搜索结果。您可以按路径、收藏集、文件类型和标记进行过滤。选择筛选器,然后在工具栏中选择 筛选器 图标。 通过选择“视图”图标并选择 列视图、卡片视图 或 列表视图 来更改视图。
有关详细信息,请参阅使用选择器。
-
-
继续添加幻灯片,直到在轮播集中添加了所有要旋转的图像为止。
-
(可选)执行以下任一操作:
-
如有必要,请拖动幻灯片以重新排序集合列表中的图像。
-
要删除图像,请选择该图像,然后在工具栏中选择 删除幻灯片。
-
要应用预设,请在页面右上角附近选择预设下拉列表,然后选择要应用于该设置的预设。
要删除幻灯片,请选择幻灯片。 在工具栏上,选择 删除幻灯片。 要移动幻灯片,请选择重新排序图标并移动到所需位置。
-
-
在幻灯片中添加图像后,您可以向图像添加热点、图像映射,或同时添加这两者。 查看将热点或图像映射添加到图像横幅。
-
您可以更改轮播集的视觉设计和行为。 如果要调整轮播横幅的显示方式或特定组件的行为,请选择 行为 和 外观 选项卡。 有关如何使用查看器编辑器的详细信息,请参阅管理查看器预设。
note note NOTE 对于轮播横幅,您可以调整以下内容: - 图像显示的持续时间。 默认情况下,每个图像会显示9秒。
- 动画。 默认情况下,每个幻灯片过渡都是淡入淡出。 您可以将其更改为幻灯片过渡。
- 按钮的样式。 通过选择每个点或数字,用户可以旋转横幅。 您可以更改设置指示器按钮的显示位置(以及数字或点线样式)和大小。
- 更改图像映射的高亮样式或热点图标。
- 在编辑查看器预设之前,请选择预设所基于的样式。 如果未选择样式,则在开始编辑查看器预设时,如果更改为其他预设,则会丢失所有更改。
您还可以预览轮播横幅的外观。 查看(可选)预览轮播横幅。
-
完成后选择 保存。
将热点或图像映射添加到图像横幅 adding-hotspots-or-image-maps-to-an-image-banner
您可以使用轮播集编辑器将热点或图像映射添加到横幅中。
添加热点或图像映射时,可以将它们定义为快速视图弹出显示、超链接或体验片段。
请参阅体验片段。
将热点或图像映射添加到图像时,请记得保存所做的工作。 在当前创建/编辑会话期间,支持页面右上角附近的“撤消”和“重做”选项。
创建完轮播横幅后,您可以选择使用预览来查看向客户展示轮播横幅的方式。
查看(可选)预览轮播横幅。
要将热点或图像映射添加到图像横幅:
-
在Assets中,导航到要使其成为交互式内容的轮播集。
-
选择轮播集并选择 编辑。 此时将打开轮播查看器编辑器。
-
选择要使其成为交互式幻灯片的幻灯片。
-
在页面的左上角附近,选择 热点 或 图像映射。
-
执行以下任一操作:
- 对于热点:在图像上,选择要显示热点的位置。
- 对于图像映射:在图像上,从左上角拖动到右下角以创建图像映射区域。 您可以通过拖动角来调整图像映射的大小。
如有必要,请将热点或图像映射拖动到新位置。 或者,使用键盘箭头键控制选定热点的位置。 根据需要添加更多热点或图像映射。
要删除热点或图像映射,请选择 操作 选项卡。 在 映射和热点 标题下,从 选定类型 下拉列表中选择要删除的热点或图像映射的名称。 选择菜单旁边的 垃圾桶 图标,然后选择 删除。
-
在“名称”文本字段中,键入热点或图像映射的名称。 此名称还显示在 映射和热点 下拉列表中。 提供名称可让您在决定将来更改热点或图像映射时轻松识别它。
-
在 操作 选项卡中执行以下操作之一:
-
选择 概览。
-
如果您是Experience Manager Sites 客户,请选择产品选取器图标(放大镜)以打开“选择产品”页面。 要返回到轮播横幅编辑器,请选择要使用的产品,然后选择页面右上角的复选标记。
-
如果您不是Experience Manager Sites 客户:
-
-
选择 超链接。
-
如果您是Experience Manager Sites客户,请选择站点选择器图标(文件夹)以导航到URL。
note note NOTE 如果您的交互式内容包含具有相对URL的链接,尤其是指向Experience Manager Sites页面的链接,则基于URL的链接方法不可用。 -
如果您是独立客户,请在href文本字段中指定链接网页的完整URL路径。
-
请确保您指定是在新的浏览器选项卡(推荐的默认值)中还是同一选项卡中打开链接。
有关详细信息,请参阅使用选择器。
-
选择 体验片段。
-
如果您是Experience Manager Sites客户,请选择“搜索”图标(放大镜)以打开“体验片段”页面。 要返回热点管理页面,请选择要使用的体验片段,然后在页面的右上角选择 选择。
查看体验片段。 -
指定体验片段在横幅上显示的宽度和高度。
note note NOTE 将查看器嵌入体验片段时,不支持轮播横幅中的社交媒体共享工具。 要解决此问题,您可以使用或创建没有社交媒体共享工具的查看器预设。 通过此类查看器预设,可成功地将其嵌入体验片段中。
-
您还可以预览轮播横幅的外观。 查看(可选)预览轮播横幅。
-
-
选择 保存。
-
Publish传送集。 发布会创建可在网站页面上使用的嵌入代码或URL。 如果您是Experience Manager Sites客户,请直接将轮播集添加到您的网页。
查看Publish资源。
请参阅向网站登陆页面添加轮播集
编辑传送集 editing-carousel-sets
您可以对轮播集执行各种编辑任务,如下所示:
要编辑传送集:
-
执行以下任一操作:
-
将鼠标悬停在轮播集资源上,然后选择 编辑(铅笔图标)。
-
将鼠标悬停在轮播集资源上,选择 选择(复选标记图标),然后在工具栏上选择 编辑。
-
选择一个轮播集资源,然后在页面的左上角选择 编辑(铅笔图标)。
-
-
要编辑轮播集,请执行以下任一操作:
- 要添加幻灯片,请选择 添加幻灯片 图标。 导航到要添加到该幻灯片的资产,然后选择复选标记。
- 要重新排序幻灯片,请将幻灯片拖到新位置(选择重新排序图标以移动项目)。
- 要添加热点或图像映射,请选择热点或图像映射图标,并查看将热点和图像映射添加到图像横幅。
- 要编辑轮播集的外观或行为,请选择 外观 选项卡或 行为 选项卡,然后设置所需的选项。
- 要编辑热点或图像映射,请在相应的幻灯片上选择一个热点或图像映射。 在 操作 选项卡下,进行更改。
- 要删除幻灯片,请选择它,然后在工具栏中选择 删除幻灯片。
- 要应用预设,请在页面右上角附近选择 预设 下拉列表,然后选择查看器预设。
- 要删除整个传送集,请导航到该传送集,选择它,然后选择 删除。
note note NOTE 如果您正在编辑具有热点的交互式图像并裁切图像,则将删除您的热点。
(可选)预览轮播横幅 optional-previewing-carousel-banners
您可以使用“预览”来查看向客户显示的轮播横幅。 使用预览,您还可以测试轮播横幅的热点和图像映射,以确保它们按预期运行。
如果对轮播横幅满意,则可以发布该横幅。
请参阅在网页上嵌入视频查看器或图像查看器。
查看将URL链接到您的Web应用程序。 如果您的交互式内容包含具有相对URL的链接,尤其是指向Experience Manager Sites页面的链接,则基于URL的链接方法不可用。
请参阅将Dynamic Media Assets添加到页面。
您可以从轮播编辑器(首选方法)或 查看器 列表中预览轮播横幅。
要选择性地预览轮播横幅:
-
在 Assets 中,导航到您创建的现有轮播横幅,然后选择以将其打开。
-
选择 编辑。
-
在工具栏右角的查看器预设列表中,选择一个查看器以预览轮播横幅。
-
选择 预览。
-
要测试其关联的操作,请选择图像上的热点或图像映射。
要从查看器列表中预览轮播横幅:
- 在 Assets 中,导航到您创建的现有轮播横幅,然后选择以将其打开。
- 在“预览”页面的左上角附近,选择“内容”图标。
- 在页面左侧面板中的 查看器 列表中,选择要使用的轮播横幅查看器预设的名称。
- 要测试其关联的操作,请选择图像上的热点或图像映射。
Publish轮播横幅 publishing-carousel-banners
要使用轮播,您必须发布它。 发布轮播集将激活URL和嵌入代码。 此外,它还会将轮播发布到Dynamic Media云,该云与CDN集成以实现可扩展的高性能交付。
有关如何发布轮播横幅的信息,请参阅Publish Dynamic Media Assets。
向您的网站页面添加轮播横幅 adding-a-carousel-banner-to-your-website-page
上传横幅图像以创建轮播后,将热点或图像映射(或同时添加两者)添加到横幅。 已发布轮播集。 您现在可以将其添加到现有网站页面了。
但是,如果您是独立的Experience Manager Assets客户,则可以手动将轮播横幅添加到网站登陆页面。
-
复制已发布的轮播集的嵌入代码。
请参阅在网页上嵌入视频查看器或图像查看器。 -
将您从Experience Manager Assets复制的嵌入代码添加到您的网页。
复制的嵌入代码是响应式的,因此会自动适应页面的嵌入区域。
将轮播横幅与现有的概览集成 integrating-the-carousel-banner-with-an-existing-quickview
注意:仅当您是独立的Experience Manager Assets客户时,此步骤才适用。
此过程的最后一步是将轮播横幅与网站上现有的概览实施集成。 每个快速视图实施都是独一无二的,需要一种通常需要前端IT人员帮助的特定方法。
现有的概览实施通常表示在网页上发生的一系列相互关联的操作,顺序如下:
- 用户在网站的用户界面中触发元素。
- 前端代码根据步骤1中触发的用户界面元素获取快速视图URL。
- 前端代码使用在步骤2中获取的URL发送Ajax请求。
- 后端逻辑将相应的快速视图数据或内容返回给前端代码。
- 前端代码加载快速视图数据或内容。
- 前端代码可以选择将加载的快速视图数据转换为HTML表示形式。
- 前端代码显示一个模式对话框或面板,并在屏幕上为用户呈现HTML内容。
这些调用不代表网页逻辑可以从任意步骤中调用的独立公共API调用。 相反,它是一个链接调用,其中每个下一步都隐藏在上一步的最后阶段(回调)中。
在轮播横幅替换步骤1或部分步骤2的同时,当用户选择热点或图像映射时,这种交互由查看器处理。 查看器会向网页返回一个事件,其中包含之前添加的所有热点或图像映射数据。
在此类事件处理程序中,前端代码执行以下操作:
- 侦听轮播横幅发出的事件。
- 根据热点或图像映射数据构造快速视图URL。
- 触发从后端加载快速视图并在屏幕上呈现以供显示的过程。
Experience Manager Assets返回的嵌入代码已具有标记为注释掉的现成事件处理程序。
因此,只需取消注释代码,并用特定网页特定的代码替换虚拟处理程序主体即可。
构建快速视图URL的过程与之前用于识别热点和图像映射变量的过程相反。
请参阅识别热点和图像映射变量。
触发快速视图URL和激活快速视图面板的最后一步很可能需要IT部门的前端IT人员的帮助。 他们最了解如何通过适当的步骤准确触发快速视图实施,拥有现成的快速视图URL。
使用Quickview创建自定义弹出窗口® using-quickviews-to-create-custom-pop-ups
请参阅使用概览创建自定义弹出窗口®。