Holly

為了一項工作測驗,久違地重新碰了 Elementor 來製作網站。這份測驗是用 WordPress 加上 Elementor,來仿遊樂園網站的首頁,當然這個網站不會正式上架,主要只是測試我能不能看著原本的網站,把首頁的區塊、圖片、卡片輪播、固定式選單,以及手機版配置重新做出來。

%E7%B6%B2%E7%AB%99%E7%B6%93%E9%A9%97 e1785303759105

我已經很多年沒有認真使用 Elementor,畢竟在前輩的影響下,我一直偏好區塊編輯器,但我也不覺得 Elementor 特別難用,當時會聽從建議放棄它,主要是因為它實在太吃資源。

那時候我只有筆電,在 Elementor 編輯頁面時,常常卡到讓人煩躁,在相關小聚當中提出來,發現唯一解法就是換台電腦,但這方法短期內不太可能執行,加上由於最初是使用 Avada 佈景主題來架設網站,然這主題肥大到網站前台都跑不太動,猶豫許久後才狠下心整套換掉。

這段經驗讓我對太耗資源的軟體都有點排斥,於是相對輕量的區塊編輯器成為我最佳選擇,也就這樣一路使用到現在。故當這次重新打開 Elementor 實際重新摸過一輪後,才發現以前感受到的問題是「太胖」,然這次看到的問題卻是:它的問題不只吃資源,實際操作也沒有我想像中方便。

不能否認,Elementor 確實有它的優點,它可以透過拖拉元件,很快地把版面架起來,也能在不需要撰寫太多程式碼的情況下,做出一些看起來比較華麗的效果。對第一次接觸 WordPress 網頁設計的人來說,Elementor 的確很容易讓人產生一種「原來做網站沒有那麼困難」的感覺。

可是等到真的開始製作一個比較完整的頁面,就會發現「可以快速做出畫面」與「實際上好不好用」,完全是兩回事。

免費版處處受限,想補個功能卻可能得裝整套外掛

93867238 297b 4488 bf3b 0939a6d88f1c e1784742059512

這次實際製作時,我很快遇到 Elementor 最讓人煩躁的地方,就是基本的圖片、文字、按鈕與欄位排列這部分當然沒有問題,但只要需要稍微完整一點的功能,例如較複雜的輪播、導覽選單、動態內容,或某些版面與互動效果,就會發現這個需要 Pro,那個也需要 Pro。

不買 Pro,當然還是可以設法繞過去,但問題是在 Elementor 的生態裡,很難像使用 WordPress 區塊編輯器那樣,缺少一個功能,就單獨找一款小型外掛把它補起來,在 Elementor 免費版中缺少的功能,卻沒辦法像 WordPress 區塊編輯器那樣,缺一補一。

通常會遇上的實際情況是,搜尋到的˙往往不是一款單純解決單一問題的小外掛,而是另一整套 Elementor 擴充套件,這套擴充可能附帶數十種元件,但你真正需要的,也許只有其中一個,結果就是為了補上一塊小拼圖,必須把整箱拼圖一起搬進網站。不安裝,想要的效果做不出來;安裝了,又多出一套大型外掛需要更新與維護,這真的很煩。

這次重新使用 Elementor 後,我也開始理解,為什麼不少有開發能力的工程師,在 Elementor 遇到缺少的小功能時,不會再直接導入另一整套 Elementor 擴充,而是乾脆自己撰寫程式碼處理。以前聽到這件事時,只是覺得工程師本來就會寫程式,可能純粹這樣比較快吧,而現在我才理解,這不只是一種工作習慣,更是整體的衡量。

因為一整套擴充外掛帶進來的,不只有那個想要的功能,還包括額外的 CSS、JavaScript、版本更新、相容性、資安問題,以及未來可能發生的外掛衝突。如果本身具備開發能力,與其為了一個小效果再導入一套大型系統,不如直接寫一小段 HTML、CSS,必要時再加入 JavaScript,只完成網站真正需要的部分,這樣反而比較乾淨。

