Divi Supreme 模組評價：60+ 實用模組功能升級

相信不少人也有過這種感覺：用 Divi 架了幾個站，版型越來越熟，可是每次遇到「我要做一個前後對比的圖片滑桿」「我要一個可以點擊熱點的產品圖」「我要一個有動畫進場的數字計數器」這類需求，就發現原生 Divi 模組裡找不到對應的元件，於是又得回去找付費外掛、找 CSS 教學、找設計師朋友救火。如果你正卡在這個階段，這篇就是寫給你的。

先講結論。Divi Supreme 是 Divi 生態裡功能較完整的第三方模組擴充之一，它把多種原生 Divi 沒有或設定較繁複的元件補進 Divi Builder，讓你在視覺編輯器裡直接使用。Divi Supreme 官方網站目前標示 Pro 版有 60+ 模組、免費版有 20+ 模組，但數量會隨版本調整，選擇時仍要回到實際需求。模組愈多，也愈需要管理載入資源與後續相容性。

Divi Supreme 到底是什麼：一層站在 Divi 原生模組之上的擴充

要理解 Divi Supreme 的定位，先用一個比喻。把 Divi 主題想成一台功能完整的休旅車：引擎、底盤、內裝都到位，能開能跑。而 Divi 原生的幾十個模組，就像是這台車出廠時配好的配備清單，按鈕、圖片、文字、輪播、定價表，常用的都有。問題是，當你開始接不同產業的客戶、做不同類型的網站，你會發現出廠配備永遠少那麼幾樣：一個能讓訪客前後拖動比較的圖片比較器、一個能放 Lottie 動畫的區塊、一個能做內容時間軸的版型。

Divi Supreme 做的事，就是在不碰休旅車引擎的前提下，幫你把這些「原廠沒附、但你會用到」的配備加掛上去。它是一個外掛層，安裝之後，Divi Builder 的模組選單裡會多出數十個分類好的元件，設定方式跟原生模組一模一樣，設計標籤、進階標籤、響應式切換都沿用 Divi 本來的操作邏輯。你不需要學一套新的編輯器，這一點是它跟很多獨立頁面編輯器最大的差別。

這裡也要先把它跟 Divi 本身的關係講清楚，免得新手混淆。Divi 是 Elegant Themes 出的佈景主題加頁面編輯器，是底層平台；Divi Supreme 是第三方開發者獨立製作的擴充外掛，跟 Elegant Themes 沒有官方從屬關係，它依附在 Divi 之上運作。所以你在思考要不要裝之前，應該先確定自己已經熟悉 Divi 的基本操作，可以回頭看我們整理的 Divi 主題終極指南 把底子打穩。

為什麼 Divi 用戶會開始找第三方模組擴充

使用 Divi 一段時間後，第三方擴充需求通常集中在三個地方。

第一個痛點是重複性元件的效率。原生 Divi 要做一個漂亮的頁首、一個輪播、一個手風琴摺疊選單，技術上做得到，但每次都得從零調樣式，或者靠版型庫硬套。當你的客戶要的是「我想要跟上次那個站一樣的效果，但換個顏色」，你就會希望有一個更省事的元件可以直接呼叫。

第二個痛點是互動型元件的缺席。Divi 原生在「靜態內容呈現」這一塊很強，文字、圖片、按鈕、欄位排版都到位，可是一碰到「需要一點 JavaScript 互動」的需求，像是圖片熱點、前後對比滑桿、內容時間軸、打字機動畫，就必須自己寫程式或找獨立外掛。對一個以視覺編輯為核心的工具來說，這是一個很實際的功能落差。

第三個痛點是設計細節的打磨。有些元件 Divi 有提供，但可調參數不一定符合需求，例如圖片 hover 效果、按鈕微互動或標題進場動畫。若要了解這類工具的選擇方式，可參考 Divi 外掛推薦。

把 60+ 模組按四個工作場景重新歸類

官方的模組總數不等於每個網站都用得上。評估這類擴充時，可以把模組對應到實際工作場景，再核對目前版本的功能清單。以下分類可作為快速定位工具。

場景一：內容編排與視覺強化

這一類是把靜態內容「變好看、變好讀」的元件，涵蓋了像是進階標題（支援動畫進場、逐字浮現）、內容切換器（Content Toggle，讓訪客在兩種內容之間切換）、前後對比圖片、圖片分隔線（Image Separator，用圖片取代制式的水平線）、進階文字區塊。這些模組解決的是「原生元件太素」的問題，特別適合品牌形象站、設計感要求高的專題頁。如果你做過 Divi 標題設計 的工作，會發現這類擴充模組能補上原生標題模組做不到的動態層次。

