可視化體驗撰寫器選項
Adobe Target Standard/Premium 25.2.1版(2015年2月17日)推出更新的Visual Experience Composer (VEC)。 本文說明更新的UI及其選項。
當您建立或編輯現有活動時,VEC隨即顯示。
VEC UI總覽
以下章節說明A/B Test活動的更新VEC中可用的選項。 選項會因活動型別而異。
Experiences面板
Experiences面板會顯示在VEC的左側邊欄中。
您可以使用Experiences面板來檢視、建立、重新命名或移除體驗。
Experiences面板中有以下選項:
- 檢視體驗:若要檢視體驗,請按一下所需的體驗,以將其顯示在Design畫布中。
- 新增體驗:按一下 Add 圖示(
- 重新命名體驗:按一下 Rename 圖示(
- 複製、刪除或重新導向體驗:按一下 More Actions 圖示(
活動設定/設定
按一下Design畫布上方顯示的Configure圖示(
可使用下列選項:
- Properties:將屬性指派給活動,或從活動中移除屬性。 Properties是(Target Premium功能。 如需詳細資訊,請參閱企業使用者權限。
- Page Delivery:在您的網站上類似頁面上包含相同體驗。 使用頁面範本為您的頁面提供結構,或如果您的頁面包含類似的元素,則使用類似的結構化頁面元素或整個網域來測試變數。 如需詳細資訊,請參閱在類似頁面上包含相同體驗。
- Site Preferences:設定您的網站偏好設定,以指定Target如何產生CSS選取器。 如需詳細資訊,請參閱設定Visual Experience Composer中的 CSS選取器。
- 新增其他頁面:將其他頁面新增至活動,以建立多頁活動,讓您使用每個頁面專屬的設計,跨多個頁面建立劇本。 如需詳細資訊,請參閱多頁活動。
- 單一對象:將單一對象用於活動。
- 多個對象:將多個對象指派給活動。 按一下「新增對象」圖示(
Design/Browse模式
使用設計畫布上方顯示的Design/Browse切換功能,在設計模式和瀏覽模式之間切換。
使用Browse模式瀏覽您的網站,並挑選您要更新的檢視或頁面。 切換回Design模式以新增或編輯您的變更。
Undo/Redo
您可以按一下Undo圖示(
VEC中的
若要重做動作,請展開復原/Redo按鈕群組並選擇Redo。
Components面板
您可以使用新的Components面板,在網頁中新增許多元件,並視需要加以編輯。
若要新增元件至體驗:
-
按一下要新增的所需元件以反白顯示。
可用的元件會分組為邏輯容器:
-
Basic
- Divider
- HTML
- Image
-
Text
- Heading
- Paragraph
- Link
-
Dynamic
-
-
將元件拖曳到Design畫布中的現有頁面元素上。
-
選擇將元件插入在所選元素之前。
和舊版VEC相比,您無法用元件取代選取的元素。
Modifications面板
若要開啟Modifications面板,請按一下Components面板中的Show Modifications圖示(
Modifications面板會顯示在Visual Experience Composer (VEC)中對您的頁面所做的所有變更,並可讓您進行其他變更(例如CSS選取器、Mbox和自訂程式碼)。
按一下面板標頭中的 More Options 圖示(
按一下每個修改旁的 More Options 圖示(
Design畫布
Design畫布可讓您選取檢視區,包括符合熒幕大小、Desktop、Tablet、Mobile Landscape和Mobile Portrait。 依預設,畫布會將頁面與管理區段中定義的檢視區一起調整到熒幕。
您也可以按一下適當的圖示(
當您在Design畫布中按一下頁面元素時,功能表會顯示該元素型別的可用選項。 此外,DOM 路徑會顯示在頁面底部,讓您輕鬆導覽頁面結構。
各種Visual Experience Composer (VEC)動作會分組到適當的功能表選項中,讓您的工作更快更有效率:
Properties面板
Properties面板可讓您變更頁面上所選元素的屬性,不論這些元素是HTML元素或專屬於Target的物件,例如建議或選件。
按一下面板頂端的圖示以編輯HTML程式碼或刪除、複製或隱藏元素。 變更會顯示在Modifications面板中。
Properties面板可在右側邊欄中摺疊。 按一下面板右側的Show/Hide Properties圖示(
使用Design畫布編輯元素 design
以下章節說明如何編輯Design畫布中的影像和文字。 「設計」畫布以及「元件」、「修改」和「屬性」面板提供您強大的工具,讓您輕鬆建立活動的體驗。
影像選項
如果您按一下A/B Test活動中的影像,VEC看起來會類似於下圖:
已選取影像的
從左側的Components框架中選取元件以插入下列元素:
影像頂端的功能表可讓您進行下列工作:
- 插入連結(
- 變更影像(
- 新增個人化(
- 刪除影像(
右側的Properties窗格可進一步設定影像的屬性。
框架頂端的圖示可讓您執行下列動作:
- 編輯HTML (
- 複製影像(
- 刪除影像(
- 隱藏影像(
右側框架中的選項可讓您進行下列操作:
- 編輯CSS類別。
- 設定影像的屬性(來源、標題、替代文字)。
- 編輯連結URL
- 設定影像的大小(高度和寬度)。 按一下Show Advanced Options以設定影像的最小和最大大小、寬度、高度、溢位和物件大小。
- 設定影像在頁面上的位置(絕對、固定、相對、靜態或粘著)。
- 設定元素的間距,包括邊界和邊距。
- 設定元素的效果(不透明度)。 按一下Show Advanced Options設定影像的棕褐色、灰階、對比、亮度和模糊值。 您也可以反轉或旋轉影像。
- 設定影像的內嵌樣式。
文字選項
如果您在A/B Test活動中按一下文字,VEC看起來會類似於下圖:
已選取文字的
從左側的Components框架中選取元件以插入下列元素:
按一下「Show Modifications」圖示(
文字元素頂端的功能表可讓您進行下列工作:
右側的Properties面板可進一步設定文字的屬性。
框架頂端的圖示可讓您執行下列動作:
- 編輯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>
使用DOM路徑導覽元素 dom-path
當您按一下頁面上的元素時,VEC 選項功能表隨即顯示。此外,當您按一下元素時,對應的 DOM 路徑會顯示於頁面底部。
如果沒有看見DOM路徑,請按一下Show DOM圖示(
您可以使用 DOM 路徑快速查看有關已選取元素 (類型、ID 和類別) 的資訊,然後向上或向下移動 DOM 路徑以選取想要的元素。
您可以使用 DOM 路徑,輕鬆導覽至 VEC 中的任何父項、同層級項目或子項元素。
設定點擊追蹤時,也可使用 DOM 路徑功能。