Wordpress

Spectra 是什麼?新版 Blocks 與舊版 Legacy 完整比較

多數人以為在外掛市集搜尋一個名字只會撞見一個結果,Spectra 卻是例外。2026 年 7 月之後,同樣打上這四個字,畫面上會同時跳出兩個外觀相似、名稱幾乎一模一樣的外掛,裝錯一個,後面照著任何教學一步步做,畫面都對不上。

這支外掛是 Brainstorm Force(同一家公司也開發 Astra 佈景主題)做的免費工具,原名 Ultimate Addons for Gutenberg,專門補齊 WordPress 原生區塊編輯器欠缺的版面與樣式細節。這次分裂動的不是小修小補,官方把整套架構重寫成兩個獨立外掛,沒有一鍵搬家工具,選錯版本要重建一次的成本不算小。

Spectra 是什麼?補齊 Gutenberg 內建區塊缺少的版面與樣式控制

如果你用原生的區塊編輯器堆過版面,大概遇過這個限制。Gutenberg 內建的「欄」區塊只能把畫面切成等寬的幾欄,沒有真正的 Flexbox 或 Grid 排列可以調,也做不到讓兩個區塊懸浮重疊;圖片區塊同樣陽春,響應式細節幾乎無從下手,同一張圖在手機上要不要換個比例、要不要加陰影,原生功能都答不出來。

Spectra 補的正是這一塊空白。它裝在任何標準 WordPress 佈景主題上都能用,不綁定 Astra,核心賣點是把這些進階能力直接加進原生的區塊編輯器裡,不是像 Elementor 那種需要另外學一套介面的頁面產生器。你在後台看到的還是熟悉的區塊清單,只是多了一大批原本做不到的排列方式與樣式選項。裝了它,原本做不到的排版才做得出來,後面逐項拆開的功能,幾乎都在補前面這幾個具體缺口。

左右對照 Gutenberg 原生區塊的限制與裝上 Spectra 後補回的能力,說明 Spectra 補齊原生欠缺的版面與樣式控制
原生區塊只能等寬切欄、無法懸浮重疊,裝上 Spectra 才拿回 Flexbox/Grid 排列與響應式細節。

只是這次補強動作,2026 年 7 月被官方升級成一次整體架構重寫,連外掛名稱都跟著變了,你現在裝的,可能已經不是同一個 Spectra。

外掛市集同時掛著兩個 Spectra,新舊版本的分野

官方拆分的理由很直接。舊架構是在 WordPress 區塊 API 還不成熟的時期,自己建了一整套自訂的控制系統撐起來,年久之後很難維護,也常常因為 WordPress 核心更新而跟著壞掉。新架構直接建在 WordPress 現在的核心區塊 API 上,跟著 WordPress 版本走,不容易因為升級而故障。兩者是完全獨立的兩個外掛,各自在外掛市集有獨立頁面,互不覆蓋,也不會自動互相轉換。

分開發行的好處是舊站不會被強迫改版,你可以照自己的節奏升級,站台不會因為官方推新版而突然變樣。但代價是沒有一鍵搬家工具,舊站要換成新版只能一頁一頁手動重建。官方建議新專案直接裝新版,因為新功能只會出現在新架構上;已經在用舊版的站台,除非某個舊版專屬區塊在新版找不到替代做法,否則不必急著搬家。

在外掛安裝頁搜尋 Spectra,會並列出現舊版 Spectra Legacy 與新版 Spectra Blocks 兩個由 Brainstorm Force 發行的獨立外掛
在外掛市集搜尋 Spectra,舊版 Spectra Legacy 與新版 Spectra Blocks 會並排跳出,兩個都由 Brainstorm Force 發行、各自獨立。

舊版更名 Spectra Legacy,靠大量單一用途區塊撐起功能

舊版現在正式改名為 Spectra Legacy,版本號落在 2.20 系列,只接受安全性與相容性修補,不再新增功能。它的思路是「每種版面需求配一個專屬區塊」,區塊數量多,好處是拿來就能用,壞處是外掛體積與維護成本都比較高。