雖然自己寫程式不代表完全不需要維護,但至少不用再依賴另一整套大型外掛,也不用每次 Elementor 或擴充套件更新時,都擔心原本的效果是否會突然失效。

最諷刺的是,Elementor 原本最吸引人的賣點,就是不需要寫 Code 也能做網站,可是當網站的需求逐漸增加,或開始在意效能與維護成本時,最後卻很容易重新回到 HTML、CSS 和 JavaScript,有時候自己寫,還比不斷安裝 Elementor 擴充外掛簡單。

Elementor 與區塊編輯器,是兩種完全不同使用生態

40a3776b 5ed0 4b09 9b7d 0e49b306d6e8 e1784742073447

Elementor 與 WordPress 原生區塊編輯器差異很大的地方,在於兩者形成了不同的外掛生態。區塊編輯器本身就是 WordPress 核心的一部分,也建立在開放的開發架構上,開發者如果只想補上一項功能,可以直接製作一個獨立區塊或小型外掛,不必依附另一套頁面編輯器運作。

如果某項功能有足夠多人需要,市場上甚至可能同時出現好幾款功能相近的外掛,因此當區塊編輯器缺少某個功能時,通常比較容易找到規模較小、用途單純的解決方案。當然現在也有不少區塊外掛愈做愈龐大,一安裝就是一整套區塊,不過整體來說,選擇通常仍然比較多,也比較有機會找到只處理單一需求的外掛。

Elementor 的外掛生態則不太一樣,開發者同樣能製作額外的小工具或擴充功能,但這些產品必須依附 Elementor 運作,能服務的對象也限於 Elementor 使用者,甚至第三方開發者除了要製作功能本身,也需要持續處理 Elementor 版本更新、API 與介面變動、相容性,以及免費版與 Pro 版之間的功能差異。

相較之下,只為一項小功能長期維護一款免費外掛,未必容易支撐開發成本。因此,Elementor 的第三方開發者更常把多個小工具、版型與附加功能整合成一套 Elementor Addons,再透過免費版提供基本功能,進階功能另外付費的方式經營。

這使 Elementor 的擴充生態逐漸以大型元件包、Freemium 套件與付費外掛為主,專門只補上一項小功能,而且能長期維護的免費外掛,相對比較少見。

對使用者來說,最直接的差異就是:區塊編輯器缺少一項功能時,較有機會只安裝一款小型外掛;Elementor 缺少一項功能時,卻常常必須安裝一整套元件,甚至升級付費版本,才能取得真正需要的那一項功能,結果就是想補一個小功能時,經常得把另一整套系統拉進網站裡,網站就是這樣一點一滴的慢慢肥起來的。

以我現在的需求來說,我還是覺得區塊編輯器更適合文字型網站,只要選擇一套真正以區塊編輯器為主要開發方向的佈景主題,主題通常就會附帶一些自家開發的區塊,文章列表、資訊框、按鈕、欄位、卡片與基本版面配置,大多已經可以完成。

如果主題沒有我需要的功能,也可以另外尋找具有類似用途的區塊外掛,再搭配一點 HTML 或 CSS 微調,這種方式呈現出來的效果,不一定像 Elementor 那麼華麗,但對以文章為主的網站而言,通常已經很夠用了,且網站經營得愈久,愈覺得網站本身應該愈簡約愈好,我想要的是一個可以穩定寫文章的網站,而不是一個三不五時就要開始維護的網站。

不只舊筆電會延遲,現在連桌機的瀏覽器視窗也卡了

b4ef165a 0493 4b66 9e26 fc1c251f4db8 e1784742094531

除了功能限制之外,這次讓我深有所感的就是 Elementor 另一個多年來沒有改變多少的問題,就是它依然很吃資源。

不過,這次並不是完全跑不動,有幾個頁面每次開啟 Elementor 編輯器時,都要停在載入畫面轉很久,前面的操作雖然稱不上順暢,但至少還能繼續完成,然快到網站完成做測試時,其中一個瀏覽器視窗突然變得非常卡頓。

