結構元件 structure-components

選擇此型別以瀏覽並從Journey Optimizer B2B edition資料庫或連線的Market Engage執行個體選取影像資產。

{width="700" modal="regular"}

從對話方塊中，您可以從選取的存放庫中選擇影像。 按一下​ 選取 ​以新增資產。

有多種工具可協助您找到所需的資產：

• 按一下左上方的​ 篩選器 ​圖示，以根據您的條件篩選顯示的專案。

• 在​ 搜尋 ​欄位中輸入文字，以篩選顯示的專案以符合資產名稱。

  {width="700" modal="regular"}

選擇此型別以瀏覽並從設定的Experience Manage Assets存放庫中選取影像資產。

在​ 選取Assets ​對話方塊中，使用可用的工具選擇影像，以找出您需要的資產，然後按一下​選取：

• 變更右上角的​存放庫。

• 按一下右上角的「管理資產」，在其他瀏覽器分頁中開啟Assets存放庫，並使用AEM Assets管理工具。

• 按一下右上角的​ 檢視型別 ​選擇器，將顯示變更為​清單檢視、格線檢視、相簿檢視​或​瀑布檢視。

• 按一下​ 排序順序 ​圖示，以變更升序與降序之間的排序順序。

  {width="700" modal="regular"}

• 按一下​ 排序依據 ​功能表箭頭，將排序條件變更為​名稱、大小​或​已修改。

• 按一下左上方的​ 篩選器 ​圖示，以根據您的條件篩選顯示的專案。

• 在​ 搜尋 ​欄位中輸入文字，以篩選顯示的專案以符合資產名稱。

  {width="700" modal="regular"}

選擇此型別從您的系統選取檔案，並將其匯入Journey Optimizer B2B edition資產庫。

在​ 上傳影像 ​對話方塊中，將檔案從您的系統拖放至檔案方塊。 檔案大小上限為100 MB。

{width="450"}

所選影像的檔案名稱會顯示在對話方塊中。 資產檔案名稱必須是唯一的（跨資料夾），如果已存在同名的檔案，則會顯示訊息。 名稱最多可包含100個字元，且不能包含特殊字元（例如;、:、\和|）。

按一下​匯入。

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

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

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

   {width="300"}

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

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

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

   {width="250"}

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

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

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

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

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

  {width="250"}

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

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

  {width="250"}

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

  {width="250"}

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

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

{width="250"}

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

  {width="300"}

• 背景影像 — 移動切換選擇器以啟用背景影像設定。

  {width="250"}

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

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

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

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

   {width="300"}

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

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

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

   {width="250"}

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

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

展開​ 對齊 ​區段，然後選擇您要使用的垂直對齊：上、中或下。 此樣式會轉譯為標準vertical-align CSS樣式，並影響容納元件內的定位。

{width="250"}

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

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

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

  {width="250"}

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

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

  {width="250"}

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

  {width="250"}

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

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

{width="250"}