- 登入
- 註冊
進階版面區塊:用 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 欄放卡片。例如:
- 放一個 Box Container,寬度設「滿版」、加淺灰背景、上下空白 80px
- 裡面放一個 Row/Columns Advanced,電腦版 3 欄、手機 1 欄
- 每欄裡再放一個 Box Container(限制寬度),白底、圓角、輕微陰影
- 白卡裡放 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),所有欄會自動拉到同樣高度。