Gutenberg 區塊編輯器外掛推薦：5 款必裝工具，讓 WordPress 頁面設計更強大

Gutenberg 是 WordPress 自 5.0 版起內建的區塊編輯器，原生只提供段落、標題、圖片、按鈕等基本區塊，要做出有設計感的首頁、定價表或輪播，幾乎都得靠外加的區塊外…

Gutenberg 是 WordPress 自 5.0 版起內建的區塊編輯器，原生只提供段落、標題、圖片、按鈕等基本區塊，要做出有設計感的首頁、定價表或輪播，幾乎都得靠外加的區塊外掛補齊。在 Spectra、Kadence Blocks、Ultimate Blocks、Stackable、Otter Blocks 這五款主流選擇裡，沒有一款是「全部都要」，依網站類型挑一到兩款才是正解，過度堆疊反而拖慢網站、製造衝突。

重點先看：五款區塊外掛定位不同，形象網站選 Spectra、內容行銷選 Ultimate Blocks、電商選 Otter Blocks；每多裝一款外掛，前端就多載入一份 CSS 與 JavaScript，頁面載入時間會明顯上升，只裝一到兩款、定期清理用不到的區塊，才是兼顧質感與速度的做法。

原生區塊編輯器能做內容，卻做不出版面

把所有內容拆成一塊一塊的區塊、段落、標題、圖片、按鈕都可以獨立拖拉與設定，這套編輯器確實降低了排版的門檻，不用碰任何程式碼也能排出基本的頁面結構，對剛接觸 WordPress 新手架站的人尤其友善。

問題在於原生區塊的數量有限。它給你工具做「內容」，卻沒給你工具做「版面」。欄位排版、進階間距控制、動態效果、預設模板、定價表、證言輪播這些，原生區塊編輯器通通沒有，你得在 WordPress 頁面編輯過程中手動拉一堆欄位容器才能勉強湊出來，最後還常常跑版。

把這個落差拆開來看會更具體。原生編輯器缺少幾樣做版面時會反覆用到的能力，而這些能力正是區塊外掛補位的地方。最關鍵的是整頁模板與設計匯入：原生編輯器沒有內建的可編輯模板庫，你無法把一個完整的服務介紹頁或定價頁一鍵匯入再改字，對不會設計、也不知道版面該長怎樣的人，等於每次都要從空白頁開始想結構，這正是新手最常卡關的地方。區塊外掛把設計師做好的整頁拆成可編輯區塊，匯入後你只需要換文字與圖片。

與模板同樣關鍵的是全域樣式與進階間距、斷點控制。同一個按鈕色若想在十個頁面統一改，原生只能逐一點開修改，沒有一處控管所有頁面的入口；原生區塊能在桌機調 padding，但對手機、平板的獨立斷點設定很有限，響應式細節難以收乾淨。再加上原生欄位容器能做兩到三欄，但要排出「圖文交錯、卡片網格、不對稱版面」這類常見首頁結構，幾乎都得手動堆疊多層容器，既費時又容易在小螢幕崩掉。所以真正決定製作效率的關鍵在模板庫與全域樣式設定，「給我更多按鈕」反倒是次要的：一個好的區塊外掛能讓你把製作一個落地頁的時間從數小時壓到數十分鐘，整頁設計直接匯入、改字改圖就上線。做過 Landing Page 製作的人對這個差距感受最深。

這也是區塊外掛和 Elementor、Divi 這類獨立頁面編輯器最根本的差別。區塊外掛是在原生編輯器上「擴充」，輸出的內容貼近 WordPress 原生區塊結構，資料可攜性高、換外掛時內容不容易毀損，對 SEO 與 Core Web Vitals 也比較友善。而 Elementor 這類工具是把整個頁面變成自己的短代碼結構，設計彈性更大，但代價是 DOM 更複雜、通常也較重。換句話說，原生編輯器解決「寫內容」，區塊外掛解決「排版面」；瓶頸若在字寫不出來，再裝區塊外掛也幫不上忙，瓶頸若在版面長不出來，這時區塊外掛才真正派上用場。

