元素 — 按鈕

使用 按鈕 內容型別,以新增中的個別按鈕或一組按鈕 Page Builder 階段. 您可以水平或垂直排列按鈕,並將它們直接新增到舞台上的列、欄、標籤和橫幅中。

店面有按鈕的橫幅 {width="600" modal="regular"}

NOTE
若您正在對下列專案進行重大變更 Page Builder 內容,建議您增加 管理員工作階段存留期 以防止工作階段在工作時逾時。

工具箱

當您使用「按鈕」內容型別時,您可以新增和編輯個別按鈕以及容納一或多個按鈕的按鈕容器。 每個都有自己的工具箱,您可用來設計 Page Builder 階段。

個別按鈕工具箱

按鈕工具箱 {width="500" modal="regular"}

工具
圖示
說明
設定
設定圖示 {width="25"}
開啟「編輯按鈕」頁面,您可以在此頁面變更按鈕的屬性。
複製
「複製」圖示 {width="25"}
製作按鈕的副本。
移除
移除圖示 {width="25"}
從舞台刪除按鈕。

按鈕容器工具箱

按鈕容器工具箱 {width="500" modal="regular"}

工具
圖示
說明
移動
移動圖示 {width="25"}
將按鈕容器移至頁面上的另一個有效位置。
新增
「新增」圖示 {width="25"}
將按鈕新增至容器。
(標籤)
按鈕
將目前的容器識別為按鈕元素。
設定
設定圖示 {width="25"}
開啟「編輯按鈕」頁面,您可以在此頁面變更容器的屬性。
隱藏
隱藏圖示 {width="25"}
隱藏按鈕容器。
顯示
顯示圖示 {width="25"}
顯示隱藏按鈕容器。
複製
「複製」圖示 {width="25"}
製作按鈕容器的副本。
移除
移除圖示 {width="25"}
從舞台刪除按鈕容器及其內容。
NOTE
隱藏的元素會儲存在資料庫中,且對客戶不可見。 不過,搜尋引擎和其他對您的網站進行編目的機器人可看見這些元素。 如果透過具有不可見屬性的API呼叫提出請求,這些區段也會當作內容的一部分傳回,除非您將其從階段中移除。

新增個別按鈕

  1. 在 Page Builder 面板,展開 Elements 並拖曳 Buttons 舞台上的列、欄或標籤集的預留位置。

    將按鈕拖曳到舞台 {width="500" modal="regular"}

  2. 將滑鼠懸停在按鈕上以顯示工具箱,然後選擇 設定 ( 設定圖示 )圖示。

  3. 輸入 Button Text 按鈕上顯示的專案。

    基本按鈕設定 {width="600" modal="regular"}

  4. 設定 Button Type 變更為下列其中一項:

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

    主要和次要按鈕範例 {width="500" modal="regular"}

  5. 設定 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,產品清單僅受指派給預設網站的來源限制。

      選擇按鈕連結的產品 {width="600" modal="regular"}

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

      選擇按鈕連結的類別 {width="600" modal="regular"}

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

      選擇按鈕連結的CMS頁面 {width="600" modal="regular"}

  6. 完成 進階設定 視需要。

  7. 完成後,按一下 Save 以套用設定並返回 Page Builder 工作區。

新增一組按鈕

以下小節說明一系列步驟,以從個別按鈕開始,並在按鈕容器中建立一組三個按鈕。 如果您還沒有個別按鈕,請按照之前的指示,將個別按鈕新增到舞台。

步驟1:建立第二個按鈕

  1. 將滑鼠指標暫留在按鈕容器上以顯示工具箱,然後選擇 新增 ( 「新增」圖示 {width="20"} )圖示。

    新增另一個按鈕 {width="500" modal="regular"}

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

  3. 按一下新按鈕以顯示其工具箱,然後選擇 設定 ( 設定圖示 {width="20"} )圖示。

    編輯按鈕 {width="500" modal="regular"}

  4. 設定 Button TypeSecondary.

  5. 設定 Button Link 視需要。

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

    連絡我們按鈕設定 {width="600" modal="regular"}

  6. 完成 進階設定 視需要。

  7. 完成後,按一下 Save 以套用設定並返回 Page Builder 工作區。

