內容元件 content-components
當您設計電子郵件、登入頁面、範本及視覺化片段的內容時，請使用內容元件來新增視覺化設計元素。 您可以視需要在定義配置圖的一或多個結構元件內新增任意數量的內容元件。
內容庫
元件庫底部的 內容 區段會顯示可用的內容元件：
內容元件工具列
當您在畫布中選取工具列時，每個內容元件型別都會顯示工具列。 可用的工具會因元件型別而異，提供直接在演算內容中處理元件的簡單方法。 其中包含適用於元件型別的格式化和功能功能。
格式化工具
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| 工具 | 使用情況 | 元件 |
|
將粗體、斜體、底線或刪除線、上標或下標套用至選取的文字字串。 |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| 工具 | 使用情況 | 元件 |
|
將水準對齊方式型別套用至元件內容。 選擇左、中、右或左右對齊。 |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| 工具 | 使用情況 | 元件 |
|
將排序或無排序的清單格式套用至元件文字。 |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| 工具 | 使用情況 | 元件 |
|
在游標位置的段落套用標題層級格式。 |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| 工具 | 使用情況 | 元件 |
|
將字型大小套用至選取的文字。 按一下工具並選擇大小或輸入畫素值。 |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| 工具 | 使用情況 | 元件 |
|
將字型顏色套用至選取的文字。 從選擇器中選擇顏色，並使用顏色滑桿和顏色欄位來選取顏色。 或者，您可以輸入已知的RGB、HSL、HSB或十六進位值。 |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| 工具 | 使用情況 | 元件 |
|
為選取的文字或元素建立可點按的連結（外部URL或登陸頁面）。 |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| 工具 | 使用情況 | 元件 |
|
移除所選文字或元素的可點按連結（外部URL或登陸頁面）。 |
|
功能工具
將內容元件新增至您的設計
-
在視覺設計空間中，使用現有範本或將所需的結構元件新增至空白畫布以定義版面。
-
在 元件 資料庫中，抓取您所選內容元件的拖曳控點
您可以將多個元件新增到單一結構元件和結構元件的每個欄中。
-
使用右側的 設定 和 樣式 標籤，或畫布中顯示的內容工具列，調整元件顯示。
例如，您可以變更元件的文字樣式、邊框間距或邊界。
內容元件設定和樣式
新增元件後，會在視覺設計空間選取元件，其屬性會顯示在右側面板中。 您也可以隨時選取元件以變更設定和樣式。 許多設定和樣式都是元件專屬的，但有一些標準設定和樣式可套用至任何選取的內容元件。
顯示選項
若要從案頭或行動裝置顯示中排除元件，請變更 顯示選項 設定。 預設值在所有裝置上顯示，可跨所有裝置顯示。 選擇其他設定以依裝置型別排除元件：
- 僅在桌上型裝置上顯示 — 當您想要在桌上型裝置上顯示元件，並將它排除在行動裝置上時，請選擇此設定。
- 僅在行動裝置上顯示 — 當您想要在行動裝置（例如手機和平板電腦）上顯示元件時，請選擇此設定，並將它排除在桌上型裝置之外。
容器
使用容器將特定樣式套用至一組內容元件。 新增Container元件，然後在其中新增其他內容元件。 此元件類似於您在HTML中使用div元素的方式。 您可以將不同的樣式套用至容器，使其與套用至其所包含內容元件的樣式不同。
例如，新增 容器 元件，然後在該容器內部新增 按鈕 元件。 您可以使用容器的特定區域樣式，並視需要設定按鈕及其背景的樣式。
在右側面板中選取 樣式 索引標籤後，請使用 背景 區段來定義元件的背景顏色。
選取核取方塊，然後按一下顏色方塊，從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。
-
在已選取 樣式 標籤的右側面板上，展開 Border 區段並設定選項以顯示元件的邊框：
-
將切換開關向右移動以啟用邊框顯示選項，並根據您的設計條件進行設定：
- 若要設定邊框顏色，請選取核取方塊，然後按一下顏色方塊以從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。
-
若要設定邊框大小 （線條寬度），請按一下向上和向下箭頭圖示以增加或減少畫素數量。
-
若要設定邊框樣式，請從標準CSS
border-style值清單中選擇一個值。 -
若要決定顯示邊框的位置，請選取每個 邊框位置 核取方塊。
-
對於邊框半徑，請根據您想要的轉角曲線設定數值。
值為0 （預設）會產生方形轉角。
在已選取 樣式 標籤的右側面板上，展開 大小 區段並設定元件高度和寬度的選項：
-
高度 — 按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素的內容調整元素的高度。
-
寬度 — 使用切換功能以畫素或百分比設定寬度。
-
若為百分比寬度，請使用滑桿來設定百分比值。 百分比會根據包含區塊的內容方塊來決定元素大小，其中不包含邊框間距和邊框。 例如，值50會將元素寬度設定為其所包含區塊內容寬度的50%。
使用百分比的
-
針對以畫素為基礎的寬度，按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素內容調整元素寬度。
使用畫素的
-
在已選取 樣式 標籤的右側面板上，展開 邊界 區段，並設定結構元件內邊界間距的選項。 此樣式會復寫CSS margin引數，該引數會控制元件邊框之外的空間，將元件與其他元件分開。 它會在元件周圍建立間隙，以影響其定位和周圍內容的版面。
根據您的設計需求設定邊界值（畫素）。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊界：
-
所有邊 — 若要設定一個值以套用至所有邊，請清除每個邊的 不同邊界 核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
上下邊界 — 若要將上下邊界設定為相同的值，請在上下設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
左右邊界 — 若要將左右邊界設定為相同的值，請在左右設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
獨立 — 若要將每個邊界設定為獨立值，請在上下設定之間以及左右之間設定 解除鎖定 圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。
在已選取 樣式 標籤的右側面板上，展開 內距 區段，並設定結構元件內距的選項。 此樣式會復寫CSS padding引數，該引數是元件內容與其邊框之間的空間。 內距提供內部間距，可用來控制內容與元件邊框之間的距離。
根據您的設計需求，設定以畫素為單位的填補值。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊框間距：
-
所有邊 — 若要設定一個值以套用至所有邊，請清除 每個邊不同的內距 核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
上下間距 — 若要將上下間距設定為相同的值，請在上下設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
左右間距 — 若要將左右間距設定為相同的值，請在左右設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
獨立 — 若要將每一邊的填補設定為獨立值，請在上下設定之間以及左右之間設定 解除鎖定 圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。
按鈕
使用Button元件將一或多個可點按的按鈕插入您的內容。 使用按鈕將頁面檢視器或電子郵件收件者重新導向至支援內容（已發佈的登陸頁面或外部連結）。
新增按鈕文字
當畫布中顯示按鈕元件時，工具列會包含文字格式設定選項，以及個人化和條件變體。 如需有關編輯器工具列選項的詳細資訊，請參閱#。
當您輸入按鈕標籤文字並設定格式時，按鈕會調整大小以符合內容。
與工具列
設定連結選項
在 設定 索引標籤上，使用 連結 選項來定義按鈕文字、連結目的地，以及載入目標頁面的瀏覽器行為。
-
設定連結的型別：
-
外部連結 — 選擇此型別以使用標準URL作為連結目的地。
在 Url 中，輸入連結目的地的URL。 按一下「個人化」（「
-
登陸頁面 — 選擇此型別，在連線的Marketo Engage執行個體中選取已發佈的登陸頁面。
針對 登陸頁面 選項，請選取已發佈的登陸頁面。 按一下 選取頁面 圖示（
-
-
針對標籤，請輸入您要在按鈕內顯示的文字。
按鈕大小會根據設定的文字和樣式進行調整。
-
對於Target，請選擇如何從電子郵件或頁面重新導向連結的目的地：
- 無 — 使用預設瀏覽器或使用者端行為（預設）開啟連結。
- 空白 — 在新視窗或索引標籤中開啟連結。
- Self — 在相同框架中開啟連結。
- 父系 — 在父框架中開啟連結。
- Top — 在視窗的整個內文中開啟連結。
設定樣式
在 樣式 索引標籤中自訂按鈕樣式。
在右側面板中選取 樣式 索引標籤後，請使用 背景 區段來定義元件的背景顏色。
選取核取方塊，然後按一下顏色方塊，從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。
在已選取 樣式 索引標籤的右側面板上，展開 文字 區段並設定元件文字樣式的選項：
-
字型系列 — 按一下向下箭號圖示，選取元件中文字的字型系列。
-
字型大小 — 按一下向上和向下箭號圖示，以增加或減少字型大小，或輸入值。 對於輸入的值，您可以使用小數。
-
行高 — 按一下向上和向下箭號圖示，以增加或減少行高，或輸入值。 對於輸入的值，您可以使用小數。
-
文字樣式 — 選取文字樣式的圖示： 粗體、斜體、加底線或刪除線。
-
文字對齊方式 — 選取水準文字對齊方式的圖示： 左、置中、右或對齊。
-
字型顏色 — 按一下顏色方塊，從選擇器中選擇字型顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。
-
在已選取 樣式 標籤的右側面板上，展開 Border 區段並設定選項以顯示元件的邊框：
-
將切換開關向右移動以啟用邊框顯示選項，並根據您的設計條件進行設定：
- 若要設定邊框顏色，請選取核取方塊，然後按一下顏色方塊以從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。
-
若要設定邊框大小 （線條寬度），請按一下向上和向下箭頭圖示以增加或減少畫素數量。
-
若要設定邊框樣式，請從標準CSS
border-style值清單中選擇一個值。 -
若要決定顯示邊框的位置，請選取每個 邊框位置 核取方塊。
-
對於邊框半徑，請根據您想要的轉角曲線設定數值。
值為0 （預設）會產生方形轉角。
在已選取 樣式 標籤的右側面板上，展開 大小 區段並設定元件高度和寬度的選項：
-
高度 — 按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素的內容調整元素的高度。
-
寬度 — 使用切換功能以畫素或百分比設定寬度。
-
若為百分比寬度，請使用滑桿來設定百分比值。 百分比會根據包含區塊的內容方塊來決定元素大小，其中不包含邊框間距和邊框。 例如，值50會將元素寬度設定為其所包含區塊內容寬度的50%。
使用百分比的
-
針對以畫素為基礎的寬度，按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素內容調整元素寬度。
使用畫素的
-
展開 對齊 區段，然後選擇您要使用的水平與垂直對齊。 對齊樣式會影響HTML元件在容納元件（結構或容器）中的定位方式。
水準對齊方式會轉譯為標準text-align CSS樣式，您可以選擇左、中或右。 垂直對齊方式會轉譯為標準vertical-align CSS樣式，您可以選擇上、中或下。
HTML元件的
在已選取 樣式 標籤的右側面板上，展開 邊界 區段，並設定結構元件內邊界間距的選項。 此樣式會復寫CSS margin引數，該引數會控制元件邊框之外的空間，將元件與其他元件分開。 它會在元件周圍建立間隙，以影響其定位和周圍內容的版面。
根據您的設計需求設定邊界值（畫素）。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊界：
-
所有邊 — 若要設定一個值以套用至所有邊，請清除每個邊的 不同邊界 核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
上下邊界 — 若要將上下邊界設定為相同的值，請在上下設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
左右邊界 — 若要將左右邊界設定為相同的值，請在左右設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
獨立 — 若要將每個邊界設定為獨立值，請在上下設定之間以及左右之間設定 解除鎖定 圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。
在已選取 樣式 標籤的右側面板上，展開 邊界 區段，並設定結構元件內邊界間距的選項。 此樣式會復寫CSS margin引數，該引數會控制元件邊框之外的空間，將元件與其他元件分開。 它會在元件周圍建立間隙，以影響其定位和周圍內容的版面。
根據您的設計需求設定邊界值（畫素）。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊界：
-
所有邊 — 若要設定一個值以套用至所有邊，請清除每個邊的 不同邊界 核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
上下邊界 — 若要將上下邊界設定為相同的值，請在上下設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
左右邊界 — 若要將左右邊界設定為相同的值，請在左右設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
獨立 — 若要將每個邊界設定為獨立值，請在上下設定之間以及左右之間設定 解除鎖定 圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。
在已選取 樣式 標籤的右側面板上，展開 內距 區段，並設定結構元件內距的選項。 此樣式會復寫CSS padding引數，該引數是元件內容與其邊框之間的空間。 內距提供內部間距，可用來控制內容與元件邊框之間的距離。
根據您的設計需求，設定以畫素為單位的填補值。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊框間距：
-
所有邊 — 若要設定一個值以套用至所有邊，請清除 每個邊不同的內距 核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
上下間距 — 若要將上下間距設定為相同的值，請在上下設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
左右間距 — 若要將左右間距設定為相同的值，請在左右設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
獨立 — 若要將每一邊的填補設定為獨立值，請在上下設定之間以及左右之間設定 解除鎖定 圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。
若要使用值套用其他CSS相容屬性，請使用 進階 樣式設定。 您可以變更現有屬性的值，或新增屬性。 樣式會使用父 — 子元件（元素）的CSS繼承模型套用至元件。
顯示的屬性反映目前為元件定義的樣式。 您可以根據CSS定義變更值。 按一下新增 (+)圖示，為元件新增樣式屬性。
文字
使用文字元件，將文字區塊插入內容中。 在畫布中選取文字元件時，輸入文字並使用工具列選項來新增內嵌格式和選項，包括個人化代號和條件變體。
在 樣式 索引標籤中自訂文字元件樣式。
在右側面板中選取 樣式 索引標籤後，請使用 背景 區段來定義元件的背景顏色。
選取核取方塊，然後按一下顏色方塊，從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。
這些樣式會套用至整個文字區塊。 您可以將內嵌樣式套用至選取的文字字串。
在已選取 樣式 索引標籤的右側面板上，展開 文字 區段並設定元件文字樣式的選項：
-
字型系列 — 按一下向下箭號圖示，選取元件中文字的字型系列。
-
字型大小 — 按一下向上和向下箭號圖示，以增加或減少字型大小，或輸入值。 對於輸入的值，您可以使用小數。
-
行高 — 按一下向上和向下箭號圖示，以增加或減少行高，或輸入值。 對於輸入的值，您可以使用小數。
-
文字樣式 — 選取文字樣式的圖示： 粗體、斜體、加底線或刪除線。
-
文字對齊方式 — 選取水準文字對齊方式的圖示： 左、置中、右或對齊。
-
字型顏色 — 按一下顏色方塊，從選擇器中選擇字型顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。
-
在已選取 樣式 標籤的右側面板上，展開 Border 區段並設定選項以顯示元件的邊框：
-
將切換開關向右移動以啟用邊框顯示選項，並根據您的設計條件進行設定：
- 若要設定邊框顏色，請選取核取方塊，然後按一下顏色方塊以從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。
-
若要設定邊框大小 （線條寬度），請按一下向上和向下箭頭圖示以增加或減少畫素數量。
-
若要設定邊框樣式，請從標準CSS
border-style值清單中選擇一個值。 -
若要決定顯示邊框的位置，請選取每個 邊框位置 核取方塊。
-
對於邊框半徑，請根據您想要的轉角曲線設定數值。
值為0 （預設）會產生方形轉角。
在已選取 樣式 標籤的右側面板上，展開 大小 區段並設定元件高度和寬度的選項：
-
高度 — 按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素的內容調整元素的高度。
-
寬度 — 使用切換功能以畫素或百分比設定寬度。
-
若為百分比寬度，請使用滑桿來設定百分比值。 百分比會根據包含區塊的內容方塊來決定元素大小，其中不包含邊框間距和邊框。 例如，值50會將元素寬度設定為其所包含區塊內容寬度的50%。
使用百分比的
-
針對以畫素為基礎的寬度，按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素內容調整元素寬度。
使用畫素的
-
在已選取 樣式 標籤的右側面板上，展開 邊界 區段，並設定結構元件內邊界間距的選項。 此樣式會復寫CSS margin引數，該引數會控制元件邊框之外的空間，將元件與其他元件分開。 它會在元件周圍建立間隙，以影響其定位和周圍內容的版面。
根據您的設計需求設定邊界值（畫素）。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊界：
-
所有邊 — 若要設定一個值以套用至所有邊，請清除每個邊的 不同邊界 核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
上下邊界 — 若要將上下邊界設定為相同的值，請在上下設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
左右邊界 — 若要將左右邊界設定為相同的值，請在左右設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
獨立 — 若要將每個邊界設定為獨立值，請在上下設定之間以及左右之間設定 解除鎖定 圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。
在已選取 樣式 標籤的右側面板上，展開 內距 區段，並設定結構元件內距的選項。 此樣式會復寫CSS padding引數，該引數是元件內容與其邊框之間的空間。 內距提供內部間距，可用來控制內容與元件邊框之間的距離。
根據您的設計需求，設定以畫素為單位的填補值。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊框間距：
-
所有邊 — 若要設定一個值以套用至所有邊，請清除 每個邊不同的內距 核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
上下間距 — 若要將上下間距設定為相同的值，請在上下設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
左右間距 — 若要將左右間距設定為相同的值，請在左右設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
獨立 — 若要將每一邊的填補設定為獨立值，請在上下設定之間以及左右之間設定 解除鎖定 圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。
若要使用值套用其他CSS相容屬性，請使用 進階 樣式設定。 您可以變更現有屬性的值，或新增屬性。 樣式會使用父 — 子元件（元素）的CSS繼承模型套用至元件。
顯示的屬性反映目前為元件定義的樣式。 您可以根據CSS定義變更值。 按一下新增 (+)圖示，為元件新增樣式屬性。
分隔線
新增 分隔線 元件，在內容區段之間納入線性分隔。
在右側面板中選取 樣式 索引標籤後，請使用 背景 區段來定義元件的背景顏色。
選取核取方塊，然後按一下顏色方塊，從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。
在已選取 樣式 標籤的右側面板上，展開 行 區段並設定元件高度和寬度的選項：
-
色彩 — 按一下色彩方塊，從選擇器中選擇色彩。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。
-
高度 — 按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素的內容調整元素的高度。
-
寬度 — 使用切換功能以畫素或百分比設定寬度。
- 若為百分比寬度，請使用滑桿來設定百分比值。 百分比會根據包含區塊的內容方塊來決定元素大小，其中不包含邊框間距和邊框。 例如，值50會將元素寬度設定為其所包含區塊內容寬度的50%。
- 針對以畫素為基礎的寬度，按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素內容調整元素寬度。
-
樣式 — 從標準CSS
line-style值清單中選擇值，例如實線、點線和虛線。
在已選取 樣式 標籤的右側面板上，展開 大小 區段並設定元件高度和寬度的選項：
-
高度 — 按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素的內容調整元素的高度。
-
寬度 — 使用切換功能以畫素或百分比設定寬度。
-
若為百分比寬度，請使用滑桿來設定百分比值。 百分比會根據包含區塊的內容方塊來決定元素大小，其中不包含邊框間距和邊框。 例如，值50會將元素寬度設定為其所包含區塊內容寬度的50%。
使用百分比的
-
針對以畫素為基礎的寬度，按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素內容調整元素寬度。
使用畫素的
-
展開 對齊 區段，然後選擇您要使用的水準對齊：左對齊、置中或右對齊。 此樣式會轉譯為標準text-align CSS樣式，並影響元件在容納元件中的放置方式。
在已選取 樣式 標籤的右側面板上，展開 邊界 區段，並設定結構元件內邊界間距的選項。 此樣式會復寫CSS margin引數，該引數會控制元件邊框之外的空間，將元件與其他元件分開。 它會在元件周圍建立間隙，以影響其定位和周圍內容的版面。
根據您的設計需求設定邊界值（畫素）。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊界：
-
所有邊 — 若要設定一個值以套用至所有邊，請清除每個邊的 不同邊界 核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
上下邊界 — 若要將上下邊界設定為相同的值，請在上下設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
左右邊界 — 若要將左右邊界設定為相同的值，請在左右設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
獨立 — 若要將每個邊界設定為獨立值，請在上下設定之間以及左右之間設定 解除鎖定 圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。
在已選取 樣式 標籤的右側面板上，展開 內距 區段，並設定結構元件內距的選項。 此樣式會復寫CSS padding引數，該引數是元件內容與其邊框之間的空間。 內距提供內部間距，可用來控制內容與元件邊框之間的距離。
根據您的設計需求，設定以畫素為單位的填補值。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊框間距：
-
所有邊 — 若要設定一個值以套用至所有邊，請清除 每個邊不同的內距 核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
上下間距 — 若要將上下間距設定為相同的值，請在上下設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
左右間距 — 若要將左右間距設定為相同的值，請在左右設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
獨立 — 若要將每一邊的填補設定為獨立值，請在上下設定之間以及左右之間設定 解除鎖定 圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。
若要使用值套用其他CSS相容屬性，請使用 進階 樣式設定。 您可以變更現有屬性的值，或新增屬性。 樣式會使用父 — 子元件（元素）的CSS繼承模型套用至元件。
顯示的屬性反映目前為元件定義的樣式。 您可以根據CSS定義變更值。 按一下新增 (+)圖示，為元件新增樣式屬性。
HTML
使用HTML元件來新增部分現有HTML。 此元件可讓您輕鬆建立重複使用外部內容的模組化HTML元素。
-
在畫布上選取元件，然後按一下工具列中的「顯示原始程式碼」圖示。
-
在文字方塊中貼上HTML，然後按一下[儲存]。
如果HTML有效，它會在畫布上呈現元素。 如果是對映至其他內容元件的元素，您可以根據元件型別變更右側面板中的設定和樣式。 如果不適用，則會保留為HTML元件。
對於HTML元件，您可以在右側面板中為整個HTML元件設定下列樣式：
在右側面板中選取 樣式 索引標籤後，請使用 背景 區段來定義元件的背景顏色。
選取核取方塊，然後按一下顏色方塊，從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。
-
在已選取 樣式 標籤的右側面板上，展開 Border 區段並設定選項以顯示元件的邊框：
-
將切換開關向右移動以啟用邊框顯示選項，並根據您的設計條件進行設定：
- 若要設定邊框顏色，請選取核取方塊，然後按一下顏色方塊以從選擇器中選擇顏色。 您可以輸入已知的RGB、HSL、HSB或十六進位值來選擇顏色。 或者，您可以使用顏色滑桿和顏色欄位來選取顏色。
-
若要設定邊框大小 （線條寬度），請按一下向上和向下箭頭圖示以增加或減少畫素數量。
-
若要設定邊框樣式，請從標準CSS
border-style值清單中選擇一個值。 -
若要決定顯示邊框的位置，請選取每個 邊框位置 核取方塊。
-
對於邊框半徑，請根據您想要的轉角曲線設定數值。
值為0 （預設）會產生方形轉角。
在已選取 樣式 標籤的右側面板上，展開 大小 區段並設定元件高度和寬度的選項：
-
高度 — 按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素的內容調整元素的高度。
-
寬度 — 使用切換功能以畫素或百分比設定寬度。
-
若為百分比寬度，請使用滑桿來設定百分比值。 百分比會根據包含區塊的內容方塊來決定元素大小，其中不包含邊框間距和邊框。 例如，值50會將元素寬度設定為其所包含區塊內容寬度的50%。
使用百分比的
-
針對以畫素為基礎的寬度，按一下向上和向下箭頭圖示，以增加或減少畫素數量。 空白值(Auto)是預設值，會根據元素內容調整元素寬度。
使用畫素的
-
展開 對齊 區段，然後選擇您要使用的水平與垂直對齊。 對齊樣式會影響HTML元件在容納元件（結構或容器）中的定位方式。
水準對齊方式會轉譯為標準text-align CSS樣式，您可以選擇左、中或右。 垂直對齊方式會轉譯為標準vertical-align CSS樣式，您可以選擇上、中或下。
HTML元件的
在已選取 樣式 標籤的右側面板上，展開 邊界 區段，並設定結構元件內邊界間距的選項。 此樣式會復寫CSS margin引數，該引數會控制元件邊框之外的空間，將元件與其他元件分開。 它會在元件周圍建立間隙，以影響其定位和周圍內容的版面。
根據您的設計需求設定邊界值（畫素）。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊界：
-
所有邊 — 若要設定一個值以套用至所有邊，請清除每個邊的 不同邊界 核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
上下邊界 — 若要將上下邊界設定為相同的值，請在上下設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
左右邊界 — 若要將左右邊界設定為相同的值，請在左右設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
獨立 — 若要將每個邊界設定為獨立值，請在上下設定之間以及左右之間設定 解除鎖定 圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。
在已選取 樣式 標籤的右側面板上，展開 內距 區段，並設定結構元件內距的選項。 此樣式會復寫CSS padding引數，該引數是元件內容與其邊框之間的空間。 內距提供內部間距，可用來控制內容與元件邊框之間的距離。
根據您的設計需求，設定以畫素為單位的填補值。 您可以單獨設定元件所有側、上邊框、左右邊或每一側的邊框間距：
-
所有邊 — 若要設定一個值以套用至所有邊，請清除 每個邊不同的內距 核取方塊。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
上下間距 — 若要將上下間距設定為相同的值，請在上下設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
左右間距 — 若要將左右間距設定為相同的值，請在左右設定之間設定 鎖定 圖示。 按一下向上和向下箭頭圖示，以增加或減少畫素數量。
-
獨立 — 若要將每一邊的填補設定為獨立值，請在上下設定之間以及左右之間設定 解除鎖定 圖示。 針對各個設定，按一下向上和向下箭頭圖示，以增加或減少畫素數量。