文件Journey OptimizerJourney Optimizer 指南

使用電子郵件設計工具內容元件 content-components

最後更新： 2026年9月5日

建立對象：

  • 中繼
  • 初級
  • 使用者

在此頁面上：​瞭解如何新增及設定電子郵件Designer內容元件，例如按鈕、文字、影像、分隔線、HTML、社交連結及優惠決定，以建置您的電子郵件內容。

style
shade-box

建立電子郵件內容時，內容元件​可讓您使用原始元件進一步個人化電子郵件，一旦放入電子郵件中即可編輯原始元件。

您可以視需要在一個或多個結構元件中新增任意數量的內容元件，這些元件定義電子郵件的版面。

NOTE
歐洲無障礙法案規定所有數位通訊都應該能透過無障礙方式取得。 使用內容元件在Journey Optimizer中設計電子郵件時（例如使用無障礙字型、可讀取的格式及提供影像的替代文字），請務必遵循此頁面所列的特定准則。

新增內容元件 add-content-components

若要將內容元件新增到電子郵件並根據您的需要進行調整，請依照以下步驟進行。

  1. 在電子郵件設計工具中，使用現有內容或將​ 結構元件 ​拖放到您的空白內容以定義電子郵件的版面。 了解作法

  2. 若要存取「內容元件」區段，從電子郵件設計工具左窗格選取對應的按鈕。

  3. 將您選擇的內容元件拖放到相關結構元件內部。

    note
    NOTE
    您可以將多個元件新增到單一結構元件和結構元件的每個欄中。

  4. 使用右側的​ 設定 ​和​ 樣式 ​索引標籤，調整每個元件的屬性和樣式。 例如，您可以變更每個元件的文字樣式、邊框間距或邊界。 了解對齊方式和邊框間距的詳細資訊

  5. 從​ 內容元件 ​的進階功能表，您可以視需要輕鬆刪除或複製任何內容元件。

容器 container

若要將特定樣式套用至一組內容元件，您可以新增​ Container ​元件，然後在其中新增您想要的內容元件。 這可讓您將不同的樣式套用至容器，這會與套用至內部內容元件的樣式不同。

例如，新增​ 容器 ​元件，然後在該容器內部新增按鈕元件。 您可以為容器使用特定背景，為按鈕使用另一個背景。

按鈕 button

使用​ 按鈕 ​元件將一個或多個按鈕插入您的電子郵件，並將您的電子郵件客群重新導向到另一個頁面。

  1. 從​內容元件，將​ 按鈕 ​元件拖放到​ 結構元件 ​中。

  2. 按一下您新新增的按鈕以個人化文字，並存取[電子郵件Designer]右窗格中的​ 設定 ​和​ 樣式 ​標籤。

  3. 從​ 連結 ​功能表，新增您要在按一下按鈕時重新導向的URL。

  4. 透過​ Target ​下拉式清單，選擇將您的對象重新導向的方式：

    • 無：當框架被點按時在相同框架中開啟連結 (預設)。
    • 空白：在新的視窗或索引標籤中開啟連結。
    • 自我：當框架被點按時在相同框架中開啟連結。
    • 父系：在父框架中開啟連結。
    • 頂端：在視窗的完整內文中開啟連結。

  5. 您可以從​ 元件設定 ​窗格變更樣式屬性，例如​Border、Size、Margin​等，以進一步個人化您的按鈕。

文字 text

