Divi 價目表設計教學：服務業者必學的定價展示技巧
Divi 價目表怎麼做？答案是：Divi 主題內建就有一個叫做 Pricing Table 的模組，進入 Divi Builder 的視覺編輯器、按 Insert Module、搜…
Divi 價目表怎麼做？內建模組直接拉出來就能用
Divi 價目表怎麼做？答案是：Divi 主題內建就有一個叫做 Pricing Table 的模組，進入 Divi Builder 的視覺編輯器、按 Insert Module、搜尋 Pricing Table 拖進 Row 就完成第一步，不需要額外安裝任何價目表外掛。根據 Elegant Themes 官方文件的說明，這個模組屬於 Divi Builder 原生功能，啟用主題或外掛即可使用。多數服務業把模組拉出來之後真正卡住的，其實是排序、強調主方案、行動呼籲、手機排版這四個會直接影響詢問單的設計決策，後面會把這四件事拆開來講。把這四個環節做對的價目表，與只把方案文字打出來的價目表，在詢問單數量上往往會出現明顯落差。
如果你才剛接觸 Divi，建議先把 Divi 主題終極完整教學 和 Divi 主題架站全攻略 看過一遍，再回來做價目表會順很多；接下來的模組操作都預設你已經會進入 Visual Builder，也熟悉 WordPress 頁面編輯教學 裡的基本概念。
重點先看：Divi 的 Pricing Table 是內建模組，不用再裝外掛；讓價目表真正帶來詢問的關鍵是把主方案放中間、加推薦標籤、按鈕連到聯絡表單這三個動作，行為經濟學裡的置中效應研究顯示，定價頁面若把主推方案置中並做視覺強調，點擊與詢問比例會顯著高於平均排列。
Divi 價目表藏在哪：先搞懂模組的兩層結構
Divi 有內建價目表功能嗎？有，而且是原生模組，不是要你去下載什麼東西。它的名字就叫 Pricing Table，進入 Visual Builder 之後按加號新增模組、在搜尋框打 Pricing Table 就會看到。前提只有一個：根據 Elegant Themes 官方文件的說明，你的網站已經安裝並啟用 Divi 主題，或至少裝了 Divi Builder 外掛掛在其他主題上即可。
這裡要先講一個很多新手會搞混的地方。Pricing Table 在 Divi 裡其實是「兩層結構」：外面那一層叫 Pricing Table，是整個價目表的容器；裡面每放一個方案，用的叫做 Pricing Table Item。講白話就是，你先建一個桌子，再把一道一道菜端上去。只拉出容器卻忘了加 Item，是第一次做一定會踩的坑。
和第三方價目表外掛比起來，內建模組的好處在於不會增加額外的 CSS 與 JavaScript 載入，也不會跟其他外掛打架。多裝一個外掛就多一份衝突風險，對一個只需要秀方案、引導詢問的服務業網站來說根本是白花力氣。想知道 Divi 還有哪些好用的擴充工具，可以參考 必裝 Divi 外掛推薦清單，裡面有整理哪些才是真的值得裝的；對版型有興趣的話，現成 Divi 高質感版型庫 與 精選 Divi 佈局版型 也都有現成的價目表樣式可以直接套。
- Pricing Table 是整個價目表的容器，負責欄位排列、整體間距與響應式設定。
- Pricing Table Item 對應每一個定價方案，包含標題、價格、內容條列與按鈕。
- 新增路徑走 Divi Builder → Insert Module → 搜尋 Pricing Table → 拖進 Row。
- 前提是網站已安裝並啟用 Divi 主題或 Divi Builder 外掛。
什麼時候才真的需要去裝額外外掛？只有當你想要更複雜的功能，例如方案要能分類篩選、要輪播展示、或要切換月費年費的時候，再考慮 Divi Marketplace 上的擴充模組，像是 Divi 分類篩選外掛、Divi 輪播外掛推薦 或 Divi Supreme 擴充模塊評價 評測過的那幾款。否則內建模組完全夠用。
新增第一份價目表的實際步驟
第一份價目表要怎麼設？觀念很簡單：一個 Pricing Table Item 就是一個方案，把標題、價格、內容條列、按鈕文字與連結這四個欄位填滿，一個方案就完成了；想放幾個方案就新增幾個 Item。順序就是 Item 的前後排列順序，可以拖拉調整。
這裡要特別講 Price 這個欄位，因為它跟一般人想的不一樣。Divi 的 Price 欄位接受純文字，不是只能填數字。所以你可以寫「每月 NT$1,200」「一次 NT$3,500」，甚至寫「免費諮詢」「來電報價」都行。服務業很常見的狀況是價格會浮動，這時把 Price 欄位當成計價單位的說明欄，會比寫死一個數字然後被客人拿去比價更靈活。實務上把計價單位寫清楚，例如「每月 NT$1,200／共 4 堂」或「單次 NT$3,500／約 90 分鐘」，客人對方案的價值感知會具體很多。
- 先在 Row 裡插入 Pricing Table 模組當作容器。
- 在容器內逐一新增 Pricing Table Item，每個 Item 對應一個定價方案。
- 每個 Item 填 Title、Price、Body，加上 Button Text 與 Button URL 這四個欄位，方案就成形。
- 拖拉 Item 調整前後順序，主推方案放中間。
- Button URL 連到聯絡表單頁或 LINE 連結，不要放死連結。
排序這件事我自己踩過雷。早期我習慣把最便宜的方案放第一個，想說客人看到便宜會開心，結果反而讓客人卡在最入門方案，主推的中階方案沒人理。後來改成把主推方案放在三方案的第二個位置，詢問單明顯變多，這對應的正是定價心理學常討論的置中效應。要更深入理解這類設計心理，色彩心理學與設計應用 和 Landing Page 轉換率優化 有完整脈絡可看。
讓客人一眼看到主推方案
價目表怎麼讓客人一眼看到主推方案？三個動作就夠：把主推方案放在價目表正中間、用 Featured 開關加上 Badge 推薦標籤、再給它一個跟其他方案不同的背景色或邊框。這三個動作加起來，視線會自動被吸過去。
每個 Pricing Table Item 都有一個叫做 Make This Column Featured 的開關，打開之後這個方案就會被標成推薦方案，根據 Elegant Themes 官方模組文件的說明，可以顯示推薦標籤並套用獨特樣式。Featured 不只是換顏色而已，它背後對應的是定價心理學裡的錨定效應與置中效應，行為經濟學研究顯示當消費者面對多個方案時，視線會自然落在中間位置，且會把被強調的方案當作決策基準點。
| 設計手法 | 做什麼 | 轉換效果 |
|---|---|---|
| 置中排列 | 三方案時主推放第二個位置 | 視線自然停留，點擊比例顯著高於平均排列 |
| Featured 標籤 | 開啟 Make This Column Featured | 提供推薦暗示，降低決策猶豫 |
| 背景色差異 | 主方案用品牌主色或淺色底 | 從同質方案中跳出來 |
| 邊框或陰影 | Box Shadow 加立體感 | 比單純換底色更有層次 |
| 去貨幣符號 | 用「1,200／月」取代「NT$1,200」 | 降低價格痛感的視覺干擾 |
推薦標籤的文字也有學問。很多人直接寫「Best」，問題是 Best 太空泛，客人不知道憑什麼最好。換成「最多人選」「最划算」「推薦」這類有具體理由的文字，說服力會高很多。我自己習慣寫「最多人選」，因為它同時給了社會認同的暗示。這類文案技巧在 CTA 行動呼籲按鈕設計 和 Landing Page 銷售頁製作 都有更細的拆解。
還有一個小技巧值得一提：把價格欄位的貨幣符號拿掉。與其寫 NT$1,200，寫成「1,200／月」，數字直接呈現，少了貨幣符號的視覺干擾，價格痛感會降低。定價心理學研究顯示移除貨幣符號能降低消費者對價格的敏感度，這是常被討論的現象。但這招要用在合理的計價單位上，不要為了淡化而把單位也藏起來，那會變成誤導。
定價心理學的三個原則，直接套進 Divi 價目表
前面提到置中效應與錨定效應，這兩個原則加上誘餌效應，合起來就是服務業價目表最常被討論的三個定價心理學原則。把它們對應到 Divi 的具體操作，會發現內建模組的每個欄位都跟這三個原則有關係，調對了詢問單自然會跟著變多。
- 錨定效應（Anchoring）：客人對價格的判斷會被第一個看到的數字牽著走。Divi 操作上對應的是「原價劃線」這個呈現方式，把原價放在現價上方並加上刪除線，現價就會顯得比較划算。
- 置中效應（Center Stage）：三方案時客人傾向選中間那一個，因為它看起來是安全又合理的折衷。Divi 操作上對應的就是把主推方案放第二個位置，再開 Featured。
- 誘餌效應（Decoy）：放一個明顯不划算的方案，讓另一個本來普通的方案相比之下變得超值。Divi 操作上對應的是規劃一個規格略差、價格卻很接近主推方案的高階方案，藉此把客人的比較基準拉到主推方案上。
這三個原則不是要你同時全用，而是依照你的方案結構挑合適的來用。三方案通常用置中效應就夠；如果你有促銷期或方案本身真的有原價，再疊上錨定效應；只有當你的高階方案銷量一直拉不起來，才考慮設計一個誘餌方案來改變比較基準。硬把三個原則同時塞進同一張價目表，反而會讓畫面變得複雜，客人讀不出重點。
配色、字體與間距怎麼調
價目表怎麼調才不會看起來像預設醜模板？Divi 的 Design 頁籤能調整背景、邊框圓角、按鈕顏色、字體與欄位間距，把這幾項從預設值改成你的品牌色，質感立刻不一樣。內建模組的預設樣式是出了名的樸素，不調的話真的會讓人以為網站還沒做完。
Design 頁籤分為幾大區塊：Background、Box Shadow、Border、Spacing、Fonts、Buttons。不用全部都動，抓重點改就好。按鈕建議用品牌主色或漸層色（Gradient Background），圓角設在 4 到 8px 之間比直角友善，直角在服務業網站看起來太硬。欄位之間用 Custom Padding 留白，手機版建議把上下間距再加大，讓方案不會黏在一起。
字體這裡有一個原則：沿用網站全域設定，不要在價目表單獨換字體。很多新手看到價目表就想用襯線字體看起來高級，結果跟整站字體打架，反而破碎。如果對字體選擇還沒概念，Divi 自訂字體上傳、中文字體挑選與設計、排版設計與行距設定 這幾篇可以一起看，建立整站一致的字體系統。
顏色搭配上，整張價目表的色系還是要維持品牌色一致，不要每個方案用不同色系搶戲。 Featured 方案的差異化靠背景色深淺、邊框、陰影來做就好。想知道怎麼建立一套站得起腳的品牌配色，色彩學配色技巧指南、網站色彩計畫配色實戰、網頁版面設計攻略 都有從理論到落地的完整流程。Box Shadow 則建議只給 Featured 方案加立體陰影，讓它浮在其他方案之上，比單純換底色更有層次，這也是 網頁設計必備關鍵元素 裡會提到的視覺優先序原則。
字級與留白的最佳值：把價目表讀起來像一張設計稿
很多價目表調完顏色還是覺得「哪裡怪」，問題通常出在字級與留白，沒有出在顏色。把這兩項固定下來，整張表的視覺密度就會跟著穩定。整理出來的數值範圍是在多數服務業網站實測後，讀起來最接近「設計稿」而非「預設模板」的結果，可以當作起點，再依品牌調性微調。
| 元素 | 建議字級／數值 | 調整重點 |
|---|---|---|
| 方案名稱（Title） | 20 到 24px，粗體 | 最大字，建立視覺層級 |
| 價格（Price） | 36 到 48px，粗體 | 整張表最顯眼的數字 |
| 計價單位（寫在 Price 裡） | 14 到 16px，標準字重 | 例如「／月」「／堂」，比價格小一號 |
| 方案內容條列（Body） | 15 到 17px，行高 1.6 到 1.8 | 行距拉開，才不會擠 |
| 按鈕文字 | 16 到 18px，粗體 | 動作詞，內邊距上下 12 到 16px |
| 欄位 Padding | 桌機上下 30 到 40px | 手機版再加大到 40 到 50px |
| 圓角（Border Radius） | 4 到 8px | 服務業偏柔和，避免直角 |
這張表的重點是「層級」，方案名稱比內容條列大、價格又比方案名稱更顯眼，視線才有引導順序。很多人把方案名稱與內容條列設成幾乎一樣大，結果整張表看起來沒有重點，客人掃過去抓不到哪一欄是主推。把字級層級拉開，再配上 Featured 那一欄的背景色差，主推方案自然會跳出來。
手機版排法：響應式欄位設定不擠成一團
價目表在手機上會跑掉嗎？桌機排好的一列三欄，到手機如果不調，的確會擠成一團。Divi 的 Row 設定裡有手機版專屬的欄位排列選項，三方案在桌機排橫的，到手機可以改成直式依序排列，不會擠在一起。
路徑是 Row → Settings → Advanced → Responsiveness，根據 Divi 官方文件的說明，在這裡可以分別設定桌機、平板、手機的欄位順序。三欄在桌機排一列，手機版預設會自動轉成直排，這部分不用太擔心。但有一件事一定要手動檢查：Featured 主推方案轉成直排之後，是不是還在中間位置。桌機時你把它放第二個是置中，到手機直排時它還是第二個沒錯，但如果方案數變多或順序有調整，就要重新確認。這部分的進階操作可以看 Divi 手機版排序教學，講得很細。
- 開啟 Equalize Column Heights 讓多方案等高，桌面端看起來整齊。
- 手機版 Padding 比桌機大，方案才不會黏在一起。
- 按鈕在手機版設成滿寬（full width），比較好點擊。
- 直排後回頭確認 Featured 主方案還在適當順序。
響應式是很多人會漏掉的一環，因為在桌機做的時候一切都很美，直到用手機打開才發現全擠在一起。其實 響應式網頁設計觀念 不只適用價目表，整站都該有這個意識。如果你是用 Divi 做一頁式網頁，Divi 一頁式網頁設計 與 一頁式網頁設計攻略 也有對應的手機版排版建議可以一起參考。
說到底，手機版之所以重要，是因為現在來自手機的流量早就超過桌機，服務業網站的訪客更是幾乎都從手機看。根據 Statista 的統計，2026 年第一季全球網站流量有 52.27% 來自手機（不含平板），顯示手機早已是多數網站的主要入口 [來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉 https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]。價目表在手機上擠成一團，等於直接把詢問單推走。更多提升詢問單的整體做法，提升網站詢問單的做法 有從流量到轉換的完整拆解。而這些流量前提，都建立在網站本身已經架好並開始做搜尋優化之上；如果連網站都還沒有，可以從 沒有網站如何開始做 SEO 的觀念先打底，再回頭優化價目表。
手機版還有一個容易忽略的細節：按鈕的點擊範圍。Apple 與 Google 的無障礙建議都把觸控目標的最小尺寸訂在約 44 到 48px，低於這個範圍，手指較粗的客人在手機上容易誤點或點不到。在 Divi 把按鈕設成滿寬，並把上下 Padding 拉到 12 到 16px，點擊範圍通常就會落在這個安全區內。把按鈕做大，看起來是在犧牲版面，實際上是把詢問入口的命中率往上拉。
按鈕連去哪：CTA 連結聯絡表單與 LINE
價目表的按鈕應該連到哪裡才會帶來詢問？最理想是連到站內聯絡表單頁或 LINE 官方連結，讓客人點下去就能立刻發問或預約，避免連到首頁或沒有目的的死連結。按鈕連到哪裡，往往比按鈕長什麼樣子更決定轉換。
Button URL 的優先順序我會這樣排：第一優先是聯絡表單頁（例如 /contact）或預約系統頁，第二優先是 LINE 官方連結。服務業如果主打 LINE 溝通，按鈕直接放 LINE 連結完全沒問題，因為客人最後多半也是在 LINE 上談。聯絡表單的選擇可以參考 WordPress 聯絡表單外掛，預約系統則看 WordPress 預約外掛推薦 與 線上預約系統架設，挑一個跟你的服務流程搭得起來的。
按鈕文案要換成動作詞。寫「了解更多」幾乎等於沒寫，客人不知道點下去要幹嘛。換成「立即諮詢」「預約諮詢」「我要報價」這類明確的動作詞，轉換會明顯比較好，這是業界普遍的 CTA 實務經驗。要更系統化地寫好按鈕與文案，CTA 按鈕與文案教學 有完整的示範。
- 聯絡表單頁（/contact）或預約系統頁：最標準的詢問入口。
- LINE 官方連結：主打 LINE 溝通的服務業首選。
- 不同方案連不同表單欄位或帶預設參數：方便後端辨識來源方案。
- 避免連到購物車：除非真的要用 WooCommerce 線上付款。
一個進階做法是讓不同方案連到同一張表單，但帶不同的預設值或參數，這樣後端收到詢問單時就能直接知道客人是對哪個方案有興趣，回覆起來更精準。這件事不難，多半是表單外掛支援的 URL 參數功能就能做到。例如聯絡表單頁是 /contact，你可以讓中階方案的按鈕連到 /contact?plan=standard、高階方案連到 /contact?plan=premium，表單收到時對應欄位就會自動帶入方案名稱，省去客人重複填寫的麻煩，也讓你在回覆前就掌握對方的預算帶。
什麼時候不該用 Divi 價目表：與 WooCommerce 商品頁的選擇
價目表跟 WooCommerce 商品頁到底用哪個？判斷準則只有一個問題：要不要在網站上直接收錢？要就走 WooCommerce 商品頁，不要就用 Pricing Table。這是用途根本不同的問題，跟功能強弱無關。
Divi Pricing Table 適合的是「展示加詢問」的場景，例如課程方案、顧問服務、美容療程組合、瑜珈堂數方案這類需要客人看完方案再來談的。WooCommerce 商品頁適合的是「直接下單付款」的場景，有庫存、要開發票、要接金物流，這時候用價目表反而綁手綁腳。訂閱型方案如果要自動續約扣款，根據 WooCommerce 官方文件的建議，建議走 WooCommerce Subscriptions，而不是硬用價目表去模擬。想完整搞懂 WooCommerce，WooCommerce 購物網站架設、WooCommerce 商品頁優化、Astra WooCommerce 網站設定 都有詳細教學。
WooCommerce 在 WordPress 生態的普及度也讓它成為「要收錢」場景的預設選項。根據 W3Techs 的調查，WooCommerce 占了所有電商系統的 48.6%，換算成全網則有 8.2% 的網站使用，是 WordPress 上市占最高的電商解決方案 [來源：W3Techs〈Usage Statistics and Market Share of WooCommerce〉 https://w3techs.com/technologies/details/cm-woocommerce 2026-06-29]。這代表它的金流模組、發票串接、物流外掛都有成熟的多種選擇，當你真的需要線上收款時，走 WooCommerce 會比在價目表上硬接按鈕可靠很多。
| 比較項目 | Divi Pricing Table | WooCommerce 商品頁 |
|---|---|---|
| 主要用途 | 展示方案、引導詢問 | 直接下單、線上付款 |
| 金流 | 無內建，靠按鈕外連 | 完整金物流整合 |
| 庫存與訂單 | 無 | 有庫存、訂單、發票管理 |
| 訂閱自動扣款 | 不支援 | WooCommerce Subscriptions 支援 |
| 適合場景 | 課程、顧問、美容療程、瑜珈堂數 | 實體商品、數位商品、需開發票 |
| 製作難度 | 低，內建模組拖拉 | 中高，需設定金物流與稅務 |
也有混用的情境：用價目表展示方案，點按鈕連到對應的 WooCommerce 商品頁結帳。這種做法在前端給客人清楚的方案總覽，後端又能走完整的訂單流程，等於把兩者的優點都吃下來。像 Divi 打造 3C 電商網站 或 餐飲網站設計實戰 這類需要兼顧展示與結帳的網站，就很適合這種組合。
退一步看，把價目表當成「轉換元件」來設計，才是服務業真正該學的事，因為它的任務是引導客人走向詢問，而非單純把方案列出來。它不是把方案列出來就完工，而是要引導客人走向詢問。這個觀念一旦建立，後面的配色、文案、排版才會有方向。
服務業價目表要放哪些資訊：一份不漏重點的欄位清單
服務業網站的價目表裡到底要放哪些資訊才完整？一個好的方案至少要有方案名、價格、包含內容條列、適合對象、行動按鈕這五項，少了包含內容這一項，客人不敢下手。很多價目表之所以沒帶來詢問，原因往往是資訊殘缺，客人看了還是一頭霧水，跟設計好不好看關係不大。
- 必放：方案名稱、價格（含計價單位）、方案包含內容（條列 4 到 7 點）。
- 建議放：適合對象、方案時長、是否含後續服務或保固。
- 可選放：原價劃線（錨定效應）、人數限制、加購項目。
- 避免放：過長的服務流程描述，那是另開服務介紹頁的事。
條列內容的寫法也有訣竅：用動詞開頭比名詞清單更有感。例如寫「含 3 次到府服務」「含每月一次進度追蹤」「含完整課程講義」，比單純列「到府服務」「進度追蹤」「講義」更能讓客人感受到方案的價值。這個技巧在 作品集網站設計指南 與 品牌網站設計關鍵建議 裡也有提到，把「功能」寫成「對客人的好處」永遠比較有效。
不同產業在這份清單上會有不同的加減項。美容業要標療程次數與術後照顧，瑜珈或健身要標堂數與有效期間，補習班要標課程時數與師資，顧問服務要標服務範圍與交付項目，餐飲則要標份量與人數。想看各產業怎麼把網站做起來，瑜珈網站用 Divi 設計、美妝部落格 Divi 架站 都有針對性的案例。
原價劃線這招要不要用，要看你的方案真的有定期原價。硬劃一個假原價充場面，客人查一下就破功，反而扣分。如果方案本身有促銷期，劃線原價搭配現價是合理的錨定做法；沒有的話就乖乖寫一個價格就好。對訂閱方案的呈現，前面提過的擴充模塊評價裡也有進階呈現方式可以參考。
五種產業的價目表設計矩陣
不同產業的客人關心的資訊完全不一樣，把同一份欄位清單套到所有產業，常常會出現「該寫的沒寫、不需要的寫一堆」的狀況。把五個常見的服務業類別對應到各自的必欄位、方案數建議與定價心理學原則，整理成矩陣，方便你在動手做之前先抓對方向。
| 產業類別 | 必欄位（除基本五項外） | 建議方案數 | 主打的定價心理學原則 |
|---|---|---|---|
| 美容／醫美 | 療程次數、術後照顧、有效期間 | 3 個（單次／組合／療程） | 錨定效應（單次劃線 vs 組合價） |
| 瑜珈／健身 | 堂數、有效期間、是否含體驗課 | 3 個（月卡／季卡／年卡） | 誘餌效應（季卡做基準，年卡超值） |
| 補習班／線上課程 | 課程時數、師資、教材、回看期限 | 3 到 4 個 | 置中效應（主推課程置中） |
| 顧問／教練 | 服務範圍、交付項目、次數、保固 | 2 到 3 個 | 錨定效應（高階方案拉高錨點） |
| 餐飲／外燴 | 份量、人數、菜色、是否含服務 | 3 個（精簡／標準／豪華） | 置中效應（標準桌放中間） |
矩陣裡的「建議方案數」是起點，可以依實際產品線調整，但盡量不要超過 4 個。方案一旦超過 4 個，客人會開始陷入選擇癱瘓，反而把最該被點擊的主推方案淹沒掉。如果你的服務真的有很多種類，更好的做法是用分類篩選或分頁切換，把每次呈現給客人的方案數控制在 3 到 4 個以內，這也是前面提到 Divi 分類篩選外掛 真正派上用場的時機。
Divi 價目表與 Pricing List 模組的差別
Divi 除了 Pricing Table，還有一個名字很像的模組叫做 Pricing List，兩個常被搞混。Pricing Table 是方案欄位的並排展示，適合三到四個方案橫向比較；Pricing List 則是單欄的「品項加價格」列表，適合菜單、價目細項、加購項目這類逐條列出的內容。兩者的用途不同，用錯場合會讓畫面看起來卡卡的。
- 需要客人「在方案之間二選一」：用 Pricing Table，把方案並排做比較。
- 需要把同一方案的細項「逐條列出」：用 Pricing List，例如餐廳菜單或加價購清單。
- 兩者可以串接：上面用 Pricing Table 呈現三個主方案，下面再用 Pricing List 列出每個方案都可加購的品項。
餐飲與美容這類「方案裡還有很多細項」的產業，特別適合這種串接用法。客人先在 Pricing Table 看到三個套餐或療程組合的比較，往下滑再用 Pricing List 看每個套餐可以加購哪些單品，資訊層次清楚，也不會把一張表塞爆。這個組合也是 餐飲網站設計實戰 裡常推薦的菜單呈現方式。
進階技巧：自訂 CSS 讓內建模組質感再上一層
Design 頁籤能調的東西已經涵蓋八成的常見需求，剩下那兩成更精細的呈現，會需要用 Divi 的 Custom CSS 欄位來補。常見的幾個需求都有現成的 CSS 寫法可以套，不需要從零刻樣式表。下面列出四個最常被問到的進階調整，以及在 Divi 哪裡設定。
- 把推薦標籤換成自訂文字與顏色：在 Pricing Table Item 的 Advanced → Custom CSS，找到 Badge 或 Featured 相關欄位，自訂背景色與圓角，讓標籤跟品牌色一致。
- 主推方案稍微放大：用 transform: scale(1.03) 把 Featured 欄位放大約 3%，配合 Box Shadow，主推方案會有浮起來的感覺，又看不出明顯變形。
- 條列項目加上勾號：用 list-style 與 ::before 偽元素把預設的圓點換成勾號，方案的「包含內容」讀起來會更像報價單，說服力更高。
- 方案之間加分隔線：在 Border 設定統一的下框線，方案之間出現細分隔線，整張表的視覺結構會更清楚，客人不容易看錯欄。
這幾個調整都屬於「視覺細節」，單獨做效果有限，疊在一起做卻會讓整張表從「預設模板」變成「像設計師做的」。值得注意的是，Custom CSS 只作用在當前這個模組，不會污染整站樣式，所以可以放心實驗，調不喜歡就把欄位清空回到預設。對全域樣式有興趣的話，Divi 子主題推薦 裡有更系統化的做法，把常用 CSS 集中管理。
疑難排解：Divi 價目表常見問題與修法
做價目表的過程中，有幾個狀況幾乎每個人都會遇到一次。把這些狀況連同修法整理成對照表，遇到時可以直接對照處理，省下反覆試錯的時間。
| 症狀 | 常見原因 | 修法 |
|---|---|---|
| 拉出 Pricing Table 後畫面空白 | 只建了容器，沒有加 Item | 在容器內新增 Pricing Table Item，每個方案一個 |
| 三方案在桌機擠成一排、字很小 | Row 欄數設錯或被壓縮 | 把 Row 設成等寬三欄（Specialty Row 或 Equal Column） |
| 方案等高對不齊，看起來高低落差 | 沒開 Equalize Column Heights | Row Settings → Equalize Column Heights 設為 Yes |
| 手機版按鈕點不到或太小 | 按鈕沒設滿寬，Padding 太小 | 手機版按鈕設 full width，上下 Padding 加到 12 到 16px |
| 推薦標籤顯示「Best」改不掉 | 沒找到 Badge 文字欄位 | 在 Item 設定裡找 Header Badge 或 Featured 文字欄位改寫 |
| 改了顏色卻在快取沒清的情況下看不到 | 外掛或主機快取 | 清 Divi 快取與主機／CDN 快取後再檢查 |
| 方案順序拖拉後沒存到 | 離開編輯器前沒按儲存 | 調整後記得按 Save，退出前再確認一次 |
這張表裡最常見的是前兩項。空白畫面通常是兩層結構的觀念還沒建立，記得「容器加 Item」這個順序就不會再踩；擠成一排則多半是 Row 結構選錯，Divi 的 Row 有多種欄位配置，做價目表時選標準的等寬多欄 Row 就好，不要用到 Specialty Row 的特殊版型，否則欄位比例會被固定。更多 Row 與欄位的觀念，網頁版面設計攻略 有從基礎講起的完整說明。
完工後的檢查清單
價目表做完會影響網站速度嗎？基本不會。因為 Pricing Table 是 Divi 內建模組，根據 Elegant Themes 官方文件的說明，不會額外載入外部 CSS 或 JavaScript，對頁面載入速度的影響微乎其微。真正會拖慢網站的，通常是裝太多沒必要的第三方外掛，這個內建模組本身不會是瓶頸；如果整站速度一直拉不上來，可以先從表單與外掛的選擇回頭檢視，例如表單工具就會影響詢問流程的流暢度（可參考 Elementor Pro 表單製作 的做法對照）。
做完之後給自己跑一次檢查清單：方案順序是否把主推放中間、Featured 是否開啟並寫了有意義的推薦標籤、按鈕是否連到聯絡表單或 LINE、手機版是否擠成一團、每個方案的包含內容是否都列清楚。這五項過了，這張價目表才算真的能用來帶詢問。把這五項再拆細，可以延伸成一份更完整的完工檢查表。
- 方案順序：三方案時主推在第二個位置；超過三方案時主推仍在視線容易停留的位置。
- Featured 開關已開，推薦標籤寫成有具體理由的文字（如「最多人選」），不是空泛的 Best。
- 價格欄位含計價單位（如「／月」「／堂」），不是只有一個數字。
- 每個方案的包含內容條列 4 到 7 點，用動詞開頭描述對客人的好處。
- 按鈕連到聯絡表單、預約系統或 LINE 連結，文案是明確動作詞，不是「了解更多」。
- Featured 方案有背景色差、邊框或 Box Shadow，從其他方案中跳得出來。
- 字級層級正確：價格最大，方案名稱次之，條列內容最小。
- 手機版已開 Equalize Column Heights，Padding 加大，按鈕滿寬，主推順序正確。
- 頁面快取已清，桌機與手機都實際打開檢查過一次。
若你網站上同時還有頁首、作品集、視差滾動這些設計元素，記得它們跟價目表是分工關係，各做各的事。頁首負責導覽（可參考 Divi 頁首套版資源）、作品集負責建立信任（看 Divi 作品集展示設計）、視差滾動負責氣氛（Divi 視差滾動效果）、圖片懸停負責細節互動（Divi 圖片懸停特效），價目表則負責把方案講清楚並引導詢問。各司其職，網站才不會亂。
有些進階資源對長期維護也很有幫助。版型管理可以看 Divi Cloud 雲端版型 與 Divi Marketplace 免費資源，子主題挑選看 Divi 子主題推薦，標題設計看 Divi 標題設計技巧。Divi 5 的新介面如果有用到，Divi 5 新介面解析 可以對照操作。其他搭配工具像是 Bloom 電子報訂閱表單、Monarch 社群分享按鈕，則是行銷層面的加值。對主題本身有疑問，WordPress 佈景主題推薦 有更廣的比較；外掛安裝流程看 WordPress 外掛安裝方法、選單設定看 WordPress 選單設定教學、區塊小工具看 WordPress 區塊小工具設定，這些基本功穩了，價目表做起來才不會卡在不相關的環節上。費用的部分，網頁設計費用行情解析 也可以順便了解一下，心裡有個底。
講了這麼多，回頭看這張價目表，模組拉出來、打字、調顏色這些操作很快就能學會，但讓它真的帶來詢問單的，是排序、強調主方案、CTA 連結、手機排版這四個設計決策。把這四件事做對，Divi 內建的 Pricing Table 模組就足以取代絕大多數第三方價目表外掛，不需要再多裝一個。
常見問題 FAQ
Divi 價目表要額外裝外掛嗎？
不用。Pricing Table 是 Divi 主題內建的模組，進入 Visual Builder 搜尋就能找到，前提只是網站已啟用 Divi 主題或 Divi Builder 外掛。
Divi 價目表可以放幾個方案？
沒有硬性上限，方案數等於你新增的 Pricing Table Item 數量。實務上建議放 3 個並把主推放中間，太多方案反而會讓客人選擇癱瘓。超過 4 個方案時，建議改用分類篩選或分頁切換，控制每次呈現給客人的數量。
Divi 價目表的按鈕怎麼連到聯絡表單？
在 Pricing Table Item 的 Button URL 欄位填入聯絡表單頁網址（例如 /contact），或直接放 LINE 官方連結，按鈕點下去就會導到詢問入口。想辨識客人對哪個方案有興趣，可在 URL 後加上參數，例如 /contact?plan=standard。
Divi 價目表手機版會跑掉嗎？
桌機橫排到手機預設會自動轉直排，但要在 Row 的 Responsiveness 設定裡確認順序，並把手機版 Padding 加大、按鈕設成滿寬，才不會擠成一團。
Divi 價目表可以顯示訂閱方案嗎？
可以顯示，Price 欄位是純文字，能寫「每月 NT$1,200」這類訂閱計價。但若要自動續約扣款，應改用 WooCommerce Subscriptions。
Divi 價目表跟 WooCommerce 商品頁差在哪？
價目表只展示方案並引導詢問，沒有金流與訂單管理；WooCommerce 商品頁能直接下單付款、管庫存、開發票。要不要在網站上直接收錢，是唯一的選擇準則。
Divi 價目表怎麼強調主要方案？
開啟 Pricing Table Item 的 Make This Column Featured，搭配置中排列、不同的背景色或邊框、Box Shadow 立體陰影，並把推薦標籤寫成「最多人選」這類有具體理由的文字。
Divi 價目表的價格欄位可以自訂文字嗎？
可以。Price 欄位接受純文字，能寫「每月 NT$1,200」「一次 NT$3,500」「免費諮詢」「來電報價」，計價方式由你決定。
Divi 的 Pricing Table 跟 Pricing List 要選哪個？
需要客人在方案之間二選一時用 Pricing Table，把方案並排比較；需要逐條列出同一方案的細項或菜單時用 Pricing List。兩者也可以串接，上面放方案比較、下面放加購細項。
Divi 價目表方案數超過 4 個怎麼辦？
超過 4 個方案容易造成選擇癱瘓，建議改用分類篩選或分頁切換，把每次呈現的方案數控制在 3 到 4 個以內，讓主推方案不會被淹沒。