動手之前
先把資料備齊，不必再多開分頁。
- 店名、電話、電子郵件、地址、所在城市、時區，以及營業時間。
- 一批你有權公開的真實照片。初稿有六到十二張夠好的相片就夠了。
- 一個最主要的顧客動作：打電話、下訂單、訂位、預約、索取報價，或是直接到店。
你會學到
- 從對的商家結構開始，而不是一張空白頁。
- 分清楚網站主題（Theme）和編輯器介面風格的差別。
- 把上線指南（Launch guide）當成有憑有據的完成清單。
- 發布前，先用手機寬度檢查店面網站。
01
用最接近的商家類型開一個新專案
範本決定了一開始的頁面結構，也決定會用到哪些營運模組。挑跟你實際做生意方式最像的那一個，不要只看縮圖顏色順不順眼。
- 點選「新專案」（New project）。
- 挑一個運作方式最像你這門生意的類型。餐廳、預約制服務、內容媒體、房產網站，需要的頁面和資料結構都不一樣。
- 打開範本，看它內建哪些頁面、顧客會怎麼一路走下去。除非你心裡已經有完整的頁面規劃，否則不要從空白專案開始。
做到這樣就算完成： 你講得出這個網站最主要的顧客動作是什麼，而且選到的範本本來就支援這條路。
02
先選設計風格（Design Style），再填真實的商家資料
設計風格改的是顧客看到的版面和配色。設定旁邊那個小小的介面風格切換器，只會改編輯器外框。
- 在建立專案的對話框裡比較各種設計風格；有「試套」（Try on）就先套上去看看。
- 填入真正的店名、電話、電子郵件、地址、城市、縣市州別、郵遞區號和時區。
- 確認聯絡資訊已經不是範例資料，才按「建立專案」（Create project）。
做到這樣就算完成： 專案一打開，商家身分就是對的；選到的網站風格是在襯托內容，而不是搶走注意力。
03
先照上線指南一條一條做完，再回頭雕單一區塊
上線指南會實際讀你的專案，告訴你到底還缺什麼。每一列都能直接跳到對應的面板，所以就照它的順序做。
- 在左側工具列打開上線指南。
- 到「網站」（Site）裡把真實商家資料填完，並設定營業時間。
- 相片、商品品項、頁面 SEO 資訊都看即時計數，不要靠記憶。
- 每做完一段就回上線指南一次，處理第一個還沒完成的項目。
做到這樣就算完成： 指南上不再出現範例聯絡資訊、沒填營業時間，或必填內容還空著。
04
把範例內容換成一個講得清楚的顧客故事
範本只是鷹架。先把看得見的信任證明、優惠方案和行動按鈕換成真的，再去調那些細微的視覺。
- 要加東西就開「元件」（Components）；要精準選到現有區塊就用「圖層」（Layers）。
- 在畫布上選一個區塊，然後在檢視器裡改「內容」（Content）。外觀用「樣式」（Style），點擊行為用「動作」（Actions）。
- 把核准過的相片放進媒體庫，再擺到該擺的圖片位置。每個斷點都確認一次裁切有沒有跑掉。
- 每個按鈕都只給它一個去處。按鈕要嘛跳頁、要嘛啟動該做的生意動作，不然就刪掉。
做到這樣就算完成： 第一次來的人不用把每段字讀完，就知道你在賣什麼、為什麼可信、下一步該做什麼。
05
讓「頁面」跟真正的導覽列一致
頁面名稱就是導覽列上的字，頁面順序就是導覽列的順序。可見度會在「導覽列加頁尾」、「只在頁尾」和「隱藏」之間輪流切換。
- 打開「頁面」（Pages），把每一頁改成顧客聽得懂的說法。
- 按第一次來的人需要的順序排。法律或政策頁不適合放主導覽列時，就留在頁尾。
- 重複或沒在用的頁面就刪掉。首頁不能刪。
- 頁面檢視器要你填 SEO 標題和描述時，每一頁都填準確的內容。
做到這樣就算完成： 導覽列很短、順序合理，每一個看得到的頁面都有明確用途和自己的搜尋描述。
06
檢查手機上的整段流程，不是只看一張截圖
在地商家的訪客大多從手機進來。真正要測的是：顧客能不能不卡住地把主要動作做完。
- 把編輯器工具列切到 Mobile（手機版），在 390 像素的畫布寬度下把整頁掃一遍。
- 打開「預覽」（Preview），選 Mobile，實際測導覽列、表單、按鈕、選單，還有訂單或預約流程。
- 如果網站有後台（Backoffice），在預覽裡從店面切到後台，同樣用 Mobile 檢查一遍。
- 整條路都測過了，才回上線指南把「用手機尺寸預覽」那一項打勾。
做到這樣就算完成： 主要動作從第一個畫面一路做到完成狀態，過程中沒有左右捲動、文字被切掉，也沒有按鈕藏起來。
最後檢查
這幾項全部成立，才算真的做完。
- 商家名稱、聯絡方式、營業時間和地址都是真的。
- 每一張圖和每一句對外的說法，都已經核准可以公開。
- 每一個看得到的按鈕，都有刻意安排的去處或動作。
- 導覽順序、頁面可見度、SEO 標題和描述都設定好了。
- 整個店面網站和主要轉換路徑，都在 Mobile 預覽裡測過。