媒體 — 滑桿

開啟您要放置滑桿的頁面、區塊或動態區塊，並展開​ Content ​區段。

在Page Builder面板中，展開​ Media ​並將​ Slider ​預留位置拖曳到舞台上的列、欄或索引標籤。

在下列範例中，列的背景顏色是黃色(#fffd16)。

{width="600" modal="regular"}

滑桿容器會以單一空白幻燈片顯示在舞台上。

按一下滑桿容器以顯示文字編輯器，並輸入第一張幻燈片的內容。

您也可以使用Content設定包含更複雜的橫幅內容。

按一下滑桿底部的導覽點，以顯示個別幻燈片的工具箱，並選擇​ 設定 （ {width="20"} ）圖示。

滑桿有兩個工具箱。 請確定您使用的是底部的投影片工具箱。

視需要根據下列章節完成設定：

• Appearance
• Background
• Content
• Search Engine Optimization
• Advanced

完成後，按一下​ Save ​套用設定並返回Page Builder工作區。

按一下投影片下方的導覽點以顯示工具箱，然後選擇​ 複製 （ {width="20"} ）圖示。

{width="500" modal="regular"}

按一下新幻燈片的導覽點，並顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

視需要修改設定，請遵循下列章節：

• Appearance
• Background
• Content
• Advanced

完成後，按一下​ Save ​套用設定並返回Page Builder工作區。

將滑桿容器暫留在頂端以顯示工具箱，然後選擇​ 新增 （ {width="20"} ）圖示。

{width="500" modal="regular"}

新的空白投影片具有自己的導覽點與工具箱，會新增至滑桿，並顯示在舞台上。

{width="500" modal="regular"}新增投影片

按一下新幻燈片的導覽點，並顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

視需要修改設定，請遵循下列章節：

• Appearance
• Background
• Content
• Advanced

完成後，按一下右上角的​ Save ​以關閉​ Edit Slide ​頁面。

建立您要在幻燈片上看到的Widget。

開啟您要放置滑桿的頁面、區塊或動態區塊，並展開​ Content ​區段。

在Page Builder面板中，展開​ Media ​並將​ Slider ​預留位置拖曳到舞台上的列、欄或索引標籤。

按一下滑桿容器以顯示文字編輯器工具列，然後按一下​ 插入Widget （ {width="20"} ）圖示。

選取所需的​ Widget Type。

指定視介面工具集型別而異的設定

{width="600" modal="regular"}

完成後，按一下右上角的​ Insert Widget。

視需要修改其他設定。

完成後，按一下右上角的​ Save。

{width="600" modal="regular"}

變更舞台上的滑桿顯示，並檢視您要變更的滑桿。

在個別的投影片工具箱上，選擇​ 設定 （ {width="20"} ）圖示，並視需要根據下列章節完成設定。

在右上角，按一下​ Save ​以套用設定並返回Page Builder工作區。

選擇下列其中一種投影片放置型別：

{width="600" modal="regular"}

輸入​ Slide Name。

當您在編輯模式下工作時，幻燈片名稱會以工具提示的形式顯示在導覽點上方。 從店面看不到幻燈片名稱。

導覽中的 {width="500" modal="regular"}

輸入投影片的​ Minimum Height。

最小高度可以是具有任何有效CSS單位（例如100px、50%、50em、100vh）的數字，或是計算（例如100vh - 237px）。

例如，您可以設定投影片的最低高度以涵蓋頁面的整個高度，然後使用背景影像和視訊來吸引設計選項。

按一下預留位置或現有文字，然後輸入要顯示在幻燈片上的新文字。

編輯器工具列會顯示在文字方塊上方。

使用編輯器工具列來輸入和格式化文字，以及插入元素，例如連結、影像和Widget。

{width="500" modal="regular"}

按一下滑桿底部的導覽點，以顯示個別幻燈片的工具箱，並選擇​ 設定 （ {width="20"} ）圖示。

在​ Content ​區段中，輸入您要與投影片一起出現的​ Message Text。

向下捲動至​ Content ​區段，並使用​ Message Text ​編輯器輸入橫幅文字並設定其格式。

您也可以插入元素，例如文字連結、影像和Widget。

使用編輯器工具列，視需要格式化文字。

此範例中的第一張投影片有背景影像，但沒有訊息文字。 滑杆上方的Buy 3 Get 1 Free文字位於文字容器中（稍後新增）。

如有需要，請為投影片指定​ Link。

此連結是客戶按一下幻燈片區域時顯示的目的地頁面。 您可以使用下列三種連結型別之一：

• URL — 連結至相對或完整URL。

• Product — 根據產品名稱或SKU識別目的地頁面。 根據部分或完整名稱依名稱搜尋產品。 從搜尋結果清單中選擇產品。

  {width="600" modal="regular"}

• Category — 將目的地頁面識別為類別樹狀結構中的特定類別或子類別。 根據部分或完整名稱搜尋類別。 從所顯示樹狀結構的展開區段中選擇類別。

  {width="600" modal="regular"}

• Page — 將目的地頁面識別為特定內容頁面。 根據部分或完整名稱來搜尋頁面。 從搜尋結果清單中選擇頁面。

  {width="600" modal="regular"}

自2.4.1版開始，Page Builder不再支援連結投影片和巢狀文字內的連結，因為店面無法顯示。 如果您在​_Message Text_​中使用連結，則無法設定​_Link_​選項。 如果您想要在整個投影片中使用單一連結，您可以從文字中移除所有連結。 {width="300"}

如果您要防止訪客離開您的商店，請選取「Open in new tab」核取方塊。 清除核取方塊後，連結的目的地會在相同的瀏覽器標籤中開啟，這樣可以有效地導覽訪客離開您的商店。

如有需要，可新增按鈕以提示客戶追隨連結。

投影片​ 外觀 ​位置會將單一連結或按鈕置於文字下方。 完成您要新增之連結或按鈕的屬性。

{width="600" modal="regular"}

• 將​ 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 ​設定為下列其中一項：

您可以使用覆蓋將背景顏色套用至由「外觀」設定所定義的作用中內容區域。 幻燈片背景影像在幻燈片的整個寬度內仍保持可見。

{width="600" modal="regular"}

如果您選擇顯示覆蓋，請設定​ Overlay Color：

• 按一下​ 無色彩 ​色票，然後選擇色票。
• 在​ Color ​欄位中，輸入有效的顏色名稱或十六進位值。

{width="600" modal="regular"}

若要控制新增至投影片的內容水平位置，請選擇​ Alignment：

設定套用至投影片所有四個邊的​ Border ​樣式：

如果您設定了None以外的框線樣式，請完成框線顯示選項：

{width="600" modal="regular"}

（選擇性）從目前的樣式表中指定要套用至幻燈片的​ CSS classes ​名稱。

以空格分隔多個類別名稱。

輸入​ Margins and Padding ​的值（以畫素為單位），以指定幻燈片的外部邊界和內邊距。

在投影片圖表中輸入每個對應的值。

在Page Builder面板中，展開​ Elements ​並將​ 文字 ​預留位置拖曳至舞台上的列、欄或索引標籤集。

拖曳時，紅色指引會標籤滑杆上方的插入點。

{width="600" modal="regular"}

視需要使用編輯器來格式化文字。

{width="500" modal="regular"}

將滑桿容器暫留在滑桿容器上以顯示主工具箱，並選擇​ 設定 （ {width="20"} ）圖示。

{width="500" modal="regular"}

輸入投影片的​ Minimum Height。

最小高度可以是具有任何有效CSS單位（例如100px、50%、50em、100vh）的數字，或是計算（例如100vh - 237px）。

例如，您可以設定滑桿的最小高度來延伸頁面的完整高度，為全頁背景影像和視訊提供引人入勝的選項。

{width="400"}

如果您希望滑桿在頁面載入時開始，請將​ Autoplay ​設為Yes，並將​ Autoplay Speed ​設為幻燈片之間延遲的毫秒數。

依預設，速度設為4000毫秒，即4秒。 如果您將自動播放設為No，則預設會顯示第一張幻燈片，客戶必須按一下幻燈片導覽（點或箭頭）來依序顯示下一張幻燈片。

{width="600" modal="regular"}

若要平滑轉換從一張投影片到下一張投影片，請將​ Fade ​設定為Yes。

淡入淡出後，投影片看起來會原地不動，但內容會隨著移動而平滑變化。 若不淡化，您會看到幻燈片之間的水準移動。

{width="600" modal="regular"}

若要在頁面開啟時無限期重複投影片放映，請將​ Infinite Loop ​設為Yes。

若要選擇滑塊的導覽控制項型別，請執行下列動作：

• 若要在每個投影片的左右兩側包含​ 下一個 ​和​ 上一個 ​箭頭，請將​ Show Arrows ​設為Yes。

• 若要在滑桿下方包含一組導覽點，請將​ Show Dots ​設為Yes。

{width="600" modal="regular"}

視需要完成進階滑桿設定。

完成後，按一下​ Save ​套用設定並返回Page Builder工作區。

若要控制上層滑桿容器中幻燈片的位置，請選擇​ Alignment：

設定套用至滑桿容器所有四個側面的​ Border ​樣式：

如果您設定了None以外的框線樣式，請完成框線顯示選項：

（選擇性）從目前的樣式表中指定要套用至滑桿容器的​ CSS classes ​名稱。

以空格分隔多個類別名稱。

輸入​ Margins and Padding ​的值（以畫素為單位），以決定滑桿容器的外部邊界和內邊距。

在圖表中輸入對應的值。

開啟您已包含滑桿的頁面，將​ Enable Page ​設定為Yes。

在右上角，按一下​ Save ​箭頭並選擇​ Save & Close。

在​ 頁面 ​格線中尋找頁面，並在​ Action ​欄中選取​ View。

{width="600" modal="regular"}

預覽滑桿時，請調整視窗大小，以便檢視視窗在行動裝置上的顯示方式。

{width="400" modal="regular"}