文件CampaignCampaign Web 使用者介面

使用內容元件 content-components

最後更新： 2026年5月13日
  • 適用對象：
  • Campaign v8 Web User Interface

建立電子郵件內容時，內容​元件可讓您使用原始的空白元件來個人化電子郵件，這些元件一旦放入電子郵件中即可使用。

您可以視需要在​ 結構 ​中新增最多​內容，這會定義您電子郵件的配置。

新增內容元件 add-content-components

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

  1. 在電子郵件Designer中，使用現有內容或將​ 結構 ​拖放至您的空白內容中，以定義電子郵件的配置。 了解做法

  2. 將您選擇的​ 內容 ​拖放到相關結構內。

    熒幕擷圖顯示如何將內容元件拖放至電子郵件Designer的結構中。 {modal="regular"}

    note
    NOTE
    您可以將數個元件新增至單一結構以及結構的每個欄中。

  3. 使用內容​ 設定 ​索引標籤調整每個元件的選項。 例如，選擇僅在桌上型電腦或行動裝置上顯示，或兩者同時顯示。 您也可以從此標籤管理連結選項。 進一步瞭解管理連結

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

    熒幕擷圖顯示電子郵件Designer中內容元件的設定索引標籤。 {modal="regular"}

  5. 從右窗格上​ Content ​的進階功能表，視需要刪除或複製任何內容元件。

容器 container

您可以新增一個簡單容器，在其中新增另一個內容元件。 這可讓您將特定樣式套用至容器，這與容器內使用的元件不同。

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

顯示如何在電子郵件Designer中新增容器元件的熒幕擷圖。 {modal="regular"}

按鈕 buttons

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

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

    顯示如何在電子郵件Designer中拖放按鈕元件的熒幕擷圖。 {modal="regular"}

  2. 按一下您新新增的按鈕以個人化文字，並存取​ 設定 ​和​ 樣式 ​索引標籤。

    熒幕擷圖顯示電子郵件Designer中按鈕元件的設定索引標籤。 {modal="regular"}

  3. 從​ 設定 ​索引標籤，在​ URL ​欄位中，新增當按一下按鈕時重新導向到的URL。

  4. 使用​ Target ​下拉式清單選擇內容的顯示方式：

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

    熒幕擷圖顯示電子郵件Designer中按鈕元件的目標選項。 {modal="regular"}

  5. 從​ 樣式 ​索引標籤變更樣式屬性，例如​Border、Size、Margin​和其他等，以進一步個人化您的按鈕。

文字 text

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

  1. 從​ 內容 ​功能表，將​ 文字 ​拖放到​ 結構 ​元件中。

    顯示如何在電子郵件Designer中拖放文字元件的熒幕擷圖。 {modal="regular"}

  2. 按一下您新新增的元件，以個人化文字並存取​ 設定 ​和​ 樣式 ​索引標籤。

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

    熒幕擷圖顯示電子郵件Designer中的文字編輯工具列。 {modal="regular"}

    • 變更文字樣式：將粗體、斜體、底線或刪除線套用至您的文字。
    • 變更對齊方式：選擇文字的靠左、靠右、置中或左右對齊。
    • 建立清單：新增專案符號或數字清單至您的文字。
    • 設定標題：為文字新增標題，最多六層。
    • 字型大小：選取文字的字型大小 (以像素為單位)。
    • 編輯影像：從Adobe Experience Manager Assets資料庫、電腦將影像新增至文字元件，或重複使用Adobe Campaign執行個體上可用的影像。 了解更多
    • 顯示原始碼：顯示文字的原始碼。 原始碼無法變更。
    • 複製：新增文字元件的副本。
    • 刪除：從電子郵件刪除選取的文字元件。
    • 新增個人化：新增個人化欄位以從輪廓資料自訂內容。
    • 啟用條件式內容：新增條件式內容，以將元件的內容調整至目標設定檔。

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

    熒幕擷圖顯示電子郵件Designer中文字元件的樣式索引標籤。 {modal="regular"}

分隔線 divider

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

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

顯示如何在電子郵件Designer中新增分隔線元件的熒幕擷圖。 {modal="regular"}

HTML HTML

使用​ HTML ​元件來複製和貼上現有HTML的一部分。 這可讓您建立免費的模組化HTML元件，以重複使用外部內容。

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

    熒幕擷圖顯示如何在電子郵件Designer中拖放HTML元件。 {modal="regular"}

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

    熒幕擷圖顯示電子郵件Designer中HTML元件的原始程式碼選項。 {modal="regular"}

NOTE
若要讓外部內容符合電子郵件Designer，Adobe建議從草稿建立訊息，並將現有電子郵件的內容複製到元件中。

影像 image

使用​ Image ​元件將影像插入您的電子郵件。

  1. 從​ Content ​功能表，將​ Image ​拖放到​ Structure ​元件中。

    熒幕擷圖顯示如何拖放電子郵件Designer中的影像元件。 {modal="regular"}

  2. 選擇下列其中一個選項來新增影像：

    熒幕擷圖顯示電子郵件Designer中影像元件的選項。 {modal="regular"}

    accordion
    瀏覽

    選擇此選項可從Adobe Experience Manager Assets資料庫中選取影像。

    note important
    IMPORTANT
    此選項需要作用中的Adobe Experience Manager as a Cloud Service授權。

    瀏覽資料夾以找出所需的特定資產，或使用搜尋列有效率地尋找資產。 找到資產後，按一下​選取。

    熒幕擷圖顯示電子郵件Designer中的資產選取程式。 {modal="regular"}

    若要進一步瞭解如何在Adobe Experience Manager中上傳和新增資產，請參閱Adobe Experience Manager as a Cloud Service檔案。
    accordion
    匯入
    選取此選項，即可從電腦上傳新影像。 檔案會以公用資源的形式上傳至Adobe Campaign執行個體。
    accordion
    匯入公用資源

    選擇此選項可選取您的Adobe Campaign執行個體上已可用的影像，例如先前在電子郵件Designer中匯入的檔案，或從Client Console作為公用資源。

    熒幕擷圖顯示電子郵件Designer中的公用資源選取程式。 {modal="regular"}

    依名稱搜尋資源。 您也可以使用篩選器並重新組織欄。

    note
    NOTE
    安全性限制與「使用者端主控台」中的相同：根據您的使用者許可權，您只能選取您有權存取的資源。

    選取資源，然後按一下​確認。

  3. 按一下您新新增的元件，並使用​ 設定 ​索引標籤來設定影像屬性：

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

    顯示電子郵件Designer中影像元件之設定索引標籤的熒幕擷圖。 {modal="regular"}

  4. 新增連結，將您的對象重新導向至其他內容。 了解更多

  5. 使用​ 樣式 ​索引標籤調整其他樣式屬性，例如邊界、邊框和其他樣式。

社交 social

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

  1. 從「元件」選單，將​ 社交 ​元件拖放到​ 結構 ​元件中。

  2. 按一下您新增的元件。

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

    熒幕擷圖顯示電子郵件Designer中社交元件的設定標籤。 {modal="regular"}

  4. 在「影像大小」欄位中，選擇圖示大小。

  5. 按一下每個社交媒體的圖示以設定客群將被重新導向到的 URL。

    熒幕擷圖顯示電子郵件Designer中社群媒體圖示的URL組態。 {modal="regular"}

  6. 視需要在​ Source ​欄位中變更每個社群媒體的圖示。

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

recommendation-more-help
campaign-web-help-v8