「群組」區塊 能幫助你整理容器中的內容,讓你設定統一的樣式和位置。本指引將說明如何使用版面形式設定, 透過「群組」區塊建立可自動調整版面、整齊的頁面區段。
依照預設, 「群組」區塊 會整理群組內的區塊,使之彼此重疊顯示。只要變更區塊在群組內的排列方式,就能控制以並排 (水平) 或堆疊 (垂直) 的方式呈現內容,使版面形式的設計更有彈性。你可依照下列步驟,自訂群組中內容的對齊方式:
- 選取 編輯畫面頂端的 「清單檢視」。
- 選取 「群組」區塊。
- 在 右側的區塊設定側邊欄中, 選擇以下選項的其中之一:
- 群組顯示:「群組」區塊的 預設排列方式。
- 堆疊顯示:垂直排列區塊,使其彼此重疊。適合用於明確、連貫的內容,例如步驟或精選項目。
- 在 「對齊」下方,使用置頂、置中或置底等選項變更垂直對齊方式。
- 橫列排列顯示:將區塊水平並排放置。適合用於功能比較或圖庫。
- 在 「對齊」下方,使用靠左、置中、靠右或間距等選項,調整水平對齊方式。
- 格狀顯示:以自訂格狀版面形式 排列區塊。適合用來介紹產品或團隊成員。
- 按一下 「儲存」 或 「發表」 即可儲存變更。
控制「群組」區塊的 整體寬度, 能讓你在頁面上建立視覺化階層,調整內容在不同畫面大小上的顯示方式。你可透過以下步驟 選擇內容寬度、寬幅寬度或全幅寬度, 藉此變更「群組」區塊使用的空間大小:
- 選取 編輯畫面頂端的 「清單檢視」。
- 選取 「群組」區塊。
- 在顯示的工具列中,選取「對齊」圖示,然後選擇:
- 內容寬度 (或「無」): 將區塊寬度設定為 內容區的預設寬度。適合用於一般內容區段。
- 寬幅寬度: 將區塊寬度設為略寬 (但非全幅) 寬度。這有助訪客將注意力放在重點內容上,同時內容又不會佔據整個畫面空間。
- 全幅寬度: 將區塊設定為填滿適用區域的全幅寬度。適合用於沈浸式內容區段,例如橫幅或大型圖庫。
- 按一下 「儲存」 或 「發表」 即可儲存變更。

深入了解如何變更 內容寬度。
你可以控制內容在群組中佔用的空間,在打造可同時在行動裝置和桌上型電腦上運作的可自動調整版面的設計時,此功能相當實用。請依照以下步驟進行, 變更「群組」區塊內容的寬度設定:
- 選取 編輯畫面頂端的 「清單檢視」。
- 選取 「群組」區塊。
- 在 區塊設定側邊欄中,找到「內部區塊」區段。切換 「內部區塊使用內容寬度」 設定:
- 開啟:內容將套用網站的 內容寬度 設定,或使用寬度控制項調整特定寬度值。
- 關閉:內容會延伸並填滿整個「群組」區塊寬度。
- 按一下 「儲存」 或 「發表」 即可儲存變更。
「內部區塊使用內容寬度」設定可控制「群組」區塊中內容的顯示寬度:
開啟 時:「群組」區塊 的內容 會套用網站的全域內容寬度設定 (通常寬度約為 700-800 像素)。如此一來,即使你的 「群組」區塊 橫跨頁面的全幅寬度,系統仍會建立集中在固定範圍內的內容欄位。這能提升內容在大螢幕的可讀性,同時維持美觀的版面形式。
關閉 時:「群組」區塊 的內容 會延伸並填滿 「群組」區塊 的全幅寬度。如果你將 「群組」區塊 設定為全幅寬度,則內容也會延伸為全幅寬度。這適合用於建立滿版設計,例如全寬圖庫。想將內容塞滿整個 「群組」區塊 的背景時,也很適合使用這個選項。
實際範例:如果有個 「群組」區塊 具備全頁面彩色背景,則開啟「內部區塊使用內容寬度」會建立內容集中的欄位和滿版彩色背景。這麼做能有效突顯重要資訊,同時維持視覺吸引力。
調整尺寸可讓你根據內容和版面形式的需求,控制 「群組」區塊 的高度、寬度和間距。這能讓你建立視覺上平衡協調的區段,讓內容不致太過擁擠。請依照以下步驟,為 「群組」區塊 設定精準的四周間距:
- 選取 編輯畫面頂端的 「清單檢視」。
- 選取 「群組」區塊。
- 在 區塊設定側邊欄中,找到 「尺寸」 區段。
- 設定下列項目的值:
- 邊框間距:內容與「群組」區塊邊框之間的空間。加大邊框間距可讓內容不致過於擁擠。
- 邊界:「群組」區塊外部周圍的空間,能將區段與其他內容分開。
- 使用連結圖示,切換統一樣式或個別側邊調整。

深入了解如何自訂 區塊尺寸。
調整這項間距,可讓你控制內容在 「群組」區塊內的遠近程度,使不同的元素有適當的視覺連貫性。這有助訪客區分相關內容,同時維持區段的整體性。若要管理「群組」內區塊之間的間距:
- 選取 編輯畫面頂端的 「清單檢視」。
- 選取 「群組」區塊。
- 在 區塊設定側邊欄中,找到 「區塊間距」 區段。
- 使用控制項設定:
- 區塊間距:個別區塊之間的空間。加大間距能明確分隔內容,縮小間距則能讓內容顯得連貫。
- 高度下限:「群組」區塊的高度下限。適合用於連貫的區段,或新增空白空間來達到視覺平衡效果。
深入了解 如何調整區塊間的空白空間。