使用兩欄和三欄版面配置

您可以使用多欄區段版面配置,自動決定新增至版面配置之元件的間距和排列方式。

若要新增版面配置至頁面:

  1. 瀏覽至您要編輯的頁面,並確定 「編輯」開關 已設為編輯
  2. 將版面配置新增至頁面。
  3. 若要將其他內容放置在區段版面配置中,請將內容拖放至版面配置上。

    此版面配置會標示實心框線和橫幅,橫幅中顯示「新增項目」。
    以下為 GUID-01FF01BB-7DB2-47CE-BEC2-EF46C1A8056F-default.png 的說明
    插圖說明 GUID-01FF01BB-7DB2-47CE-BEC2-EF46C1A8056F-default.png

    您可以繼續將項目新增至版面配置,版面配置將隨之設定項目的格式。您甚至可以新增其他區段版面配置來建立精美的版面配置,或是新增元件群組。

    以下是一個兩欄的版面配置,其中以影像元件作為預留位置:


    以下為 GUID-E47530CF-CB6F-4E41-ADC2-8BE0DE42F4CA-default.png 的說明
    插圖說明 GUID-E47530CF-CB6F-4E41-ADC2-8BE0DE42F4CA-default.png

    如果您新增更多項目,它們會顯示在額外的資料列中,且每列最多兩個項目。

  4. 若要編輯元件與其外觀,請按一下其功能表圖示 「元件功能表」圖示,然後選擇設定值
  5. 使用「一般」頁籤修改版面配置中個別元件的設定值。
    按一下元件名稱可查看該元件的設定值。
  6. 使用「背景」頁籤修改版面配置的背景設定值。
  7. 選擇自訂設定值設定所顯示內容的其他預設值。
    • 第一個資料欄寬度 (%):以版面配置可用間距百分比為單位指定資料欄寬度。

    • 第二個資料欄寬度 (%):以版面配置可用間距百分比為單位指定資料欄寬度。

    • 第三個資料欄寬度 (%):以版面配置可用間距百分比為單位指定資料欄寬度。

    • 響應式中斷點 (像素):對於當可用的顯示大小改變時會自動重新設定內容格式的響應式頁面設計,請以像素為單位,指定區段版面配置在標準兩欄版面配置,與您在下方所指定之響應式行為選項之間切換時的寬度。

    • 響應式行為:選取當可用顯示大小比響應式中斷點值小時,版面配置變更的方式。

      • 不動作:不調整版面配置行為。

      • 堆疊資料欄:將項目從上到下在單一資料欄中進行排列,其中先顯示第一個資料欄的所有項目,再顯示第二個資料欄的項目,依此類推。

      • 隱藏第一個資料欄:隱藏第一個資料欄的內容,為其餘的資料欄提供更多空間。

      • 隱藏第二個資料欄:隱藏第二個資料欄的內容,為其餘的資料欄提供更多空間。

      • 隱藏第三個資料欄:隱藏第三個資料欄的內容,為其餘的資料欄提供更多空間。

      • 隱藏兩個資料欄:隱藏版面配置中所有的內容。

      • 將第二個資料欄移動至第一個資料欄底下:在單一資料欄中先排列第一個資料欄中的所有項目,後面再接著第二個資料欄中的所有項目。

      • 將第一個資料欄移動至第二個資料欄底下:在單一資料欄中先排列第二個資料欄中的所有項目,後面再接著第一個資料欄中的所有項目。