5 款 Gutenberg 區塊外掛快速比較：Spectra、Kadence Blocks、Ultimate Blocks、Stackable、Otter Blocks

五款都是免費起跳的 Gutenberg 區塊外掛，定位完全不同。Spectra 與 Kadence Blocks 主打模板庫與搭配自家主題、適合形象網站；Stackable 走精緻設計區塊；Ultimate Blocks 偏向內容行銷與部落格；Otter Blocks 勝在輕量與 WooCommerce 整合。選擇標準是網站類型，不是區塊數量。

我的評選方法很簡單：不比誰區塊最多（那只會讓新手眼花），而是看四個維度：能不能直接做出像樣的頁面、適合哪一種網站、免費版夠不夠用、會不會拖慢網站。這張比較表把五款放在同一個基準上檢視，數字部分採模糊化標示，因為各外掛區塊數量會隨版本變動，寫死精確數字反而誤導。

外掛	區塊數量	模板庫	適合網站類型	免費版主要限制	是否綁自家主題
Spectra	超過百種	完整整頁模板	形象官網、新手	進階動態效果部分需 Pro	同團隊為 Astra，但不強制
Kadence Blocks	數十種	有，偏實用型	注重排版控制的中階站長	部分進階區塊與表單功能需 Pro	同生態為 Kadence，深度整合
Stackable	超過百種	設計感模板	追求視覺質感的設計型網站	進階動態與部分版面區塊需 Pro	獨立運作，不綁主題
Ultimate Blocks	約二十餘種	無整頁模板	部落格、聯盟行銷、內容行銷	進階樣式與部分區塊需 Pro	獨立運作
Otter Blocks	超過二十種	有輕量模板	電商、WooCommerce、小站	進階樣式與部分區塊需 Pro	獨立運作

從這張表看得出來，沒有任何一款在每個欄位都拿滿分。Ultimate Blocks 區塊最少，卻是部落格最務實的選擇；Stackable 區塊多又精緻，但對只想快點上線的人反而是負擔。如果你還在 WordPress 頁面編輯器比較的階段，這張表也可以當作「我要不要走區塊外掛路線」的判斷依據。

幫人挑外掛時，很少需要看「區塊總數」這欄。真正該先問的是：這個網站做完之後，半年內會用的區塊有哪幾個？如果答案不到十個，那裝一個塞了上百個區塊的外掛，只是在讓後台更亂、前端更重。

用功能屬性分類，比比區塊數量更準

光比區塊數量會迷失方向，因為同樣是「一百個區塊」，內容組成可能天差地別。把五款外掛提供的區塊依照功能屬性分類，挑選時會清楚很多。區塊大致分布在版面容器、內容展示、行銷轉換、電商整合這幾個方向，每一類對應不同的網站需求。

功能類別	典型區塊	主要服務的網站類型	對應外掛強項
版面容器類	進階欄位、網格、容器、間距控制、分隔線	形象官網、作品集、首頁排版	Spectra、Kadence Blocks、Stackable
內容展示類	進階標題、圖文卡片、圖示盒、手風琴、分頁	公司介紹、服務說明、設計型網站	Spectra、Stackable
行銷轉換類	目錄、評分框、推薦框、倒數計時、按鈕群組、對照表	部落格、聯盟行銷、內容行銷	Ultimate Blocks
電商整合類	WooCommerce 商品區塊、聯絡表單、地圖、社群按鈕	網購商店、小型電商	Otter Blocks

這張分類表的用途在於對照自己的需求清單。先列出你這個網站半年內真正會用到的區塊類型，再回頭看哪一款外掛剛好涵蓋這幾類。例如一個純聯盟行銷部落格，需求清單多半落在「行銷轉換類」，那麼 Ultimate Blocks 就是最精準的命中；一個形象官網需求落在「版面容器類」與「內容展示類」，Spectra 或 Stackable較合適。當你的需求清單橫跨兩大類以上，才需要考慮裝第二款外掛互補。