因為我使用雙螢幕,當時其中一個螢幕上的網頁幾乎停住,連滑鼠移動與頁面操作都變得非常遲鈍,卡到我一度以為整台電腦當機了;幸好另一個螢幕上的視窗仍然可以正常使用,代表主機沒問題,應該是 Elementor 所在的瀏覽器視窗或分頁卡住,而不是整台電腦真的又不行了。

只是這次的狀況,還是讓我有點害怕。現在使用的已經不是當年的舊筆電,而是一台配備 32GB 記憶體的桌上型電腦,雖然沒有獨立顯示卡,但以一般 WordPress 網頁製作來說,這樣的設備並不算太差,結果只是開啟一套頁面編輯器,瀏覽器卻能卡到像電腦即將當機一樣,確實再次讓我感受到 Elementor 對系統資源的需求並不低。

當然,我無法確定當下究竟是哪個元件、外掛、瀏覽器設定或頁面內容出了問題,因此不能把所有責任全部歸到 Elementor 身上,但至少在這次實際製作過程中,它的載入速度與編輯穩定性,確實沒有讓我覺得比多年前輕盈多少。

我也知道,Elementor 網站並不是完全無法優化,透過主機設定、快取、圖片壓縮、延遲載入、程式碼精簡,以及調整 CSS 和 JavaScript 的載入方式,確實可以讓 Elementor 網站維持不錯的效能。可問題也出在這邊,調校本身就是需要一定的技術能力,才知道該從哪裡檢查,又該如何判斷問題究竟出在主機、外掛、版面、程式碼,還是 Elementor 本身。

也就是說,它表面上是一套讓不懂程式的人也能快速製作網站的工具,但當網站開始變慢、元件互相衝突,或更新後版面出現異常時,最後往往仍需要依靠技術能力處理。它就像一項外表漂亮、展示效果也很吸引人的商品,剛開始容易讓人上手,也能很快做出成果,但好不好養、維護成本高不高,以及能不能長期陪著網站成長,則是另一回事。

只能說,Elementor 的成功,確實再次驗證了什麼叫作「站在風口上,豬都能起飛」,更何況 Elementor 本身並不是一項毫無實力、只靠運氣走紅的產品,它確實解決了當時許多 WordPress 使用者的痛點,且它出現的時間點也實在太好了。

當時 WordPress 區塊編輯器才剛推出,功能仍不成熟,網站編輯器、佈景主題與版面功能也經常綁在一起,一般使用者如果不想受到佈景主題限制,往往只能自己寫程式,能選擇的做法非常有限,然 Elementor 剛好在這個時間點出現,提供拖拉式設計、即時預覽,又能在一定程度上獨立於佈景主題之外,自然很快受到市場歡迎。

而且它的入門門檻確實不算高,像我這次也沒有重新把所有教學影片看過一遍,而是直接開始製作,摸索一段時間後,大致就能理解它的操作方式,能讓使用者在短時間內看見成果,是 Elementor 的最大優勢。

但網站真正開始長期使用後,還要面對效能、相容性、更新風險與維護成本,這些問題往往不是剛開始拖拉版面時就能立刻看見的。因此會操作,不代表實際使用起來就真的順手;能夠快速把畫面做出來,也不代表後續修改、除錯與長期維護同樣輕鬆。

免費版限制多,那就升級 Pro?但重點是為什麼要買?

784336d3 810a 40f9 be45 88c797885dfc e1784742111663

寫到 Elementor 免費版功能不足時,我大概也猜得到,有些人會直接說:「那就買 Elementor Pro 啊」,但問題是,我為什麼要買?

我本來就沒有要製作一個充滿動畫、動態效果、特殊輪播與複雜互動的網站,也沒有非得依靠 Elementor 才能完成的需求。我的網站主要用途,就是寫文章、整理內容與長期保存資料,以這類需求來說,WordPress 原生區塊編輯器,加上一套以區塊編輯器為核心的佈景主題,通常就已經很夠用了。

