文件Journey Optimizer B2BJourney Optimizer B2B Edition 文件

內容元件 content-components

Last update: Sun Jan 11 2026 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • 使用者

當您設計電子郵件、登入頁面、範本及視覺化片段的內容時，請使用內容元件來新增視覺化設計元素。 您可以視需要在定義配置圖的一或多個結構元件內新增任意數量的內容元件。

內容庫

元件庫底部的​ 內容 ​區段會顯示可用的內容元件：

圖示
元件
說明
容器圖示
容器
將此元件新增到您的設計，以包含可用來將元件分組或將背景或邊框樣式套用至區域的矩形容器。
按鈕圖示
按鈕
將此元件新增至您的設計，以包含可點按的按鈕元素。
文字圖示
文字
將此元件新增至您的設計，以包含文字內文。
分隔線圖示
分隔線
將此元件新增到您的設計，加入水平線以分隔內容的區域。
HTML圖示
HTML
將此元件新增至您的設計，以複製並貼上現有HTML的不同部分。 使用此元件來建立免費的模組化HTML區塊，以重複使用某些外部內容。
影像圖示
影像
將此元件新增到您的設計以插入影像檔案。
社交圖示
社交
將此元件新增到您的設計，以插入指向社群媒體頁面的連結。
表單圖示
表單
僅適用於登陸頁面。​將此元件新增到您的設計以插入建立的表單。

內容元件工具列

當您在畫布中選取工具列時，每個內容元件型別都會顯示工具列。 可用的工具會因元件型別而異，提供直接在演算內容中處理元件的簡單方法。 其中包含適用於元件型別的格式化和功能功能。

內容元件工具列 {width="450"}

格式化工具

變更文字樣式
table 0-row-3 1-row-3 html-authored
工具 使用情況 元件
變更文字樣式工具 {width="120px"} 將粗體、斜體、底線或刪除線、上標或下標套用至選取的文字字串。

  • 按鈕

  • 文字
水準對齊方式
table 0-row-3 1-row-3 html-authored
工具 使用情況 元件
水準對齊工具 {width="120px"} 將水準對齊方式型別套用至元件內容。 選擇左、中、右或左右對齊。

  • 按鈕

  • 文字
建立清單
table 0-row-3 1-row-3 html-authored
工具 使用情況 元件
建立清單工具 {width="120px"} 將排序或無排序的清單格式套用至元件文字。
  • 文字
設定標題
table 0-row-3 1-row-3 html-authored
工具 使用情況 元件
設定標題工具 {width="60px"} 在游標位置的段落套用標題層級格式。

  • 按鈕

  • 文字
字型大小
table 0-row-3 1-row-3 html-authored
工具 使用情況 元件
字型大小工具 {width="60px"} 將字型大小套用至選取的文字。 按一下工具並選擇大小或輸入畫素值。

  • 按鈕

  • 文字
字型顏色
table 0-row-3 1-row-3 html-authored
工具 使用情況 元件
字型顏色工具 {width="160px"} 將字型顏色套用至選取的文字。 從選擇器中選擇顏色，並使用顏色滑桿和顏色欄位來選取顏色。 或者，您可以輸入已知的RGB、HSL、HSB或十六進位值。

  • 按鈕

  • 文字
插入連結
table 0-row-3 1-row-3 html-authored
工具 使用情況 元件
插入連結工具 {width="120px"} 為選取的文字或元素建立可點按的連結（外部URL或登陸頁面）。

  • 按鈕

  • 文字

  • 影像
移除連結
table 0-row-3 1-row-3 html-authored
工具 使用情況 元件
移除連結工具 {width="80px"} 移除所選文字或元素的可點按連結（外部URL或登陸頁面）。

  • 按鈕

  • 文字

  • 影像

功能工具