有一個常被忽略的觀念：四類區塊的使用頻率很不平均。版面容器類與內容展示類通常在「建站期」密集使用，網站上線後就很少再動；行銷轉換類與電商整合類則是「營運期」持續使用的，每篇文章或每個商品頁都可能插一個。這代表如果你的網站已經上線、版面定下來了，真正還會頻繁碰的可能是行銷與電商那兩類，這時候挑外掛的眼光應放在這兩類的成熟度上，版面區塊的多寡已經不再是重點。

Spectra 評價：新手第一次架站的預設選擇

Spectra（原名 Ultimate Addons for Gutenberg）是五款中最適合新手與形象網站的選擇。它由 Astra 主題同一個團隊開發，提供超過百種區塊加上完整的整頁模板庫，免費版就能做出專業級首頁，特別適合搭配 Astra 主題使用。

Spectra 最大的優勢是「模板可以直接匯入整頁設計」。對一個完全不會寫 CSS、也不知道首頁該放什麼區塊的新手，這等於把一個設計師的作品拆解成可編輯的區塊，你只要改文字、換圖、調顏色就能上線。這在 Astra 免費主題新手教學或 Astra 模板一鍵匯入的流程裡幾乎是標準動作，而 Spectra 把這個能力延伸到內頁與落地頁。

由於與 Astra 同生態，配色、字體、間距這些設定可以同步，省下大量反覆調校的時間。你若想用 Astra 打造型象網站，或參考別人怎麼用 Astra Pro 架站，Spectra 幾乎是預設搭配。我見過不少新手在形象網站設計這一步卡很久，多半是因為沒有模板可以套，從零拉區塊很容易失去方向。

優點：模板庫完整、免費區塊數量充足、與 Astra 深度整合、新手友善
缺點：進階動態效果與部分模板需 Pro、區塊數量多但對純部落格反而過剩
Pro 版主要追加進階模板與動態效果，初學者大多用不到，不必急著升級
適合：形象官網、公司介紹頁、作品集、新手第一次架站

要提醒一點：Spectra 的 Pro 價格以官網公告為準，且常隨方案不同浮動，不要相信任何寫死單一數字的推薦文。初學者真的不用一開始就升級，免費版涵蓋的版面需求已經足夠做出像樣的形象站。

具體的上線流程是這樣運作的。安裝 Spectra 之後，在編輯器裡會出現它的模板庫入口，挑一個與你網站調性接近的整頁模板（例如「公司形象首頁」「服務介紹頁」「作品集」），點匯入，整頁的區塊結構就會載入編輯器。接下來的工作只剩下三件事：把佔位文字換成你的實際文案、把示意圖換成你的產品照或團隊照、在全域設定裡把主色與字體改成你的品牌規範。對完全不會 CSS 的人，這套流程讓「做出專業首頁」從一個設計問題，降級成一個填空問題。

需要留意的是 Spectra 模板的風格一致性。它的模板多數走乾淨、商務、穩重的調性，這對形象官網、服務業、B2B 很合拍；但若你要的是強烈的視覺衝擊、不規則版面、或大量動態效果，Spectra 的模板會顯得保守。這時硬改 Spectra 的模板多半事倍功半，一開始就直接評估 Stackable 會更省力。判斷點很實際：你的品牌形象偏「穩重可信」還是「驚豔有梗」，前者留給 Spectra，後者交給 Stackable。

Kadence Blocks 與 Stackable 該什麼時候才選？

Kadence Blocks 強在細緻的排版控制與和 Kadence 主題的深度整合；Stackable 則以設計感取勝，區塊樣式精緻、適合追求視覺質感的網站。兩者都適合中階以上、願意花時間微調的站長。

