文档TargetTarget 指南

可视化体验编辑器选项

Last update: Fri Feb 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

Adobe Target Standard/Premium 25.2.1版本（2015年2月17日）引入了更新的Visual Experience Composer (VEC)。 本文介绍了已更新的UI及其选项。

IMPORTANT
更新的Visual Editing Composer需要Chrome Web Store上提供的Adobe Experience Cloud Visual Editing Helper扩展。

创建或编辑现有活动时将显示VEC。

可视化体验编辑器 (VEC)

VEC UI概述

以下部分说明更新后的VEC中为A/B Test活动提供的选项。 选项因活动类型而异。

Experiences面板

Experiences面板显示在VEC的左边栏中。

体验面板

您可以使用Experiences面板查看、创建、重命名或删除体验。

Experiences面板中提供了以下选项：

  • 查看体验：要查看体验，请单击所需的体验以在Design画布中显示它。
  • 添加体验：单击​ Add ​图标（ 添加图标 ）以添加新体验。 根据需要配置新体验。
  • 重命名体验：单击​ Rename ​图标（ 重命名图标 ）以显示Rename Experience对话框。 指定新名称，然后单击​ Save。
  • 复制、删除或重新定向体验：单击​ More Actions ​图标（ 更多操作图标 ），然后选择​ Duplicate、Delete ​或​ Redirect to URL。

活动设置/配置

单击Design画布顶部显示的Configure图标（ 配置图标 ）以显示活动属性菜单。

活动配置选项