工具
名稱
使用情況
新增個人化 {width="40"}
新增個人化
使用個人化編輯器在元件內容中插入個人化代號。 了解更多
顯示原始程式碼 {width="40"}
顯示原始程式碼
以唯讀快顯視窗顯示元件的HTML原始碼。
顯示HTML程式碼 {width="200"}
啟用條件式內容 {width="40"}
啟用條件式內容
（電子郵件和片段）啟用元件的條件變體。 了解更多
複製 {width="40"}
重複
建立元件的復本，並直接將其新增到下方。
刪除 {width="40"}
刪除
移除元件。

將內容元件新增至您的設計

  1. 在視覺設計空間中，使用現有範本或將所需的結構元件新增至空白畫布以定義版面。

  2. 在​ 元件 ​資料庫中，抓取您所選內容元件的​拖曳控點 拖曳控點 ，然後將其拖放到結構元件上。

    您可以將數個元件加入單一結構元件中，並加入結構元件的每個欄中。

    將內容元件拖曳至結構元件 {width="600" modal="regular"}

  3. 使用右側的​ 設定 ​和​ 樣式 ​標籤，或畫布中顯示的內容工具列，調整元件顯示。

    例如，您可以變更元件的文字樣式、邊框間距或邊界。

    定義內容元件的設定和樣式 {width="600" modal="regular"}

使用設計時，您也可以移除或複製元件。

內容元件設定和樣式

新增元件後，會在視覺設計空間選取元件，其屬性會顯示在右側面板中。 您也可以隨時選取元件以變更設定和樣式。 許多設定和樣式都是元件專屬的，但有一些標準設定和樣式可套用至任何選取的內容元件。

顯示選項

若要從案頭或行動裝置顯示中排除元件，請變更​ 顯示選項 ​設定。 預設值​在所有裝置上顯示，可跨所有裝置顯示。 選擇其他設定以依裝置型別排除元件：

  • 僅在桌上型裝置上顯示 — 當您想要在桌上型裝置上顯示元件，並將它排除在行動裝置上時，請選擇此設定。
  • 僅在行動裝置上顯示 — 當您想要在行動裝置（例如手機和平板電腦）上顯示元件時，請選擇此設定，並將它排除在桌上型裝置之外。

內容元件的顯示選項 {width="400" modal="regular"}

容器

使用容器將特定樣式套用至一組內容元件。 新增Container元件，然後在其中新增其他內容元件。 此元件類似於您在HTML中使用div元素的方式。 您可以將不同的樣式套用至容器，使其與套用至其所包含內容元件的樣式不同。

例如，新增​ Container ​元件，然後在該容器中新增​ Button ​元件。 您可以使用容器的特定區域樣式，並視需要設定按鈕及其背景的樣式。

容器內容元件樣式 {width="600" modal="regular"}

背景

在右側面板中選取​ 樣式 ​索引標籤後，請使用​ 背景 ​區段來定義元件的背景顏色。

選取核取方塊，然後按一下顏色方塊，從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。

背景檢色器 {width="300"}

邊框

  1. 在已選取​ 樣式 ​標籤的右側面板上，展開​ Border ​區段並設定選項以顯示元件的邊框：

  2. 將切換開關向右移動以啟用邊框顯示選項，並根據您的設計條件進行設定：

    • 若要設定​邊框顏色，請選取核取方塊，然後按一下顏色方塊以從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。

    邊框檢色器 {width="300"}

    • 若要設定​邊框大小 （線條寬度），請按一下向上和向下箭頭圖示以增加或減少畫素數量。

    • 若要設定​邊框樣式，請從標準CSS border-style值清單中選擇一個值。

    • 若要決定顯示邊框的位置，請選取每個​ 邊框位置 ​核取方塊。

    邊框樣式 {width="250"}

  3. 對於​邊框半徑，請根據您想要的轉角曲線設定數值。

    值為0 （預設）會產生方形轉角。

大小

在已選取​ 樣式 ​標籤的右側面板上，展開​ 大小 ​區段並設定元件高度和寬度的選項：

  • 高度 — 按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素的內容調整元素的高度。

  • 寬度 — 使用切換功能以畫素或百分比設定寬度。

    • 若為百分比寬度，請使用滑桿來設定百分比值。 百分比會根據包含區塊的內容方塊來決定元素大小，其中不包含邊框間距和邊框。 例如，值50會將元素寬度設定為其所包含區塊內容寬度的50%。

      使用百分比的 寬度樣式 {width="250"}

    • 針對以畫素為基礎的寬度，按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素內容調整元素寬度。

      使用畫素的 寬度樣式{width="250"}