使用​ 文字 ​元件將文字插入您的電子郵件，並調整樣式（邊框、大小、邊框間距等） 使用​ 樣式 ​索引標籤。

  1. 從​Content元件，將​ Text ​元件拖放到​ Structure元件 ​中。

  2. 按一下您新新增的元件，以個人化文字，並存取電子郵件Designer右窗格中的​ 設定 ​和​ 樣式 ​標籤。

  3. 使用以下工具列的選項變更文字：

    • 變更文字樣式：將粗體、斜體、底線或刪除線套用到文字。
    • 變更對齊方式：選擇文字靠左對齊、靠右對齊、置中或左右對齊。
    • 建立清單：新增項目符號清單或編號清單新增到文字。
    • 設定標題：為文字新增標題，最多六層。
    • 字型大小：選取文字的字型大小 (以像素為單位)。
    • 變更字型顏色：選擇字型的顏色。
    • 插入連結：新增任何型別的連結至您的內容。
    • 編輯影像：將影像或資產新增到文字元件。 進一步瞭解資產管理
    • 變更字型顏色：選擇字型的顏色。
    • 新增個人化：新增個人化欄位以從輪廓資料自訂內容。 進一步了解內容個人化
    • 顯示原始碼：顯示文字的原始碼。 原始碼無法變更。
    • 啟用條件式內容：新增條件式內容，以將元件的內容調整至目標設定檔。 進一步瞭解動態內容
    • 複製：新增文字元件的副本。
    • 刪除：從電子郵件刪除選取的文字元件。

  4. 從​ 樣式 ​索引標籤調整其他樣式屬性，例如文字顏色、字型系列、邊框、邊框間距、邊界等。

分隔線 divider

使用​ 分隔線 ​元件以插入分隔線來組織電子郵件的版面和內容。

您可以從「設定」和「樣式」索引標籤調整樣式屬性，例如線條顏色、樣式和高度。

HTML HTML

使用 HTML​元件將現有 HTML 的不同部分進行複製貼上。 這可讓您建立免費的模組化 HTML 元件以重複使用一些外部內容。

  1. 從​內容元件，將 HTML 元件拖放到​結構元件。

  2. 按一下您新增的元件，然後選取「顯示原始碼」從內容關聯式工具列新增至 HTML。

  3. 複製並貼上您要新增至電子郵件的HTML程式碼，然後按一下[儲存]。​

NOTE
為了簡單地使外部內容與電子郵件設計工具相容，Adobe 建議從頭開始建立訊息，然後將現有電子郵件的內容複製到元件中。

影像 image

使用​ Image ​元件，將影像檔案從電腦插入電子郵件內容。

  1. 從​Content元件，將​ Image ​元件拖放到​ 結構元件 ​中。

  2. 在​ 設定 ​標籤中，按一下​ 瀏覽 ​以從您的資產選擇影像檔案，或按一下​ 匯入媒體 ​以將資產上傳到Adobe Experience Manager Assets。

    若要深入瞭解Adobe Experience Manager Assets，請參閱Adobe Experience Manager Assets檔案。

    note
    NOTE
    為確保您的連結維持作用中狀態並避免任何到期問題，我們建議您使用Adobe Assets，而不是仰賴影像的來源URL。

  3. 您也可以使用​ 尋找Adobe Stock像片 ​選項，直接在Adobe Stock中搜尋。

  4. 按一下您新增的元件，然後設定影像屬性：

    • 影像標題​可讓您定義影像的標題。
    • 替代文字​可讓您定義連結到影像的註解。 這對應於替代 HTML 屬性。 了解更多

  5. 您也可以選擇​尋找類似的像片。 了解更多

  6. 從​ 樣式 ​索引標籤，調整其他樣式屬性，例如邊界、邊框等，或新增連結以將您的對象重新導向至​ 元件設定 ​窗格中的其他內容。

社交 social

使用​ 社交 ​元件將社交媒體頁面連結插入到電子郵件內容中。

  1. 從​內容元件，將​ 社交 ​元件拖放到​ 結構元件 ​中。

  2. 選取您新新增的元件。

  3. 在「設定」索引標籤的「社交」欄位中，選擇要新增或移除的社交媒體。

  4. 透過專用欄位選擇圖示的大小。

  5. 按一下您的每個社群媒體圖示來設定您的對象將重新導向到的​URL。

  6. 如有需要，您也可以從Assets變更每個社群媒體的圖示。

  7. 從​ 樣式 ​索引標籤調整其他樣式屬性，例如樣式、邊界、邊框等。

優惠決定 offer-decision

使用​ 優惠決定 ​元件將優惠插入您的訊息。 決定管理引擎會挑選要遞送給客戶的最佳優惠方案。

  1. 從​內容元件，將​ 優惠決定 ​元件拖放到​ 結構元件 ​中。

  2. 按一下​ 新增 ​以選取您的​優惠決定。

  3. 從下拉式清單中，選取您的​位置。 接著，選取您要新增至內容的​優惠決定，然後按一下​新增。

  4. 從​ 優惠決定 ​索引標籤，您可以預覽或變更插入的優惠。