先講 Kadence Blocks。它的欄位、間距、色彩、字體控制顆粒度非常細，幾乎每個區塊都能單獨調到像素等級。這對需要精準排版的網站是優點，但對只想快點把頁面生出去的人會覺得選項太多、門檻偏高。與 Kadence 主題搭配時可以啟用全域色彩與字體設定，多個頁面之間維持一致，這在長期維護上是很大的省力點。

如果你已經接觸過 Kadence AI 自動架站，會發現 Kadence 整個生態都在走「控制細、整合深」這條路。但換個角度想，若你連文章與頁面的差別都還在釐清，Kadence Blocks 那堆選項對你來說恐怕是干擾多過幫助。

Stackable 走的是另一條路。它提供較多進階視覺區塊與動態效果，設計感在五款裡數一數二，但區塊結構相對複雜，學習曲線也陡。我會推薦給已經熟悉 CSS、把網站當作品在打磨的設計型站長。對這類人來說，Stackable 與 Kadence Blocks 的上限都比 Spectra 高；但若你只想快速產出，這兩款反而會讓你覺得「怎麼這麼多選項」。

兩者之間的取捨可以更具體。Kadence Blocks 的優勢在一致性管理：全域色彩、全域字體、全域間距這些設定改一處、全站同步，對長期會持續擴充頁面的網站來說，維護成本明顯較低。Stackable 的優勢在單一區塊的設計完成度：它的一個標題區塊或卡片區塊本身就帶有豐富的視覺層次與微互動，少做後製就有質感。決策可以這樣收斂：網站會持續長大、需要嚴格統一規範，選 Kadence Blocks；網站頁面數量不多、但每一頁都要打磨成作品，選 Stackable。兩者都假設你願意花時間在細節上，這是它們與 Spectra 最大的分界。還在摸索網站長什麼樣的人，先用 Spectra 的模板走完一遍，摸出自己的偏好再回頭看這兩款，會覺得如魚得水。

Ultimate Blocks 與 Otter Blocks 走的是精簡路線

Ultimate Blocks 專為內容行銷設計，提供目錄、評分、倒數等區塊，適合部落格與聯盟行銷；Otter Blocks 則輕量並內建 WooCommerce 整合，適合電商與不想裝太多外掛的小站。

Ultimate Blocks 的定位非常清楚：它不做首頁模板，只給你內容行銷會用到的區塊。目錄、評分框、推薦框、倒數計時、按鈕群組、對照表，這些區塊直接提升文章的可讀性與轉換率，是內容經營者與聯盟行銷網站的首選。對寫 WordPress 部落格或比較各種部落格平台的人來說，這套區塊比一堆花俏的視覺區塊實用得多。

Otter Blocks 走的是另一個極端：輕量、整合導向。它內建 WooCommerce 產品區塊與聯絡表單，這對電商網站來說等於少裝幾個外掛，後台也更乾淨。如果你正在用 WooCommerce 架設購物網站，或考慮選哪一套 WooCommerce 佈景主題，Otter Blocks 的商品區塊能直接接上 WooCommerce，省下額外尋找商品展示外掛的功夫。連表單也不用額外裝，比起單獨挑 WordPress 表單外掛更省事。

「區塊越多越好」是常見誤解。對純內容站來說，Ultimate Blocks 不到三十個區塊，卻能把聯盟行銷文章需要的元件全部塞進去；而 Otter Blocks 把表單與商品區塊包進來，等於用一個外掛替代兩到三個。兩款免費版核心區塊都完整，付費版差異主要在進階樣式與模板數量，若網站以文章或商品為主、不需要複雜首頁模板，這兩款比 Spectra 更精簡。精簡，本身就是一種選擇標準。

依網站類型挑選，而不是比區塊數量

挑選區塊外掛的第一標準是網站類型，不是區塊數量：形象官網選 Spectra、注重排版控制選 Kadence Blocks、重設計質感選 Stackable、內容行銷選 Ultimate Blocks、電商選 Otter Blocks，且建議只裝一到兩款就好。