邊距

在已選取​ 樣式 ​標籤的右側面板上，展開​ 邊界 ​區段，並設定結構元件內邊界間距的選項。 此樣式會復寫CSS margin引數，該引數會控制元件邊框之外的空間，將元件與其他元件分開。 它會在元件周圍建立間隙，以影響其定位和周圍內容的版面。

根據您的設計需求設定邊界值（畫素）。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊界：

  • 所有邊 — 若要設定一個值以套用至所有邊，請清除每個邊的​ 不同邊界 ​核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定所有邊的邊界 {width="250"}

  • 上下邊界 — 若要將上下邊界設定為相同的值，請在上下設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

  • 左右邊界 — 若要將左右邊界設定為相同的值，請在左右設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    鎖定上下邊界和左右邊界 {width="250"}

  • 獨立 — 若要將每個邊界設定為獨立值，請在上下設定之間以及左右之間設定​ 解除鎖定 ​圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定獨立的邊界 {width="250"}

內距

在已選取​ 樣式 ​標籤的右側面板上，展開​ 內距 ​區段，並設定結構元件內距的選項。 此樣式會復寫CSS padding引數，該引數是元件內容與其邊框之間的空間。 內距提供內部間距，可用來控制內容與元件邊框之間的距離。

根據您的設計需求，設定以畫素為單位的填補值。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊框間距：

  • 所有邊 — 若要設定一個值以套用至所有邊，請清除​ 每個邊不同的內距 ​核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定所有邊的內距 {width="250"}

  • 上下間距 — 若要將上下間距設定為相同的值，請在上下設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

  • 左右間距 — 若要將左右間距設定為相同的值，請在左右設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    鎖定上下左右邊界的內距 {width="250"}

  • 獨立 — 若要將每一邊的填補設定為獨立值，請在上下設定之間以及左右之間設定​ 解除鎖定 ​圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定獨立的內距 {width="250"}

按鈕

使用Button元件將一或多個可點按的按鈕插入您的內容。 使用按鈕將頁面檢視器或電子郵件收件者重新導向至支援內容（已發佈的登陸頁面或外部連結）。

新增按鈕文字

當畫布中顯示按鈕元件時，工具列會包含文字格式設定選項，以及個人化和條件變體。 如需有關編輯器工具列選項的詳細資訊，請參閱#。

當您輸入按鈕標籤文字並設定格式時，按鈕會調整大小以符合內容。

與工具列 一起顯示的 {width="500" modal="regular"}按鈕元件

設定連結選項

在​ 設定 ​索引標籤上，使用​ 連結 ​選項來定義按鈕文字、連結目的地，以及載入目標頁面的瀏覽器行為。

  1. 設定連結的​型別：

    • 外部連結 — 選擇此型別以使用標準URL作為連結目的地。

      在​ Url ​中，輸入連結目的地的URL。 按一下「個人化」（「 個人化圖示 」）圖示，使用個人化權杖作為URL中的引數。

      定義按鈕元件的外部連結 {width="200"}

    • 登陸頁面 — 選擇此型別，在連線的Marketo Engage執行個體中選取已發佈的登陸頁面。

      針對​ 登陸頁面 ​選項，請選取已發佈的登陸頁面。 按一下​ 選取頁面 ​圖示（ 顯示連結圖示 ）和選取已發佈的登陸頁面。

      定義按鈕元件登入頁面的連結 {width="200"}

  2. 針對​標籤，請輸入您要在按鈕內顯示的文字。

    按鈕大小會根據設定的文字和樣式進行調整。

  3. 對於​Target，請選擇如何從電子郵件或頁面重新導向連結的目的地：

    • 無 — 使用預設瀏覽器或使用者端行為（預設）開啟連結。
    • 空白 — 在新視窗或索引標籤中開啟連結。
    • Self — 在相同框架中開啟連結。
    • 父系 — 在父框架中開啟連結。
    • Top — 在視窗的整個內文中開啟連結。