步驟2:建立第三個按鈕

  1. 再次按一下舞台上的第二個按鈕,然後選擇 複製 ( 「複製」圖示 {width="20"} )圖示。

    複製按鈕 {width="500" modal="regular"}

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

  3. 按一下第三個按鈕以顯示工具箱,然後選擇 設定 ( 設定圖示 {width="20"} )圖示。

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

  4. 更新 Button Link 視需要。

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

步驟3:更新按鈕容器

  1. 將滑鼠指標暫留在按鈕容器上以顯示工具箱,然後選擇 設定 ( 設定圖示 {width="20"} )圖示。

    按鈕容器工具箱 {width="500" modal="regular"}

  2. Appearance,選擇​ Stacked.

  3. 設定 All Buttons are same sizeYes.

    相同大小的棧疊按鈕 {width="300"}

  4. 視需要更新其餘的設定,使用中的說明 變更按鈕容器的設定.

  5. 完成後,按一下 Save 以套用設定並返回 Page Builder 工作區。

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

    舞台上的棧疊按鈕 {width="500" modal="regular"}

移動按鈕

  1. 按一下您要移動的按鈕。

  2. 選取並拖曳移動( 移動圖示 {width="20"} )圖示(顯示在按鈕文字之前)至按鈕容器內按鈕的新位置。

    移動按鈕 {width="500" modal="regular"}

變更按鈕的設定

  1. 按一下舞台上的按鈕以顯示工具箱,然後選擇 設定 ( 設定圖示 {width="20"} )圖示。

    按鈕工具箱 {width="500" modal="regular"}

  2. 視需要更新標準設定。

    • 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頁面。
  3. 完成 進階設定 視需要。

  4. 若要儲存設定並返回 Page Builder 工作區,按一下 Save 位於右上角。

變更按鈕容器的設定

  1. 將滑鼠指標暫留在按鈕容器上以顯示工具箱,然後選擇 設定 ( 設定圖示 {width="20"} )圖示。

  2. 更新 Appearance 設定。

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

      table 0-row-2 1-row-2 2-row-2 layout-auto
      選項 說明
      Inline 水準排列按鈕。
      Stacked 垂直排列按鈕。
    • 設定 All buttons are same size 根據您的偏好設定選擇選項。

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

  3. 完成 進階設定 視需要。

  4. 完成後,按一下 Save 以套用設定並返回 Page Builder 工作區。

變更進階設定

您可以修改 Advanced ​個別按鈕和按鈕容器的設定。

  1. 若要控制上層容器內的位置,請選擇 Alignment

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    選項 說明
    Default 套用目前佈景主題樣式表中指定的對齊預設設定。
    Left 將內容沿父容器的左邊框對齊,並允許指定的任何邊框間距。
    Center 將內容對齊上層容器的中央,並允許指定的任何邊框間距。
    Right 將內容沿父容器的右邊框對齊,並允許指定的任何邊框間距。
  2. 設定 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 容器邊框會顯示為外線。
  3. 如果您設定的邊框樣式不是 None,完成邊框顯示選項:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    選項 說明
    Border Color 選擇色票、按一下檢色器,或輸入有效的顏色名稱或相等的十六進位值,以指定顏色。
    Border Width 輸入邊框線條寬度的畫素數。
    Border Radius 輸入畫素數目,以定義用來將邊框每個角落倒圓角的半徑大小。
  4. (選擇性)指定下列專案的名稱: CSS classes 從目前樣式表中套用至按鈕或按鈕容器。

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

  5. 以畫素為單位,輸入 Margins and Padding 決定按鈕或按鈕容器的外部邊界和內邊距。

    在圖表中輸入對應的值。

    table 0-row-2 1-row-2 2-row-2 layout-auto
    容器區域 說明
    Margins 套用至容器所有側邊外部邊緣的空白空間量。 選項: Top / Right / Bottom / Left
    Padding 套用至容器所有邊內側邊緣的空白空間量。 選項: Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d