指南/建立內容/設計/列區塊和堆疊區塊

列區塊和堆疊區塊

列區塊堆疊區塊是其他區塊的容器。你可用這些區塊整理多個區塊,調整容器中所有區塊的顏色、文字樣式、寬度和位置。這些區塊是群組區塊的變化樣式。

新增列區塊和堆疊區塊

你可以從空白的列/堆疊區塊著手,也可以將現有區塊集合成列區塊或堆疊區塊。

從空白區塊著手

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

Adding a row block with the slash command.

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

新增列/堆疊區塊後,按一下「+ 區塊插入工具」圖示,即可開始在列或堆疊內新增區塊。

使用現有區塊

若為頁面上原有的區塊,你可以使用下列步驟,將區塊合併為列/堆疊區塊

  1. 選取要集合在一起的區塊。你可以透過下列方式選取多個區塊:
    • 用滑鼠將區塊反白標示。
    • 按一下第一個區塊,然後按住鍵盤的 Shift 鍵,再按一下最後一個區塊。這個動作會選取第一個和最後一個區塊之間的所有區塊。
    • 使用「清單檢視」,按一下第一個區塊,按住鍵盤的 Shift 鍵,然後按一下最後一個區塊。這個動作會選取第一個和最後一個區塊之間的所有區塊。
  2. 在區塊上方或下方顯示的區塊工具列中,按一下圖示 (形狀像兩個一半的方形並列)、堆疊圖示 (形狀像兩個一半的方形上下相疊) 或格狀圖示 (若為格狀排列):
An arrow points to the group icons in the block toolbar.
按一下區塊工具列中的列或堆疊圖示,即可將現有區塊集合在一起

列和堆疊區塊工具列

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

The Row block toolbar that appears above the Row block with icons for block type, move block, and more described below.
列區塊工具列
The Stack block toolbar that appears above the Stack block with icons for block type, move block, and more described below.
堆疊區塊工具列

列區塊堆疊區塊的工具列包含以下選項:

  • 變更區塊類型或樣式
  • 拖曳區塊。
  • 將區塊上下移動。
  • 變更項目的對齊方式:靠左、置中、靠右或等距排列。
  • 將內容對齊頂端、置中、底部或分散對齊。
  • 變更對齊方式:無、寬幅對齊、全寬對齊。
  • 更多選項

列區塊和堆疊區塊設定

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

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

列區塊堆疊區塊包含下列區塊設定:

轉換成其他群組變化樣式

按一下區塊設定頂端的圖示,即可變更為其他樣式:

版面形式

在「版面形式」設定中,你可以設定列區塊或堆疊區塊的對齊方式,可選擇靠左、置中、靠右或左右對齊。

方向」選項可讓你從列區塊 (水平排列) 切換為堆疊區塊 (垂直排列)。

此外,你還可以啟用或停用讓內容換行的功能。訪客用行動裝置之類的較小畫面瀏覽頁面,使得內容無法單行顯示時,這項功能就很實用。

The Layout section of the Block Settings sidebar, with the options to set justification, orientation and wrap options.

位置

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

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

進階

若要了解詳情,請參閱進階設定的詳細說明。

列區塊和堆疊區塊樣式

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

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

顏色、文字設計、尺寸和邊框

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

背景圖片

與所有群組區塊樣式相同,你也可以在列區塊堆疊區塊樣式中,設定要在區塊內容後方顯示的圖片或漸層色彩。如需新增背景圖片的逐步說明,請參閱群組區塊指引

寬度設定 (巢狀區塊)

寬度設定會顯示在列/堆疊區塊內個別巢狀區塊的設定中,而不是列/堆疊區塊自己的設定內。

若要存取這些設定,請按一下列/堆疊區塊內的個別區塊,然後在區塊設定側邊欄中,尋找「寬度」選項 (可能出現在「樣式」分頁下方):

The Dimensions width settings, showing Fit, Grow, and Fixed.

有三個寬度選項可供使用:

  • 符合大小:區塊會縮小以符合內容,僅佔用內容所需空間。
  • 展開:區塊會展開來填滿列或堆疊內的所有可用空間。
  • 固定:區塊會設為你定義的特定寬度,不受周圍內容或容器大小影響。

取消區塊群組

若你想移除列/堆疊區塊,但不清除其中的內部區塊,可以改為取消區塊群組。請依照下列步驟操作:

  1. 選取編輯畫面頂端的「清單檢視」。
  2. 選取列/堆疊區塊
  3. 按一下列/堆疊區塊旁的三點圖示
  4. 選取「取消群組」選項。
Ungrouping a Row block.
Copied to clipboard!