文件Journey OptimizerJourney Optimizer 指南

使用電子郵件設計工具從頭開始設計內容 content-from-scratch

最後更新： 2026年9月11日

建立對象：

  • 中繼
  • 初級
  • 使用者

在此頁面上：​瞭解如何在Adobe Journey Optimizer Email Designer中從頭開始設計電子郵件內容，方法是新增結構和內容元件，然後個人化和預覽您的電子郵件。

style
shade-box

使用Adobe Journey Optimizer電子郵件Designer以輕鬆定義內容結構。 透過使用簡單的拖放動作新增和移動結構元素，您可以在數秒內設計內容的形狀。

NOTE
歐洲無障礙法案規定所有數位通訊都應該能透過無障礙方式取得。 在Journey Optimizer中設計內容時，請務必遵循此頁面上列出的特定准則。

若要開始建立您的內容，請遵循下列步驟：

  1. 從Designer首頁，選取​ 從頭開始設計 ​選項。

    使用「從草稿開始設計」選項建立您的電子郵件熒幕，並醒目提示使用「自行撰寫程式碼」和「匯入HTML」選項，以及下列範本範例

  2. 若要快速入門，請使用​模組 （即用即用的預先設計內容區塊，例如頁首、主圖區段和頁尾）來加速電子郵件建立，並保持您的行銷活動在視覺上保持一致。 進一步瞭解模組

    透過在左側面板中選取的「模組」索引標籤來向Designer傳送電子郵件，其中會列出模組類別，例如Headers、Hero、Stemmonial、Cards、Teams和Footers

  3. 否則，請將​ Structures ​拖放到畫布中，以定義電子郵件的版面配置，來設計您的內容。

    note tip
    TIP
    或者，使用「產生內容」來加速您的電子郵件建立，以產生完整的電子郵件內容，包括文字和影像，使用使用AI產生完整內容。 接著，您可以直接預覽及驗證內容。

  4. 視需要新增多個​結構，並在右側的專用窗格中編輯其設定。

    傳送電子郵件給Designer，其中的「結構」面板會顯示可用的欄配置，而「設定」和「樣式」標籤會在右側的「結構」面板中反白顯示

    note
    NOTE
    在窄熒幕（例如行動熒幕）中，欄預設會垂直棧疊以供閱讀。 有些電子郵件使用者端不支援此行為，在這種情況下，欄會並排保留。 您也可以使用​ 設定 ​索引標籤中的​ 不要棧疊行動裝置上的欄 ​切換來關閉此專案。

  5. 大部分的結構（1:1欄、2:2欄、1:2欄左​等）都是固定的預設集。 請改為選取​ n:n欄 ​元件，以定義您選擇的任何欄數（介於3到10之間）。

    電子郵件Designer顯示所選結構元件的「設定」標籤，且「欄數」欄位反白顯示

    您可以隨時從​ 設定 ​索引標籤增加現有結構的​欄數，即使新增內容後亦然 — 您的現有內容會保留，而不會遺失。

    您也可以直接在畫布上調整每欄的寬度，或是在​ 設定 ​索引標籤中編輯百分比。

    note
    NOTE
    每個欄的大小不能小於結構元件總寬度的 10%。 如果欄不是空的，則無法移除。

  6. 從​ Contents ​區段，新增您所需數量的元素至一或多個結構元件。 進一步了解內容元件

  7. 每個元件都可以使用右方功能表中的​ 設定 ​或​ 樣式 ​標籤進一步自訂。 例如，您可以變更每個元件的文字樣式、邊框間距或邊界。 了解對齊方式和邊框間距的詳細資訊

    電子郵件Designer，其內容面板在左側反白顯示，而所選影像元件的「設定」標籤在右側反白顯示，顯示影像來源、替代文字和連結欄位

  8. 您可以從​ 資產選擇器 ​直接選取儲存在​ Assets資料庫 ​中的資產。 進一步瞭解資產管理

    連按兩下包含資產的資料夾。 將其拖放至結構元件中。

    電子郵件Designer Assets面板，顯示資產庫檔案，並將影像拖曳到畫布中

  9. 插入個人化欄位，從設定檔屬性、對象成員資格、內容屬性等自訂內容。 進一步了解內容個人化

    以電子郵件傳送Designer文字工具列，在選取的文字區塊上方反白顯示「新增Personalization」按鈕

  10. 按一下​ 啟用條件內容 ​以新增動態內容，並根據條件規則將內容調整至目標設定檔。 開始使用動態內容

    電子郵件Designer工具列，在包含設定檔個人化權杖的文字區塊上方顯示「啟用條件內容」選項

  11. 從左窗格按一下​ 連結 ​索引標籤，以顯示您要追蹤之內容的所有URL。 您可以修改其​ 追蹤型別 ​或​標籤，並視需要新增​標籤。 進一步瞭解連結和追蹤

    電子郵件Designer連結面板列出追蹤的URL，其標籤和追蹤型別，以及展開所選連結的詳細資料

  12. 如果需要，您可以按一下「進階」選單中的「切換到程式碼編輯器」進一步個人化您的電子郵件。 這可讓您編輯電子郵件原始碼，例如新增追蹤或自訂 HTML 標記。 進一步了解程式碼編輯器

    note caution
    CAUTION
    切換到程式碼編輯器後，您無法恢復到此電子郵件的視覺化設計工具。

  13. 內容準備就緒後，請使用任一模擬方法來檢查轉譯。 您可以選擇桌面或行動檢視。 詳細資訊可在內容管理區段中取得。

    在頂端工具列中反白顯示「模擬內容」按鈕的電子郵件Designer畫布

  14. 您也可以驗證內容品質，以評估可讀性、有效性和內容一致性。 了解更多關於內容品質驗證的資訊

  15. 當您的內容準備就緒時，請按一下[儲存]。​

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page explains how to design email content from scratch in the Email Designer by adding structure and content components, defining columns, personalizing, adding dynamic content and links, and previewing before saving.

