可視化體驗撰寫器選項

最後更新： 2025年2月14日
  • 主題：

Adobe Target Standard/Premium 25.2.1版（2015年2月17日）推出更新的Visual Experience Composer (VEC)。 本文說明更新的UI及其選項。

IMPORTANT
更新的Visual Editing Composer需要Chrome網站商店中可用的Adobe Experience Cloud Visual Editing Helper擴充功能。

當您建立或編輯現有活動時，VEC隨即顯示。

可視化體驗撰寫器 (VEC)

VEC UI總覽

以下章節說明A/B Test活動的更新VEC中可用的選項。 選項會因活動型別而異。

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畫布中的影像和文字。 「設計」畫布以及「元件」、「修改」和「屬性」面板提供您強大的工具，讓您輕鬆建立活動的體驗。

影像選項

如果您按一下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時，有數個RTF格式選項可供使用。 您可選擇字型、選取字型樣式、變更文字對齊方式，以及其他標準文字格式化選項。修改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>