元素 — 按鈕

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

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

將滑鼠懸停在按鈕上以顯示工具箱，然後選擇​ 設定 （ ）圖示。

輸入要顯示在按鈕上的​ Button Text。

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

將​ Button Type ​設定為下列其中一項：

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

使用下列其中一種型別設定​ Button Link：

• URL — 輸入連結的目的地URL。

  URL可以是商店中產品或頁面的相對連結，或完全限定的URL。

  相對URL範例 — ../luma-analog-watch.html

  完整URL範例 — http://mystore.com/luma-analog-watch.html

  如果連結進入不同的網站，您可以在新的瀏覽器分頁中開啟連結，讓目前的頁面保持對商店的開啟狀態。

  若要防止訪客離開您的商店，請選取「Open in new tab」核取方塊。

• Product — 輸入產品名稱（部分或完整）或SKU，然後在清單中選擇產品名稱。

  note note
  NOTE
  產品會根據​_顯示無庫存產品_​設定顯示在清單中。 針對使用Inventory management的多Source商家，產品清單僅受指派給預設網站的來源限制。

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

• Category — 輸入類別名稱（部分或完整），或按一下空白欄位以顯示類別樹狀結構。 然後，在樹狀結構中選取類別名稱。

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

• Page — 輸入CMS頁面的名稱（部分或完整），或按一下空白欄位以顯示完整清單。 然後，在搜尋結果清單中選擇頁面名稱。

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

視需要完成進階設定。

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

將滑鼠懸停在按鈕容器上以顯示工具箱，然後選擇​ 新增 （ {width="20"} ）圖示。

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

輸入要顯示在第二個按鈕上的文字。

按一下新按鈕以顯示其工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

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

將​ Button Type ​設為Secondary。

視需要設定​ Button Link。

在以下範例中，連結是前往聯絡我們頁面的相對URL。

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

視需要完成進階設定。

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

再次按一下舞台上的第二個按鈕，然後選擇​ 複製 （ {width="20"} ）圖示。

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

輸入要顯示在第三個按鈕上的文字。

按一下第三個按鈕以顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

第三個按鈕的 {width="500" modal="regular"}

視需要更新​ Button Link。

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

將滑鼠懸停在按鈕容器上以顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

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

在​ Appearance ​底下，選擇​ Stacked。

將​ All Buttons are same size ​設為Yes。

{width="300"}

使用按鈕容器]button-container的[變更設定的說明，視需要更新其餘設定。

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

完整的棧疊按鈕組出現在舞台上，包含一個主要按鈕和兩個次要按鈕。

舞台上的 {width="500" modal="regular"}

按一下您要移動的按鈕。

選取並將按鈕文字前出現的移動（ {width="20"} ）圖示拖曳到按鈕容器內按鈕的新位置。

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

按一下舞台上的按鈕以顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

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

視需要更新標準設定。

• Button Text — 輸入要顯示在按鈕上的文字（也可以直接從舞台更新）。

• Button Type — 決定按鈕格式。

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  型別	說明
  Primary	從目前的樣式表套用主要按鈕樣式。
  Secondary	套用目前樣式表中的次要按鈕樣式（如果適用）。
  Link	建立超連結而非按鈕。

• Button Link — 決定按一下按鈕時所服務的目的地頁面。

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  選項	說明
  URL	使用相對或完整URL來識別目的地頁面。
  Product	根據產品名稱或SKU識別目的地頁面。 您可以根據部分或完整名稱來搜尋產品名稱。 然後從搜尋結果清單中選擇產品。
  Category	將目的地頁面識別為類別樹狀結構中的特定類別或子類別。
  Page	將目的地頁面識別為特定的CMS頁面。

視需要完成進階設定。

若要儲存設定並返回Page Builder工作區，請按一下右上角的​ Save。

將滑鼠懸停在按鈕容器上以顯示工具箱，然後選擇​ 設定 （ {width="20"} ）圖示。

視需要更新​ Appearance ​設定。

• 使用排列選項在容器中水平或垂直顯示按鈕：

  table 0-row-2 1-row-2 2-row-2 layout-auto
  選項	說明
  Inline	水準排列按鈕。
  Stacked	垂直排列按鈕。

• 根據您的偏好設定，設定​ All buttons are same size ​選項。

  設定為Yes時，容器中的所有按鈕都會根據最長按鈕文字的長度，擁有一致的大小。

視需要完成進階設定。

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

若要控制上層容器內的位置，請選擇​ Alignment：

設定套用至按鈕或按鈕容器所有四個側面的​ Border ​樣式：

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

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

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

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

在圖表中輸入對應的值。