設定樣式

在​ 樣式 ​索引標籤中自訂按鈕樣式。

背景

在右側面板中選取​ 樣式 ​索引標籤後，請使用​ 背景 ​區段來定義元件的背景顏色。

選取核取方塊，然後按一下顏色方塊，從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。

背景檢色器 {width="300"}

文字

在已選取​ 樣式 ​索引標籤的右側面板上，展開​ 文字 ​區段並設定元件文字樣式的選項：

  • 字型系列 — 按一下向下箭號圖示，選取元件中文字的字型系列。

  • 字型大小 — 按一下向上和向下箭號圖示，以增加或減少字型大小，或輸入值。 對於輸入的值，您可以使用小數。

  • 行高 — 按一下向上和向下箭號圖示，以增加或減少行高，或輸入值。 對於輸入的值，您可以使用小數。

    文字樣式 {width="250"}

  • 文字樣式 — 選取文字樣式的圖示： 粗體、斜體、加底線​或​刪除線。

  • 文字對齊方式 — 選取水準文字對齊方式的圖示： 左、置中、右​或​對齊。

  • 字型顏色 — 按一下顏色方塊，從選擇器中選擇字型顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。

    字型檢色器 {width="300"}

邊框

  1. 在已選取​ 樣式 ​標籤的右側面板上，展開​ Border ​區段並設定選項以顯示元件的邊框：

  2. 將切換開關向右移動以啟用邊框顯示選項，並根據您的設計條件進行設定：

    • 若要設定​邊框顏色，請選取核取方塊，然後按一下顏色方塊以從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。

    邊框檢色器 {width="300"}

    • 若要設定​邊框大小 （線條寬度），請按一下向上和向下箭頭圖示以增加或減少畫素數量。

    • 若要設定​邊框樣式，請從標準CSS border-style值清單中選擇一個值。

    • 若要決定顯示邊框的位置，請選取每個​ 邊框位置 ​核取方塊。

    邊框樣式 {width="250"}

  3. 對於​邊框半徑，請根據您想要的轉角曲線設定數值。

    值為0 （預設）會產生方形轉角。

大小

在已選取​ 樣式 ​標籤的右側面板上，展開​ 大小 ​區段並設定元件高度和寬度的選項：

  • 高度 — 按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素的內容調整元素的高度。

  • 寬度 — 使用切換功能以畫素或百分比設定寬度。

    • 若為百分比寬度，請使用滑桿來設定百分比值。 百分比會根據包含區塊的內容方塊來決定元素大小，其中不包含邊框間距和邊框。 例如，值50會將元素寬度設定為其所包含區塊內容寬度的50%。

      使用百分比的 寬度樣式 {width="250"}

    • 針對以畫素為基礎的寬度，按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素內容調整元素寬度。

      使用畫素的 寬度樣式{width="250"}

+++對齊方式

+++

+++按鈕邊界

+++

容器邊界

在已選取​ 樣式 ​標籤的右側面板上，展開​ 邊界 ​區段，並設定結構元件內邊界間距的選項。 此樣式會復寫CSS margin引數，該引數會控制元件邊框之外的空間，將元件與其他元件分開。 它會在元件周圍建立間隙，以影響其定位和周圍內容的版面。

根據您的設計需求設定邊界值（畫素）。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊界：

  • 所有邊 — 若要設定一個值以套用至所有邊，請清除每個邊的​ 不同邊界 ​核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定所有邊的邊界 {width="250"}

  • 上下邊界 — 若要將上下邊界設定為相同的值，請在上下設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

  • 左右邊界 — 若要將左右邊界設定為相同的值，請在左右設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    鎖定上下邊界和左右邊界 {width="250"}

  • 獨立 — 若要將每個邊界設定為獨立值，請在上下設定之間以及左右之間設定​ 解除鎖定 ​圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定獨立的邊界 {width="250"}

內距