具體來看,內建區塊大致分成七類:核心版面類有容器、標題、圖片、圖示、按鈕、資訊框、召喚行動、倒數計時;內容型有滑塊、內容時間軸、Google 地圖、內嵌通知、頁籤、分類清單、價格清單;文章相關有計數器、彈出視窗、文章輪播、文章網格、文章時間軸;社群類有 Instagram 饋源、引言、社群分享、團隊、推薦;表單類有聯絡表單、電子報訂閱、reCAPTCHA;SEO 結構化資料類有常見問題、操作指南、評論、目錄;另外還內建彈出視窗建立器與即將推出模式等站台工具。如果你手上的站台就是裝這一套,這份清單大致就是你現在能用的全部功能。

重寫版 Spectra Blocks 用少量核心區塊配合 AI 生成頁面

新版全名是 Spectra Blocks,2026 年 7 月 13 日首發 1.0.0,之後陸續小版本更新到 1.0.6,安裝條件要求 WordPress 6.6 以上、PHP 8.1 以上,比舊版對環境的要求高一截。它的設計哲學跟舊版整個反過來,不是每種需求配一個專屬區塊,而是一個彈性容器加幾個內容區塊,再配合 Extensions 替核心區塊加值,複雜版面靠組合堆出來。

官方頁面列出的區塊數來到 49 個(含容器內的子元件),但真正常用的獨立區塊只有十來個,包括 Text、Buttons、Container、Accordion、頁籤、Slider、Modal、彈出視窗建立器、Post、計數器、倒數計時、分隔線、清單、圖示、Google 地圖。舊版那些見證卡片、資訊框、評論、常見問題的專屬區塊在這裡都不見了,官方的說法是這些版面本來就能靠 Container 疊上圖片、標題、段落組出來,或是直接從範本庫套現成範本;同樣道理,圖片這類核心區塊改用 WordPress 原生的 Image 區塊,Spectra 再用 Extensions 加上進階控制。新版還搭配了 AI 夥伴 Zip AI,能整頁生成也能單一小節生成。

新網站優先安裝 Spectra Blocks,兩步完成啟用

取得方式很單純。到後台「外掛」點「安裝外掛」,搜尋完整名稱「Spectra Blocks」(市集列表上會標明「AI Website Builder for the Block Editor」,跟只寫 Spectra 的舊版分頁排在一起,別選錯),點安裝再點啟用,區塊編輯器裡就會出現 Spectra 這一整批區塊,核心功能不需要另外設定就能直接用。

啟用後打開區塊編輯器的插入器,Spectra Blocks 分類列出 Container、Buttons、Text、Modal、Slider 等整批新版區塊
啟用後打開區塊插入器,就能在「Spectra Blocks」分類看到 Container、Text、Buttons、Slider 等整批新版區塊。

AI 功能不會隨著核心外掛自動開通。要用 Zip AI,得從 Spectra Blocks 後台的 AI 區塊另外安裝並連接免費的 Zip AI 外掛,並註冊一組 ZipWP 帳號才能使用;核心區塊與 Extensions 完全免費,不需要任何帳號。官方也提醒,正式上線前最好先在測試站或新建的頁面試裝一次,並留一份最近的備份,出狀況能快速還原。

Container 是自訂版面的地基,巢狀排列、Flexbox/Grid 控制都在這裡

新版真正的核心區塊是 Container。它取代舊版單純等寬分欄的邏輯,讓任何區塊都能塞進去自由排列,不管是核心區塊、其他 Spectra 區塊,還是第三方外掛的區塊都吃得下,而且可以無限層巢狀嵌套,一層容器裡再放另一層容器也沒問題。

排列邏輯支援 Flexbox 與 Grid 兩種,可以調方向、對齊、間距,也能讓區塊彼此疊加或偏移,做出懸浮卡片這類舊版做不到的效果。響應式控制可以針對桌機、平板、手機分別設定排列方式,同一組內容在不同裝置上呈現不同版面。舊版對應的是名叫 Flex Container 的區塊,功能相近,但新版把它定位成整個外掛的排版基礎,不只是眾多區塊之一。