這個判斷流程是我實際幫人挑外掛時會走的路線，你可以照著對照自己的情況。它不是唯一的答案，但能幫你避開「五款都裝裝看」這種最常見的錯誤。

先問：這個網站做完後，半年內會用到的區塊有哪幾個？列得出來才算數。
判斷網站類型：形象官網、部落格、聯盟行銷、電商、設計型作品集。
對應選擇：形象→Spectra、排版控制→Kadence Blocks、設計質感→Stackable、內容行銷→Ultimate Blocks、電商→Otter Blocks。
套用決策原則：某款外掛的區塊你有沒有一半以上會用到？用不到就不要裝。
最多裝兩款主力外掛，其餘需求用單一功能外掛補，而不是再裝一整套區塊庫。

舉幾個具體組合。形象官網與新手：Astra Pro 配 Spectra，模板直接套用，30 分鐘內可以生出像樣的首頁，這也是快速架好 WordPress 的常見路線。設計型與中階站長：Stackable 或 Kadence Blocks，視覺與控制上限都高，適合願意打磨細節的人。部落格與聯盟行銷：Ultimate Blocks，行銷區塊齊全，配免費部落格主題就能上路。電商與 WooCommerce：Otter Blocks，內建商品與表單區塊，若你已經參考過 Flatsome 購物網站教學或 Astra Pro 加 WooCommerce 設定，Otter 能補上區塊編輯器裡缺的那一塊。

有些場景根本不該裝區塊外掛

多數文章只告訴你「要裝哪一款」，卻少有人講清楚什麼時候根本不該裝。區塊外掛是工具，工具就有不適用的場景，以下幾種情況裝了反而幫倒忙。

網站以純文字內容為主（個人隨筆、長文專欄），版面需求極低，原生區塊綽綽有餘，多裝只增加載入負擔。
你已經在用 Elementor 或 Divi 這類頁面編輯器，再疊區塊外掛會造成兩套排版系統並存，衝突風險高、維護混亂。
網站效能已經吃緊、Core Web Vitals 在不合格邊緣，這時的首要任務是減重，任何新增區塊外掛都應暫緩。
你對設計完全沒有想法，連「要放什麼區塊」都答不出來，這時需要的會是現成主題的 demo 匯入，功能更龐大的區塊庫只會讓你更迷路。

第四點特別值得展開。很多人以為「裝更多區塊＝更多設計能力」，其實順序剛好相反。你得先有版面想法（這頁要放英雄區、三個服務卡、證言輪播、CTA 按鈕），區塊外掛才能幫你把想法落地；若連想法都沒有，區塊再多也只是一堆不知道怎麼拼的零件。這種情況下，挑一個內建完整 demo 的主題（例如 Astra、Kadence、Blocksy 的現成版型），直接整套匯入再微調，會比在空白頁裡翻區塊庫有效率得多。

從零到上線：用區塊外掛做落地頁的標準流程

選對外掛只是起點，真正的效率藏在流程裡。以下是使用區塊外掛從空白到上線一個落地頁的標準步驟，這套流程對 Spectra、Kadence、Otter 這類有模板庫的外掛都通用，能幫你避開最常見的「做了半天還在調間距」的陷阱。

先在紙上或白板畫出頁面結構草圖：英雄區放什麼、接下來幾個區塊、CTA 在哪。有草圖才知道要挑哪個模板，沒有草圖直接翻模板庫會挑到眼花。
從模板庫挑一個結構最接近草圖的整頁模板匯入。寧可挑「結構對、配色不對」的，也不要挑「配色漂亮、結構差很遠」的，因為改結構遠比改配色費時。
換文案與圖片：把佔位內容全部替換成真實內容。這一步要一次做完，不要邊換邊調樣式，否則會陷入反覆微調的迴圈。
調全域設定：主色、字體、間距基準值一次設好，讓整頁風格統一。全域設定改一處勝過逐區塊改十處。
做響應式檢查：切到平板與手機預覽，檢查欄位是否該堆疊、字體是否過大、圖片是否溢出。這一步最容易漏，卻是質感分水嶺。
上線前用 PageSpeed Insights 或類似工具跑一次成績，確認沒有因為區塊外掛拖垮分數，有問題先停用沒用到的區塊。

