元素 — 標題

標題層級會建立組織內容的階層,並協助搜尋引擎為每個頁面編制索引。 使用Page Builder 階段中的​ 標題 ​內容型別,將標題層級從H1到H6的文字容器加入階段。 標題會根據與目前主題關聯的樣式表來格式化。

Content ​區段中的內容標題欄位可用來新增H1標題至頁面頂端。 但是,此欄位是舊版Commerce的舊版,提供它以支援舊版內容。 此欄位未利用Page Builder的進階功能。 建議您將「內容標題」欄位保留空白,並使用「Page Builder標題」內容型別來新增任何層級的標題至頁面。

下列範例說明當使用Luma主題進行格式化時,內容標題和標題內容型別的顯示方式。

店面上的內容標題和標題層級

您可以從Page Builder面板的​ Elements ​區段將標題拖曳到舞台上的列、欄或索引標籤組。 標題層級和對齊方式可從舞台上的編輯器工具列或使用​ 設定 設定圖示 {width="20"} )控制項來控制。

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

標題編輯器

標題編輯器與工具列

標題容器工具箱

就像所有內容容器一樣,當您將滑鼠游標停留在容器上時,工具箱會出現。

標題容器工具箱

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

新增標題

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

    將標題拖曳到舞台 {width="600" modal="regular"}

  2. 在編輯器中,在Edit Heading Text預留位置上輸入標題文字。

    依照預設,標題文字會指定層級二(H2)標題型別。

    標題編輯器中的 預留位置 {width="500" modal="regular"}

  3. 在工具列中,選擇H1和H6之間的適當標題型別。

  4. 視需要變更對齊方式。

編輯標題設定

  1. 將滑鼠懸停在標題容器上以顯示工具箱,然後選擇​ 設定 設定圖示 {width="20"} )圖示。

    標題工具箱 {width="500" modal="regular"}

  2. 視需要更新標題內容(Heading Type ​和​ Heading Text)。

    您也可以在標題編輯器中更新此內容。

  3. 視需要更新​ 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以外的框線樣式,請完成框線顯示選項:

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

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

    • 輸入​ 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
  4. 完成後,按一下​ Save ​套用設定並返回Page Builder工作區。

複製標題

對於具有特定設定的格式化標題,複製標題比使用新的預留位置重新開始更有效率。

  1. 將滑鼠懸停在標題容器上以顯示工具箱,然後選擇​ 複製 復製圖示 {width="20"} )圖示。

    重複專案會出現在原始專案的正下方。

    正在複製標題容器 {width="500" modal="regular"}

  2. 將滑鼠懸停在新標題容器上以顯示工具箱,然後選擇​ 移動 移動圖示 {width="20"} )圖示。

    移動標題 {width="500" modal="regular"}

  3. 選取並拖曳標題,直到紅色指引標籤新位置為止。

    移動標題時,每個容器的頂端和底部框線都會顯示為虛線。

    將重複的標題移至位置 {width="500" modal="regular"}

  4. 如果要變更標題層級,請按一下標題文字,然後在編輯器工具列中選擇新層級。

    選擇新的標題層級 {width="500" modal="regular"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d