在已選取​ 樣式 ​標籤的右側面板上，展開​ 內距 ​區段，並設定結構元件內距的選項。 此樣式會復寫CSS padding引數，該引數是元件內容與其邊框之間的空間。 內距提供內部間距，可用來控制內容與元件邊框之間的距離。

根據您的設計需求，設定以畫素為單位的填補值。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊框間距：

  • 所有邊 — 若要設定一個值以套用至所有邊，請清除​ 每個邊不同的內距 ​核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定所有邊的內距 {width="250"}

  • 上下間距 — 若要將上下間距設定為相同的值，請在上下設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

  • 左右間距 — 若要將左右間距設定為相同的值，請在左右設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    鎖定上下左右邊界的內距 {width="250"}

  • 獨立 — 若要將每一邊的填補設定為獨立值，請在上下設定之間以及左右之間設定​ 解除鎖定 ​圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定獨立的內距 {width="250"}

進階

若要使用值套用其他CSS相容屬性，請使用​ 進階 ​樣式設定。 您可以變更現有屬性的值，或新增屬性。 樣式會使用父 — 子元件（元素）的CSS繼承模型套用至元件。

顯示的屬性反映目前為元件定義的樣式。 您可以根據CSS定義變更值。 按一下​新增 (+)圖示，為元件新增樣式屬性。

進階樣式 {width="250"}

文字

使用文字元件，將文字區塊插入內容中。 在畫布中選取文字元件時，輸入文字並使用工具列選項來新增內嵌格式和選項，包括個人化代號和條件變體。

在​ 樣式 ​索引標籤中自訂文字元件樣式。

背景

在右側面板中選取​ 樣式 ​索引標籤後，請使用​ 背景 ​區段來定義元件的背景顏色。

選取核取方塊，然後按一下顏色方塊，從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。

背景檢色器 {width="300"}

文字

這些樣式會套用至整個文字區塊。 您可以將內嵌樣式套用至選取的文字字串。

在已選取​ 樣式 ​索引標籤的右側面板上，展開​ 文字 ​區段並設定元件文字樣式的選項：

  • 字型系列 — 按一下向下箭號圖示，選取元件中文字的字型系列。

  • 字型大小 — 按一下向上和向下箭號圖示，以增加或減少字型大小，或輸入值。 對於輸入的值，您可以使用小數。

  • 行高 — 按一下向上和向下箭號圖示，以增加或減少行高，或輸入值。 對於輸入的值，您可以使用小數。

    文字樣式 {width="250"}

  • 文字樣式 — 選取文字樣式的圖示： 粗體、斜體、加底線​或​刪除線。

  • 文字對齊方式 — 選取水準文字對齊方式的圖示： 左、置中、右​或​對齊。

  • 字型顏色 — 按一下顏色方塊，從選擇器中選擇字型顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。

    字型檢色器 {width="300"}

邊框

  1. 在已選取​ 樣式 ​標籤的右側面板上，展開​ Border ​區段並設定選項以顯示元件的邊框：

  2. 將切換開關向右移動以啟用邊框顯示選項，並根據您的設計條件進行設定：

    • 若要設定​邊框顏色，請選取核取方塊，然後按一下顏色方塊以從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。

    邊框檢色器 {width="300"}

    • 若要設定​邊框大小 （線條寬度），請按一下向上和向下箭頭圖示以增加或減少畫素數量。

    • 若要設定​邊框樣式，請從標準CSS border-style值清單中選擇一個值。

    • 若要決定顯示邊框的位置，請選取每個​ 邊框位置 ​核取方塊。

    邊框樣式 {width="250"}

  3. 對於​邊框半徑，請根據您想要的轉角曲線設定數值。

    值為0 （預設）會產生方形轉角。

大小

