返回支援 內容和媒體 區塊 設計區塊 格狀區塊

格狀區塊

格狀區塊是其他區塊的容器。你可運用此區塊來整理多個區塊,並調整容器中所有區塊的顏色、文字樣式、高度、寬度和位置。格狀區塊是群組區塊的變化樣式。

新增格狀區塊

你可以從新的空白格狀區塊開始,或將現有區塊集合成網格。

新增新的格狀區塊

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

按一下區塊插入工具並搜尋「Row」(列),然後按一下列區塊將列區塊插入編輯器中。

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

新增格狀區塊後,按一下「+ 區塊插入工具」圖示,即可開始在格狀塊內新增區塊。

將現有區塊放入格狀區塊中

若為頁面上原有的區塊,你可以使用下列步驟將這些區塊合併為格狀區塊

  1. 選取要集合在一起的區塊。你可以透過下列方式選取多個區塊:
    • 使用滑鼠按一下,將所有區塊反白標示。
    • 按一下第一個區塊,然後在鍵盤上按住 Shift 鍵,然後按一下最後一個區塊,即可選取第一個和最後一個區塊之間的所有區塊。
    • 使用「清單檢視」,按一下第一個區塊、按住鍵盤上的 Shift,然後按一下最後一個區塊,即可選取第一個和最後一個區塊之間的所有區塊。
  2. 在這些區塊上/下方顯示的「區塊工具列」中,按一下「群組」圖示 (看起來像兩個重疊的方塊),將這些區塊新增到「群組區塊」。
箭頭指向區塊工具列中的「群組」圖示。
按一下區塊工具列中的「群組」圖示,即可將現有區塊集合在一起
  1. 在右側邊欄「群組區塊」的設定中,按一下「格狀」圖示 (看起來像 2×2 網格)。
右側邊欄中的「群組區塊」設定,顯示「群組」、「列」、「直行排列」和「格狀」區塊的圖示,格狀區塊圖示是以橘色箭頭和外框標示
按一下群組區塊設定側邊欄中的「網格」圖示

格狀區塊工具列

按一下區塊會出現選項工具列:

格狀區塊工具列。

格狀區塊在工具列包含以下選項:

格狀區塊設定

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

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

格狀區塊包含下列區塊設定:

轉換成其他群組變化樣式

格狀區塊可以轉換為群組區塊列區塊直行排列區塊

「區塊設定」側邊欄顯示反白標示的格狀區塊,以及切換至「群組」、「列」或「直行排列」區塊的選項。

版面配置

你可以在「版面配置」設定中,根據欄寬是自動調整還是手動調整大小,選擇格狀區塊中的欄數:

  • 若選取「自動」,系統會自動新增指定最小寬度的欄位以符合區塊。
  • 若選取「手動」,系統會自動將區塊分割成你指定的欄數。

設定最小欄寬度或手動設定欄數量 (與欄區塊類似),即可定義網格中的欄數。

當你將段落區塊等元素置入格狀區塊中時,就可以定義此元素應橫跨的欄數和列數。你可調整每個元素的尺寸,如此便能建立自訂的格狀結構。

若要編輯格狀區塊內元素的尺寸:

  1. 選取要編輯的元素尺寸。
  2. 在區塊設定側邊欄的「尺寸」下,變更區塊橫跨的欄數或列數。
格狀區塊內段落區塊的「尺寸」設定。
格狀區塊中段落區塊的欄和列橫跨範圍設定
「區塊設定」側邊欄的「版面配置」區段已設為「自動」,顯示格狀區塊中欄的最小寬度為 12 rem。
「版面配置」設定已選取為「自動」
「區塊設定」側邊欄的「版面配置」區段設為「手動」,顯示「格狀」區塊中的欄數設為 3。
「版面配置」設定已選取為「手動」

以下是「格狀」區塊的範例,其中多個段落區塊已設為不同的欄和列範圍:

位置

你可以使用「位置」設定,從「預設」或「置頂」兩個選項中擇一。

  • 預設:捲動到頁面其他地方而超過區塊位置時,區塊會隨著捲動而消失。
  • 置頂:即使捲動到超過區塊原本位置的地方,區塊也會繼續在頁面上浮動且仍然可見。清單檢視中的區塊旁會顯示釘選圖示。

進階

若要瞭解詳情,請瀏覽關於進階設定的詳細說明。

格狀區塊樣式

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

箭頭指向「樣式」圖示,只要你按一下圖示即可開啟區塊樣式區段。
顏色、文字設計、尺寸和邊框

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

背景圖片

與所有群組區塊樣式相同,你也可以在「格狀區塊」變化樣式中,設定要在區塊內容後方顯示的圖片。如需新增背景圖片的逐步說明,請參閱群組區塊指引

將區塊從網格中移除

若你想移除格狀區塊,但不清除裡面的內部區塊,可以改為取消區塊群組。步驟如下:

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