列區塊和堆疊區塊是設計區塊的類型,讓你在一列 (或堆疊區塊的欄位) 中插入多個區塊,並讓區塊等距相隔。你可以使用列區塊和堆疊區塊建立分隔符號,或在同一行加入各種元素,看起來會像欄位的一部分。
按一下 + 區塊插入工具圖示新增列區塊,輸入「列區塊
」搜尋列區塊,或輸入「疊區塊」搜尋堆疊區塊。按一下即可將區塊加入文章或頁面。
💡
你也可以在新的一行用鍵盤輸入 /row ,然後按 Enter 新增 列區塊,或輸入 /stack ,然後按 Enter 新增堆疊區塊。
此處有新增區塊的詳細說明。
按一下區塊會出現選項工具列:
列區塊的工具列含有以下選項:
- 變更區塊類型或樣式。
- 拖曳區塊。
- 將區塊上下移動。
- 變更項目的對齊方式:靠左、置中、靠右,以及項目之間的空間。
- 變更對齊方式:無、寬幅對齊、全寬對齊。
- 更多選項。
堆疊區塊的工具列含有以下選項:
- 變更區塊類型或樣式。
- 拖曳區塊。
- 將區塊上下移動。
- 變更項目的對齊方式:靠左、置中、靠右。
- 變更對齊方式:無、寬幅對齊、全寬對齊。
- 更多選項。
📌
如果你的佈景主題支援將區塊寬度變更為寬幅或全寬的選項,但你卻沒看到這些選項,這可能是因為區塊已加入到群組區塊中。你可以在此深入瞭解群組區塊。
選取區塊時,右側邊欄會出現其他區塊設定。如果沒有出現側邊欄,請按一下右上角的「設定」圖示叫出設定。此圖示外觀為正方形中有兩個大小不同的欄位:
列區塊可以轉換為群組區塊或堆疊區塊。堆疊區塊可以轉換為群組區塊或列區塊。
在「版面配置」區段中,你可以設定列區塊或堆疊區塊的對齊方式,可選擇靠左、置中、靠右或左右對齊。「方向」選項可讓你從列區塊切換為堆疊區塊。
堆疊區塊沒有讓內容左右對齊的選項。列區塊中的左右對齊選項,作用是讓各列等距對齊。
此外你可以啟用或停用讓內容換行的功能。
在「位置」區段中,你可以從「預設」或「置頂」兩個選項中擇一。
- 預設:捲動到頁面其他地方而超過區塊位置時,區塊會隨著捲動而消失。
- 置頂:即使捲動到超過區塊原本位置的地方,區塊也會繼續在頁面上浮動且仍然可見。
進階
進階分頁可讓你將 CSS 類別新增至區塊,以便編寫自訂 CSS,並視需要設定區塊樣式。深入了解。
在區塊設定側邊欄按一下「樣式」圖示,即可存取區塊的設計設定。「樣式」圖示的形狀是圓形,其中有半圓已填滿:
「顏色」區段可讓你修改列區塊或堆疊區塊中文字、背景和連結的顏色。
按一下「顏色」區段的三個點,即可新增修改連結的選項。
如要修改文字和連結:請按一下棋盤區域,即可選擇任何自訂顏色,或者你可以在下方的佈景主題或預設區段中選取一種預選顏色。
背景的顏色設定類似於文字 (上方) 的顏色設定,你可以選擇純色或漸層色 (兩種或多種顏色的混合;漸層色以特定圖樣顯示 (由淺到深,或某個顏色與另一個顏色混合))。
你可以使用以下設定調整區塊文字的外觀。
若未看到設定,請按一下「文字設計」右側的三個點來啟用 (如右圖所示)。 接著你就可以選擇要使用的選項:
- 字體大小
- 字型系列
- 外觀
- 行高
- 裝飾
- 字母大小寫
- 字母間距
字體大小設定可以調整文字的大小。有小、中、大等預設大小可以任選。
你也可以按一下預設選項上方的滑桿圖示,設定特定的值 (在下方螢幕截圖中標示為 1)。按一下下方螢幕截圖中標示數字 2 的地方,可以變更單位。選項包含像素、em
或 rem
。
字型系列設定可以變更使用的字型樣式。可以從下拉式選單中的字型清單任選。
外觀設定可以將文字樣式變更為一般或斜體、從細變更至特粗。
行高可以設定文字上下的間距。如果選取 0,請務必確認行動版網站上呈現的效果。
裝飾設定提供底線和刪除線選項。
字母大小寫可以將文字設定為全部大寫、首字母大寫,或全部小寫。
字母間距可以設定每個文字字元之間的間距。你可以變更預設單位 (像素) 為百分比、em
、rem
、vw
和 vh
。在此深入瞭解相對單位。
「尺寸」可讓你設定邊框間距,也就是列區塊中元素周圍的空間。此選項在你使用背景顏色時尤其重要。
在「邊框間距」下方的欄位輸入數值,就能讓四邊的邊框間距值都一樣
另外,你也可為每邊設定不同的邊框間距值。按一下連結圖示,就能為每邊設定個別的邊框間距值。此處顯示的數字按順時針順序,分別代表上方、右側、下方、左側。 按一下上一張圖片顯示的藍色連結圖示,即可存取此檢視畫面。
堆疊區塊沒有設定尺寸的選項,因為其中區塊是逐一堆疊的,但可以設定個別區塊的尺寸,或使用空白間隔區塊來設定尺寸。
使用邊框設定,在內容周圍新增框線。你可以選擇顏色、粗細及粗細單位 (px、%、em、rem、vw 和 vh。)
根據預設,這些設定會控制四邊的所有邊框。若要具體調整上方、右側、下方和左側的邊框,請按一下連結圖示。
「半徑」選項可以讓圖片邊框外觀更圓潤。半徑設為 0 時會產生有稜角的邊緣。
📌
如果使用傳統佈景主題,網站可能不會出現「邊框」和「半徑」設定 。你也許會想探索我們的一些最新網站編輯器佈景主題,瞭解圖片邊框自訂功能和更多其他功能!
首先選取要加入列區塊的一個或多個區塊。選取多個區塊的方式是按一下並拖曳,或是按住「shift」鍵,然後按一下要選取的區塊 (區塊必須彼此相鄰)。
此時會出現區塊工具列。從工具列選取列區塊圖示或堆疊區塊圖示。下圖標示指向列區塊圖示,右邊則是堆疊區塊圖示。
你需要先取消現有群組區塊才能修改個別區塊的對齊方式。
- 按一下編輯器頂端的「清單檢視」並選取「列區塊」或「堆疊區塊」。
- 按一下區塊工具列中的「更多選項」圖示。
- 選取「取消群組」選項。