在已選取​ 樣式 ​標籤的右側面板上，展開​ 大小 ​區段並設定元件高度和寬度的選項：

  • 高度 — 按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素的內容調整元素的高度。

  • 寬度 — 使用切換功能以畫素或百分比設定寬度。

    • 若為百分比寬度，請使用滑桿來設定百分比值。 百分比會根據包含區塊的內容方塊來決定元素大小，其中不包含邊框間距和邊框。 例如，值50會將元素寬度設定為其所包含區塊內容寬度的50%。

      使用百分比的 寬度樣式 {width="250"}

    • 針對以畫素為基礎的寬度，按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素內容調整元素寬度。

      使用畫素的 寬度樣式{width="250"}

邊距

在已選取​ 樣式 ​標籤的右側面板上，展開​ 邊界 ​區段，並設定結構元件內邊界間距的選項。 此樣式會復寫CSS margin引數，該引數會控制元件邊框之外的空間，將元件與其他元件分開。 它會在元件周圍建立間隙，以影響其定位和周圍內容的版面。

根據您的設計需求設定邊界值（畫素）。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊界：

  • 所有邊 — 若要設定一個值以套用至所有邊，請清除每個邊的​ 不同邊界 ​核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定所有邊的邊界 {width="250"}

  • 上下邊界 — 若要將上下邊界設定為相同的值，請在上下設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

  • 左右邊界 — 若要將左右邊界設定為相同的值，請在左右設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    鎖定上下邊界和左右邊界 {width="250"}

  • 獨立 — 若要將每個邊界設定為獨立值，請在上下設定之間以及左右之間設定​ 解除鎖定 ​圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定獨立的邊界 {width="250"}

內距

在已選取​ 樣式 ​標籤的右側面板上，展開​ 內距 ​區段，並設定結構元件內距的選項。 此樣式會復寫CSS padding引數，該引數是元件內容與其邊框之間的空間。 內距提供內部間距，可用來控制內容與元件邊框之間的距離。

根據您的設計需求，設定以畫素為單位的填補值。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊框間距：

  • 所有邊 — 若要設定一個值以套用至所有邊，請清除​ 每個邊不同的內距 ​核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定所有邊的內距 {width="250"}

  • 上下間距 — 若要將上下間距設定為相同的值，請在上下設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

  • 左右間距 — 若要將左右間距設定為相同的值，請在左右設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    鎖定上下左右邊界的內距 {width="250"}

  • 獨立 — 若要將每一邊的填補設定為獨立值，請在上下設定之間以及左右之間設定​ 解除鎖定 ​圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定獨立的內距 {width="250"}

進階

若要使用值套用其他CSS相容屬性，請使用​ 進階 ​樣式設定。 您可以變更現有屬性的值，或新增屬性。 樣式會使用父 — 子元件（元素）的CSS繼承模型套用至元件。

顯示的屬性反映目前為元件定義的樣式。 您可以根據CSS定義變更值。 按一下​新增 (+)圖示，為元件新增樣式屬性。

進階樣式 {width="250"}

分隔線

新增​ 分隔線 ​元件，在內容區段之間納入線性分隔。

背景

在右側面板中選取​ 樣式 ​索引標籤後，請使用​ 背景 ​區段來定義元件的背景顏色。

選取核取方塊，然後按一下顏色方塊，從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。

背景檢色器 {width="300"}

+++折線圖

+++

大小

在已選取​ 樣式 ​標籤的右側面板上，展開​ 大小 ​區段並設定元件高度和寬度的選項：

  • 高度 — 按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素的內容調整元素的高度。

  • 寬度 — 使用切換功能以畫素或百分比設定寬度。

    • 若為百分比寬度，請使用滑桿來設定百分比值。 百分比會根據包含區塊的內容方塊來決定元素大小，其中不包含邊框間距和邊框。 例如，值50會將元素寬度設定為其所包含區塊內容寬度的50%。

      使用百分比的 寬度樣式 {width="250"}

    • 針對以畫素為基礎的寬度，按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素內容調整元素寬度。

      使用畫素的 寬度樣式{width="250"}

對齊方式

展開​ 對齊 ​區段，然後選擇您要使用的水準對齊：左對齊、置中或右對齊。 此樣式會轉譯為標準text-align CSS樣式，並影響元件在容納元件中的放置方式。

水準對齊樣式 {width="250"}

邊距

