假設你開了一家叫「好喝咖啡」的店，想自己用 GenerateBlocks 排官網的版面，我們應該如何開始？
我們要先認識三個區塊，分別是容器、網格、標題，這是 GenerateBlocks 免費版就有的，我們先以製作兩欄的版面來做說明。
快速重點
| 你想做的事 | 用哪個區塊 |
|---|---|
| 把版面分成左右兩欄 | 網格 Grid |
| 裝住其中一欄的內容，之後好調間距和背景 | 容器 Container |
| 放一行標題或一句短文字 | 標題 Headline |
這三個區塊的關係是固定的。網格負責把版面切成幾欄，切完之後每一欄就是一個容器，容器再裝標題、文字、圖片這些真正的內容，所以動手的順序也是這樣，先分欄，再進到欄位裡，最後放東西。
1.點左上角藍色的「＋」
開一個新頁面，左上角那顆藍色的「＋」就是區塊插入器，頁面上所有東西都從這裡拿。點下去。
2.往下捲，找到 GenerateBlocks
插入器會從左邊拉開，裡面照分類排。往下捲一點會看到 GenerateBlocks 這一區，容器 Container、網格 Grid、標題 Headline 三個都在裡面。
3.點網格 Grid
三個區塊裡先放網格，因為要先有欄，才有地方放東西。點一下 Grid，拖曳到右邊工作區域。
4.網格放進來之後，預設是兩欄
網格一放進來，畫面上就出現兩個並排的空容器，這是它自動生的，你不用自己一個一個加。想換成三欄四欄，右邊 LAYOUT 那排圖示點一下就好。示範用的容器上了淺灰底比較好認，你自己排的時候預設是透明的，只看得到淡淡的外框。
5.點一下左邊的容器
欄有了，接著要進到左邊那一欄裡面才能放東西。點一下左邊那個空容器。
6.右邊確認你選到的是容器
右邊面板最上面會顯示 Container，表示你選到的是這一欄的容器。如果顯示的是 Grid，那是選到外面整個網格了，再點一次裡面那塊就好。選錯層級是新手最常卡住的地方，養成看一眼的習慣。
7.想調樣式，點齒輪旁邊那顆半圓形圖示
現在開著的是齒輪那一頁，裡面是標籤名稱、裝置顯示這類設定，沒有寬度也沒有間距。寬度、內距、背景這些樣式在齒輪右邊那顆半圓形圖示裡，很多人第一次會在齒輪頁找半天。
8.樣式都在這一頁
點下去會看到 Layout、Sizing、Spacing、Typography、Backgrounds、Borders 這幾組。寬度在 Sizing、內距在 Spacing、背景色在 Backgrounds。先知道它們在哪就好。
9.點容器中間的「＋」
回到骨架。容器選起來之後，它中間會出現一個「＋」，點它就是在這個容器裡面加東西。
10.搜尋 headline，選標題
跳出來的小面板只列了幾個常用區塊，標題 Headline 不在裡面。在搜尋框打上 headline，它就出現了，點下去。
11.打上店名
標題進到容器裡了，游標就在上面，直接打「好喝咖啡」。
12.想換 H2 或 H3，點工具列這顆
選著標題的時候，工具列上紅框那顆會顯示現在的標籤是 H2，想換成 H3 或一般段落就點它。標籤選對，搜尋引擎才知道這一頁哪一句是重點。
13.點左上角的清單檢視
最後確認結構有沒有排對。版面一複雜，用點的很容易選錯層，清單檢視是最可靠的確認方式。點左上角第三顆按鈕打開它。
14.用清單檢視確認層級
網格在最外層，底下接兩個容器，其中一個容器裡裝著剛剛那個標題。看到這棵樹長這樣，骨架就排對了。
這樣就有一個兩欄的骨架了。左邊裝著店名，右邊那欄還空著，之後想放什麼都可以。
什麼時候要在外面再包一層容器
我們的做法是網格直接放在頁面上，外面沒有再包。你可能看過別的教學先放一個容器再放網格，那樣也可以。
要不要包，看一件事就好，底色要多寬。
底色和欄位一樣寬就不用包。網格自己就能設底色和內距，外面多包一層沒有任何差別，我們示範的就是這樣。
底色要比欄位寬就要包。舉例來說，首頁最上面那條主視覺，整條橫幅是滿版的咖啡色，中間的文字只佔六百像素。一層做不出來，因為底色和寬度是同一個元素的設定，你把欄位縮到六百，底色也會跟著縮到六百。
包成兩層就解決了。外層只負責底色，內層的網格只負責寬度，兩邊互不影響。
補充一點，GenerateBlocks 的區塊沒有 WordPress 內建的「滿版」對齊選項，所以滿版底色只能用這個方法做。我們現在只排骨架，用不到，等排主視覺的時候再說。
常見問題
免費版的 GenerateBlocks 就能排出兩欄嗎？
可以。我們用到的容器、網格、標題，免費版都有，每一步都不需要付費版。付費版多的是查詢迴圈、手風琴這類進階元件，排一般版面用不到。
容器和 WordPress 內建的「群組」差在哪？
兩個都是裝內容的盒子，差別在設定的細緻度。容器的間距、背景、圓角，還有桌機平板手機分開設定，都在同一個面板裡，和網格、標題共用一套介面。只排簡單版面用群組也可以，版面一複雜，容器會比較簡單。
一定要用網格才能排兩欄嗎？
不一定，內建的「欄位」區塊也做得到。用網格的好處是欄數、欄與欄的間距、手機上要不要疊成一欄，都在同一個地方調，之後要改也好找。
同樣三個區塊，換個欄數就能做別的版面。三欄的特色介紹、左圖右文的段落，做法完全一樣，先用網格分欄，再進到容器裡放東西。
接下來我們會把這個骨架填成能用的東西，左邊放地址、電話、營業時間，右邊放地圖。
照著做如果畫面跟這裡不一樣，或者不確定版面該怎麼安排、想連整個網站外包給我們製作，歡迎與我們聯絡。