Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

Oxygen vs. Elementor: 兩種頁面編輯器比較

最近因為公司內部的專案,為了要應付同事高度客製化的版面,因此重新使用了 Oxygen 這款 Site Builder。想起前陣子有人在小聚中提過類似的問題,所以趁著最近重新接觸 Oxygen 的機會,重新比較兩個產品。

核心差異

Oxygen 最核心的運作邏輯,在於「停用佈景主題」,所有與佈景主題有關的機制在使用 Oxygen 的時候必須要特別小心,有可能會導致無法預期的結果。

在使用 Oxygen 時,平時在網站上看到、透過 functions.php 來進行的客製化,都會因為停用佈景主題,必須改用外掛的形式撰寫,提升了 Oxygen 客製化的技術門檻。但由於 Oxygen 內建 PHP Code 的區塊,因此對於部分客製化的內容來說,也減少了需要更動 functions.php 的狀況。

Oxygen 和 Elementor 一樣,可以匯入官方預製的版面配置。這些版面配置,最後會以短代碼 (shortcode) 的形式匯出,獨立於佈景主題外,因此在停用 Oxygen 外掛後,系統會自動回復成預設主題。

相較於 Oxygen,Elementor 則與佈景主題並行。佈景主題透過匯入預設版面配置的方式,將已經調校好的區塊內容匯入網站中,這個步驟雖然一樣是將頁面設定以短代碼儲存,但這些內容可能與當前的佈景主題有連動,因此在停用 Elementor 外掛後,可能也會影響佈景主題。

管理方便性

OxygenElementor
全站樣式設定除了介面設定一般樣式外,
可透過 Stylesheet 與 Selector 管理全站樣式
從 [自訂] 中選擇全站設定,
已定義常用的元素

Oxygen 與 Elementor 都可以針對個別頁面的物件進行視覺化的樣式調整,然而在全站樣式的管理方式則有所差異。

Elementor 定義全站樣式的方式,除了透過 WordPress 的 [自訂] 介面,針對已定義的常用樣式 (H1 ~ H6、文章、按鈕) 外,在 Elementor 的頁面編輯器中,也提供 Design System 與 Theme Style 兩種方式,來定義全域樣式。Oxygen 則需要自行透過 Stylesheet 與 Selector 的方式重新定義這些樣式。

由於 Elementor 預先定義了全站樣式,因此可以比 Oxygen 更快的得到網站雛形。而 Oxygen 對於後續的樣式調整具有較大的彈性。

對 Gutenberg 支援

Oxygen 透過擴充程式的方式(非 Basic 方案內建,需額外加價升級)與 Gutenberg 相容,讓具有編輯權限,而不具有網站管理員權限的使用者,得以透過 Gutenberg 編輯器修改頁面內容。

相較之下,Elementor 則是「全有」或「全無」。

社群資源

OxygenElementor
主要社團人數12,55660,389
有中文社團有 (暫時無內容)
Google 搜尋結果408 萬821 萬

從上表就可以看得出來,Oxygen 的社群資源明顯比 Elementor 少很多,有部分原因也是 Oxygen 的操作介面並沒有如同 Elementor 般,真正做到拖曳 (drag-and-drop)。許多諸如投影片輪播 (slider) 的功能,相較 Elementor 也較為陽春。

對於初學者而言,Elementor 的學習門檻較低。

價格

截至寫文章的當下 (2020/04/14) 為止,Oxygen 與 Elementor 各自的價格如下:

OxygenElementor Pro
約期授權
(Subscription)
終身授權年約
價格
(USD)
99 (基本)
149 (WooCommerce 支援)
169 (Gutenberg 支援)
49 (單一網站)
99 (3 站授權)
199 (1,000 站授權)

一個讓我個人會選擇 Oxygen 而非 Elementor Pro 的最大誘因,在於授權的方式。比起約期授權,我更偏向購買終身授權。不過終身授權是跟廠商對賭誰活得比較久就是了。

迷思破解:Elementor 適合設計師,Oxygen 適合工程師?

答案當然是否定的。

不論是 Elementor 或是 Oxygen,最主要的工作在透過視覺化的使用者介面,幫你快速勾勒出網站的頁面架構,不需要再透過逐一修改佈景主題內的檔案。也因此,在選擇頁面編輯器的時候,要考慮的都還是「這項工具能不能符合我目前的工作流程」。

如果你要用最短的時間,呈現出一個好像還可以的網站,那作為學習門檻較低的 Elementor,是個比較好入門的選項;如果你的頁面需要高度的客製化,並且希望在外掛停用後,網站受到的衝擊比較小,那 Oxygen 不僅可以幫助你進行非常細部的調整,透過「停用佈景主題」這個強硬的手段,也可以避免在移除外掛時,造成原本佈景主題出現無法預期的錯誤。

最後:使用任何編輯器一定要注意

千萬不要用頁面編輯器對「頁面」以外的單位進行編輯。不論是文章,或是自訂文章類型 (post type)。頁面編輯器的目的在於勾勒出框架,而不是撰寫內容。

參考資料

Eric Chuang
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料