場景二：互動與轉換元件

這一類是會動、會回應訪客操作的元件，也是 Divi 原生相對薄弱的地帶。包含圖片熱點（Hotspots，在圖上標出可點擊的圓點帶出說明）、數字計數器（Counter）、打字機文字效果、內容時間軸（Content Timeline）與 Lottie 動畫區塊。Divi Supreme 把相關設定包裝成視覺化面板，但互動效果是否有助於理解或轉換，仍要依頁面目標與實測判斷。

場景三：媒體展示與作品集

Divi 原生有圖片、影片、輪播，但遇到「大量媒體要好看地排列」時，原生工具會顯得吃力。Divi Supreme 補進來的這一類包含瀑布圖庫（Masonry Gallery）、Logo 網格（Logo Grid，整齊排列合作夥伴或客戶的標誌）、影片輪播、捲動觸發的圖庫、翻轉卡片（Flip Box，滑鼠移過去會翻面的卡片）。如果你常做作品集或品牌展示頁，這些元件能省下大量手刻排版的時間，可以搭配我們整理的 Divi 作品集設計 思路一起用。

場景四：結構、導航與資料呈現

這一類是處理「資訊架構」的元件，包含改良式的手風琴與頁籤（Accordion / Tab，比原生版本多了更多樣式選項）、資料表格（Data Table，支援排序與搜尋）、Google 地圖延伸版（功能比原生嵌入更豐富）、按鈕群組。這些模組解決的是「內容很多、要怎麼組織得清楚」的問題。對服務型網站、報價頁、FAQ 頁來說特別實用。

用這四個場景去理解，就不必被模組總數牽著走。只要其中一、兩個場景符合需求，這個外掛才有安裝理由。

從能用到雞肋：判斷一個模組留不留的四個準則

擴充外掛的陷阱之一，是因為選項很多而堆上與頁面目標無關的特效。評估一個模組是否保留時，可用以下四個問題過濾。

這四個準則的順序是有意的。使用頻率排第一，因為一個模組再炫，如果這個專案根本用不到，它對你就是負債而不是資產。替代成本第二，是因為有些模組做的事其實原生 Divi 加幾行 CSS 就能達成，那就不需要多裝一個擴充。效能與維護風險放後面，是因為這兩項通常要在你真的裝下去、跑一輪測試之後才看得出來，但很多人會忽略，結果網站上線後才發現載入變慢、或者某次 Divi 大改版之後整個版面壞掉。

正因如此，建議剛接觸這類擴充的人，不要一裝完就把所有模組都拿來試。先把這篇提到的四個場景裡，跟你當前專案最相關的兩、三個模組拿出來用，實際跑過一輪，再決定要不要繼續挖深。

模組變多網站會變慢嗎？Divi 效能真相與擴充代價

Divi 與第三方擴充的效能表現會受版本、模組組合、主機與頁面內容影響。Divi Supreme 官方網站目前標示自 2026 年 5 月起提供 Divi 5 原生版本；既有網站升級前仍應在測試環境核對相容性。介面與架構變化可參考 Divi 5 全新介面。

那麼，在 Divi 之上再裝一個有六十多個模組的擴充外掛，會不會讓網站更慢？答案不是簡單的會或不會，而是取決於這個外掛「怎麼輸出程式碼」。一個設計良好的擴充，會遵守「按需載入」的原則：你只在某個頁面用了前後對比圖片模組，那這個頁面就只載入前後對比模組的腳本與樣式，其他沒用到的模組不會被一起打包進來。反過來說，一個設計不良的擴充，可能會不管你有沒有用到某個模組，都把全部腳本灌到每一頁的頁首，那就會拖累整站。

效能會直接影響使用體驗。Core Web Vitals 也是 Google 排名系統使用的訊號，但不是單一或決定性的排名因素，分數良好不保證排在前面（見 2020 年 5 月對頁面體驗的評估說明）。較慢的載入也可能影響使用者行為，但影響幅度會因網站與受眾而異（web.dev 的速度研究）。