選取 Spectra 的 Container 區塊,右側設定側欄的版面配置可切換 Flow、Flex 或格狀顯示,對應 Flexbox 與 Grid 排列
選取 Container 區塊,右側側欄的「版面配置」就能切換 Flow/Flex/格狀顯示(Grid),排出各種版面。

Text、Buttons 兩個區塊撐起頁面的標題和行動呼籲

Container 之外,新版最常用的兩個內容型區塊是 Text 和 Buttons。Text 負責幾乎所有文字內容,從 H1 到 H6 的標題到一般段落都靠這一個區塊切換呈現方式,額外支援漸層文字、陰影效果與進階排版控制;舊版每種標題排列各自一個區塊的做法,在這裡被合併成一個區塊靠設定切換用途。

Buttons 則負責可自訂樣式的按鈕群組,同一組裡可以放多顆按鈕,各自獨立設定樣式、連結與圖示,適合當作行動呼籲的按鈕組。這兩個區塊都吃 Global Styles 設定的全站色彩與字體,站台色系改一次,Text 與 Buttons 的預設樣式就跟著同步,不用逐頁調整。

Extensions 幫核心圖片區塊補齊間距、陰影、響應式控制

看到這裡你可能會問,新版沒有專屬的圖片區塊,進階設計要靠什麼補回來,答案就是 Extensions。它不是一個獨立區塊,而是「附加」在 WordPress 原生區塊上的進階控制,把間距、邊框、陰影、響應式顯示條件這類設定,加到你原本就在用的核心區塊(例如原生的 Image 區塊)上,不用換成 Spectra 專屬版本。

這個做法也是官方解釋「為什麼新版故意比舊版少幾個區塊」的核心理由。好處是保留核心區塊的相容性與長期穩定性,同時拿到接近專屬區塊的設計自由度,日後 WordPress 核心更新,你的圖片、段落這些原生區塊不會因為換了外掛版本而跟著跳出相容性問題。

新版以 Container 當版面地基,內放 Text、Buttons 與核心 Image 區塊,Extensions 再替核心區塊補上進階控制
新版靠 Container 當地基疊出版面,核心圖片區塊沿用原生、再用 Extensions 加值。

手風琴、頁籤、輪播,三種收合展開的版面區塊

長內容頁面最常遇到的難題是同一塊畫面要塞進多組資訊,新版用三個區塊分別對應不同情境:手風琴適合把長串問答收合起來,頁籤適合並列同層級但主題不同的內容,輪播適合讓一組圖片或內容左右滑動瀏覽。

三者都能無限增加項目,也都支援自訂展開或收合的動畫效果,適合把版面高度壓縮下來,讓讀者不必一路往下捲,差別在於哪一種資訊排列方式最適合手上這批內容。

Accordion 收合展開常見問題和規格表

手風琴區塊最常見的用途,是把長串問答或規格資訊摺起來,讀者點了才展開,避免頁面一次塞爆。新版沒有獨立的常見問題區塊,官方明講這類版面改用手風琴組出來,一組問答就是一個項目,可以無限增加,展開收合的過場動畫也能自訂。

拿產品規格表當例子,與其把十幾條規格全部攤在頁面上,不如把每一條包成一個手風琴項目,讀者只點開自己在意的那幾條,頁面看起來乾淨很多,滑動距離也短。

Tabs 把大量資訊摺進分頁

頁籤區塊適合並列幾組同層級但主題不同的內容,例如產品規格對照保固條款,讀者切換頁籤看,不必往下捲動找對應段落。跟手風琴不同的地方在於,頁籤同一時間只顯示一個分頁的內容,其餘收在標籤後面,適合資訊量大又彼此獨立的情境。

實際操作上,每個頁籤標題可以自訂文字,內容區塊一樣可以塞 Container、圖片、清單這些其他 Spectra 區塊,不限定只能放文字。

