列區塊和堆疊區塊

列區塊和堆疊區塊是設計區塊的類型，讓你在一列 (或堆疊區塊的欄位) 中插入多個區塊，並讓區塊等距相隔。你可以使用列區塊和堆疊區塊建立分隔符號，或在同一行加入各種元素，看起來會像欄位的一部分。

在此指南中

1. 新增列區塊和堆疊區塊
2. 區塊工具列
3. 區塊設定
   1. 排列方式
   2. 版面配置
   3. 位置
4. 區塊樣式
   1. 顏色
   2. 文字設計
   3. 尺寸
   4. 邊框和半徑
5. 在列區塊或堆疊區塊中新增多個區塊
6. 取消現有群組區塊

新增列區塊和堆疊區塊

按一下 + 區塊插入工具圖示新增列區塊，輸入「列區塊」搜尋列區塊，或輸入「疊區塊」搜尋堆疊區塊。按一下即可將區塊加入文章或頁面。

💡

你也可以在新的一行用鍵盤輸入 /row ，然後按 Enter 新增 列區塊，或輸入 /stack ，然後按 Enter 新增堆疊區塊。

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

區塊工具列

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

列區塊工具列

堆疊區塊工具列

列區塊的工具列含有以下選項：

• 變更區塊類型或樣式。
• 拖曳區塊。
• 將區塊上下移動。
• 變更項目的對齊方式：靠左、置中、靠右，以及項目之間的空間。
• 變更對齊方式：無、寬幅對齊、全寬對齊。
• 更多選項。

堆疊區塊的工具列含有以下選項：

• 變更區塊類型或樣式。
• 拖曳區塊。
• 將區塊上下移動。
• 變更項目的對齊方式：靠左、置中、靠右。
• 變更對齊方式：無、寬幅對齊、全寬對齊。
• 更多選項。

📌

如果你的佈景主題支援將區塊寬度變更為寬幅或全寬的選項，但你卻沒看到這些選項，這可能是因為區塊已加入到群組區塊中。你可以在此深入瞭解群組區塊。

區塊設定

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

按一下「設定」圖示即可開啟區塊設定

排列方式

列區塊可以轉換為群組區塊或堆疊區塊。堆疊區塊可以轉換為群組區塊或列區塊。

版面配置

在「版面配置」區段中，你可以設定列區塊或堆疊區塊的對齊方式，可選擇靠左、置中、靠右或左右對齊。「方向」選項可讓你從列區塊切換為堆疊區塊。

堆疊區塊沒有讓內容左右對齊的選項。列區塊中的左右對齊選項，作用是讓各列等距對齊。

此外你可以啟用或停用讓內容換行的功能。

位置

在「位置」區段中，你可以從「預設」或「置頂」兩個選項中擇一。

• 預設：捲動到頁面其他地方而超過區塊位置時，區塊會隨著捲動而消失。
• 置頂：即使捲動到超過區塊原本位置的地方，區塊也會繼續在頁面上浮動且仍然可見。

進階

進階分頁可讓你將 CSS 類別新增至區塊，以便編寫自訂 CSS，並視需要設定區塊樣式。深入了解。

進階區段可讓你新增 CSS 類別到區塊。

區塊樣式

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

顏色

「顏色」區段可讓你修改列區塊或堆疊區塊中文字、背景和連結的顏色。

按一下「顏色」區段的三個點，即可新增修改連結的選項。

如要修改文字和連結：請按一下棋盤區域，即可選擇任何自訂顏色，或者你可以在下方的佈景主題或預設區段中選取一種預選顏色。

背景的顏色設定類似於文字 (上方) 的顏色設定，你可以選擇純色或漸層色 (兩種或多種顏色的混合；漸層色以特定圖樣顯示 (由淺到深，或某個顏色與另一個顏色混合))。

文字設計

你可以使用以下設定調整區塊文字的外觀。

若未看到設定，請按一下「文字設計」右側的三個點來啟用 (如右圖所示)。 接著你就可以選擇要使用的選項：

• 字體大小
• 字型系列
• 外觀
• 行高
• 裝飾
• 字母大小寫
• 字母間距

區塊設定側邊欄中的「文字設計」，已展開額外選項。

字體大小設定可以調整文字的大小。有小、中、大等預設大小可以任選。

你也可以按一下預設選項上方的滑桿圖示，設定特定的值 (在下方螢幕截圖中標示為 1)。按一下下方螢幕截圖中標示數字 2 的地方，可以變更單位。選項包含像素、em 或 rem。

字型系列設定可以變更使用的字型樣式。可以從下拉式選單中的字型清單任選。

外觀設定可以將文字樣式變更為一般或斜體、從細變更至特粗。

行高可以設定文字上下的間距。如果選取 0，請務必確認行動版網站上呈現的效果。

裝飾設定提供底線和刪除線選項。

字母大小寫可以將文字設定為全部大寫、首字母大寫，或全部小寫。

字母間距可以設定每個文字字元之間的間距。你可以變更預設單位 (像素) 為百分比、em、rem、vw 和 vh。在此深入瞭解相對單位。

尺寸

「尺寸」可讓你設定邊框間距，也就是列區塊中元素周圍的空間。此選項在你使用背景顏色時尤其重要。

在「邊框間距」下方的欄位輸入數值，就能讓四邊的邊框間距值都一樣

另外，你也可為每邊設定不同的邊框間距值。按一下連結圖示，就能為每邊設定個別的邊框間距值。此處顯示的數字按順時針順序，分別代表上方、右側、下方、左側。 按一下上一張圖片顯示的藍色連結圖示，即可存取此檢視畫面。

堆疊區塊沒有設定尺寸的選項，因為其中區塊是逐一堆疊的，但可以設定個別區塊的尺寸，或使用空白間隔區塊來設定尺寸。

邊框和半徑

使用邊框設定，在內容周圍新增框線。你可以選擇顏色、粗細及粗細單位 (px、%、em、rem、vw 和 vh。)

根據預設，這些設定會控制四邊的所有邊框。若要具體調整上方、右側、下方和左側的邊框，請按一下連結圖示。

「半徑」選項可以讓圖片邊框外觀更圓潤。半徑設為 0 時會產生有稜角的邊緣。

📌

如果使用傳統佈景主題，網站可能不會出現「邊框」和「半徑」設定 。你也許會想探索我們的一些最新網站編輯器佈景主題，瞭解圖片邊框自訂功能和更多其他功能！

在列區塊或堆疊區塊中新增多個區塊

首先選取要加入列區塊的一個或多個區塊。選取多個區塊的方式是按一下並拖曳，或是按住「shift」鍵，然後按一下要選取的區塊 (區塊必須彼此相鄰)。

此時會出現區塊工具列。從工具列選取列區塊圖示或堆疊區塊圖示。下圖標示指向列區塊圖示，右邊則是堆疊區塊圖示。

取消現有群組區塊

你需要先取消現有群組區塊才能修改個別區塊的對齊方式。

1. 按一下編輯器頂端的「清單檢視」並選取「列區塊」或「堆疊區塊」。
2. 按一下區塊工具列中的「更多選項」圖示。
3. 選取「取消群組」選項。