返回支援 內容和媒體 區塊 設計區塊 群組區塊

群組區塊

群組區塊可將其他區塊集中在單一容器中,如此你就能設定背景顏色、調整間距以及整理不同的頁面區段。本指引將說明如何在網站使用群組區塊

影片簡介

建立群組

我們提供幾種將區塊集合在一起的方法。你可以選擇從空白的群組區塊開始,並在其中新增內容,或者可以將現有的區塊集合在一起。這些選項的說明如下。

新增群組區塊

若要新增空白的群組區塊,請按一下「+ 區塊插入工具」按鈕,然後搜尋「group」(群組)。按一下即可將區塊新增至文章或頁面。你也可以在新的一行用鍵盤輸入 /group,然後按 Enter 快速新增新的群組區塊

此處有新增區塊的詳細說明。 

在你插入群組區塊後,系統會要求你從下列選項選取版面配置:

群組區塊版面配置選取工具
選取群組、列或直行排列的變化樣式

選取版面配置後,按一下「+ 區塊插入工具」圖示,即可開始在群組中新增區塊:

已插入的群組區塊
按一下「+ 區塊插入工具」,即可新增內部區塊。

集合現有的區塊

若為頁面中原有的區塊,可以使用下列步驟將這些區塊集合在一起:

  1. 選取要集合的一個或多個區塊。你可以透過下列方式選取多個區塊:
    • 用滑鼠將區塊反白標示。
    • 按一下第一個區塊、按住鍵盤的 Shift 鍵,然後再按一下最後一個區塊。這個動作會選取第一個和最後一個區塊之間的所有區塊。
    • 使用「清單檢視」、按一下第一個區塊,按住鍵盤的 Shift 鍵,然後按一下最後一個區塊。這個動作會選取第一個和最後一個區塊之間的所有區塊。
  2. 請在區塊上下方出現的區塊工具列,按一下省略符號 (三點圖示),然後選擇「群組」選項。如果選取多個區塊,工具列會出現新圖示,可讓你快速建立群組或群組的變化樣式 (直行排列網格):
按一下工具列中三點圖示的「更多選項」後,箭頭會指向群組選項。
將單一區塊新增至群組
箭頭指向區塊工具列中的群組圖示。
將多個區塊集合在一起

按一下工具列中的「群組」圖示後,系統就會將這些區塊置於「群組區塊」內。

選取「群組區塊」

群組區塊搭載多項設定,只要你選取區塊即可存取設定。不過,若你想要選取整個「群組區塊」,在群組區塊按一下的動作將無法完成目標,因為按一下群組內的任何區塊 (稱為區塊) 的動作會選取內部的子區塊,而非整個「群組區塊」(稱為上層區塊)。

你可以使用幾種不同方法選取上層「群組區塊」:

清單檢視

你可以使用編輯器畫面頂端的「清單檢視」選取「群組區塊」。此處會顯示群組區塊,下方列出群組區塊的所有內部區塊:

展開的清單檢視選項,顯示頁面上不同的區塊,並特別標示出群組區塊。
清單檢視中的群組區塊

工具列中的上層區塊選取工具

按一下已分組的區塊時,區塊工具列中會顯示「群組區塊」圖示。所選區塊的左側會顯示「群組區塊」圖示 (以兩個重疊的方形表示)。只要你按一下「群組區塊」圖示,即可選取「群組區塊」:

箭頭指向工具列中的「群組區塊」圖示。

群組區塊工具列

當你選取「群組區塊」時,其上方便會顯示選項工具列:

群組區塊工具列上的各種功能圖示,例如移動區塊功能、變更對齊方式功能,另外還有「更多選項」選單。
群組區塊工具列

群組區塊工具列上的圖示,從左至右分別是:

群組區塊設定

選取區塊時,右側邊欄會出現其他區塊設定。如果沒有出現側邊欄,請按一下右上角的「設定」圖示叫出設定。此圖示外觀為正方形中有兩個大小不同的欄位:

編輯器中的「設定」圖示,下方顯示「設定」的工具提示。
按一下「設定」圖示即可開啟區塊設定

轉換為列、直行排列或網格

將「群組區塊」切換為下列其中一個變化樣式:

版面形式設定

使用版面配置設定,即可控制群組內區塊的寬度和位置:

群組區塊中的版面配置設定

如果將「內部區塊使用內容寬度」選項切換為關閉,則「群組區塊」內新增的區塊將填滿頁面預設內容區域的寬度。

若要進一步控制內部區塊的寬度,請將「內部區塊使用內容寬度」選項切換為「開啟」位置。接著你可以使用下列選項指定內部區塊的寬度:

沒有可為「全寬」選項設定寬度的選項,因為設為全寬的區塊依預設會橫跨整個畫面寬度。

群組區塊版面設定

你可以使用「對齊」設定,將內部區塊對齊群組的左側、右側或中心。

位置設定

將「群組區塊」位置設為「置頂」,當你將檢視器向下捲動時,群組看起來就會是像釘選在視窗頂端。「清單檢視」中的「群組區塊」旁會顯示釘選圖示。

GIF 動畫示範的是,當使用者向下捲動讀取器時,群組固定在畫面頂端的範例。
訂閱方塊是釘選在畫面頂端的群組

只有頂層群組可設為置頂。若要讓置頂設定生效,請確保「群組區塊」並未內嵌於任何其他區塊內。

如果位置設定設為「預設」,則會依頁面顯示的順序顯示群組。

進階

深入了解進階區塊設定

群組區塊樣式

在區塊設定側邊欄按一下「樣式」圖示,即可存取區塊的設計設定。「樣式」圖示的形狀是圓形,其中有半圓已填滿:

箭頭指向「樣式」圖示,只要你按一下圖示即可開啟區塊樣式區段。

你可以在此設定文字顏色、背景顏色、文字大小和字型、邊框間距、邊界和區塊間距。如需深入了解如何使用這些設定,請參閱下列指引:

背景圖片

你也可以在「群組區塊」樣式中,設定要在區塊內容後方顯示的「背景圖片」:

  1. 選取「群組區塊」。
  2. 在右側設定側邊欄中,按一下「樣式」分頁。

如果右側沒有出現側邊欄,你可能需要按一下右上角的「設定」圖示叫出設定。該圖示的外觀是一個方形,分成兩個不對等的欄位。

醒目標示 WordPress 編輯器頂端的「設定」圖示。
右上角的設定圖示
  1. 在「背景」下方按一下「背景圖片」,顯示下列選項:
    • 開啟媒體庫:從網站的「媒體」選取現有圖片。
    • 上傳:從電腦或裝置新增新的圖片。
    • 重設:移除背景圖片。

背景圖片的優先順序會高於任何背景顏色設定。

只要按一下「背景圖片」旁的三點圖示選單,即可定義圖片的「大小」選項:

如果你選取「包含」或「固定」作為大小選項,也可以使用顯示的「重複顯示圖片」設定,選擇是否要重複顯示圖片。

所顯示的選項,可用於定義群組區塊的背景圖片大小。

取消區塊群組

若你想移除「群組區塊」,但不清除其中的內部區塊,可以改為取消區塊群組。步驟如下:

  1. 選取編輯畫面頂端的「清單檢視」。
  2. 選取「群組區塊」。
  3. 按一下「群組區塊」旁的三點圖示
  4. 選取「取消群組」選項。
顯示區塊工具列中選取「取消群組」動作的 GIF。
Copied to clipboard!