Slider 輪播圖片和內容區塊

輪播區塊可以放圖片,也可以放任意內容區塊,底層用的是開源的 Swiper 函式庫。常見於首頁精選案例的輪替展示,或是同一款產品多張圖片的滑動瀏覽,讀者用手滑動或點箭頭就能切換。

因為輪播裡放的是完整的內容區塊而不只是圖片,你也可以在同一張投影片裡同時放標題、說明文字和按鈕,做成一組輪替的行動呼籲卡片,不必額外裝別的輪播外掛。

Modal、Popup Builder 兩種觸發式彈出內容

彈出型內容常被搞混,新版把它拆成兩個定位不同的區塊。Modal 是點了按鈕才跳出的彈窗,主動權在讀者手上;Popup Builder 則是依站台規則自動跳出,主動權在你設定的觸發條件上。兩者外觀都是彈出視窗,差別在誰按下開關。

搞清楚這個差別很重要,因為用途完全不一樣:需要讀者主動點開才看到的內容用 Modal,需要在特定時機自動提醒訪客的內容用 Popup Builder,選錯一個,訪客的體驗會完全不同。

Modal 由讀者點按鈕觸發、Popup Builder 依站台規則自動跳出,兩者差在誰按下開關
同樣是彈出視窗,Modal 由讀者主動點開,Popup Builder 則依你設定的規則自動跳出。

Modal 由按鈕觸發的彈窗

Modal 綁定一顆專屬的觸發按鈕子區塊,訪客點擊後才彈出內容,裡面可以放圖片、文字、表單等任意區塊。這種觸發方式適合「更多資訊」「觀看影片」這類需要讀者主動點開的情境,不會打斷正在瀏覽的讀者。

因為觸發按鈕是獨立子區塊,你可以把它塞進任何段落裡,例如一句產品說明後面接一顆「看規格」按鈕,點下去才彈出完整的規格表,主頁面維持精簡。

Popup Builder 用顯示規則控制全站彈出時機

Popup Builder 是站台工具,不是單頁區塊,可以設定觸發條件,像是進站幾秒後、捲動到某個位置、滑鼠準備離開視窗前,也能設定顯示規則決定哪些頁面出現。這是免費核心功能之一,不是付費限定。

常見用途是電子報訂閱或限時優惠彈窗,設定好一次,往後新增的頁面只要符合顯示規則就會自動套用,不必每篇文章重新加一次彈窗代碼。

Post 區塊用網格、Masonry 或輪播列出文章

Post 區塊讓你不用寫程式碼,就能在任意頁面插入「最新文章」「相關文章」這類自動更新的清單。篩選條件可以依分類、標籤、文章類型設定,來源範圍很彈性。

版面可以在三種呈現方式間切換:網格是等寬卡片整齊排列,Masonry 依內容高度交錯排列,適合圖片尺寸不一的情境,輪播則是左右滑動瀏覽。內容更新時,例如新增或修改了文章,這個區塊會自動反映最新資料,不需要手動編輯回來同步,對經常發文的站台特別省事。

Counter、Countdown 兩個區塊,用數字製造急迫感與量化訴求

這兩個區塊都以數字為主角,但訴求完全不同。Counter 用捲動觸發的動畫數字強調成果量化,可以設定起始值與終值,讀者捲動到這個區塊時數字才開始跳動,常見用在「已服務多少位客戶」這類量化訴求的段落。

Countdown 則用倒數計時製造限時急迫感,可以設定目標日期時間,倒數到期後還能切換顯示替代內容,例如把倒數畫面換成「活動已結束」的提示,不會讓過期的倒數數字一直掛在頁面上。這個區塊常見於限時優惠或活動報名頁,配合明確的截止時間使用效果最好。

Design Library 收錄的圖案、頁面、整站套件,都建在 Astra 生態系上

