進階版面區塊:用 Row/Columns Advanced 與 Box Container 排版

想在頁面做出「3 欄方案介紹」、「左圖右字、手機改上下排」、「滿版灰底區段裡再放幾張白卡」的版面時,秒站編輯器裡有兩個區塊專門做這件事:Row/Columns Advanced 用來把內容排成多欄,Box Container 用來做容器或滿版背景。本篇講這兩個區塊在哪、怎麼用、什麼時候用哪一個。

怎麼叫出來#

在編輯器裡按左上角的「+」,或在空白段落輸入「/」叫出搜尋框。

  • 輸入「row」找到 Row/Columns Advanced
  • 輸入「box」找到 Box Container

Row/Columns Advanced:把內容排成多欄#

插入時會問你「要幾欄」,先選一個接近的(1+1、1+1+1、1+2 等),之後想加減欄都能再改。每一欄裡可以放任何內容(文字、圖片、按鈕、其他區塊)。

常用的設定#

  • 電腦版/平板/手機顯示幾欄:可以分開設。例如電腦版 3 欄,手機改 1 欄
  • 欄與欄之間的距離:太擠就調寬一點
  • 對齊方式:每欄高度不一時,要靠上、置中、還是撐到一樣高
  • 顯示順序:電腦版「圖在左、字在右」,手機改成「字在上、圖在下」

適合放什麼#

  • 3 欄服務介紹、4 欄方案比較
  • 左圖右字(或左字右圖)的雙欄
  • 產品特色網格,電腦版 3 欄、手機 1 欄
  • 頁尾的多欄連結清單

Box Container:放一個容器加背景或滿版#

Box Container 不切欄,而是「外框」。當你想要:「整段放在灰色底色上」、「Hero 主視覺要滿版圖」、「要把幾個區塊框成一張卡片」,就用這個。

常用的設定#

  • 寬度:限制寬度(boxed)、滿版(stretched)、自訂寬度
  • 內邊距:上下左右留多少空白,每個裝置可分開設
  • 背景:純色、漸層、圖片、影片,可以加一層半透明遮罩讓圖片柔和
  • 邊框、圓角、陰影:做出卡片風格
  • 最低高度:常用在 Hero 設「螢幕 80% 高」這種需求

適合放什麼#

  • Hero 主視覺區段(滿版圖 + 大標)
  • 滿版的 CTA 區段(純色或漸層底)
  • 把幾個區塊框成一張卡片(白底、圓角、陰影)
  • 包住多欄內容、加共用背景

兩個常常一起用#

典型組合是「Box Container 包 Row/Columns Advanced」,也就是先用 Box Container 弄一個滿版灰底大區段,裡面再用 Row/Columns Advanced 切 3 欄放卡片。例如:

  1. 放一個 Box Container,寬度設「滿版」、加淺灰背景、上下空白 80px
  2. 裡面放一個 Row/Columns Advanced,電腦版 3 欄、手機 1 欄
  3. 每欄裡再放一個 Box Container(限制寬度),白底、圓角、輕微陰影
  4. 白卡裡放 icon、小標、描述

就是常見的「灰底大區段 + 3 張白卡」設計,全部不用寫程式。

該用哪一個#

  • 要切欄就用 Row/Columns Advanced
  • 要做容器、加背景、滿版就用 Box Container
  • 滿版背景裡又要切多欄就「Box Container 包 Row/Columns Advanced」
  • 單純文字、清單、按鈕用原生區塊就好,不需要這兩個

幾個小提醒#

  • 每個裝置都要看一下:側邊欄上方有電腦/平板/手機切換,調設定前先切到那個裝置,不然只會改到其中一個
  • 欄數別塞太多:電腦版 5 欄以上的設計,手機建議改 1 或 2 欄
  • 內邊距分裝置設:電腦版 80px 看起來剛好,手機要降到 32-40px,不然內容會被擠

常見問題

Row/Columns Advanced 跟原生「欄」區塊差在哪?

原生欄區塊欄數寫死在創建時、要改要 reset,也沒有手機/平板/電腦各自欄數的設定。Row/Columns Advanced 隨時可改欄數、每個裝置可以獨立設定欄數、間距、padding、顯示順序,做響應式版面方便很多。

Box Container 跟原生「群組」區塊差在哪?

原生群組是基本的內容外框、沒有什麼裝飾選項。Box Container 多了滿版背景、漸層遮罩、最低高度、邊框圓角、形狀分隔線等視覺控制,不用寫 CSS 就能做出 Hero 主視覺、滿版灰底區段、白底卡片等效果。

我手機看版面壞掉怎麼辦?

先檢查側邊欄上方有沒有切到「手機」裝置看設定。每個裝置的欄數、間距、padding 都是分開的,如果只在電腦版調設定,手機很可能會擠或破版。最常見的修法:手機改 1 欄、padding 降到 32-40px、字級設小一點。

滿版背景沒滿到螢幕邊緣?

確認 Box Container 的「寬度」設定為「滿版」(stretched)。如果還是沒滿,可能是父層容器有寬度限制,把這個 Box Container 拉到頁面最外層、或在頁面屬性把版面設為「全寬」。

卡片每張高度不齊?

在 Row/Columns Advanced 的「對齊」設定,把垂直對齊設為「撐到等高」(stretch),所有欄會自動拉到同樣高度。