許多主題本身還會附帶自家開發的區塊,例如文章列表、卡片、資訊框、按鈕、欄位配置與基本輪播,即使主題附帶的功能仍然不足,市場上也有不少免費或價格相對合理的區塊外掛可以補充。既然如此,我為什麼要先購買一套佈景主題,再額外花錢購買 Elementor Pro,只為了完成其他工具原本就能做到的事情?

更何況,付費版也不代表問題全部消失,Elementor Pro 的確比免費版功能完整,但功能愈多,牽涉的網站範圍也愈廣,動態內容、Theme Builder、表單、Popup、動畫與各種第三方整合,都可能受到版本更新與相容性影響,一旦出現相容性問題,牽動的可能不只是某個小元件,而是頁首、頁尾、文章模板、表單,甚至整個網站的頁面結構都會出問題,一出問題最嚴重就是網站掛掉,俗稱網站爆炸。

矛盾的是,免費版因為功能較少,結構相對單純,通常也比較不容易出現嚴重的相容性問題;即使更新後發生異常,影響範圍有時也沒有那麼大。因此在升級 Elementor Pro 並不代表網站,從此就會更省事,只是解除免費版的功能限制,同時也可能帶來更多元件、相依性與後續維護問題。

所以對我來說,重點從來不是捨不捨得付費,而是新增的功能,是否值得交換隨之而來的維護成本與風險。我記得早在 2019 年,最後幾次參加 WordPress 小聚時,就曾聽到工程師提醒:Elementor 更新後最好先觀察一段時間,不要看到新版本就立刻按下更新,因為可能出現相容性問題。

結果多年後,最近再次參加 WordPress 小聚,同一位工程師依然給出差不多的建議:Elementor 更新最好至少延後一至兩個星期,先觀察是否出現明顯災情,再決定是否更新,多年過去了,這項建議居然還是一樣。

畢竟 Elementor Pro 的功能比免費版更多,牽涉的元件與使用情境也更廣,當功能愈多,更新時需要測試的組合自然愈複雜,有些問題可能只會發生在較少人使用的功能、特定外掛組合,或某種版面設定中。這些狀況未必能在開發團隊的測試環境裡全部重現,但如果某個網站剛好使用了那組功能,更新後就可能出現版面異常、元件失效,甚至無法正常編輯的情況。

因此,使用 Elementor 的網站在更新前確實需要更加謹慎。除了先完成網站備份,有條件的話,最好先在測試環境更新並檢查重要頁面,確認編輯器、版面與主要功能都能正常運作後,再套用到正式網站。

不過,這套謹慎的更新流程,和我自己過去的習慣其實差很多。我的網站通常只會在外掛推出新版後稍微等一兩天,確認沒有傳出明顯災情,就直接按下更新,很少特別建立測試環境逐項檢查,這習慣讓熟悉的工程師前輩知道,我都這樣直接更新外掛,他當時很驚訝地問我:「你不怕網站爆炸嗎?」

我那時心裡還在想,為什麼會爆炸?我一直都是這樣更新,也沒有遇過太嚴重的問題,但這次重新接觸 Elementor 後,我突然有點理解他的意思。倒不是我特別勇敢,也不是外掛更新本身沒有風險,而是我的網站架構原本就相對單純。

頁面主要使用 WordPress 原生區塊編輯器製作,這幾年也一直有意識地減少不必要的外掛與功能,網站裡需要彼此配合、互相依賴的元件沒有那麼多。相依性愈少,更新時可能產生衝突的組合自然也比較少,即使某款外掛更新後出現問題,影響範圍通常也比較容易確認與處理。

所以我過去能夠比較放心地更新,並不是因為所有 WordPress 外掛都很穩定,而是我的網站本來就沒有建立在一套高度複雜、彼此緊密連動的系統上。重新使用 Elementor 後,我才真正理解,當一個網站的版面與功能大量依賴頁面編輯器及其附加元件時,每一次更新背後需要承擔的風險,確實會和單純使用區塊編輯器的網站不太一樣。