不想從空白頁開始時,Design Library 是第一站。它提供三個層級可以套用:單一圖案,像是一組見證卡片、比較表、資訊框排版;整頁範本;以及整套網站套件。全部都用 Spectra 區塊組成,套用後可以直接在編輯器裡逐塊調整,不是鎖死的圖片式範本,這點跟一般的靜態範本庫不太一樣。

數量上,Astra 搭配 Spectra 這個組合有 100 多套免費起始範本;另外還有跨主題通用的 300 多套範本庫,涵蓋 Astra、Hello、OceanWP、GeneratePress 等其他主題也能用。套用範本時,如果你是新站點,系統預設會用新版 Spectra Blocks 匯入,如果特別想套用舊版的範本,得先手動安裝 Spectra Legacy,再回頭執行匯入,兩個版本的範本庫不會自動互通。

Zip AI 能生成整頁、生成單一區塊,也能把舊 HTML 頁面轉成原生區塊

新版最有話題性的功能是 AI 生成。Zip AI 是獨立的免費伴生外掛,安裝並連接 ZipWP 帳號後才能使用,生成出來的東西就是普通的 Spectra 區塊,事後照樣能用滑鼠逐塊調整,不是另一個改不動的黑盒子產物。

核心能力有四項:描述需求直接生成整頁草稿;只生成單一小節,像是主視覺區、價格表、常見問題或見證區;針對既有內容做文案改寫或精簡加長;把既有的 HTML 頁面轉換成原生的 Spectra 區塊。生成的過程是先跳出預覽讓你確認才套用,不會直接改動現有頁面內容,出來的結果不滿意也不影響原本畫面。AI 建站時還會自動把配色與字體設定寫進 Global Styles,跟人工手動調整共用同一套系統,事後維護不會散落各處。

這裡有幾件事要老實講清楚。使用 AI 功能需要 ZipWP 帳號並消耗額度,就算是付費版 Spectra Blocks Pro 的使用者,一樣要另外計算額度,並不是買了 Pro 就能無限次生成。另外,啟用並授權 AI 功能之後,外掛會把你的網站網址與提示詞內容傳送到 ZipWP 服務端處理,用來產生生成建議,這點在官方揭露的外部服務說明裡有寫明,選擇要不要開啟這個功能之前值得先知道。

Zip AI 的四項生成能力與生成流程,使用需連 ZipWP 帳號並消耗額度
Zip AI 能整頁或單節生成、改寫文案、把 HTML 轉成區塊,但要連 ZipWP 帳號、跑額度才能用。

Global Styles 一次設定色彩和字體,全站區塊照著套用

前面每個區塊都提到吃全站的色彩字體設定,撐起這個一致性的就是 Global Styles。它集中管理色彩、字體排印、間距這些站台層級的設定,設定完之後 Container、Text、Buttons 等區塊預設都會套用同一套視覺語言。

改動 Global Styles 會即時反映到所有已套用該設定的區塊上,不必逐頁手動改一遍。前面提到 Zip AI 生成內容時,也是直接寫進 Global Styles,人工調整跟 AI 生成用的是同一套系統,不會出現 AI 生成的頁面色彩跟其他手動頁面對不起來的狀況。

官方相容清單涵蓋 Astra、Kadence 等主題和 WooCommerce 等外掛

安裝前最實際的顧慮是現有主題和外掛裝了 Spectra 會不會互相衝突。官方測試相容的佈景主題有 Astra、Spectra One、Kadence、GeneratePress、Blocksy、Neve、Flatsome;相容外掛涵蓋 WooCommerce、SureCart、Gravity Forms、Fluent Forms、LearnDash、Tutor LMS、Yoast SEO、The Events Calendar、GiveWP、PrestoPlayer、SureMembers、MemberPress、Easy Digital Downloads 這些常見類型。

WooCommerce 這塊要澄清一個常見誤解,Spectra 沒有專屬的 WooCommerce 商品區塊,商品版面是靠 WooCommerce 自己的區塊,搭配 Spectra 的 Container 與核心區塊組出來,不是靠 Spectra 內建某個商品專屬區塊。多語系方面,WPML 已經測試相容;Polylang 與 Multisite 的相容性官方標示為尚在確認中,還沒正式列入相容清單。

