設計你的欄位

你可以使用欄位來以結構化版面配置排列內容，讓網站看起來更美觀且易於導覽。在本指引中，你會了解如何自訂欄位的設計層面，例如行動裝置上顯示的色彩、對齊方式和外觀。

若要新增或變更欄的背景顏色，請採取以下步驟：

1. 選取編輯器左上角的「清單檢視」。該圖示看起來像三條水平線。
2. 在此找到「欄位」區塊，然後按一下：

3. 在畫面右側的「欄位」區塊設定中，按一下「樣式」分頁 (圖示看起來像一個黑白圓圈)：

4. 在顏色設定中，按一下「背景」並選取背景顏色。
5. 按一下「儲存」按鈕，儲存變更。

如要針對每個欄位選取不同的顏色，請依照相同的步驟操作，但請在「清單檢視」中選取個別的「欄位」區塊，不要選取整個「欄位」區塊。

將內容新增至欄位時，依預設會在欄位容器置頂對齊。你可以採取以下步驟來變更欄位內容的對齊方式：

1. 選取編輯器左上角的「清單檢視」。該圖示看起來像三條水平線。
2. 在此找到「欄位」區塊，然後按一下：

3. 在所選欄位上方或下方顯示的工具列中，按一下垂直對齊選項：

4. 選擇「靠上對齊」、「置中對齊」或「靠下對齊」，讓欄位中所有內容位於欄位容器的頂端、中間或底部。

如果要針對每個欄位選取不同的對齊方式，請依照相同的步驟操作，但請在「清單檢視」中選取個別的欄位，不要選取整個欄位。如此一來，即可建立如下的分散式版面配置：

使用欄位版面配置時，請務必考量使用行動裝置造訪網站時，欄位的顯示方式。手機的螢幕較小，單一列可能無法完全容納多個欄位，同時清晰顯示內容。

你可以選擇「堆疊」行動裝置螢幕上的欄位，讓欄位顯示在另一個欄位上方，而非在同一列上顯示：

1. 使用「清單檢視」或區塊工具列，選取「欄位」區塊。
2. 在畫面右側的「欄位」區塊設定中，切換開啟「於行動裝置上以堆疊方式顯示」：

此切換開關會決定在行動裝置上檢視頁面或文章時，欄位以水平顯示或垂直堆疊顯示。以下是在桌上型電腦/筆記型電腦螢幕上檢視堆疊欄位，與在行動裝置螢幕上檢視的比較範例：