Divi 主題終極指南：從購買安裝到進階技巧的完整教學

Divi 是 Elegant Themes 開發的 WordPress 佈景主題，同時內建 Divi Builder 視覺化頁面編輯器，再搭配 Extra、Bloom、Monarch 等週邊軟體，等於一個方案買到從版面設計到名單收集、社群分享的完整工具鏈；只要掌握 Section／Row／Module 三層佈局邏輯，新手也能在不寫程式的前提下架出形象官網、部落格與購物車。官方方案可套用在無限數量的網站，年繳約 89 美元起、終身為一次性買斷費用，實際金額以 Elegant Themes 官網公告為準 [來源：〈Elegant Themes Pricing〉〈https://www.elegantthemes.com/pricing/〉〈2026〉]。

重點先看：Divi 不只是佈景主題，而是主題＋Builder＋電子報(Bloom)＋社群(Monarch)的套裝，一個方案可用於無限網站；年繳約 89 美元、終身為一次性買斷 [來源：〈Elegant Themes Pricing〉〈https://www.elegantthemes.com/pricing/〉〈2026〉]。但要記住，不續約後版面保留、卻失去更新權與優先客服。

Divi 的產品定位：主題、Builder 與周邊工具的套裝

Divi 是一個會顛覆你對「佈景主題」想像的產品。它不是單純一個版型，而是 Elegant Themes 把 Divi Theme 佈景主題、Divi Builder 頁面編輯器，加上 Extra 雜誌主題、Bloom 電子報工具、Monarch 社群分享外掛全部打包成一個套裝 [來源：〈Elegant Themes 產品清單〉〈https://www.elegantthemes.com/〉〈2026〉]。換句話說，你買的不是一張皮，而是一整套網站架設與行銷工具，而且同一組授權可以套用在無限數量的網站上。

這件事的意義在於成本結構。一般接案設計師如果每接一個客戶就要重買一套主題、一套頁面編輯器、一套電子報外掛、一套社群分享外掛，費用會疊到很驚人。Divi 把這些全裝進同一個方案，這也是為什麼它特別適合長期多站經營的人。如果你還在比較 Astra Pro 主題完整教學 或 WordPress 佈景主題推薦比較，這種「買一個方案就涵蓋全套工具」的定位會是決策的分水嶺。

它能架設的網站類型很廣：品牌形象官網、個人部落格、WooCommerce 電商架站 購物網站、一頁式行銷頁都能做，實際應用可參考 DIVI 主題架品牌形象網站實戰 這類案例。

而 Divi 之所以能成為 WordPress 生態中最主流的佈景主題之一，與 WordPress 本身的普及程度直接相關：根據 W3Techs 的調查，WordPress 被全網 41.5% 的網站採用，在已知內容管理系統的網站中更佔 59.2%，這意味著 Divi 所依托的是一個涵蓋逾四成網站的龐大平台 [來源：W3Techs〈Usage Statistics and Market Share of WordPress〉 https://w3techs.com/technologies/details/cm-wordpress 2026-06-29]。

• 接案設計師：一組授權維護多個客戶網站，免每案重買主題與外掛。
• 想一站搞定形象官網與電子報的創業者：Bloom、Monarch 已內含，不必分開採購行銷工具。

Divi 的設計哲學是把所有可能用到的工具先準備好，免得你邊做邊找外掛。好處是一站到位，代價是學習曲線比單一頁面編輯器陡，但熟悉一個週末後，維護效率會遠高於東拼西湊的組合。

Divi 方案費用：年繳、終身授權與不續約的代價

Divi 採年繳與一次性終身授權雙軌計價，兩種都能套用在無限數量的網站。年繳約 89 美元、終身為一次性買斷費用，實際金額以 Elegant Themes 官網當下公告為準 [來源：〈Elegant Themes Pricing〉〈https://www.elegantthemes.com/pricing/〉〈2026〉]。多站經營者建議直接買斷終身方案，回本通常比每年續費快。

這裡有個容易被略過的代價：終身方案或年繳方案只要停止付費（年繳不續約、或終身方案不再付更新費），你的舊網站版面會完整保留、功能也繼續可用，但你會失去後續版本更新權與官方優先客服（依 Elegant Themes 的方案條款，授權在有效期間內享有更新與支援）。對只經營一個網站的站長影響不大，但對接案設計師維護幾十個客戶網站的人，少了更新權代表未來 WordPress 大改版時可能出現相容性問題，這才是真正的隱形成本。

方案類型	計費方式	可用網站數	更新與客服	適合誰
年繳方案	每年續費，約 89 美元/年（以官網為準）	無限	續約期間享更新與優先客服	只經營一兩個網站、想先試水溫
終身方案	一次性買斷費用（以官網為準）	無限	含終身軟體更新與優先客服	長期多站經營、接案設計師
不續約/停止更新	無後續費用	保留	失去更新權與官方支援	預算考量、網站進入維護期

我自己會這樣判斷：如果你手上有超過三個會長期維護的網站，終身方案幾乎是必然划算的選擇，因為它相對於外包網頁設計成本極低 [來源：〈Elegant Themes Pricing〉〈https://www.elegantthemes.com/pricing/〉〈2026〉]。反過來說，如果只是想架一個部落格試水，年繳方案就好，別為了「終身」兩個字多掏錢。關於整體 WordPress 架站費用拆解，可以對照 WordPress 自架網站費用拆解。

從下單到網站上線的購買、安裝與啟用流程

Divi 的啟用分三步：在 Elegant Themes 會員區下載 Divi Theme 壓縮檔、到 WordPress 後台上傳並啟用佈景主題，再到 Divi > Theme Options > Updates 填入 Username 與 API Key 完成綁定。Divi Theme 已內建 Builder 外掛，不需要額外安裝編輯器（依 Elegant Themes 官方安裝文件說明）。

這裡有一個新手最容易卡關的地方：很多人以為買完就直接能用，其實憑證激活這一步沒做，Builder 套模板時會一直跳窗要 API Key。流程是先到官網會員區的 Account > Username & API Key，把使用者帳號和 API Keys 兩組資訊複製起來，再貼到 Theme Options > Updates 儲存，這才算真正跟官方系統綁定完成。

1. 下載主題：登入會員後從 My Downloads 取得 Divi Theme（已內含 Builder Plugin）。
2. 上傳安裝：WordPress 後台 > 外觀 > 佈景主題 > 上傳 zip > 啟用（也可參考 WordPress 佈景主題安裝教學）。
3. 取得憑證：到 Account > Username & API Key 複製使用者帳號與 API Key 兩組資訊。
4. 綁定激活：把兩組資訊貼到 Divi > Theme Options > Updates 並儲存。
5. 多站管理：每個網站對應一組 API Key，停用網站可在會員區註銷憑證釋出名額。

主機搭配也是能不能順利跑起 Divi 的關鍵。Builder 載入時對 PHP、MySQL 版本與主機資源有一定需求，選一個資源充足、支援新版 PHP 的主機，才不會編輯時卡頓；PHP 版本過舊或資源不足，會直接反映在 Builder 的載入速度上。如果還沒決定主機，可以對照 WordPress 主機深度評測比較 來挑，新手想看完整架站流程，新手 WordPress 架站五步驟 也很實用。

Divi Builder 核心邏輯：Section、Row、Module 三層佈局

Divi Builder 的版面由大到小分三層：Section 包 Row、Row 包 Module，想新增自訂內容就依序建 Section 到 Row 到 Module。點左下角的結構化編輯模式可一眼看清整頁層級，再回到視覺化編輯做細部調整（依 Elegant Themes 官方 Builder 文件說明）。

這個三層結構是 Divi 的地基，學不會它，後面的 Global 全域區塊、Theme Builder 條件式版面全都會卡。你可以把它想成蓋房子：Section 是樓層、Row 是房間隔間、Module 是房間裡的家具。一個 Section 能含多個 Row，一個 Row 又能含多個 Module，層層包覆下去就能組出任意複雜的版面。

層級	角色	類型/分頁	用途
Section（區塊）	版面骨架	Regular 常規 / Specialty 特殊 / Fullwidth 全寬	決定整體版面骨架
Row	欄位容器	多種欄數組合（1欄到多欄）	決定內容欄位排列
Module（模組）	實際內容	Content / Design / Advanced 三分頁	放文字、圖片、按鈕等具體元素

Module 的設定面板分三個分頁，這個設計很值得記住：Content 管內容本身、Design 管樣式（顏色、字型、間距）、Advanced 管進階（自訂 CSS、裝置顯示、視差滾動）。新手常犯的錯是只盯著 Content 改文字，找不到樣式選項就放棄，其實大部分的視覺調整都藏在 Design 分頁。進階視覺效果多半也是靠 Advanced 分頁做出來的，例如 Divi 視差滾動立體效果。

視覺化編輯跟結構化編輯要互相切換用。前者所見即所得、適合微調；後者把整頁攤開來看層級、適合檢查結構。Divi 還內建步驟還原與 Ctrl/Command＋Z 快捷鍵，所以放心實驗不怕改壞。進階的視覺細節可延伸到 Divi 自訂字體上傳教學、Divi 作品集展示樣式設計 這類設計主題。

Row 欄數結構與手機優先的排版邏輯

掌握 Section、Row、Module 三層之後，決定版面好看與否的關鍵其實落在 Row 的欄數結構上。Divi 的 Row 內建多種欄位組合，從單欄、二等分、三等分，到 1/3 加 2/3、1/4 加 3/4、四欄、五欄、六欄都有，每一種都對應不同的內容密度。單欄適合長文與全寬圖片，二等分與三等分適合服務項目或產品列表，1/3 加 2/3 適合側欄加主內容，四到六欄則常見於頁腳的連結群組或商品縮圖牆。

選欄數時要從內容反推，先想清楚要放什麼，再挑欄位組合，避免硬塞。一頁式服務介紹常用三等分放三項核心服務，部落格文章常用單欄維持閱讀流暢，購物網站分類頁常用四欄讓商品縮圖密集排列。若把三項服務硬塞進四欄 Row，會出現一個空欄位，破壞視覺平衡；若把長文章塞進三欄 Row，每欄過窄、閱讀體驗會崩壞。還有一個容易被低估的細節：欄數一旦決定，後續要在同一個 Row 裡增減內容都會受欄位切割牽制，所以欄數其實是「內容架構」層級的選擇，先列出要放的內容、想清楚每一欄各自承擔什麼角色，再依數量與權重定欄數，這個順序能避免大量返工。

Row 設定面板的 Design 分頁還有兩個常被略過的功能：自訂間距與等高欄位。Use Custom Gutter Width 可以單獨調整某一個 Row 的欄位間距，讓重點 Row 比其他 Row 更緊湊或更寬鬆，做出視覺層次。Equalize Column Heights 則讓同一個 Row 內所有欄位等高，這在放服務卡片或定價方案時很重要，否則卡片高度參差、排版會顯得雜亂。這兩個選項搭配起來，就能把方正的預設版面拉出節奏感。另外兩種結構型態也值得記一下：Specialty Row 的左側欄可跨多個右側 Row，適合固定側欄加可變主內容的版型；Fullwidth Section 內的 Module 會佔滿瀏覽器寬度，適合大圖 Hero、影片背景、全寬 CTA。

行動裝置的版面調整要從欄數堆疊看起。Divi 在手機上預設會把多欄 Row 垂直堆疊成單欄，這個行為對多數版面是正確的，但碰到圖文並列的 Row 時會出現順序問題：桌面版左圖右文，手機堆疊後可能變成圖在上、文在下，也可能文在上、圖在下，取決於欄位排列順序。這點在設計 CTA 與表單時特別敏感，因為使用者滑到手機版時最先看到的內容，往往決定他是否繼續往下讀。

解法是善用 Row 設定面板的手機分頁，以及內容模組的裝置顯示控制。進入 Row 的 Design 分頁後，可以針對手機、平板、桌面分別設定欄位排列方向，必要時讓手機版的欄位順序反轉。另一個更直接的做法是為手機版單獨建一個 Row：桌面版用 A Row，手機版用 B Row，再到 Advanced > Visibility 設定 A 只在桌面顯示、B 只在手機顯示。這個做法會增加一點維護工作，但換來的是手機版完全可控的排版，對轉換率敏感的著陸頁值得這樣做。

手機版之所以要花這麼多心力，與行動裝置在整體網路流量的占比直接相關：根據 Statista 的調查，2026 年第一季，全球網站流量有 52.27% 來自行動裝置（不含平板），這代表超過一半的訪客是用小螢幕瀏覽你的 Divi 網站，手機版排版的任何瑕疵都會直接影響多數訪客的第一印象 [來源：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]。延伸的手機版調整細節，可對照 Divi 手機版排序 CSS 調整。

用 Divi Library 複用模板與重複區塊

套模板是在新頁面點 Use Divi Builder 後從分類挑選版型，點 Use This Layout 即可匯入；要重複使用自己設計的區塊，則把 Section/Row/Module 存進 Divi Library，之後用 Add From Library 呼叫。若勾選 Save as Global，則會全站共用同一組，A 頁修改 B/C 頁同步更新（依 Elegant Themes 官方 Library 文件說明）。

這裡藏著一個觀念分水嶺，很多教學沒講清楚：一般儲存區塊跟 Global 全域區塊是兩回事。一般儲存是「複製一份範本出來用」，每個頁面各自獨立、改了不影響別頁；Global 則是「同一份區塊、多處共用」，改一處全部同步。頁首、頁尾、CTA 按鈕、聯絡資訊這類全站共用的東西，一定要存成 Global，否則改一個電話號碼就要手動改幾十個頁面，這正是長期維護 Divi 網站最大的痛點。

比較項目	一般儲存區塊	Global 全域區塊
跨頁面同步	各自獨立、互不影響	改一處、全部同步更新
適用場景	一次性使用的特殊版面	頁首、頁尾、CTA、聯絡資訊等共用元素
維護成本	改動需逐頁處理	改一次、全站套用

套模板的完整流程是：新增頁面、點 Use Divi Builder、依分類挑版型、點 Use This Layout、輸入 API Key、儲存發布。Divi 的版型庫分類很細，商業風、科技風、服務類、電商都有，想找高質感版型可以參考 Divi 高質感版型庫套用，需要多站同步版型則看 Divi Cloud 雲端版型多站同步。

管理這些儲存區塊的地方是 Divi > Divi Library，可以在這新增分類、檢視每個區塊的類型與是否為 Global。判斷一個 Divi 網站維護起來輕鬆還是痛苦，往往就看這個功能用得好不好：重複性高的 CTA、聯絡資訊、服務列表，優先存成 Global，維護成本才壓得下來。

批次編輯、樣式複製與裝置顯示控制

Divi Builder 有幾個能大幅加速設計的進階技巧：按住 Shift 可多選模組一次批次改樣式；Copy/Paste Module Styles 能把單一模組的設計複製到其他同類模組；Advanced > Visibility 可指定區塊只在桌面、平板或手機顯示（依 Elegant Themes 官方 Builder 文件說明）。這些功能用熟了，設計效率至少翻倍。

批次編輯是新手最該優先學的。網頁設計常常出現重複的圖示或文字區塊，如果每個都逐一改顏色、字型，時間會被吃光。按住 Shift 一次選取多個模組，就能統一調整樣式，這在改全站主色時特別有感。樣式複製貼上（Copy Module Styles / Paste Module Styles）則適合把一個設計好的模組樣式套到其他同類模組上，Section、Row、Module 都適用。另外兩個能破除方正版面單調的小工具也值得記一下：Dividers 分割線提供水波、斜角等形狀，點左下角的裝置 Icon 則能為不同螢幕分別微調版面。

裝置顯示控制在實務上超好用。假設客戶說「這個區塊在手機上會擠成一團，不想顯示」，你不用刪掉它，只要點 Advanced > Visibility、勾選 Phone 隱藏即可，桌面版依然完整呈現。如果想做出更有層次的版面，擴充外掛能補足原生功能的不足，完整清單可參考 必裝的 Divi 擴充外掛清單。

Theme Options、Theme Builder、Theme Customizer 差在哪

這三個設定介面分工明確：Theme Options 管全站通用設定（Logo、社群、SEO、更新）；Theme Builder 用來依條件打造客製頁首頁尾與版面，可指定某分類文章套不同版型；Theme Customizer 則是與 WordPress 內建整合的樣式微調工具，調頁首、選單、手機版等視覺細節（依 Elegant Themes 官方文件說明）。

這三者的優先順序我建議這樣排：先用 Theme Options 把全站基礎設定定下來（Logo、社群連結、SEO 基本項），再用 Theme Customizer 調視覺樣式，最後才用 Theme Builder 做條件式客製。把順序搞反，會陷入「改了半天看不出效果」的困境，因為 Builder 的條件式版面會蓋過 Customizer 的調整。

介面	負責什麼	典型用途
Theme Options	全站通用設定	Logo、社群連結、SEO 三分頁、軟體更新綁定
Theme Builder	條件式客製版面	不同分類文章套不同頁首頁尾
Theme Customizer	視覺樣式微調	頁首樣式、選單、手機版即時預覽

Theme Options 裡內建了 Homepage SEO、Single Post Page SEO、Index Page SEO 三個分頁，還有 Enable canonical URLs 功能，能告訴搜尋引擎把不同網址（domain.com、www.domain.com）當成同一個頁面，避免重複內容拖累 SEO 權重（依 Elegant Themes 官方 Theme Options 文件說明）。想深入了解 canonical，可以對照 Canonical URL 解決重複內容；要把 Divi 網站接上搜尋引擎觀測數據，先完成 Google Search Console 安裝，就能看到索引狀態、點擊與曝光等第一手資料。

Theme Builder 是整套工具裡最強大、也最容易被略過的功能。它用 Global Header、Global Body、Global Footer 做全站版面，再用條件（分類、標籤、作者、單文）指定不同頁面套不同模板。舉例來說，你可以讓「文章內容」分類下的所有文章都用同一組自訂頁首，而其他分類用預設頁首。Theme Builder 還能匯出模板設計，搬到新網站重複使用，延伸應用可從 用 Divi 主題從零架公司官網 看起。

權限分級則交給 Role Editor。WordPress 預設有 Administrator、Editor、Author、Contributor 幾個角色，多人協作網站可以用 Role Editor 關閉特定角色的某些功能，避免誤改版面。這部分觀念跟 WordPress 使用者權限管理指南 是相通的，後台操作基礎可搭配 WordPress 後台操作基礎教學。

Divi 生態圈：Extra、Bloom、Monarch 與 Marketplace

買了 Divi 之後，你拿到的其實是一整個生態圈。Extra 是 Divi 的延伸主題，專為部落格、媒體、作品集設計，內建 Category Builder 分類頁編輯器；Bloom 是電子報名單收集工具，提供彈窗、飛入、內文嵌入等多種表單形式；Monarch 是社群分享與追蹤按鈕外掛；三者都包含在 Elegant Themes 方案中 [來源：〈Elegant Themes 產品清單〉〈https://www.elegantthemes.com/〉〈2026〉]。

Extra 的價值在於它補上了 WordPress 預設分類頁面太單調的問題。Category Builder 讓分類頁不再只是文章列表，而能做出雜誌式的多欄版面，支援 WooCommerce，適合做內容密度高的站點。Bloom 則是 Email 名單收集的媒介，串接各家電子報外掛，提供 Popup、FlyOut、Below Post、Inline、Locked Content、Widget 等顯示方式，想深入可看 Bloom 電子報訂閱表單設定教學。

產品	定位	核心功能
Extra	部落格/雜誌/作品集主題	Category Builder 分類頁編輯器，支援 WooCommerce
Bloom	Email 名單收集	Popup/FlyOut/Below Post/Inline/Locked/Widget 多種表單
Monarch	社群分享按鈕	側邊、文章內、彈窗、小工具、短代碼多種嵌入
Divi Marketplace	第三方市集	子主題、外掛、版型，補足原生功能缺口

Monarch 負責社群分享與追蹤按鈕，可以放在網站側邊、文章內、彈窗、小工具或用短代碼嵌入，Monarch 社群分享按鈕設定 有完整教學。Divi Marketplace 則像 App Store，賣第三方開發的子主題、外掛、版型，想找資源可看 Divi Marketplace 免費資源整理。換句話說，已有 Divi 方案的站長把電子報交給 Bloom、社群分享交給 Monarch，就不必再另購這兩類工具。

用 Divi 架 WooCommerce 購物網站的眉角

Divi Theme 與 Extra 都標榜與 WooCommerce 相容，這意味著你可以用 Builder 拖放設計商品頁、購物車、結帳頁的版面，把預設陽春的 WooCommerce 模板改成符合品牌形象的樣式。WooCommerce 本身在 WordPress 生態的市占相當高：根據 W3Techs 的調查，WooCommerce 被全網 8.2% 的網站採用，在已知內容管理系統的網站中佔 11.7%，而在所有電商系統裡更佔 48.6%，等於接近半數的電商網站跑在 WooCommerce 上 [來源：W3Techs〈Usage Statistics and Market Share of WooCommerce〉 https://w3techs.com/technologies/details/cm-woocommerce 2026-06-29]。把 Divi 套在這個主流電商引擎之上，等於同時掌握設計彈性與生態成熟度。

實作上有幾個眉角要先記住。第一，WooCommerce 的商品頁與分類頁是由外掛本身產生的，Divi 的 Builder 並不能直接改寫這些動態頁面的每一處，要完整客製得靠 Theme Builder 搭配 WooCommerce 模組，把商品圖、標題、價格、加入購物車按鈕當成一個個 Module 拖進自訂版面。第二，結帳頁與購物車頁的欄位由 WooCommerce 控制，過度客製容易跟金流外掛打架，建議只調整外觀樣式，不要動欄位結構。第三，商品圖的尺寸要統一，否則縮圖牆會高低不一，這在用多欄 Row 排商品時最明顯。另外，分類頁可用 Extra 的 Category Builder 做雜誌式多欄版面，補 WooCommerce 預設列表的單調；而實際相容程度仍以官方與外掛更新狀況為準，大改版前後要預留測試時間。

購物網站對載入速度比形象官網更敏感，因為商品圖密集、又常外掛金流與物流模組，資源吃重。把圖片壓到適當解析度、啟用快取外掛、合併 CSS 與 JavaScript，是 Divi 購物站的基本功。想看完整的購物站架設流程，可以對照 WooCommerce 購物網站架設流程，想找專為 WooCommerce 設計的主題則看 Flatsome 購物網站主題教學。

以一個商品數約數百到一千出頭的中型 Divi 購物站為例，常見的狀況是商品圖未統一壓縮、再加上 Builder 本身的資源載入，首頁 Largest Contentful Paint 落在約 4 到 6 秒是相當典型的幅度，商品分類頁因為縮圖密集，INP 偏高的問題也常出現在這類站。這時的決策順序通常是：先把圖片壓到約 100 至 200KB、設定懶載入，再啟用頁面快取與物件快取，最後才考慮合併或延遲載入 JavaScript，重寫整個版面應留到前三項都做完仍不夠時才動。把這個順序想成「成本由低到高」最直覺：圖片壓縮與懶載入幾乎零成本，快取外掛是月費等級，主機升級與 CDN 才是會反映在年度預算的開銷，越往後的選項報酬遞減得越明顯。一個務實的失敗提醒是，快取與 JavaScript 合併外掛與部分金流結帳外掛會互衝，貿然全站套用可能讓結帳按鈕短暫失效，建議先把結帳頁排除在快取規則外、並在低流量時段驗證，再正式上線；另一個常被遺漏的點是縮圖尺寸的後設維度，若商品圖上傳時就給到 2000px 以上，再生出的縮圖檔案會比必要的大上不少，這時即使前端啟用了懶載入，分類頁一次載入幾十張仍會把 INP 拉高，源頭控管上傳尺寸往往比事後壓縮更省事。依這類站的典型表現，把上述基本功做完，LCP 通常能往約 2.5 到 3.5 秒收斂，但要再往下壓到 Good 標準，往往得動到主機升級或導入 CDN，這一步的投資報酬要依實際轉換數據評估，不是每個站都值得。

延續同一類站的經驗，驗收時該看的指標也有輕重之分。首頁與商品詳情頁是轉換路徑的起點，LCP 與 CLS 要優先顧好；分類頁因為互動密集，INP 才是主要戰場，常常出現「首頁分數漂亮、分類頁卻卡」的反差。實務上會把這幾類頁面分開量測、分開設改善目標，避免用一個全站平均分數概括。另外，快取外掛的命中率也要定期回頭看，命中率一旦下滑，多半是某次新增外掛或調整規則造成，這時前面辛苦壓下來的秒數會悄悄回升。把量測頻率抓在每次改版後的隔日、以及大促銷檔期前一週，這兩個時間點最能反映真實使用者的感受。

Divi 常見疑難排解與錯誤排除

實際維護 Divi 網站一段時間，遲早會碰到幾個反覆出現的疑難。把這些問題的成因與排除步驟先記下來，能省下大量摸索時間。下面整理的是發生頻率最高、也最容易自己動手修的幾類。

Builder 載入後白屏或轉圈不停。九成是記憶體不足或外掛衝突。第一步到 WordPress 後台的 php.ini 或主機控制面板，把 PHP memory limit 調到至少 256MB，再確認 PHP 版本是官方建議的版本以上。若仍卡住，停用所有非 Divi 的外掛逐一開啟，找出衝突元兇，常見是快取或安全外掛攔截了 Builder 的 JavaScript。

頁面改了卻看不到更新。通常是快取作祟。Divi 自己有靜態資源快取，到 Divi > Theme Options > Builder > Static CSS File Generation 選 Clear，再清除主機層與 CDN 的快取，最後在瀏覽器強制重新載入。若裝了快取外掛，記得把 Builder 的編輯頁與預覽頁排除在快取之外，否則每次儲存都要手動清快取。

Global 全域區塊改了卻沒同步。確認你改的是 Global 區塊本體，而不是某個頁面裡那份「脫鉤」的副本。Global 區塊一旦在某頁被取消全域（Disable Global），它就變成獨立副本，之後改主版本不會影響它。在 Divi Library 可以檢視哪些區塊仍是 Global，對照清單找出脫鉤的頁面重新套用。

手機版字級或間距跑掉。Divi 的 Design 分頁對每個樣式都有桌面、平板、手機三組獨立設定，若只調了桌面組，手機會沿用預設值。點開任一樣式欄位旁的裝置圖示，切到手機分頁單獨設定字級與間距，問題就會消失。另外，行動裝置上的視差滾動與某些 Hover 效果會失效或造成卡頓，手機版建議關閉這類桌面專屬效果。

套用版型後版面與預覽不符。多半是匯入時的內容佔位被替換掉，或匯入了舊版版型而 Builder 已更新。先把頁面切回結構化編輯模式，逐個 Section 對照官方預覽，找出缺圖或缺文字的 Module 補回；若整頁偏差過大，刪掉重套通常比逐處修更快。匯入前先確認版型與目前 Builder 版本相容，能省下事後對照的時間。

Divi vs Elementor：哪個頁面編輯器更適合你

Divi 跟 Elementor 的根本差異在於定位：Divi 是含主題、編輯器、電子報、社群工具的完整套裝，功能廣度勝出；Elementor 偏向單一頁面編輯器，操作較輕快靈活，但仍需搭配一個正式主題才完整（依 Elegant Themes 與 Elementor 官方產品定位）。要一次買齊全套、長期多站經營選 Divi；重視編輯流暢度、已有慣用主題者可選 Elementor。

這個比較的重點其實落在「你的需求長什麼樣」，先把需求想清楚，挑選就會變簡單。如果你手上有好幾個網站要長期維護、想把電子報跟社群分享一次搞定，Divi 把多種工具綁在同一個授權的特性會讓總成本壓得很低。如果你只做一個網站、已經有喜歡的主題、而且很在意編輯時的順手感，Elementor 的輕快會讓你比較開心。想知道 Elementor 陣營的完整功能，看 Elementor 頁面編輯器教學；想看更廣的頁面編輯器評測，WordPress 頁面編輯器深度評測 可以對照參考。

比較維度	Divi	Elementor
產品定位	主題＋編輯器＋電子報＋社群合併販售	單一頁面編輯器，需另配主題
功能廣度	廣，單一方案涵蓋多項工具	聚焦頁面編輯
編輯流暢度	功能多、略重	較輕快靈活
多站成本	終身授權可用於無限網站	依方案網站數計價
適合誰	多站經營、要電子報與社群一併搞定	單站、重視流暢度、已有慣用主題

一個常見誤解是兩者只能選一個，其實它們可以共存於不同網站。很多設計師會依客戶需求選工具：要全套解決方案的用 Divi，要輕快編輯體驗的用 Elementor。如果你做的是電商，WooCommerce 購物網站架設流程 與 電商平台開店比較指南 能幫你做更完整的決策。

回到效能面。Divi Builder 功能多，但載入資源也相對重，搭配 網站速度優化核心技巧、圖片壓縮工具實測推薦 才能把網站速度撐起來。如果想了解 Divi 5 帶來的效能與介面升級，Divi 5 新介面與效能升級重點 有完整整理；必裝外掛清單則可搭配 WordPress 必裝外掛推薦清單 一起看。

效能優化不只是技術問題，更直接影響轉換與營收，這點有第三方數據佐證：根據 web.dev 的案例，Vodafone 把 Largest Contentful Paint 改善 31% 後，銷售額提升了 8%；而 Rakuten 24 投入 Core Web Vitals 優化後，每位訪客營收提升 53.37%、轉換率提升 33.13%。對資源載入相對重的 Divi 網站來說，這些數字正好說明把速度撐起來的商業價值 [來源：web.dev〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]。

給一個收尾的判斷：如果你是創業者、接案設計師或行銷人，想在不寫程式的前提下長期維護多個網站，Divi 把多項工具合進同一個方案的設計會讓你省下大量整合成本；但要真正發揮它的威力，關鍵不在套模板，而在 Theme Builder 的條件式版面跟 Divi Library 的 Global 全域區塊，這兩個功能用對，改一個頁首就能同步更新全站幾十個頁面。網站上線後想用數據排 SEO 工作順序，SEO 陪跑班：全面支援 Ahrefs 搭配學習 是一條從關鍵字調查到連結分析的實作路徑。

常見問題

Divi 跟 Elementor 該選哪個？
要一次買齊主題、編輯器、電子報與社群工具、且長期多站經營，選 Divi；只做一個網站、已有慣用主題、且重視編輯流暢度，Elementor 的單一編輯器定位會更順手。兩者也能共存於不同網站，並非互斥。

買了 Divi 之後 Bloom 跟 Monarch 還要另外付費嗎？
不用。Bloom（電子報名單）與 Monarch（社群分享按鈕）都包含在 Elegant Themes 的方案中，不需要另購，這正是 Divi「套裝」定位與單一編輯器最大的成本差異。

Global 全域區塊不小心被取消全域會怎樣？
那一處會就地變成一份獨立內容，往後主版本調整時它不再跟著更新，這也是長期維護多站時最常默默出問題的環節。排查時到 Library 比對哪些區塊仍是同步狀態、哪些已就地分家，再把分家的頁面重新接回即可。

Divi 購物站的商品頁為什麼不能直接用 Builder 改？
因為這些頁面是由外掛即時組裝出來的，Builder 能動的是外觀樣板，不是欄位本身。實務上會在 Theme Builder 開一組 WooCommerce 專用版面，把商品元素當模組排進去，再依分類或單品條件套用，這樣才不會每次儲存都被外掛覆寫。