免費版已含全部區塊,Pro 是另外安裝的加購外掛

新版 Spectra Blocks 的核心外掛、所有內建區塊、所有 Extensions 都完全免費,不需要帳號,這點官方講得很明確。AI 功能走的是獨立的 Zip AI 與 ZipWP 帳號額度制,跟免費對付費是兩條完全不同的軸線,別把它們混在一起判斷。

Spectra Blocks 後台儀表板標示 FREE VERSION,Free blocks 區列出 Container、Button、Text 等全部內建免費區塊
Spectra Blocks 儀表板標明目前是免費版,內建的 Container、Text、Slider 等區塊全部免費可用。

付費版在新舊架構下是各自獨立的加購外掛,不是同一份授權通用。舊版對應的付費外掛現在稱為 Spectra Pro Legacy,新版對應的是 Spectra Blocks Pro,兩者不能混裝生效,但共用同一組授權金鑰,買一次就能下載對應自己所裝版本的 Pro 外掛。官方定價把付費版分成三個層級,單一功能取向的 Spectra Pro、涵蓋更多 Brainstorm Force 產品的 Essential Toolkit,以及鎖定代理商規模的 Business Toolkit,價格會隨網站授權數量調整(單站授權最便宜,授權站數愈多愈貴),年繳與買斷兩種選項都有,最低的 Spectra Pro 單站年繳方案從 49 美元起。官方定價與方案內容會隨時間調整,實際數字請以官方頁面當下顯示為準;三個層級都附帶 14 天的退款保證。

免費核心、Pro 加購、AI 額度三條獨立軸線對照,說明免費、付費與 AI 額度是三件不同的事
免費核心、要不要買 Pro、AI 消不消耗額度是三條不同的軸線,別混在一起判斷。

回頭看整件事,新舊兩個 Spectra 不是誰比較好的問題,而是站在哪個架構上比較划算。手上已有舊版站台且運作正常,沒有必要為了追新架構重建整個網站;準備開新站,官方建議也很清楚,直接裝新版,因為新功能只會出現在這裡。至於 AI 生成這塊,值得先用免費額度試個幾次,感受一下生成出來的區塊好不好調整,再決定要不要另外連帳號長期投入。免費版涵蓋的功能其實已經足夠應付大多數版面需求,真正該花錢的地方,等真的碰到功能上限再考慮也不遲。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

外掛市集為什麼會出現兩個 Spectra?

因為 2026 年 7 月官方把 Spectra 整套架構重寫成兩個獨立外掛,舊版更名 Spectra Legacy、新版改稱 Spectra Blocks,兩者互不覆蓋也不會自動互相轉換,裝錯一個後續教學步驟都會對不上。

新網站該裝新版 Spectra 還是舊版?

新站建議直接安裝 Spectra Blocks,因為官方新功能只會出現在新架構上;已經在用舊版 Spectra Legacy 的站台,除非某個舊版專屬區塊在新版找不到替代做法,否則不必急著搬家。

Spectra 的 Container 區塊做什麼?

Container 是新版排版的地基,讓任何區塊自由排列並可無限層巢狀嵌套,支援 Flexbox 與 Grid 兩種排列邏輯,還能依桌機、平板、手機分別設定不同版面。

Modal 和 Popup Builder 有什麼不同?

差別在誰按下開關:Modal 是讀者點了專屬按鈕才跳出的彈窗,主動權在讀者;Popup Builder 則依站台設定的觸發條件(如進站幾秒、捲動位置)自動跳出,主動權在你手上。

使用 Zip AI 生成功能需要付費嗎?

核心區塊本身完全免費,但要用 Zip AI 生成功能得另外安裝並連接 ZipWP 帳號、消耗額度,即使付費版 Spectra Blocks Pro 使用者也要另外計算額度,並非買了 Pro 就能無限次生成。