電子郵件範本編寫
在您建立電子郵件範本之後,請使用視覺化設計空間來編寫電子郵件範本中的結構和內容元件。
新增結構和內容 structure-content
-
若要開始您的內容設計,請從 結構 拖曳一個專案,然後將其放到畫布上。
視需要從 結構 新增任意數目的專案,並編輯右側窗格中每個專案的設定。
note tip TIP 選取_n:n資料行_元件以定義您所選擇的資料行數目(介於3到10之間)。 您也可以移動欄下方的箭頭來定義每欄的寬度。 每個欄大小不能小於結構元件總寬度的10%。 只能移除空白欄。
-
展開 內容 區段,並視需要新增內容元件至一或多個結構元件。
-
如有需要,您可以在 設定 或 樣式 標籤中為每個元件進行其他自訂。
例如,您可以變更每個元件的文字樣式、邊框間距或邊界。
-
若要新增條件式內容並根據條件式規則將內容調整至目標設定檔,請選取內容元件,然後按一下元件工具列中的「啟用條件式內容」圖示。
如需詳細資訊,請參閱 條件式內容。
新增自訂 CSS
您可以直接在電子郵件範本設計空間新增自己的自訂CSS。 使用自訂CSS套用進階和特定的樣式,以擁有更大的彈性並控制內容的外觀。 最佳實務是在加入影像、按鈕和文字等元件前,先新增此最高層級的樣式。
如果畫布中至少有一個內容元件,請在左側導覽樹狀結構中選取 Body 元件,以存取自訂CSS編輯器。
新增片段
視覺片段是一個可重複使用的設計元件,可由 Journey Optimizer B2B 版Adobe Systems多個內容資產引用。 它通常是可以預先創建並快速插入的內容塊,以使創作更快、更一致。
以下示例概述了在創作內容時添加片段的步驟。
-
要打開片段清單,請選擇 片段 圖示
您可以:
- 對清單進行排序。
- 瀏覽、搜尋或篩選列表。
- 在縮圖檢視和清單視圖之間切換。
- 重新整理清單以反映任何最近建立的片段。
-
將任何片段拖放到結構元件中。
編輯者 在電子郵件結構的節/元素內轉譯片段。
note tip TIP 若要添加片段,使其佔據電子郵件中的整個水平佈局,請添加 1:1 列結構,然後將片段拖放到其中。 片段內容在結構中動態更新,以显示內容在內容中的显示方式。
可自定義片段中的可編輯欄位
視覺片段可以包含可自定義的可編輯欄位。 自定義欄位允許您在將片段合併到內容時修改参数,並在不影響原始片段的情況下創建自定義體驗。 片段作者可以 設計用於自定義 文本、圖像和按鈕元件的片段。 如果包含的片段包含具有可编辑字段的元件,您可以更改預設值以針對您的內容對其進行自定義。
-
選擇片段元件。
右側顯示的設定包含欄位和可編輯欄位以及預設值。
-
請視需要變更任何可編輯欄位。
儲存範本後,當您在摘要中選取 使用者 索引標籤時,範本會顯示在片段詳細資訊頁面中。
新增資產
在視覺內容編輯器中,選取左側導覽列中的 Marketo Engage Assets (
-
將影像資產拖放至結構元件中,以新增資產。
-
在畫布上選取現有的影像資產,然後在影像來源工具中按一下 選取資產,以取代現有的影像資產。
如需有關使用來源型別中的資產的詳細資訊,請參閱使用資產進行內容製作。
導覽圖層、設定和樣式
當您在視覺化設計空間中使用內容時,可以使用導覽樹狀結構來存取元件、欄和內容元素。 按一下左側的 導覽樹狀結構 圖示(
下列範例概述在具有欄的結構元件內調整邊框間距和垂直對齊的步驟。
-
直接在畫布中選取結構元件中的欄,或使用左側顯示的 導覽樹狀結構。
-
在欄工具列中,按一下 選取欄 工具,然後選擇您要編輯的工具。
您也可以從結構樹中選取它。 該欄的可編輯引數會顯示在右側的 設定 和 樣式 索引標籤中。
在視覺化設計工具中顯示的
-
若要編輯欄屬性,請按一下右側的 樣式 索引標籤,並根據您的需求加以變更:
-
針對 背景,視需要變更背景顏色。
清除透明背景的核取方塊。 啟用 背景影像 設定,以使用影像做為背景,而非純色。
-
針對 對齊,請選取 上、中 或 下 圖示。
-
針對 內距,定義所有邊的內距。
若要微調內距,請選取 每一邊不同的內距。 按一下 鎖定 圖示以中斷同步處理。
-
擴充 進階 區段以定義資料行的內嵌樣式。
-
-
如有需要,請重複這些步驟來調整元件中其他欄的對齊與邊框間距。
-
儲存您的變更。
將內容個人化
Journey Optimizer B2B edition使用內嵌簡單語法,可讓您建立包含大括弧{}
括住之個人化內容的運算式。 您可以在相同的內容或欄位中新增多個運算式,不受限制。
範例:
Hello {{lead.firstName}} {{lead.lastName}}
Hello {%= lead.mktoName ?: "Marketer" %}
處理內容時,Journey Optimizer B2B edition會以Experience Platform資料庫中包含的資料取代運算式。 第一個範例會變成 Hello John Doe。
以下範例概述使用銷售機會/帳戶屬性和系統權杖進行內容個人化的步驟。
-
選取文字元件,然後按一下工具列中的 新增個人化 圖示。
此動作會開啟 編輯Personalization 對話方塊。
-
按一下標籤旁的加號( + )以新增標籤。
如果您想要新增具有遞補字元的語彙基元(當該欄位無法供潛在客戶使用時顯示的預設文字),請按一下 更多 圖示( …),然後選擇 插入具有遞補文字。
-
新增任何其他您要加入的代號或其他靜態文字。
-
按一下 儲存。
個人化指令碼會顯示在視覺化設計區域中。 您可以視需要進行變更來選取它。
編輯連結的URL追蹤
-
按一下左側的 連結 圖示(
-
如有需要,請按一下 編輯 (
您也可以為連結新增 標籤。
檢視選項
善用視覺化設計空間中可用的檢視和內容驗證選項。
-
透過預設縮放選項放大/縮小內容。
-
切換在案頭、行動裝置或純文字/純文字間檢視內容。
- 按一下 眼睛 圖示,即可跨裝置預覽內容。
- 選取其中一個現成可用的裝置,或輸入自訂維度以預覽內容。
更多選項
從電子郵件設計空間頂端的 更多…… 功能表,您可以執行下列動作:
- 重設範本 — 按一下此選項,將設計畫布清除為空白並重新啟動建立內容。
- 另存為片段 — 將範本的所有或部份另存為片段,以便在多個電子郵件或電子郵件範本中重複使用。 您提供片段的名稱和說明,並將其儲存到可用片段清單中。
- 變更您的設計 — 返回 設計您的電子郵件 頁面。 從那裡,您可以選擇另一個範本以重新啟動設計流程。 您也可以選擇使用空白畫布(傳統模式)或使用品牌主題 (主題模式)從頭開始設計內容。
- 匯出HTML — 將視覺畫布中的內容以HTML格式下載到您的本機系統,並封裝成zip檔。