在已選取​ 樣式 ​標籤的右側面板上，展開​ 邊界 ​區段，並設定結構元件內邊界間距的選項。 此樣式會復寫CSS margin引數，該引數會控制元件邊框之外的空間，將元件與其他元件分開。 它會在元件周圍建立間隙，以影響其定位和周圍內容的版面。

根據您的設計需求設定邊界值（畫素）。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊界：

  • 所有邊 — 若要設定一個值以套用至所有邊，請清除每個邊的​ 不同邊界 ​核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定所有邊的邊界 {width="250"}

  • 上下邊界 — 若要將上下邊界設定為相同的值，請在上下設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

  • 左右邊界 — 若要將左右邊界設定為相同的值，請在左右設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    鎖定上下邊界和左右邊界 {width="250"}

  • 獨立 — 若要將每個邊界設定為獨立值，請在上下設定之間以及左右之間設定​ 解除鎖定 ​圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定獨立的邊界 {width="250"}

內距

在已選取​ 樣式 ​標籤的右側面板上，展開​ 內距 ​區段，並設定結構元件內距的選項。 此樣式會復寫CSS padding引數，該引數是元件內容與其邊框之間的空間。 內距提供內部間距，可用來控制內容與元件邊框之間的距離。

根據您的設計需求，設定以畫素為單位的填補值。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊框間距：

  • 所有邊 — 若要設定一個值以套用至所有邊，請清除​ 每個邊不同的內距 ​核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定所有邊的內距 {width="250"}

  • 上下間距 — 若要將上下間距設定為相同的值，請在上下設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

  • 左右間距 — 若要將左右間距設定為相同的值，請在左右設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    鎖定上下左右邊界的內距 {width="250"}

  • 獨立 — 若要將每一邊的填補設定為獨立值，請在上下設定之間以及左右之間設定​ 解除鎖定 ​圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定獨立的內距 {width="250"}

進階

若要使用值套用其他CSS相容屬性，請使用​ 進階 ​樣式設定。 您可以變更現有屬性的值，或新增屬性。 樣式會使用父 — 子元件（元素）的CSS繼承模型套用至元件。

顯示的屬性反映目前為元件定義的樣式。 您可以根據CSS定義變更值。 按一下​新增 (+)圖示，為元件新增樣式屬性。

進階樣式 {width="250"}

HTML

使用HTML元件來新增部分現有HTML。 此元件可讓您輕鬆建立重複使用外部內容的模組化HTML元素。

  1. 在畫布上選取元件，然後按一下工具列中的「顯示原始程式碼」圖示。

    開啟程式碼編輯器以新增HTML

  2. 在文字方塊中貼上HTML，然後按一下[儲存]。​

    編輯HTML對話方塊

    如果HTML有效，它會在畫布上呈現元素。 如果是對映至其他內容元件的元素，您可以根據元件型別變更右側面板中的設定和樣式。 如果不適用，則會保留為HTML元件。

對於HTML元件，您可以在右側面板中為整個HTML元件設定下列樣式：

背景

在右側面板中選取​ 樣式 ​索引標籤後，請使用​ 背景 ​區段來定義元件的背景顏色。

選取核取方塊，然後按一下顏色方塊，從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。

背景檢色器 {width="300"}

邊框

  1. 在已選取​ 樣式 ​標籤的右側面板上，展開​ Border ​區段並設定選項以顯示元件的邊框：

  2. 將切換開關向右移動以啟用邊框顯示選項，並根據您的設計條件進行設定：

    • 若要設定​邊框顏色，請選取核取方塊，然後按一下顏色方塊以從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。

    邊框檢色器 {width="300"}

    • 若要設定​邊框大小 （線條寬度），請按一下向上和向下箭頭圖示以增加或減少畫素數量。

    • 若要設定​邊框樣式，請從標準CSS border-style值清單中選擇一個值。

    • 若要決定顯示邊框的位置，請選取每個​ 邊框位置 ​核取方塊。

    邊框樣式 {width="250"}

  3. 對於​邊框半徑，請根據您想要的轉角曲線設定數值。

    值為0 （預設）會產生方形轉角。

