指南/建立內容/設計/調整欄位寬度

調整欄位寬度

你可以使用欄位來以結構化版面配置排列內容,讓網站看起來更美觀且易於導覽。在本指引中,你會了解如何調整個別欄位的寬度,以及變更整組欄位的寬度。

設定單一欄位寬度

如果要針對個別欄位設定不同的寬度,請採取以下步驟:

  1. 使用「清單檢視」或區塊工具列,選取單一欄位。使用「清單檢視」通常比較簡單,只要按一下畫面左上角看起來像三條水平線的圖示即可。
  2. 在此找到單一「欄位」區塊,然後按一下:
區塊清單中的單一欄位區塊已選取。
  1. 在畫面右側的「欄位」區塊設定中,找到寬度設定:
寬度選項已加上醒目提示,顯示 33%。
  1. 你可以在此設定寬度數值。如果單位設為 px (像素),建議改用 % (百分比) 會比較容易調整。欄位寬度的常見設定包括:
    • 兩個欄位寬度相同 (50%、50%)
    • 三個欄位寬度相同 (33%、33%、33%)
    • 一個較寬的欄位和一個較窄的欄位 (66%、33%)
    • 中間欄位較大,兩側欄位較小 (25%、50%、25%)
  2. 按一下「儲存」按鈕,儲存變更。

調整欄位的總寬度

若要變更整組欄位的寬度,請採取以下步驟:

  1. 選取編輯器左上角的「清單檢視」。
  2. 在此找到「欄位」區塊,然後按一下:
區塊清單中的「欄位」已選取。
  1. 在所選欄位上方或下方顯示的工具列中,選擇寬度選項 (選項看起來像矩形區塊,下方有一條水平線):
  1. 請從「」、「寬幅寬度」或「全幅寬度」中選擇。這些選項只會在佈景主題支援時出現。

這些寬度數值的大小會因佈景主題而異。若要深入了解,請參閱我們的「變更內容寬度」指引。

調整欄位內區塊的寬度

使用個別「欄位」區塊版面配置設定,即可控制單一欄位內的區塊寬度和位置。

如果將「內部區塊使用內容寬度」選項切換為「關閉」,則欄位內的區塊會填滿欄位容器的寬度。

若要進一步控制內部區塊的寬度,請將「內部區塊使用內容寬度」選項切換至「開啟」位置。接著你可以使用下列選項指定內部區塊的寬度:

  • 內容:區塊的內容區域寬度未設為寬幅或全寬。
  • 寬幅:將區塊內容的寬度設為寬幅。

你可以使用「對齊」設定,將內部區塊對齊欄位的左側、中間或右側。

欄位區塊設定。
Copied to clipboard!