瞭解如何在本節中將個人化優惠新增至電子郵件。

IMPORTANT
如果對歷程訊息中使用的優惠決定進行變更，您需要取消發佈歷程並重新發佈。 這將確保將變更納入歷程的訊息中，並且該訊息與最新更新一致。

格線 grid

使用​ 網格 ​元件將內容組織成由列和欄組成的結構，其中每個儲存格可以包含其他內容元件。

{width="90%"}

  1. 就像Container元件一樣，將其他內容元件拖放至格線的每個儲存格中。

    例如，您可以新增​ Text ​元件、Image​元件和兩個​ Button ​元件。 接著，您可以新增影像並個別編輯每個元件的內容。

    {width="90%"}

  2. 若要調整格線的結構，請選取格線並移至[電子郵件Designer]右窗格的​ 設定 ​標籤。

    {width="90%"}

  3. 您可以定義網格包含多少欄和列、編輯欄和列之間的間距，以及變更每個個別欄的寬度（百分比）。

    note
    NOTE
    使用​ 請勿在行動裝置上棧疊欄 ​選項可保留行動裝置上的格線配置，而非垂直棧疊欄。

  4. 視需要將其他內容元件放入每個儲存格，並從每個元件的​ 樣式 ​索引標籤調整樣式。

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: Content components are empty content placeholders you add inside structure components in the Email Designer — including Container, Button, Text, Divider, HTML, Image, Social, Offer decision, and Grid — and configure through the Settings and Style tabs.

Intents:

  • Add and configure content components inside structure components
  • Insert buttons, text, dividers, images, social links, HTML, and offer decisions into an email
  • Group components inside a Container to apply a distinct style
  • Organize content into rows and columns with the Grid component
  • Insert personalized offers with the Offer decision component
  • Adjust component attributes and styling using the Settings and Style tabs

Glossary:

  • Content components: Empty content placeholders used to build and personalize email layout, added inside structure components (product-specific)
  • Container: A component that groups content components so a distinct style can be applied to the group (product-specific)
  • Grid: A component that organizes content into rows and columns, where each cell can contain other content components (product-specific)
  • Offer decision: A component that inserts offers into a message, with the decision management engine picking the best offer to deliver (product-specific)
  • Alt text: Caption defined for an image, corresponding to the alt HTML attribute (product-specific)

Guardrails:

  • If changes are made to an offer decision used in a journey’s message, you need to unpublish the journey and republish it so the changes are incorporated.
  • Follow the European accessibility act guidelines (accessible fonts, readable formats, and alternative text for images) when designing with content components.
  • For images, Adobe recommends using Adobe Assets rather than a source URL to keep links active and avoid expiration issues.
  • Button Target options: None (default, same frame), Blank (new window or tab), Self (same frame), Parent (parent frame), Top (full body of the window).
  • Use the Do not stack columns on mobile option to preserve a grid layout on mobile devices instead of stacking columns vertically.

Terminology:

  • Canonical name: Content components — Acronym: n/a — variants: content component
  • Synonyms: “Settings tab” and “Style tab” = the two configuration tabs in the right pane (also referred to as Styles tab)
  • Do not confuse: “Content components” (empty placeholders for content) ≠ “Structure components” (define the layout, hold content components)
  • Do not confuse: “Container” (styles a group of components) ≠ “Grid” (organizes components into rows and columns)

FAQ:

  • Q: Which content components are available? — Container, Button, Text, Divider, HTML, Image, Social, Offer decision, and Grid.
  • Q: How many components can go into a structure component? — You can add several components into a single structure component and into each column of a structure component.
  • Q: What happens after I change an offer decision used in a journey? — You must unpublish and republish the journey so the message reflects the latest updates.
  • Q: How do I insert an image? — Drag the Image component into a structure component, then Browse your assets, Import media to Adobe Experience Manager Assets, or Find Adobe Stock photos.
  • Q: Can I keep the grid layout on mobile? — Yes, use the Do not stack columns on mobile option.
recommendation-more-help
journey-optimizer-help