這篇從一個排好的兩欄版面開始：左欄有店名標題，右欄還空著。你可以照這篇花三分鐘排一個，或直接用你手上長得像的版面。
我們接著把地址、電話、營業時間放進左欄，右邊放一張地圖，做成一個能用的營業資訊區。
快速重點
| 製作需求 | 用哪個區塊 |
|---|---|
| 寫一整段內容，像地址、電話、營業時間 | 文字 Text |
| 放入一張圖 | 圖片 Image |
| 放入一行大字，像店名或小標 | 標題 Headline（上一篇用過） |
文字和標題最容易被搞混，差別不在外觀，在標籤。
標題出來是 H2、H3 這種，文字出來是一般段落，搜尋引擎靠這個判斷哪一句是重點。所以拿標題去放整段內容，看起來沒事，但實際上會讓整頁的重點模糊。
動手的順序只有一套，先點容器，再從容器裡的加號放東西。加號出現在哪，內容就會進到哪。
起點的畫面長這樣，左欄有店名，右欄還是空的。
1.點一下左邊的容器
內容要放進哪一欄，就先點那一欄。在店名旁邊的空白處點一下，左欄的容器就選起來了。點在店名上會變成選到標題，位置差一點，選到的東西就不一樣。
2.點店名下面的加號
容器選起來之後，店名底下會冒出一個加號。那個加號就是新內容要進去的位置，點下去。
3.搜尋 text，點文字 Text
插入器打開之後在搜尋框打 text，結果會縮到剩幾個。Text 和 Headline 會排在一起，我們要的是 Text，點它。
4.打上地址、電話、營業時間
文字區塊會出現在店名下面，先點一下它，游標進去了再開始打字。第一行打「到店裡坐坐」當開頭，接著是地址、電話、營業時間。
換行的時候按 Shift 加 Enter，四行才會留在同一個區塊裡。直接按 Enter 不是換行，它會跳出去開一個新區塊，而且開的是 WordPress 內建的段落，不是 GenerateBlocks 的文字。
5.點一下右邊的容器
左欄好了，換右欄。在右欄那塊空白裡點一下，右邊的容器就選起來了。
6.點右欄裡的加號
右欄還是空的，加號會出現在左上角。空的容器加號在最上面，有內容的容器加號在內容下面，位置不同，意思一樣，都是下一個區塊要進去的地方。
7.搜尋 image，點圖片 Image
一樣在搜尋框打 image，這次會跑出兩個長得很像的。英文的 Image 是 GenerateBlocks 的，中文的「圖片」是 WordPress 內建的。我們要的是英文那個，點 Image。
8.選一張圖放進去
圖片區塊進來了，中間有三個按鈕。電腦裡的檔案按上傳，已經傳過的按媒體庫，我們挑一張店的位置地圖。
圖選好之後，右邊面板的 ALT TEXT 記得填。那是圖片的替代文字，圖沒載出來的時候會顯示，搜尋引擎也靠它讀懂這張圖在講什麼。
9.兩欄都填好了
左邊是店名和營業資訊，右邊是地圖，一個能用的營業資訊區就完成了。從骨架到這裡，只做了兩件事，選容器、從加號放東西。
10.用清單檢視確認層級
畫面上看不出東西實際放在哪一層，要開清單檢視才知道。網格底下應該是兩個容器，左邊那個裝著標題和文字，右邊那個裝著圖片。
如果文字掉到網格底下，跟容器變成平輩，那是插入的時候容器沒選到。刪掉重放比用拖的快。
常見問題
文字區塊和標題區塊差在哪？
標題用來放一行的大字，像店名、段落小標；文字用來放整段內容，可以換行、可以很多行。差別在它們預設的標籤，標題出來是 H2、H3 這種，文字出來是一般段落。搜尋引擎靠標籤判斷哪一句是重點，所以別拿標題來放整段內容。
為什麼不用 WordPress 內建的段落區塊就好？
內建段落完全可以用，短內容用它更快。GenerateBlocks 的文字區塊多的是排版設定，行高、字距、內距、桌機平板手機分開設，都在同一個面板裡，跟容器和網格共用一套介面。版面複雜的時候，全部用同一套會比較好管。
放進去的圖片要多大才不會拖慢網站？
看它實際顯示多寬。兩欄版面裡的圖大約佔半個版面，準備 1200 像素寬就很夠，再大只是浪費。WordPress 上傳時會自動產生多種尺寸讓瀏覽器挑，但原始檔太大還是會拖慢後台和備份。
下一步
同一套做法可以填任何版面。三欄的特色介紹、左圖右文的段落，都是先點容器，再從加號放東西，換的只是欄數和裡面放什麼。
接下來我們會在營業資訊下面加一排「三大特色」，同一套做法換成三欄。
照著做如果畫面跟這裡不一樣，或者不確定版面該怎麼安排、想連整個網站外包給我們製作，歡迎與我們聯絡。