實務做法是這樣：裝完擴充之後，立刻用速度測試工具跑一次基準值，然後每完成一個重要頁面就再跑一次，比較「有裝」跟「沒裝」的差異。這件事不用花錢，我們整理過的 網站速度測試工具 比較裡有免費的好選擇。如果發現某個擴充把 LCP 或 CLS 拉壞了，就要回頭檢查是不是有沒用到的模組被全域載入。搭配 Core Web Vitals 的優化觀念一起看會更清楚，相關的完整框架可以參考 Core Web Vitals 完全攻略。

這裡還有一個常被略過的配套措施：快取外掛。不管你的擴充輸出多乾淨，一個有大量互動元件的頁面，適當地接上快取與資源最佳化，可以把效能再往上推一截。也因此，建議所有用 Divi 加擴充的站，都要搭配一個可靠的快取方案，相關選擇可以看 WordPress 快取外掛推薦。

免費版與 Pro 版的界線：哪些功能真的值得付費

Divi Supreme 跟很多 WordPress 擴充一樣，走免費加 Pro 的雙軌模式。免費版 Supreme Modules Lite 在 WordPress 外掛庫就能下載，已經包含相當數量的模組，讓你先試水溫；Pro 版則解鎖完整模組清單、更多樣式變體、以及通常會有的優先支援與更新。問題不在 Pro 版貴不貴，而在於「你用不用得到那些被鎖起來的功能」。

可先裝免費版，在測試環境實際使用需要的模組；若免費版已涵蓋需求，就不必急著升級。若必要功能只在 Pro 版提供，再把授權費與後續維護列入專案成本。免費與付費功能可能隨版本變動，購買前應以官方比較頁為準。

這裡有一個實務上的原則：不要因為「以後可能會用到」就先買 Pro。很多外掛的付費功能，買了之後從來沒點開過。先把免費版用到極限，讓需求自己浮現，再決定要不要升級，這樣花的每一塊錢都有明確的回報。同樣的思路也適用於評估任何 Divi 周邊的付費資源，如果你還在摸索階段，可以先從 Divi Marketplace 免費資源 開始累積手感。

如果你想更務實地追蹤自己到底動用了哪些模組，這裡有一個實務上常用的笨方法，但很有效：每開始一個新專案，就開一個簡單的試算表或筆記，欄位只有三個，分別是「頁面」「用了哪個模組」「解決了什麼問題」。每拉一個 Divi Supreme 的模組到頁面上，就補一行。一個專案做完，回頭看這份表，你會得到一份非常誠實的使用紀錄：哪些模組反覆出現、哪些只用了一次就沒再碰。這份紀錄會直接回答你兩個問題，一是要不要續訂 Pro，二是下一個專案能不能更快開工。這個習慣的好處是它完全不依賴外掛本身的功能，不管你今天用的是 Divi Supreme 還是別的擴充，這套追蹤邏輯都適用，等於是你給自己架的一套輕量級工具評估系統。

橫向看：Divi Supreme 跟同類擴充怎麼選

Divi 生態裡，Divi Supreme 不是唯一的模組擴充，市面上還有其他幾款同類型的第三方外掛，各有偏重。這裡不逐一點名對手的優劣，因為這些外掛的功能重疊度高、更新速度快，任何具體的功能比較表格只要過幾個月就可能失準。但可以給你一個跨產品都適用的選擇框架。

第一，看維護活躍度。一個擴充外掛的壽命取決於開發者跟不跟得上 Divi 本身的改版節奏。Divi 5 那種架構級的大改版，會直接淘汰一批沒有人維護的舊擴充，所以你選的對象，最好能看到持續的更新紀錄、對新版本有明確的相容聲明。

第二，看功能重疊造成的浪費。同時安裝多個功能重疊的模組擴充，可能增加維護與載入成本，也會讓編輯器選單更複雜。優先選一個符合主要工作場景的工具，並停用用不到的模組。

第三，看跟主題生態的契合度。Divi Supreme 專為 Divi 設計，模組只會出現在 Divi Builder 裡；若網站未確定長期使用 Divi，先看 WordPress 頁面編輯器比較，再評估是否要綁定這套擴充。

換句話說，選哪一款擴充不是最重要的問題，重要的是你有沒有一套自己的篩選準則。工具會換、版本會改，但「按工作場景歸類、按使用頻率過濾、按效能與維護風險把關」這套方法，是可以帶著走的。

不同類型網站，該優先動用哪些模組：一張實戰對照表

