元素 — 標題
標題層級會建立組織內容的階層,並協助搜尋引擎為每個頁面編制索引。 使用Page Builder 階段中的 標題 內容型別,將標題層級從H1到H6的文字容器加入階段。 標題會根據與目前主題關聯的樣式表來格式化。
Content 區段中的內容標題欄位可用來新增H1標題至頁面頂端。 但是,此欄位是舊版Commerce的舊版,提供它以支援舊版內容。 此欄位未利用Page Builder的進階功能。 建議您將「內容標題」欄位保留空白,並使用「Page Builder標題」內容型別來新增任何層級的標題至頁面。
下列範例說明當使用Luma主題進行格式化時,內容標題和標題內容型別的顯示方式。
您可以從Page Builder面板的 Elements 區段將標題拖曳到舞台上的列、欄或索引標籤組。 標題層級和對齊方式可從舞台上的編輯器工具列或使用 設定 ( {width="20"} )控制項來控制。
標題編輯器
標題容器工具箱
就像所有內容容器一樣,當您將滑鼠游標停留在容器上時,工具箱會出現。
新增標題
-
在Page Builder面板中,展開 Elements 並將 Heading 預留位置拖曳至舞台上的列、欄或索引標籤集。
{width="600" modal="regular"}
-
在編輯器中,在
Edit Heading Text
預留位置上輸入標題文字。依照預設,標題文字會指定層級二(H2)標題型別。
標題編輯器中的 {width="500" modal="regular"}
-
在工具列中,選擇H1和H6之間的適當標題型別。
-
視需要變更對齊方式。
編輯標題設定
-
將滑鼠懸停在標題容器上以顯示工具箱,然後選擇 設定 ( {width="20"} )圖示。
{width="500" modal="regular"}
-
視需要更新標題內容(Heading Type 和 Heading Text)。
您也可以在標題編輯器中更新此內容。
-
視需要更新 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
-
-
完成後,按一下 Save 套用設定並返回Page Builder工作區。
複製標題
對於具有特定設定的格式化標題,複製標題比使用新的預留位置重新開始更有效率。
-
將滑鼠懸停在標題容器上以顯示工具箱,然後選擇 複製 ( {width="20"} )圖示。
重複專案會出現在原始專案的正下方。
{width="500" modal="regular"}
-
將滑鼠懸停在新標題容器上以顯示工具箱,然後選擇 移動 ( {width="20"} )圖示。
{width="500" modal="regular"}
-
選取並拖曳標題,直到紅色指引標籤新位置為止。
移動標題時,每個容器的頂端和底部框線都會顯示為虛線。
{width="500" modal="regular"}
-
如果要變更標題層級,請按一下標題文字,然後在編輯器工具列中選擇新層級。
{width="500" modal="regular"}