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

    瀏覽可用的影像資產 {width="700" modal="regular"}

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

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

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

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

      使用篩選和搜尋欄位來尋找您需要的資產 {width="700" modal="regular"}

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

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

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

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

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

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

      使用選取Assets對話方塊中的工具來尋找及選取影像資產 {width="700" modal="regular"}

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

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

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

    使用篩選和搜尋欄位來尋找資產 {width="700" modal="regular"}

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

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

    將影像檔案匯入 {width="450"}

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

    按一下​匯入。

您可以在右側面板中為影像新增影像標題和替代文字。

影像設定 {width="250"}

設定連結選項

在​ 設定 ​索引標籤上，使用​ 連結 ​選項將影像與載入目標頁面的目的地和瀏覽器行為連結。

  1. 設定連結的​型別：

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

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

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

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

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

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

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

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

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

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

設定樣式

在右側面板中設定影像元件的樣式。

背景

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

選取核取方塊，然後按一下顏色方塊，從選擇器中選擇顏色。 您可以輸入已知的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"}

對齊方式

展開​ 對齊 ​區段，然後選擇您要使用的水準對齊：左對齊、置中或右對齊。 此樣式會轉譯為標準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"}

社交

使用​ 社交 ​元件，將社群媒體頁面的連結插入您的內容中。 其中包含三種預設的社群媒體型別，但您可以視需求新增或移除這些型別。

具有預設型別的新社交元件 {width="600" modal="regular"}

  • 若要新增社群媒體型別，請按一下​新增 ( + )圖示，然後選擇要新增的社群媒體型別。

    按一下+以新增社群媒體型別 {width="250"}

  • 若要移除社群媒體型別，請按一下社群媒體圖示旁的​X。

在選取了社群媒體型別後，設定該型別的選項：

  • URL — 輸入您要連結至社群媒體圖形或圖示的社群媒體URL。

  • Source — 如果您想使用自己的影像，而不是預設影像，請選擇和影像資產。 您可以從已連線的Marketo Engage資產存放庫或Experience Manager Assets存放庫（如果已設定）中選取影像，或從您的系統匯入影像檔案。 如需選取和匯入影像資產的詳細資訊，請參閱影像元件資訊。

  • 替代文字 — 為顯示的影像輸入替代文字。

    所選社群媒體型別的設定 {width="250"}

若要定義所有社群媒體圖形的一致顯示大小，請設定​影像大小。

您可以為​ Social ​元件設定下列樣式選項：

背景

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

選取核取方塊，然後按一下顏色方塊，從選擇器中選擇顏色。 您可以輸入已知的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"}

對齊方式

展開​ 對齊 ​區段，然後選擇您要使用的水準對齊：左對齊、置中或右對齊。 此樣式會轉譯為標準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"}

表單（登陸頁面）

[Beta]{class="badge informative" title="Beta功能"}

使用​ 表單 ​元件，將已發佈的表單新增至登入頁面或登入頁面範本。 如需建立和發佈表單的詳細資訊，請參閱Forms。

  1. 按一下元件工具列中的​ 表單 ​工具，或使用右側的​ 內嵌表單 ​屬性來選取已發佈的表單。

    選取已發佈的表單 {width="600"}

  2. 如果您要覆寫表單的預設​後續追蹤型別，請根據您的頁面或範本需求變更設定。

    此頁面也稱為表單的​感謝頁面，此設定會決定訪客提交表單時會發生什麼情況：

    • 停留在頁面 — 選擇此選項可在提交表單時讓訪客停留在相同頁面。

    • 登陸頁面 — 選擇此選項可選取任何Journey Optimizer B2B edition或Marketo Engage登陸頁面作為後續追蹤。

    • 外部URL — 選擇此選項可指定任何URL作為後續頁面。 訪客提交表單後，瀏覽器會載入指定的URL。

      note tip
      TIP
      如果您希望使用表單下載檔案，您可以指定託管檔案的URL。 透過此設定，提交按鈕可作為下載按鈕運作。

      變更後續追蹤設定 {width="280"}

如有需要，請選取右側面板中的​ 樣式 ​索引標籤，以設定結構元件內的表單邊界。

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

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

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

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

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

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

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

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

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

recommendation-more-help