前面把模組拆成四個工作場景，但場景是抽象的，你腦袋裡真正在跑的問題多半更具體：「我現在做的這個形象官網，到底會用到哪幾個模組？」為了讓分類框架真正落地，把幾種最常見的 Divi 網站類型，跟它們最可能派上用場的模組場景對應起來。這張表的用意是幫你在安裝完擴充之後，第一時間知道該從哪個分類先下手，把抽象的場景分類轉成可操作的起點。

這張表背後有一個共同的判斷邏輯：網站的商業目的決定了哪些場景是主力，哪些只是陪襯。一個活動 landing page 的核心是轉換，所以互動元件值得投資；一個內容媒體站的核心是可讀性與速度，所以你反而要克制互動元件的數量，把資源留給字體渲染與圖片最佳化。先想清楚你的站要靠什麼賺錢、要靠什麼留住訪客，再回頭對照這張表挑模組，才不會陷入「功能很多但用錯地方」的窘境。

順帶一提，如果你的網站同時具備兩種以上類型的特徵，例如一個公司形象官網裡埋了一個活動專區，處理的原則是「分區思考、各自最簡」。形象區按形象站的邏輯走，互動元件克制；活動專區按 landing page 的邏輯走，互動元件可以放開手。把一個網站拆成幾個各自有明確目的的區塊，每個區塊只服務一個核心目標，你就不會陷入「整個站都要很炫」的焦慮，也不會把每一頁都塞滿特效。這個分區思維跟你做網站資訊架構時的邏輯是一致的，本質上都是在回答「這一塊內容存在的理由是什麼」。

也建議你在挑完模組之後，做一件很多人省略的事：把每個用到的模組，在網站上的哪一頁、解決了什麼具體問題，寫成一張自己的清單。這張清單的價值會在兩個時刻浮現：一是日後要幫客戶或同事交接時，對方不用重新摸索就能接手；二是當某次 Divi 或擴充升版出問題時，你可以對著清單逐一排查，而不會在一個塞滿特效的網站裡大海撈針。

用瀏覽器開發者工具，親眼確認擴充輸出乾不乾淨

前面一直強調「按需載入」的重要，但說了半天，你怎麼知道你裝的擴充到底有沒有乖乖按需載入？答案其實就在你每天用的瀏覽器裡。你不需要是工程師，也能用開發者工具做一次基本的健康檢查。評估任何新的 Divi 擴充時，實務上一定會走一遍這個流程，它比引用任何人的評測都來得可靠。

具體步驟是這樣的。先用瀏覽器打開你裝了擴充的那個頁面，按 F12 或右鍵選「檢查」叫出開發者工具，切到 Network（網路）那個分頁，重新整理頁面，你會看到一長串這個頁面載入的所有資源清單：JavaScript 檔案、CSS 樣式表、字體、圖片。接著，你做兩個對照檢查。

第一個檢查是看有沒有跟這個頁面無關的腳本被載入。舉個例子，如果這個頁面你只用了前後對比圖片模組，卻在網路清單裡看到 Lottie 動畫、內容時間軸這些沒用到的模組的 JavaScript 也被下載了，那就代表這個擴充沒有做到嚴格的按需載入，它把全部模組的資源都打包進來了。這種情況下，你要嘛接受這個效能代價，要嘛回頭用擴充的設定面板把用不到的模組停用，看看能不能阻止那些多餘的腳本被載入。

第二個檢查是用無痕視窗開一個完全沒裝這個擴充的相同頁面版本（如果你有 staging 站可以做到），對照兩份網路清單的檔案數量與總傳輸量。差距越大，代表這個擴充在這個頁面上加諸的效能負擔越重。差距很小，你就可以比較安心地繼續用它。這個對照法不用任何付費工具，花你十分鐘，卻能讓你拿到一個基於自己網站、自己頁面的第一手答案，勝過參考別人網站上的測試結果。

不同網站的內容、模組組合與主機環境都不同，別人的評測數字只能參考，自己量出的資料才適合用來決策。這套方法同樣適用於其他 WordPress 擴充；若要把單點檢查放進完整流程，可接著讀 網站速度優化指南。

實戰踩坑筆記：五個安裝前要想清楚的事

常見的狀況是，新手站長一股腦把擴充裝上去，結果三個月後網站變得又慢又難維護，回頭不知道是哪個外掛捅的簍子。為了不讓你走同樣的冤枉路，下面把幾個實戰注意事項整理成一份清單。這五點，是你按下「啟用」之前最好先想過的。