以前網站曾經安裝五十多款外掛,現在已經慢慢刪減到三十款以下,雖然外掛數量與網站速度並不是單純的正比關係,不是安裝五十款外掛,就一定比安裝二十款更慢,真的有影響的是外掛本身的品質、功能規模、資料庫操作,以及它會在前台載入多少程式碼,一款寫得好的小外掛,可能幾乎不會影響網站;一款非常肥大的外掛,也可能比十款小外掛更重。

但是外掛數量愈多,發生衝突時需要排查的範圍一定愈大,二十款外掛與五十款外掛,可能互相衝突的組合不同,出現問題時需要逐一停用測試的時間也不同,如果一項功能沒有實質幫助、沒有改善閱讀體驗,也沒有帶來足以讓我保留的價值,那它就沒有存在的必要。

在這種前提下,從五十多款外掛一路刪減到三十款以下,發生衝突的機率自然也降低不少,再加上我的主機每天都有自動備份,即使更新後真的出現問題,通常也還有還原的退路,因此我才比較敢直接更新,但如果是 Elementor,我真的不敢用相同的態度處理,風險真的完全不同。

Elementor 不是不能用,只是後續維護會需要一定技術

b8b92672 8943 4278 b127 f32fe878be93 e1784742436953

雖然劈頭念了一頓 Elementor,不過不認為 Elementor 完全沒有價值。如果本身是在製作商業網站、企業形象網站、產品頁面、活動頁面,或專門替客戶架站,Elementor 的確有它的市場,許多客戶花錢製作網站,期待的就是比較華麗的版面、動畫、輪播、互動卡片與特殊效果。

對網站製作公司而言,使用 Elementor 可以加快製作速度,也比較容易迅速將畫面做出來,交給客戶確認,購買 Elementor Pro、相關擴充外掛與維護服務,也可以視為商業成本的一部分,且專門公司一定有工程師、設計師,或完整團隊可以負責版本測試、網站備份、效能優化與問題排查,即使更新後出現問題、網站速度需要調整,或某項功能必須重新處理,也有對接單位可以聯繫處理,那麼使用 Elementor 當然沒有問題。

但如果今天只是替自己架設網站,尤其主要目的只是寫文章,我真的不推薦使用 Elementor,因為它很容易讓人把太多時間花在網站本身。

很多人從痞客邦或其他免費平台搬出來,是因為想找一個能夠好好寫文章,也能長期保存作品的地方,既然架設網站的主要目的就是寫文章,那麼網站本身就應該盡量穩定。如果搬到 WordPress 後,又選擇了一套需要花很多時間維護、更新、調整速度與排查問題的頁面編輯器,最後每天都在處理網站,反而沒有時間寫文章,那就真的本末倒置了。

如果沒有工程師團隊,自己的技術能力也不足以隨時處理更新衝突、效能問題與頁面異常,我會建議不要輕易把網站的核心架構綁在 Elementor 上。對沒有技術團隊的個人網站而言,選擇一套結構簡單、容易維護的架構,可能比一開始把網站做得多華麗更加重要。

有時候不選擇 Elementor,不是因為不願意花錢,也不是否定它的價值,而是不希望一套過於複雜的頁面編輯系統,最後把原本只想好好寫文章的站長,逼得像半個工程師一樣,不斷處理更新衝突、效能問題與版面異常,只為了讓網站能夠正常運作、順利發布下一篇文章。

這次重新使用 Elementor 後,我仍然承認,它和當年一樣,可以很快製作出漂亮的頁面,入門門檻也不算高。對商業網站、活動頁面、形象網站與接案工作而言,它確實有很明確的優勢,但如果今天只是想長期經營一個以文字與內容為主的個人網站,我的答案仍然很直接:Elementor 能不碰,就不要碰。

因為架設網站的目的,到底是為了寫文章,還是每天研究如何讓編輯器不要爆炸?

如果一開始架站,只是想找一個可以安心寫文章的地方,那麼網站架構最好愈簡單、愈單純愈好,畢竟容易做出漂亮畫面、初期容易操作,以及後續容易維護,往往很難同時兼得,能夠快速做出漂亮頁面的工具,背後可能伴隨較高的效能負擔與維護成本;結構簡單、容易維護的網站,視覺效果可能沒有那麼華麗;而想要同時兼顧畫面、功能與穩定性,通常就必須投入更多技術、人力與預算。