大小

在已選取​ 樣式 ​標籤的右側面板上，展開​ 大小 ​區段並設定元件高度和寬度的選項：

  • 高度 — 按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素的內容調整元素的高度。

  • 寬度 — 使用切換功能以畫素或百分比設定寬度。

    • 若為百分比寬度，請使用滑桿來設定百分比值。 百分比會根據包含區塊的內容方塊來決定元素大小，其中不包含邊框間距和邊框。 例如，值50會將元素寬度設定為其所包含區塊內容寬度的50%。

      使用百分比的 寬度樣式 {width="250"}

    • 針對以畫素為基礎的寬度，按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素內容調整元素寬度。

      使用畫素的 寬度樣式{width="250"}

對齊方式

展開​ 對齊 ​區段，然後選擇您要使用的水平與垂直對齊。 對齊樣式會影響HTML元件在容納元件（結構或容器）中的定位方式。

水準對齊方式會轉譯為標準text-align CSS樣式，您可以選擇左、中或右。 垂直對齊方式會轉譯為標準vertical-align CSS樣式，您可以選擇上、中或下。

HTML元件的 對齊樣式 {width="300"}

邊距

在已選取​ 樣式 ​標籤的右側面板上，展開​ 邊界 ​區段，並設定結構元件內邊界間距的選項。 此樣式會復寫CSS margin引數，該引數會控制元件邊框之外的空間，將元件與其他元件分開。 它會在元件周圍建立間隙，以影響其定位和周圍內容的版面。

根據您的設計需求設定邊界值（畫素）。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊界：

  • 所有邊 — 若要設定一個值以套用至所有邊，請清除每個邊的​ 不同邊界 ​核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定所有邊的邊界 {width="250"}

  • 上下邊界 — 若要將上下邊界設定為相同的值，請在上下設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

  • 左右邊界 — 若要將左右邊界設定為相同的值，請在左右設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    鎖定上下邊界和左右邊界 {width="250"}

  • 獨立 — 若要將每個邊界設定為獨立值，請在上下設定之間以及左右之間設定​ 解除鎖定 ​圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定獨立的邊界 {width="250"}

內距

在已選取​ 樣式 ​標籤的右側面板上，展開​ 內距 ​區段，並設定結構元件內距的選項。 此樣式會復寫CSS padding引數，該引數是元件內容與其邊框之間的空間。 內距提供內部間距，可用來控制內容與元件邊框之間的距離。

根據您的設計需求，設定以畫素為單位的填補值。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊框間距：

  • 所有邊 — 若要設定一個值以套用至所有邊，請清除​ 每個邊不同的內距 ​核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定所有邊的內距 {width="250"}

  • 上下間距 — 若要將上下間距設定為相同的值，請在上下設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

  • 左右間距 — 若要將左右間距設定為相同的值，請在左右設定之間設定​ 鎖定 ​圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    鎖定上下左右邊界的內距 {width="250"}

  • 獨立 — 若要將每一邊的填補設定為獨立值，請在上下設定之間以及左右之間設定​ 解除鎖定 ​圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。

    設定獨立的內距 {width="250"}

進階

若要使用值套用其他CSS相容屬性，請使用​ 進階 ​樣式設定。 您可以變更現有屬性的值，或新增屬性。 樣式會使用父 — 子元件（元素）的CSS繼承模型套用至元件。

顯示的屬性反映目前為元件定義的樣式。 您可以根據CSS定義變更值。 按一下​新增 (+)圖示，為元件新增樣式屬性。

進階樣式 {width="250"}

影像

使用影像元件將影像資產插入您的內容。 在畫布中選取​ 影像 ​元件時，您可以新增或變更顯示的影像資產檔案。

與工具列一起顯示的影像元件 {width="400" modal="regular"}

新增影像資產

選擇資產來源型別並選取影像檔：

/fragments/zh-hant/docs/journey-optimizer-b2b/user/content-management/content-design/content-components/fragment-0
6ef00091-a233-4243-8773-0da8461f7ef0