這套流程的核心觀念是先求結構正確、再求樣式到位。新手最常犯的錯是反過來：一匯入模板就開始糾結某個按鈕的圓角、某段文字的行高，結果花了一整個下午，頁面結構都還沒改完。把結構與內容先定下來，樣式微調留到最後統一做，整體效率會高出好幾倍。

裝越多越好的迷思，與它帶來的代價

同時安裝多款區塊外掛，是多數人網站變慢、區塊互相衝突的主因。正確做法是只保留一到兩款主力外掛，並搭配快取與圖片壓縮來控制載入速度。

先講效能。每多裝一款區塊外掛，前端就多載入一份 CSS 與 JavaScript，頁面載入時間會明顯上升，這是物理事實，適用於任何一款區塊外掛。我不會給你一個像「裝一款慢 X%」的精確數字，因為實際影響取決於你啟用了哪些區塊、有沒有做條件載入。但方向很明確：裝越多、載入越重。對網站速度優化有要求的人，這一點不能輕忽。

速度差距的實質影響，有公開案例可以佐證。這裡要傳達的觀念很單純：速度與營收正相關，而且這個關係在電商特別明顯。Vodafone 把 Largest Contentful Paint（LCP）改善了 31%，帶來銷售額 8% 的成長；redBus 改善 Interaction to Next Paint（INP），銷售額提升 7%；Rakuten 24 投資 Core Web Vitals 後，每位訪客營收增加 53.37%、轉換率提升 33.13% [來源：〈web.dev — Why does speed matter?〉〈https://web.dev/articles/why-speed-matters〉〈2026〉]。這些案例的共同訊息是：前端每多載入一份資源，都在蠶食你的轉換率。區塊外掛可以裝，但每多裝一款，等於把這條正相關曲線往下推一點。

把這個觀念換成具體的常見狀況會更清楚。以一個月流量約幾萬、頁數約數十頁的典型內容站或形象站為例，這類站在同時裝上三到四款區塊外掛、又沒有開啟資源最佳化的情況下，前端額外載入的 CSS 與 JavaScript 體積通常會累積到大約數百 KB 的量級，首頁 Largest Contentful Paint（LCP）因此落在約 3 至 5 秒之間、整體阻塞時間約數百毫秒，都是相當常見的幅度。這種程度的延遲在純閱讀型的形象站未必致命，但若是聯盟行銷或電商頁面，依典型表現幅度約會讓轉換率下降個位數百分比。要特別誠實說明的是，這些數字是這類站普遍會看到的幅度區間，不是某一個被精確量測的專案結論，因為實際影響會隨主機、快取設定、啟用了哪些區塊而有很大差異，過度宣稱「裝幾款就一定慢幾秒」並不準確。決策角度由此就很明確：與其事後靠快取與圖片壓縮去補救，不如在建站期就把主力外掛壓在一到兩款、並在每款外掛的設定頁確認條件載入是開啟的，這是把上面那個幅度區間往下壓的最直接槓桿。

再講衝突。不同外掛可能註冊同名或功能相近的區塊，例如兩款外掛都有「進階按鈕」，在編輯器裡可能同時出現、互相覆蓋樣式，造成顯示異常。這種問題很難預先排查，通常要等你在編輯時才會踩到。最穩的做法是一開始就控制外掛數量，而不是出問題再來除錯。若真的遇到 Core Web Vitals 不過標，或網站開啟頓頓的，先檢查區塊外掛是不是裝太多。

在補救手段上，WordPress 快取外掛能擋下大部分重複請求，圖片壓縮工具與 Smush 壓縮設定能把圖檔體積壓下來，延遲載入與完整的 WordPress 圖片優化則進一步減少首屏負擔。這些基本功做好之後，區塊外掛帶來的效能影響通常能壓到可接受範圍，也比起糾結要不要升級 Pro 性價比高得多。

條件載入與資源管理：讓區塊外掛變輕的關鍵設定

對區塊外掛效能的焦慮，其實常來自一個誤解：以為只要裝了外掛，所有區塊的 CSS 與 JavaScript 就會在每一頁全載。事實上，設計良好的區塊外掛都支援條件載入（asset generation / on-demand loading），也就是只有頁面實際用到某個區塊時，才會載入對應的樣式與腳本。一個裝了 Spectra 卻只在首頁用三個區塊的網站，它的文章頁幾乎不會載入 Spectra 的資源。理解這個機制，才能正確判斷外掛到底「重不重」。

要確認外掛是否真的在做條件載入，可以在沒有用到該外掛區塊的頁面打開瀏覽器開發者工具，看 Network 面板有沒有載入它的 CSS／JS 檔案；多數外掛在設定頁有「資源生成」「asset optimization」「只載入使用中的區塊」這類選項，要確認是開啟的；若你用的是會組合壓縮 CSS 的快取或效能外掛，還要檢查它有沒有把沒用到的區塊樣式也一起打包進去。這三個檢查做完，會發現「裝了外掛」與「頁面變重」之間其實有一個可以調控的開關。

條件載入這個觀念還帶出一個重要結論：外掛的「重量」是相對的，取決於你怎麼用它。同一款 Spectra，在一個只用三個區塊、有做資源最佳化的網站上幾乎無感；在另一個啟用全部區塊、又沒開最佳化的網站上則可能明顯拖慢載入。所以與其問「這款外掛重不重」，更精準的問法是「我有沒有把它的資源管理設定做對」。這也是為什麼有經驗的站長寧可花十分鐘設定資源最佳化，也不願意靠「少裝外掛」來解決速度問題，因為前者保留設計彈性，後者往往會犧牲掉你真正需要的功能。配合停用用不到的區塊、避免同時裝兩款功能高度重疊的外掛、以及半年回頭清理一次沒碰過的區塊，就能把這個開關長期維持在對的位置。

與 Elementor、Divi 頁面編輯器的路線差異

Gutenberg 區塊外掛是在原生編輯器上擴充，輸出貼近 WordPress 原生結構、對 SEO 與速度較友善；Elementor、Divi 則是獨立的視覺化頁面編輯器，設計彈性更大但通常較重。追求輕量與長期維護性選前者，追求極致設計自由選後者。

這純粹是路線選擇，沒有誰優誰劣的問題。區塊外掛沿用原生區塊結構，內容存進資料庫的方式與 WordPress 核心一致，資料可攜性高、換外掛時內容不容易毀損。你今天用 Spectra 做的頁面，就算之後停用 Spectra，文字與圖片仍會以原生區塊的形式留下來，頂多失去進階樣式，這是區塊結構相對短代碼的工程特性。

Elementor 與 Divi 走的是另一條路。它們設計自由度更高，所見即所得的編輯體驗也較直覺，但產生的短代碼與 DOM 結構較複雜。對 SEO 與 Core Web Vitals 要求高的網站，區塊外掛路線通常較容易達標；若要給數字，需有可信的實測來源，這裡只陳述方向性差異，不引用未查證的對測數據。對這條路線有興趣的話，可以對照 Elementor 完整教學或 Divi 架站全攻略。

還有一個新一代工具值得一提。Bricks Builder這類強調效能的新世代編輯器，某種程度上就是在回應 Elementor「較重」這個痛點。但對多數新手來說，真正的關鍵在於一開始就走對路線，挑哪一套頁面編輯器反倒不是重點。如果你只是要做一個內容導向的網站，區塊外掛加上一個好主題，長期會比頁面編輯器輕省很多。回頭看一句話就夠了：區塊外掛不是用來取代頁面編輯器的，它是讓原生編輯器夠用的擴充，網站需要多少設計自由度，決定了你該走哪一條路。

如果你還在評估整體成本，WordPress 自架網站費用能把外掛、主題、主機、備份與搬家這些環節都算進去。區塊外掛只是其中一塊，但它往往是決定頁面質感與製作效率的關鍵那一塊：原生 Gutenberg 處理文字夠用，版面質感靠區塊外掛補，挑選的依據是網站類型而不是區塊總數，裝兩款以內、用免費版先把站做起來，遇到真實限制再回頭升級，這條路對絕大多數人都最穩。

Gutenberg 區塊外掛常見問題

五款外掛分別適合什麼網站類型？

依網站類型對應：形象官網與新手選 Spectra（模板庫完整、與 Astra 整合、門檻最低）；需要像素級排版控制與全站一致性的中階站長選 Kadence Blocks；追求視覺質感、願意打磨細節的設計型網站選 Stackable；寫文章、跑聯盟行銷的內容站選 Ultimate Blocks；開 WooCommerce 商店、想少裝幾個外掛的選 Otter Blocks。原則上裝一到兩款即可。

區塊外掛會拖慢網站嗎？條件載入能抵銷多少？

每多裝一款，前端就多一份 CSS 與 JavaScript 要載入，一次疊好幾款累積負擔相當可觀。但設計良好的外掛支援條件載入，只有頁面實際用到某個區塊時才載入對應資源，一個只首頁用三個區塊的網站，內頁幾乎不會載入該外掛資源。建議到外掛設定頁確認「資源最佳化／只載入使用中區塊」是開啟的，再把主力外掛壓在一到兩款、搭配快取與圖片壓縮，影響就能收斂回來。

可以同時安裝多個區塊外掛嗎？

技術上可以，但不建議。不同外掛可能註冊同名區塊或樣式互相覆蓋，造成編輯器顯示異常，也讓前端載入變重、條件載入的判斷變複雜。多數網站裝一到兩款就足以應付需求；若仍遇到顯示異常，先停用其他區塊外掛只留一款測試，再暫時切換預設主題排除主題因素，長期則選與外掛同生態的主題（如 Spectra 配 Astra、Kadence Blocks 配 Kadence）。

區塊外掛和 Elementor、Divi 的根本差別是什麼？

區塊外掛是疊在原生編輯器上的擴充，內容以原生區塊格式存進資料庫，搬移或換外掛時不容易毀損，速度與 SEO 負擔較小。Elementor、Divi 自成一套系統，所見即所得的彈性更大，代價是 DOM 與短代碼結構較厚重。對 Core Web Vitals 要求高的網站，區塊外掛路線通常較容易達標；未來可能換主題或簡化網站者，原生區塊架構的搬移成本也明顯較低。

停用區塊外掛後，原本做的頁面會壞掉嗎？

不會整頁報廢。文字與圖片仍以原生區塊留存，頁面不會空白，只是該外掛獨有的進階樣式（自訂間距、動態效果、特殊版面）會退回基本樣貌。這正是區塊外掛相對頁面編輯器的關鍵優勢：輸出貼近原生結構、資料可攜性高；而 Elementor、Divi 把內容包進短代碼，移除後常殘留一堆未解析的代碼。資料可攜性是挑選路線時值得納入考量的長期因素。

已經在用 Elementor，還需要再裝區塊外掛嗎？

通常不需要，也不建議。Elementor 本身已是一套完整的視覺化排版系統，再疊上區塊外掛會形成兩套排版系統並存，衝突風險高、維護混亂。若對 Elementor 的某些功能不滿意，正確方向是找 Elementor 專屬的擴充外掛，或評估整體改用區塊外掛路線，兩者擇一，避免混用。