1. 先備份再安裝。任何會動到 Divi Builder 行為的外掛，都有可能跟你既有的子主題、既有外掛產生衝突。安裝前用備份外掛或主機端快照存一份乾淨版本，萬一裝下去版面壞掉，你可以一鍵回滾。如果你還沒建立備份習慣，這應該排在所有外掛安裝之前。
2. 在測試環境先跑一輪。不要直接在正式站上啟用。開一個 staging 站或本機環境，把擴充裝上去，把你想用的模組實際拉出來排版，跑一次完整的速度測試跟響應式檢查，確認沒有效能或版型的副作用，再推到正式站。響應式的觀念如果你還不熟，響應式網頁設計 RWD 這篇可以一起看。
3. 關掉用不到的模組。這類大型擴充通常會提供一個設定面板，讓你逐一啟用或停用個別模組。把你確定這個專案不會用到的模組全部關掉，除了讓編輯器選單更清爽，也能減少不必要的資源載入。這是一個零成本、但很多人懶得做的優化動作。
4. 紀錄你裝了什麼、為什麼裝。幫自己維護一份簡單的外掛清單，註明每個外掛的用途與啟用的版本。當未來 Divi 升版出問題時，這份清單會幫你快速定位是哪個擴充跟新版本打架。也建議把這份清單跟網站的 架站成本結構 放一起管理，這樣續約費用的決策也有依據。
5. 預留效能與 SEO 的配套空間。裝完擴充不等於結束。你要預留時間接上快取、跑 Core Web Vitals、確認結構化資料沒有被外掛的多餘標記干擾。Divi 站的 SEO 基礎工程，可以搭配 WordPress SEO 全攻略 一起檢查，確保功能變多的同時，搜尋引擎能見度沒有被犧牲掉。

這五個動作看起來瑣碎，但它們加起來就是「專業架站」跟「裝了就上線」的差別。一個網站會不會在三年後還好維護，往往取決於你一開始有沒有把這些基本功做紮實。根據 W3Techs 的統計（2026 年 6 月），WordPress 目前支撐了全世界將近一半的網站，這個生態之所以龐大，正是因為它的擴充性。但擴充性是一把兩面刃，會用的人把它變成槓桿，不會用的人把它變成債。

誰適合裝 Divi Supreme，誰其實不需要

走到這裡，我們可以把整篇收攏成一個清楚的判斷。Divi Supreme 適合什麼樣的人？答案是已經熟悉 Divi 基本操作、開始接到重複性高的客製需求、而且願意花時間做效能與維護管理的人。具體來講，下面幾種情境裝下去的投報率最高。

• 接案的網頁設計工作者，常常需要在不同專案之間重複使用同一批互動元件（輪播、時間軸、熱點、計數器），擴充模組能大幅縮短每個專案的產出時間。
• 做品牌形象站或活動 landing page 的人，設計感要求高、互動元件需求多，原生 Divi 的元件清單不夠用。
• 單一網站的站長，長期在同一個站上累積內容，需要一些原生沒有的呈現方式，例如用瀑布圖庫整理大量照片或用內容切換器呈現兩組內容。

反過來說，這幾種情境，你可能不需要急著裝。

• 剛開始用 Divi 的新手，連原生模組都還沒摸熟。這個階段你的問題不是工具不夠，是熟練度不夠，裝一堆擴充只會增加學習負擔。先把 Divi 架站全攻略 走完一遍，把底子打穩。
• 只做一個簡單形象官網、需求很單純的人。如果你的網站就是幾頁靜態內容加一個聯絡表單，原生 Divi 加上幾個必要的 表單外掛 就夠了，不需要為了「可能會用到」的功能多養一個擴充。
• 對效能預算很嚴格的網站。每一個額外擴充都要以真實頁面測試；若只有一兩個簡單需求，自訂樣式或較精簡的實作可能更合適。

擴充外掛是拿來解決問題的。Divi Supreme 是否值得安裝，取決於它能否處理明確需求，以及網站是否能承擔相容性、效能與續約成本。外掛與模組數量不是網站專業度的指標；每個元件有明確用途、能持續維護，才是較可靠的判準。

如果你正在盤點自己的網站到底需要哪些功能、哪些外掛，現在就做一件事：把你目前網站上所有頁面打開，逐一列出每一頁用了哪些元件、哪些效果是原生做不到的。這份清單會直接告訴你，你是不是真的需要一個像 Divi Supreme 這樣的大型模組擴充，還是其實只要補兩、三個單一功能的小外掛就解決了。把需求搞清楚，花的每一分錢、每一分效能預算，才會真正花在刀口上。