媒體 — 橫幅
使用 Banner 內容型別新增圖解式的互動式元件，讓使用者參與Page Builder 階段中的行動號召和按鈕。
店面首頁上的
橫幅工具箱
當您將滑鼠停留在橫幅容器上時，橫幅工具箱就會出現。
新增橫幅
變更橫幅設定
-
將滑鼠懸停在橫幅容器上以顯示工具箱，然後選擇 設定 （
-
請於下列章節中取得有關更新可用設定的詳細資訊：
-
完成後，按一下右上角的 Save 以關閉 Edit Banner 頁面。
-
在右上角，按一下 Save 以套用設定並返回Page Builder工作區。
Appearance
橫幅是以下述四種預先定義的範本之一為基礎，因此可輕鬆設定及維護。
-
選擇下列其中一個橫幅版位型別：
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto 位置 說明 Poster 將內容與橫幅上的按鈕置中對齊。 覆蓋圖（若已使用）可延伸橫幅的完整寬度。 Collage Left 將內容和按鈕放置在橫幅左側的已定義區域中。 覆蓋圖（若使用）只會覆蓋定義的區域。 Collage Center 將內容和按鈕放置在橫幅中央的已定義區域中。 覆蓋圖（若使用）只會覆蓋定義的區域。 Collage Right 將內容和按鈕放置在橫幅右側的已定義區域中。 覆蓋圖（若使用）只會覆蓋定義的區域。 
-
（選擇性）輸入列的 Minimum Height。
最小高度可以是具有任何有效CSS單位（例如
100px、50%、50em、100vh）的數字，或是計算（例如100vh - 237px）。例如，您可以將橫幅的最低高度設定為延伸頁面的完整高度，讓全頁背景影像和視訊的選項引人注目。
Background
定義橫幅的背景顯示時，有許多選項可供選擇。 您可以套用簡單的顏色或背景影像，並管理更複雜的效果。
Background Color
選擇色票、按一下檢色器，或輸入有效的顏色名稱或對應的十六進位值，以指定背景顏色。 此設定決定列的背景顏色。 您也可以調整顏色的不透明度。
您可以透過下列三種方式之一設定值：
- 預先定義的色彩名稱，例如
White - 顏色的十六進位顏色值，例如
#ffffff - 顏色的rgba值，具有不透明度百分比，例如
rgba(255, 255, 255, 0.75)
如果要選擇顏色，請按一下 無顏色 方塊左側的色票。
如果您按一下顏色方塊來再次開啟檢色器，滑桿下方的方塊會顯示目前的紅色、綠色、藍色和Alpha值(rgba)。 最後一個數字以小數表示目前的不透明度百分比。 您可以使用滑桿來調整不透明度，或輸入所需的十進位值。
Background Type
背景型別可以是影像或視訊。 Page Builder預設為Image並顯示各種影像設定。 如果您選取Video，Page Builder會將影像設定與視訊設定交換。 以下各節將說明兩種背景型別設定。
影像型別設定
如果您將 背景型別 設定為Image，請使用下列設定來定義背景影像顯示。
-
Background Image — 如有需要，請使用提供的工具選擇要套用至橫幅的背景影像：
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto 工具 說明 Upload 將影像檔案從本機電腦上傳到相簿，然後將其套用為橫幅的背景影像。 Select from Gallery 提示您從相簿中選擇現有影像作為橫幅的背景影像。 
可讓您將影像拖曳至相機圖磚，或瀏覽至本機檔案系統中的影像。 -
Background Mobile Image — 如有需要，請使用相同的工具來選擇不同的背景影像，以便在行動裝置上顯示。
-
Background Size — 設定此選項以決定背景影像相對於橫幅寬度的縮放方式：
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto 選項 說明 Cover背景影像涵蓋橫幅的整個寬度。 Contain背景影像僅限於內容區域的寬度。 Auto套用目前樣式表的大小。 
-
Background Position — 設定此選項以判斷背景影像與橫幅的錨定方式：
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto 錨點 位置 Top左/中/右 Center左/中/右 Bottom左/中/右 錨點就像推送圖釘，會將影像附加至指定背景位置的橫幅上。
-
Background Attachment — 設定附件型別以決定背景影像相對於捲動頁面的移動方式：
table 0-row-2 1-row-2 2-row-2 layout-auto 選項 說明 Scroll當頁面捲動時，附加的背景影像會同步處理為向下移動。 Fixed（不適用於行動裝置）當容器捲動影像時，背景影像不會移動，且會固定在指定的背景位置。 -
Background Repeat — 如果要重複背景影像以填滿空間，請變更此設定
Yes。
視訊型別設定
如果您將 Background Type 設為Video，請使用下列設定來定義背景影像顯示。
-
Video URL — 輸入有效的視訊URL。 有效的視訊URL可以連結至：
- YouTube影片：
https://youtu.be/CoDhMRUUjeI - Vimeo影片：
https://vimeo.com/190156113 - 有效的視訊檔案（建議使用
.mp4）：https://myvideos.com/spiral.mp4
- YouTube影片：
-
Overlay Color — 選取要套用透明色調至視訊的色彩。
-
Infinite Loop — 設為
No，讓視訊播放一次並停止。 當它設定為Yes（預設）時，視訊會在無限回圈中重複。 -
Lazy Load — 設為
No，讓視訊載入頁面，即使未顯示。 當視訊設定為Yes（預設）時，視訊只有在熒幕上可見時才從來源載入。 -
Play Only When Visible — 設為
No，無論視訊是否顯示，都可在視訊載入後立即開始播放。 當視訊設定為Yes（預設）時，視訊只會在可見時開始播放。 -
Fallback Image — 如有需要，在視訊載入前，如果視訊因某項原因未載入，請指定要在熒幕上顯示的影像。
Content
您可以直接在舞台上修改橫幅內容，或在變更設定時修改橫幅內容。 這些設定提供更複雜的內容功能，例如橫幅連結和按鈕以及覆蓋。 內容的位置反映外觀位置設定。
舞台上的簡單內容
-
按一下預留位置文字，然後輸入要出現在橫幅上的文字。
編輯器工具列會顯示在文字方塊上方。
-
使用編輯器工具列來輸入和格式化文字，以及插入元素，例如連結、影像和Widget。
設定中的複雜內容
-
將滑鼠懸停在橫幅容器上以顯示工具箱，然後選擇 設定 （
-
向下捲動至 Content 區段，並使用 Message Text 編輯器輸入橫幅文字並設定其格式。
您也可以插入元素，例如文字連結、影像和Widget。
-
如有需要，請指定橫幅的 Link。
連結是客戶按一下橫幅按鈕或區域時顯示的目的地頁面。 您可以使用下列三種連結型別之一：
- URL — 連結至相對或完整URL。
- Product — 根據產品名稱或SKU識別目的地頁面。 根據部分或完整名稱依名稱搜尋產品。 從搜尋結果清單中選擇產品。
- Category — 將目的地頁面識別為類別樹狀結構中的特定類別或子類別。 根據部分或完整名稱搜尋類別。 從所顯示樹狀結構的展開區段中選擇類別。
- Page — 將目的地頁面識別為特定內容頁面。 根據部分或完整名稱來搜尋頁面。 從搜尋結果清單中選擇頁面。
note note NOTE 自2.4.1版開始，Page Builder不再支援連結橫幅與巢狀文字內的連結，因為店面顯示時發生問題。 如果您在_Message Text_中使用連結，則無法設定_Link_選項。 如果您偏好將單一連結用於整個橫幅，您可以從文字中移除所有連結。 
-
如有需要，可新增按鈕以提示客戶追隨連結。
橫幅「外觀」設定會在文字下方放置單一連結或按鈕。 完成您要新增之連結或按鈕的屬性。
note note NOTE 您也可以將區塊新增至橫幅，以使用多個按鈕或連結。 為避免衝突，請將所有連結或按鈕保留在單獨的區塊中，並且不要將連結或按鈕直接新增到橫幅中。 -
將 Show Button 設定為下列其中一項：
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto 選項 說明 Always橫幅上永遠都會顯示按鈕。 On Hover只有在暫留時，橫幅上才會顯示按鈕。 Never Show橫幅上絕不會出現按鈕。 -
輸入要出現在按鈕上的 Button Text。
-
將 Button Type 設定為下列其中一項：
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto 選項 說明 Primary從目前的樣式表套用主要按鈕樣式。 Secondary套用目前樣式表中的次要按鈕樣式（如果適用）。 Link建立超連結而非按鈕。 目前主題的按鈕樣式決定按鈕格式。 通常，主要按鈕的背景顏色會比次要按鈕更突出。
-
-
將 Show Overlay 設定為下列其中一項：
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto 選項 說明 Always覆蓋圖一律可見。 On Hover覆蓋圖只會出現在游標暫留上。 Never Show覆蓋圖不可見。 您可以使用覆蓋將背景顏色套用至由Appearance設定定義的作用中內容區域。 橫幅背景影像在橫幅的整個寬度內仍可見。
如果您選擇顯示覆蓋，請設定 Overlay Color：
- 按一下 無色彩 色票，然後選擇色票。
- 在 無色彩 欄位中，輸入有效的色彩名稱或十六進位值。
-
在右上角，按一下 Save 以套用設定並返回Page Builder工作區。
Search Engine Optimization seo
搜尋引擎可以看到這些設定的文字，並改善頁面編制索引的方式。
-
針對 Alternative Text，輸入要顯示之數位協助工具的 alt 文字說明。
替代文字的使用是協助工具的最佳實務，在某些地區是法律所要求。 在HTML中，
alt屬性是image標籤的子集：<image title="tooltip" alt="description" src="image.jpg">。 -
針對 Title Attribute，輸入要顯示為滑鼠懸停工具提示的文字。
最佳實務是選擇描述性、關鍵字豐富的標題，以改進搜尋引擎為影像編制索引的方式。 在HTML中，
title屬性是image標籤的子集：<image title="tooltip" alt="description" src="image.jpg">。
Advanced
-
若要控制新增至橫幅的內容容器的水平位置，請選擇 Alignment：
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto 選項 說明 Default套用目前佈景主題樣式表中指定的對齊預設設定。 Left將內容容器沿橫幅容器的左邊框對齊，並允許指定的任何邊框間距。 Center將內容容器對齊橫幅容器的中央，並允許指定的任何邊框間距。 Right沿著橫幅容器的右邊框對齊內容容器，並允許指定的任何邊框間距。 -
設定套用至橫幅容器所有四個側面的 Border 樣式：
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto 選項 說明 Default套用關聯樣式表所指定的預設邊框樣式。 None未提供任何容器框線的可見指示。 Dotted容器邊框會以虛線顯示。 Dashed容器邊框會以虛線顯示。 Solid容器邊框會以實線顯示。 Double容器邊框會以雙線顯示。 Groove容器框線會顯示為槽線。 Ridge容器框線會顯示為脊線。 Inset容器框線會顯示為內嵌線。 Outset容器邊框會顯示為外線。 -
如果您設定了
None以外的框線樣式，請完成框線顯示選項：-
Border Color — 選擇色票、按一下檢色器，或輸入有效的顏色名稱或對應的十六進位值，以指定顏色。
-
Border Width — 輸入框線寬度的畫素數。
-
Border Radius — 輸入畫素數目，以定義用來將邊框每個角落環繞的半徑大小。
-
-
（選擇性）從目前的樣式表中指定要套用至橫幅容器的 CSS classes 名稱。
以空格分隔多個類別名稱。
-
輸入 Margins and Padding 的值（以畫素為單位），以指定橫幅的外部邊界和內邊距。
在橫幅容器圖表中輸入每個對應的值。
table 0-row-2 1-row-2 2-row-2 layout-auto 選項 說明 Margins 套用至容器所有側邊外部邊緣的空白空間量。 Padding 套用至容器所有邊內側邊緣的空白空間量。