內容區塊與編輯器
12 種區塊（含流程步驟）、純文字樣式工具列、圖片拼貼與影片、價目表是另一份資料
- 設定 > 形象網站設定 > 頁面內容，選頁後編輯區塊
功能說明
網站的內容頁面是由一塊一塊的「內容區塊」堆出來的。每個區塊可以上下排順序、單獨編輯或刪除，也可以歸到這一頁的某個膠囊分類底下。
支援 12 種區塊類型：
| 名稱 | 內容 |
|---|---|
| 段落標題 | 標題文字 + 可選的小圖示 |
| 純文字 | 一段文字；選取文字後可以用上方工具列加粗體、放大／縮小（各三段）、重點色（主題色），把整行變成小標，或插入分隔線 |
| 行動呼籲 | 多顆按鈕（各自設按鈕文字、連結、顏色，連結可以是預約頁或外部網址），背景可選純色或圖片；背景圖可選要不要加深色遮罩，手機版可設滿版顯示 |
| 圖示列表 | 多筆項目（標題、內文、圖示、可標記重點），可以設定重點的邊框色；每一項可以按 Enter 換行，也能加粗、放大縮小、用重點色 |
| 折疊問答 | 多筆可展開收合的問答（每一題可以各自設圖示與樣式），最適合做常見問答；每一題可以關掉「每行前面顯示圓點」，改成一般段落；整組可選「預設收合／預設展開／不收合」 |
| 價目表 | 多筆項目（名稱、價格、原價刪線、標籤） |
| 流程步驟 | 服務流程、操作步驟：一步一步新增（步驟名稱、時間、說明、選填照片），可拖曳排序；顧客那邊是有編號的時間軸；可選「預設收合（只顯示 N 個步驟，點開才看到）／預設展開／不收合（一直攤開、沒有收合按鈕）」 |
| 單張圖片 | 圖片 + 說明文字，比例可選 16:9 / 4:3 / 1:1 / 3:4 / 9:16 或「完整大小」（不裁切、依原圖顯示），裁切位置可依裝置各自設定，手機版可設滿版顯示 |
| 滑動圖卡 | 多張圖卡（圖片、標題、說明），可依裝置各自設定比例與裁切位置 |
| 圖片輪播 | 多張圖左右切換（下方有小圓點指示，點圖可放大），圖片下方一組標題／副標題／說明／標籤；可開「每張圖片各自一組文字」讓文字跟著圖片一起換 |
| 圖片佈局 | 多格拼貼版面：先挑版型（2×2、上兩下一、左大右二、左二右大、一列三欄、錯落畫廊…共 9 種），再點格子放圖，跟圖文選單的編輯方式一樣；點圖可放大瀏覽，手機版可設滿版顯示 |
| 影片 | 上傳一段 60 秒以內的短片（環境巡禮、施作片段），系統自動壓縮並擷取封面圖；預設顧客看到封面圖、點了才播，也可以改成靜音自動播放 |
每種區塊都可以調整樣式：可以選「主題色」（會跟著「外觀主題」的配色連動）或「自訂色」（固定不變），還能調文字深淺、標題樣式、重點色、區塊背景色、圖片比例（可依裝置分開設）。另外每個區塊（段落標題除外）都有「在頁面上顯示標題」開關，關掉後顧客那邊不顯示標題、後台清單仍用標題辨識。
這頁能做什麼（功能總覽）
詳細介紹
- 拖曳排序按住左邊的把手上下拖，顧客那邊就照這個順序由上往下顯示。
- 區塊類型標題底下的小灰字，一眼看出這一塊是純文字、列表還是價目表。
- 編輯鉛筆，進去改這一塊的內容與樣式。
- 刪除垃圾桶，會跳出「確定要刪除此內容區塊嗎？」。
清單上方會多一排膠囊，點哪一顆就只看那一組的區塊，新增的區塊也會落在那一組。區塊編輯器裡也有「顯示群組」可以改。膠囊本身怎麼建見 settings-website.content-pages。
詳細介紹
編輯器分三步，最上面的步驟條可以直接點回前一步：
- 選模組先點「文字」「列表」「圖片／影片」其中一張大卡，展開後再挑要哪一種區塊。
- 內容編輯最上面看得到剛選的模組，按「更換模組」可以回去重選。區塊標題是選填，留白顧客那邊就不顯示標題；有填才會出現「在頁面上顯示標題」開關。左邊的「＋」可以挑一個小圖示放在標題前面。
- 外觀樣式調顏色，詳見下面「外觀樣式」。單張圖片、圖片佈局、影片的樣式設定就在內容編輯同一頁，所以這三種只有兩步。
- AI 生成純文字、圖示列表、折疊問答、圖片輪播這幾種，在內容編輯那一步可以讓 AI 照你的品牌資料寫一段。
用手機新增或修改內容時，編輯畫面會蓋過下面的導覽列，空間比較大。「預覽」按鈕在最上面標題列。
詳細介紹
- 顯示價格 / 不顯示價格切到「不顯示價格」就只留服務名稱，適合面議或純展示的項目。
- 「起」在特價框右邊按一下變成實心，顧客那邊會顯示「1800起」。
- 原價 (選填)填了會在售價旁邊加一條刪除線，看起來就是折扣價。
留空是「不顯示價格」，明確填 0 才會照實顯示 $0，適合免費諮詢這種項目。
詳細介紹
每一組設定用分隔線隔開，同一組裡面分「背景顏色」和「文字顏色」兩排，顏色直接點圓點選：
- 標題樣式標題的底色和標題文字顏色。
- 列表樣式／區塊樣式每一筆項目或整塊的底色，以及裡面文字的顏色。
- 區塊背景顏色（列表、價目表才有）：整塊最外層的底色。
- 每一排都有黑、白、五個主題色，最後的「＋」可以自己挑顏色。
選的是主題色（主色、次要、表面…）時，之後改「外觀主題」整站會一起換；選黑、白或自訂色就固定不動。
用「＋」挑過的顏色最多記 3 個，之後在其他區塊的外觀樣式也能直接點。記錄存在這台手機或電腦上，換裝置要重新挑一次。圓點右上角的小叉叉可以刪掉。
操作步驟
1選模組、填標題
- 到 頁面內容 點那一頁，右上角按「新增內容」。
- 先點大類（文字 / 列表 / 圖片／影片）的大卡，展開後再挑要哪一種區塊，選好會自動進到內容編輯。
- 「區塊標題」選填，想讓顧客看到標題再填。左邊的「＋」可以挑個小圖示。
2一筆一筆把內容填進去
- 列表、問答、價目表、圖卡、輪播都是一筆一張卡，往下一筆一筆加、也可以拖曳換順序（手機上按住卡片標題左邊的六個點拖）。
- 要調顏色按最下面「下一步外觀樣式」。
- 想特別強調某一筆就把那張卡的樣式切成「強調顯示」。
- 右上角的「AI 生成」可以讓 AI 先寫一版，再自己改。
3看一下手機版，確定再存
- 螢幕夠寬時右邊會有並列的手機預覽，一邊改一邊看顧客那邊長什麼樣（窄螢幕用「預覽」按鈕叫出來）。
- 確定了按右下角「儲存」，這一塊才會真的存下去。
- 不想要就按「取消」，剛剛改的都不會存。
前置條件與依賴
- 要有「管理網站內容」的權限。
- 區塊一定掛在某個頁面下面，所以要先建立內容頁（settings-website.content-pages）。
- 頁面英文名稱改了，區塊會自動跟著搬過去，不用重做。
- 圖片會存進系統圖庫，檔名系統自動處理，中文檔名沒問題。
常見問題與排查
Q1：區塊在後台有，顧客那邊看不到？
四層依序檢查：(1) 那一塊的標題旁邊有沒有紅色的「隱藏」標記；(2) 這一頁有建膠囊分類的話，這一塊是不是被歸到某一組，顧客要點那顆膠囊才看得到；(3) 這個區塊所在的「頁面」有沒有切在「顯示」；(4) 你看的網址是不是舊的？頁面英文名稱改過的話，舊網址會打不開。
標著「隱藏」的是以前設定過的舊資料。現在要讓某一塊不出現，就把它刪掉，或把整頁切到「不顯示」。
Q2：顧客看到的順序跟後台不同？
顧客那邊是照後台清單的順序由上往下顯示。拖曳放開就會自動儲存，但網路不穩時可能沒存到；把後台重新整理，看順序有沒有保留。
Q3：圖片在手機上裁切位置不對？
單張圖片、滑動圖卡、圖片輪播都支援依裝置（電腦/手機）各自設定裁切位置與比例。在編輯器裡切到手機裝置調整裁切焦點，並用右邊的手機預覽確認。
Q4：整張海報 / 長圖不想被裁，手機想滿版直出？
單張圖片區塊有兩個設定可以搭配：
- 比例選「完整大小」：不裁切，依原圖比例完整顯示（可以只在手機裝置設完整大小，電腦維持 16:9 之類的裁切）。
- 手機版滿版顯示：開關打開後手機上會去除左右留白與圓角、貼齊螢幕邊緣；電腦版不受影響，維持卡片留白。 兩個一起開，就是常見的手機滿版長圖設計。
Q5：問答（折疊問答）某一題想特別強調？
折疊問答和圖示列表的每一筆項目都可以標記重點；圖示列表還可以設定重點的邊框色；折疊問答每一題可以各自設定樣式。
Q6：想做「服務價目表」，用價目表區塊還是正式服務？
兩個用途不一樣：價目表區塊只是網站上的展示文字，改了價格不會影響預約；顧客預約頁看到的服務與價格，來自「服務與加購」建立的正式服務。建議價格以正式服務為準，價目表區塊拿來補充展示（套餐、活動價說明），改價時記得兩邊一起改。
Q7：價目表想顯示折扣前的價格？
價目表區塊每一筆都有「原價」欄位，填了會用刪除線顯示在售價旁邊，另外還可以加標籤（例如「熱門」「新品」）。
Q8：價格想寫成「1800起」，或某些項目只想顯示名稱、不顯示價格？
價目表每一筆都能單獨設定：
- 顯示「起」：在特價輸入框右側點一下「起」按鈕，變成主色實心就代表開啟，顧客那邊會在金額後面顯示「起」（例如 1800起），適合客製化、起價的品項。
- 顯示價格／不顯示價格：品項上方有個小切換，切到「不顯示價格」就只會顯示服務名稱，適合純展示、面議或標題型的項目。
- 免費（$0）：特價直接填 0，顧客那邊就會顯示 $0（以前填 0 會被當成沒填、不顯示，現在會照實顯示）。
Q9：儲存區塊時打字到一半按 Enter 就送出了？
系統的輸入框已經處理過注音選字的 Enter，選字確認不會誤觸送出。如果還是遇到，請回報是哪一個欄位。
Q10：編輯區塊時按「AI 生成」，整個編輯畫面突然關掉退回列表
2026-08-02 以前，在「頁面內容 › 編輯內容」按了 AI 生成彈窗裡的任何一顆按鈕（最常見的是「檢視 / 編輯品牌資料」），整個編輯器會直接關掉退回區塊列表，而且那個區塊會被當成按了儲存。等於你還沒改完的內容被存了下去。2026-08-02 已修復，現在按這些按鈕都只會停在彈窗裡，編輯器不會動。
如果你在那之前存到了不想要的內容，回該區塊重新編輯改回來即可（區塊沒有版本紀錄，只能手動改）。
Q11：想把幾個字變粗體、放大，或加一個小標題？
「純文字」區塊的內容框上方有一排工具列：先選取文字，再按「粗體」「重點色」，同一顆再按一次就取消；「放大」「縮小」每按一次調一段，上下各三段，調回原本大小記號就會拿掉；「小標」會把整行變成小標題；「分隔線」在游標那一行下面加一條細線；「清除樣式」把選到的那幾行恢復成一般文字。段落之間想空多一點，就多按幾次 Enter 留空行，每個空行大約空出一行字的高度（最前面和最後面的空行不算）。輸入框裡會看到 **、==、[+2]…[/]、## 、--- 這類記號，那是樣式的標記，實際長相看右邊的手機預覽。
Q12：服務流程很長，顧客一打開整片都是字？
改用「流程步驟」區塊：每一步各自新增名稱、時間和說明，顧客那邊預設收起來，只看到「服務流程・12 個步驟」，想看的人再點開。原本已經寫好一整段流程的，在流程步驟的編輯畫面最下面可以「貼上文字自動拆成步驟」，用「Step 1｜」「1.」開頭的那行會變成一步，拆完再逐步修改。