這也是為什麼商業網站通常比較有條件使用 Elementor。不是因為 Elementor 只適合商業用途,而是商業網站往往比較有能力承擔它背後的設計、測試、開發與維護成本。對個人網站而言,真正重要的是在三年、五年之後,網站仍然存在,文章依舊在更新,站長也沒有讓持續累積的維護工作消耗到最後放棄經營網站。

小結-本來只是想吐槽 Elementor,一如既往的難用

eb274645 d186 421e ad91 55130744b499 e1784775623517

其實這篇文章一開始只是想放在日常隨筆裡,單純記錄一次久違使用 Elementor 後的吐槽。沒想到越寫越多,才發現這次經驗牽涉的已經不只是「好不好用」,還包括免費版限制、Pro 版生態、外掛相容性、硬體資源,以及網站後續維護等問題,最後也就從一篇日常抱怨,慢慢變成了完整的使用心得。

我剛好經歷過 Elementor 剛出現的年代,當時 WordPress 區塊編輯器才剛起步,不只功能陽春,使用體驗也不成熟,外界普遍不看好,甚至連 WordPress 官方的發展方向都經常受到質疑。相較之下,Elementor 幾乎是壓倒性地好用,不需要碰太多程式碼,就能直接拖拉版面、調整細節,它能迅速走紅,是有其實力的,不光是站在風口上。

但多年過去後,事情並沒有一路朝著 Elementor 完全取代區塊編輯器的方向發展。區塊編輯器雖然沒有像 Elementor 那樣一夕爆紅,卻持續穩定成長,逐漸發展出自己的佈景主題、區塊外掛與設計工具,它的世界越來越完整,也讓我重新看到開源生態長期累積後能帶來的豐富程度。

也正因如此,這次再次使用 Elementor 的經驗才顯得格外強烈。

這麼多年過去了,某些 Pro 版的關鍵元件,在免費版中依舊很難找到真正完整的替代方案,想補上一個功能,往往不是安裝一個小工具就能解決,而是得再裝進一整套 Elementor 擴充外掛,只是功能的確增加了,但更新、相容性、資源占用與後續維護也會一起增加。相較之下,區塊編輯器雖然不一定每個效果都能立刻做到,卻比較少出現為了一項功能,不斷把網站綁進更多外掛生態的情況。

同時它家的效能問題也沒有讓我改觀。以前使用 Elementor 時,只知道它很吃資源,這次甚至從筆電換到規格更好的桌機,操作時依舊不時感到卡頓,瀏覽器視窗甚至一度像當機,這段經歷讓我忍不住懷疑,到底需要多高的硬體規格,才能讓 Elementor 運作得像區塊編輯器一樣順暢。

所以,Elementor 當然不是不能用。它仍然能快速製作出視覺效果完整、版面自由度高的網站,對公司網站、行銷活動頁,或有專人負責設計與維護的團隊來說,確實有它的價值,但對沒有工程師協助、需要自己長期維護網站的個人站長而言,它的價值就沒那麼高了。

總之,我也沒想到一次工作上的製作經驗,會讓我重新碰到多年未用的 Elementor,還因此有感而發寫出這麼長一篇文章,更沒想到多年之後,我對它的使用感受不但沒有變好,反而因為已經習慣區塊編輯器的輕量與穩定,更清楚看見 Elementor 背後需要付出的成本。

以前曾看過有人說,Elementor 是他只會在公司使用的工具。現在我大概能理解這句話了,未來我若還會再次使用 Elementor,恐怕真的只會是因為公司專案需要,而不會是我主動替自己的網站選擇它。

*本文文字皆由筆者(yanshoto.com)原創撰寫,著作權歸作者所有。未經授權,請勿全文轉載、重製、改作、重新發布或作為商業用途,感謝您的理解與尊重。

其他人的相關心得

相關延伸文章