Intents:

  • Start an email from the Design from scratch option and add structure components
  • Define the number and width of columns in a structure component
  • Add content components, personalization fields, and dynamic (conditional) content
  • Review and configure tracked links from the Links tab
  • Preview rendering with a simulation method and validate content quality
  • Switch to the code editor for advanced source editing

Glossary:

  • Design from scratch: The Designer home page option to start building content by adding structures and components (product-specific)
  • Structure components: Elements that define the layout of the email, added by drag and drop into the canvas (product-specific)
  • n:n column: A structure component whose number of columns can be defined between 3 and 10 (product-specific)
  • Switch to code editor: An advanced-menu option to edit the email source code (for example to add tracking or custom HTML tags) (product-specific)

Guardrails:

  • The n:n column component supports between 3 and 10 columns.
  • Each column size cannot be under 10% of the total width of the structure component.
  • You cannot remove a column that is not empty.
  • After switching to the code editor, you cannot revert back to the visual designer for that email.
  • Stacking columns is not compatible with all email programs; when not supported, columns will not be stacked.

Terminology:

  • Canonical name: Structure components — Acronym: n/a — variants: Structures, structure component
  • Synonyms: “Design from scratch” = starting content with no template
  • Do not confuse: “Structure components” (define layout) ≠ “Content components” (elements placed inside structures)
  • Do not confuse: “Settings tab” ≠ “Style tab” (both used to customize components)

FAQ:

  • Q: How many columns can a structure have? — Between 3 and 10, defined with the n:n column component.
  • Q: Can I make a column narrower than 10%? — No, each column size cannot be under 10% of the total width of the structure component.
  • Q: Can I go back to the visual designer after using the code editor? — No, you cannot revert back to the visual designer for that email after switching to the code editor.
  • Q: How do I check rendering before saving? — Use either simulation method to check rendering, choosing the desktop or mobile view.
  • Q: Where do I manage tracked links? — In the Links tab from the left pane, where you can modify Tracking Type or Label and add Tags.
recommendation-more-help
journey-optimizer-help