以下选项可供选择：

  • Properties：将属性分配给活动或从活动中删除属性。 Properties是(Target Premium功能。 有关更多信息，请参阅企业用户权限。
  • Page Delivery：在您的网站上类似页面上包含相同体验。 使用页面模板为您的页面提供结构，或者如果页面包含类似的元素，则使用类似的结构化页面元素或跨整个域测试变体。 有关详细信息，请参阅在相似页面上包含相同体验。
  • Site Preferences：配置您的站点首选项以指定Target生成CSS选择器的方式。 有关详细信息，请参阅配置Visual Experience Composer中的​ CSS选择器。
  • 添加其他页面：将其他页面添加到活动以创建多页面活动，该活动允许您使用特定于每个页面的设计跨多个页面创建故事。 有关详细信息，请参阅多页面活动。
  • 单个受众：对该活动使用单个受众。
  • 多个受众：为活动分配多个受众。 单击“添加受众”图标（ 添加图标 ），然后从列表中选择一个或多个受众。 您也可以合并受众或从Add Audiences对话框创建新的受众。

Design/Browse模式

使用设计画布顶部显示的Design/Browse切换功能，在设计模式和浏览模式之间切换。

设计和浏览切换

使用Browse模式浏览您的网站并选择您要更新的视图或页面。 切换回Design模式以添加或编辑更改。

Undo/Redo

您可以通过单击Undo图标（ 撤消图标 ）来撤消所做的更改。

VEC中的 撤消图标

要重做某项操作，请展开撤消/Redo按钮组并选择Redo。

Components面板

您可以向网页添加许多组件，并使用新的Components面板根据需要对其进行编辑。

组件面板

NOTE
如果您在此区域中看到Modifications面板而不是Components面板，请单击​ Show Components ​图标（ 显示组件图标 ）。 Show Components图标（ 显示组件图标 ）和Show Modifications图标（ 显示修改面板 ）用作切换以显示相应的选项。

要向体验添加新组件，请执行以下操作：

  1. 单击要添加以高亮显示的所需组件。

    可用的组件将分组为逻辑容器：

  2. 将组件拖动到Design画布中的现有页面元素上。

  3. 选择将组件插入到选定元素之前，之后。

    与以前的VEC版本相比，您不能将选定的元素替换为组件。

Modifications面板

要打开Modifications面板，请单击Components面板中的Show Modifications图标（ 显示修改面板 ）。

“修改”面板

NOTE
Show Components图标（ 显示组件图标 ）和Show Modifications图标（ 显示修改面板 ）用作切换以显示相应的选项。

Modifications面板显示在Visual Experience Composer (VEC)中对页面所做的所有更改，并允许进行其他更改（如CSS选择器、Mbox和自定义代码）。

单击面板标题中的​ More Options ​图标（ 更多操作图标 ）以添加修改、删除所有修改或删除所有无效修改。 单击Select以执行批量操作： Apply to All Pages或Delete。

单击每个修改旁边的​ More Options ​图标（ 更多操作图标 ）以查看其信息、删除修改或将修改应用于更多视图。

Design画布

Design画布允许您选择视区，包括适合屏幕、Desktop、Tablet、Mobile Landscape和Mobile Portrait。 默认情况下，画布将页面与管理部分中定义的视区一起适合屏幕。

视区选项

您还可以通过单击相应的图标（ 放大图标 或 缩小图标 ）进行放大或缩小。

单击Design画布中的某个页面元素时，会显示一个菜单，其中提供了可用于该元素类型的选项。 此外，页面底部会显示一个 DOM 路径，可让您轻松浏览页面结构。

各种Visual Experience Composer (VEC)操作将分组到相应的菜单选项中，以使您的工作更快捷、更有效：

VEC 选项菜单

NOTE
可用选项取决于要创建或编辑的活动类型和元素。 有关在A/B Test活动中编辑图像和选件的更多信息，请参阅下面的使用画布Design编辑元素。

Properties面板

“Properties”面板允许您更改页面上选定元素的属性，无论这些元素是HTML元素还是特定于Target的对象，例如推荐或选件。

属性面板

单击面板顶部的图标以编辑HTML代码或删除、复制或隐藏元素。 更改显示在Modifications面板中。

Properties面板可在右边栏中折叠。 单击面板右侧的Show/Hide Properties图标（ 属性图标 ）以折叠或显示Properties面板。

使用Design画布编辑元素 design

以下部分将向您展示如何在Design画布中编辑图像和文本。 “设计”画布以及“组件”、“修改”和“属性”面板为您提供了强大的工具，让您能够轻松创建活动的体验。

图像选项

如果单击A/B Test活动中的图像，则VEC将与下图类似：

已选择图像的 VEC

从左侧的Components框架中选择组件以插入以下元素：

  • 基本(分隔条、HTML、图像)。
  • 文本（标题、段落、链接）。
  • 动态(推荐，体验片段， HTML选件)。

利用图像顶部的菜单，您可以执行以下操作：

  • 插入链接（ 插入链接图标 ）。
  • 更改图像（ 选择图像图标 ）。
  • 添加个性化( 添加Personalization图标 )。
  • 删除图像（ 删除图标 ）。

通过右侧的Properties窗格，可以进一步配置图像的属性。

通过框架顶部的图标，您可以执行以下操作：

  • 编辑HTML ( 插入HTML图标 )。 有关详细信息，请参阅下面的编辑HTML。
  • 复制图像（ 复制图标 ）。
  • 删除图像（ 删除图标 ）。
  • 隐藏图像（ 隐藏图标 ）。

利用右框架中的选项，您可以执行以下操作：

  • 编辑CSS类。
  • 配置图像的属性（源、标题、替换文本）。
  • 编辑链接URL。
  • 配置图像的大小（高度和宽度）。 单击Show Advanced Options可配置图像的最小和最大大小、宽度、高度、溢出和对象大小。
  • 配置图像在页面上的位置（绝对、固定、相对、静态或粘性）。
  • 配置元素的间距，包括边距和边距。
  • 配置元素的效果（不透明度）。 单击Show Advanced Options可配置图像的棕褐色、灰度、对比度、亮度和模糊值。 也可以反转或旋转图像。
  • 配置图像的内联样式。

文本选项

如果您单击A/B Test活动中的文本，则VEC将与下图类似：

已选择文本的 VEC

从左侧的Components框架中选择组件以插入以下元素：

  • 基本(分隔条、HTML、图像)。
  • 文本（标题、段落、链接）。
  • 动态(推荐，体验片段， HTML选件)。

单击Show Modifications图标（ 显示修改图标 ）以显示对体验的修改。

通过文本元素顶部的菜单，您可以执行以下操作：

  • 配置文本的属性（标题级别、段落、块引号或等宽）
  • 选择文本的颜色（ 文本颜色图标 ）
  • 配置文本的属性（粗体、斜体、下划线或删除线）（ 选择文本属性图标 ）。
  • 配置文本的对齐方式（左、中、右、两端对齐）（ 文本对齐方式图标 ）。
  • 插入链接（ 插入链接图标 ）。
  • 将内容替换为HTML选件、体验片段或推荐。
  • 编辑HTML ( 插入HTML图标 )。
  • 添加个性化( 添加Personalization图标 )。
  • 删除图像（ 删除图标 ）。

通过右侧的Properties面板，可进一步配置文本的属性。

通过框架顶部的图标，您可以执行以下操作：

  • 编辑HTML ( 插入HTML图标 )。 有关详细信息，请参阅下面的编辑HTML。
  • 复制文本（ 复制图标 ）。
  • 删除文本（ 删除图标 ）。
  • 隐藏文本（ 隐藏图标 ）。

利用右框架中的选项，您可以执行以下操作：

  • 编辑CSS类。
  • 配置文本的背景颜色和图像。
  • 配置文本的排版规则(标题样式、字体大小、字体粗细、行高、对齐方式、文本颜色、文本样式（粗体、斜体、下划线或点进）)。
  • 配置列表，包括项目符号、编号或A、B、C。
  • 选择边框颜色。
  • 配置文本框的大小（高度和宽度）。 单击Show Advanced Options可配置文本框的最小和最大大小、宽度、高度、溢出和对象大小。
  • 配置文本框在页面上的位置（绝对、固定、相对、静态或粘性），并设置从上、右、下和左的像素数。
  • 配置元素的间距，包括边距和边距。
  • 配置元素的效果（不透明度）。 单击Show Advanced Options可配置图像的棕褐色、灰度、对比度、亮度和模糊值。 也可以反转或旋转文本。
  • 配置内联样式。

编辑HTML

除了 HTML 代码外，您还可以编辑和插入自定义 JavaScript。

编辑A/B和Experience Targeting活动的文本和HTML时，可以使用多种富文本格式选项。 您可以选择字体、选择字体样式、更改文本对齐方式以及使用其他标准文本格式设置选项。修改HTML时，您可以在HTML的代码视图和富编辑视图之间切换。

可以嵌套以下 HTML5 标记：

标记
允许的嵌套标记
<a>
<h1-h6>、<p>、<ul>、<ol>、<menu>、<div>、<figure>、<figcaption>
<ins>
<h1-h6>、<p>、<ul>、<ol>、<menu>
<del>
<ul>、<ol>、<menu>、<h1-h6>、<p>
<label>
<p>

使用DOM路径浏览元素 dom-path

单击页面上的某个元素时，将显示 VEC 选项菜单。此外，单击某个元素时，相应的 DOM 路径将显示在页面底部。

DOM 路径

如果未看到DOM路径，请单击Show DOM图标（ 显示DOM图标 ）。

您可以使用 DOM 路径快速查看有关所选元素（类型、ID 和类）的信息，并向上或向下移动 DOM 路径以选择所需的元素。

您可以使用 DOM 路径轻松导航到 VEC 中的任何父元素、同级元素或子元素。

设置点击跟踪时，还可使用 DOM 路径功能。

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654