Elementor vs Gutenberg – 2021 年攤牌：哪個頁面構建器更好？
已發表: 2021-11-02我們甚至能夠記住 WordPress 在沒有頁面構建器的情況下運行的時代嗎？
時光飛逝，技術進步，功能非常有限的 WordPress 現在只是一個模糊的記憶，這要歸功於 WordPress 主題的功能，尤其是 WordPress 插件，例如頁面構建器。
在本文中，我們將介紹OceanWP 用戶中最受歡迎的兩個頁面構建器——Elementor 和 Gutenberg 。 我們將在此處提供的信息不僅基於我們個人的意見和經驗，還基於我們每天收到的 OceanWP 用戶的反饋。
讓攤牌開始吧！
什麼是元素？
平均評分為 5 次中的 4.7 次和 5+ 百萬次活躍安裝– 毫無疑問： Elementor 是 WordPress 用戶中最受歡迎的頁面構建器。
Elementor 於 2016 年首次推出，並迅速佔據領先地位。 它幾乎立即流行的原因是Elementor 的視覺拖放構建器和通常的 WordPress 文本編輯器（古騰堡時代之前）之間的區別。
WordPress 用戶終於獲得了一些與 Microsoft Word 不同的東西——一個靈活的編輯器，讓他們的創造力大放異彩，這一切都歸功於各種小部件，這些小部件減少了對各種自定義編碼或自定義 HTML/PHP/CSS 模板創建的需求。
而且，如果您正在尋找一些新的 Elementor WordPress 網站模板？ 查看我們最新的 HubSpot 系列。
在此 Elementor 與 Gutenberg 比較中，我們將僅討論 Elementor 免費版本的功能。
什麼是古騰堡？
Gutenberg，也稱為塊編輯器，是默認的 WordPress 頁面/帖子編輯器。 它於 2018 年首次推出，使用 WordPress Bebo 5.0 版本。
WordPress 團隊了解社區對更高級和更直觀的默認編輯器的需求，以及網站建設的趨勢。 這就是古騰堡編輯器的誕生方式，並取代了它的前身——經典編輯器。
儘管 Gutenberg 尚未發展到最全面，預計在未來幾年將達到頂峰，但 WordPress 團隊兌現了他們的承諾 - 一個簡單但功能強大的可視化編輯器，它從內容編輯器轉變為頁面構建器。
而且，如果您正在尋找一些 Gutenberg WordPress 網站模板，請查看我們最新的使用 Gutenberg 的 WooCommerce 模板集合。
Elementor vs Gutenberg：比較
Elementor vs Gutenberg：易用性
任何有幸使用這兩種工具的 WordPress 用戶都會告訴你一些我們也同意的事情——Elementor 贏得了易用性比較。
由於其巨大的靈活性和移動性，Elementor 非常類似於高級圖像編輯工具。 只需選擇您需要的小部件並將其放置在內容中的任何位置 - 就是這樣。
需要創建部分？ 還是具有不同列數的部分？ 為不同的設備選擇不同的設計或圖像？ 也不是問題。 Elementor 真正允許您設置整個內容，直到完美。 更不用說網站設計師喜歡的各種動畫（即使速度測量工具不是）。
另一方面，古騰堡是一個乾淨簡單的頁面構建器。 與 Elementor 不同，Gutenberg 不提供廣受歡迎的拖放功能（至少目前還沒有）。 即使您可以輕鬆添加和移動塊，但事情並不像 Elementor 那樣簡單。 除此之外，對塊進行造型可能會有些挑戰，特別是對於那些習慣了 Elementor 提供的豪華環境的人來說。
Gutenberg 作為默認的 WordPress 編輯器已經 3 年了，但仍有人不願意嘗試。 這些用戶不喜歡任何頁面構建器——他們喜歡經典（內容）WordPress 編輯器勝過其他任何東西。
由於我們都是習慣性動物，我們發現僅僅因為經典編輯器更易於使用而將 Gutenberg 標記為不直觀且難以使用是不客觀的。 但是，我們可以告訴你一件事——一旦你用 Gutenberg 創建了一篇文章並克服了最初的學習曲線，你將繼續使用它。
Elementor vs Gutenberg，選擇哪一個？ 答案總是 OceanWP，因為我們同時使用
PS Gutenberg 的積木之一也是 Classic 積木，因此沒有理由使用其他插件來使用老式功能
Elementor vs Gutenberg 易用性總結
Elementor 提供了先進的小部件和編輯工具，使其比 Gutenberg 更易於使用，但一旦出現使網站頁面響應的需求，它就會變得同樣具有挑戰性。
古騰堡有自己的學習曲線，您可以輕鬆克服。 了解 Gutenberg 的工作原理將幫助您管理所有其他頁面構建器，包括 Elementor。
Elementor vs Gutenberg：特點
Elementor 有小部件，Gutenberg 有塊——就這麼簡單。
然而，當指代使用組合元素的功能時，術語小部件在 WordPress 中已經使用了很長時間。 例如，帶有標題的圖像、具有不同查詢選項的博客文章列表等。
Elementor 小部件的功能類似——通過提供具有分組選項和多個查詢和样式設置的功能。 自然地， Elementor 小部件提供了比 WordPress 小部件（外觀 > 小部件）更多的選項和多功能性。
Gutenberg 從非常基本的塊開始，例如段落塊、圖像、視頻等。儘管塊也提供樣式選項，但這些功能不像 Elementor 那樣豐富和直觀。 但是，公平地說，在用戶友好的設置方面，Elementor 絕對領先——不僅與古騰堡相比，而且與幾乎所有可用的頁面構建器相比。
另一方面，“過於簡單”的塊問題可以通過一些額外的 Gutenberg 插件輕鬆解決，這些插件提供具有更多功能和用戶選項的高性能塊。
說到這裡，您有沒有機會探索我們的最新產品——Ocean Gutenberg Blocks？ 如果您是客戶，則此插件已在您的儀表板中可供下載和使用。 如果您考慮成為專業人士，請查看我們的最新報價。
Elementor vs Gutenberg 功能總結
Elementor 使用小部件，Gutenberg 使用塊。 Elementor 的免費版本帶有許多高級小部件，每個網站設計師都可以使用它來構建一個很棒的網站。 為了獲得更高級的塊，Gutenberg 需要額外的插件- 例如 Ocean Gutenberg Blocks。
Elementor vs Gutenberg：性能
您可能注意到我們故意使用術語“性能”而不是“頁面速度”。
原因很簡單——大多數在線工具測量的網站分數並不反映網站的速度。 除此之外，網站速度依賴的因素太多了。 可悲的是，網站性能的成功不僅僅取決於您正在運行的主題或插件。
更不用說，網站所有者通常會忘記這些工具並不能反映整個網站的狀態——只有分配給測試的 URL 的頁面。 簡而言之，像對待主頁一樣對待所有網站頁面。
但是，主題和插件的質量會對網站的整體性能產生重大影響。 頁面構建器也是如此。
WordPress 設置比較
在開始之前，我們想簡要介紹一下我們如何構建 WordPress 模板。 這樣一來，Elementor vs Gutenberg 對比的結果就可以完全理解了。
WordPress 模板是示例網站內容（頁面、博客文章、預建和样式）。 這些模板有助於加快構建過程或激發靈感。 對於 Ocean 網站模板，當使用 Elementor 頁面構建器時，它僅用於主頁（主頁、聯繫人、關於等）。
所有其他頁面，例如博客文章、商店、產品頁面、存檔頁面都是由 OceanWP 主題管理的默認 WordPress 頁面。
對於這個小實驗，我們使用了我們的兩個 WordPress 網站模板：議程和古騰堡議程。
帶有 Elementor 的議程 WordPress 模板 
帶有古騰堡的議程 WordPress 模板
乍一看，只看圖像，您能分辨出這兩者之間的區別，並猜出哪個是使用 Elementor 構建的，哪個是使用 Gutenberg 構建的？
兩個網站都位於同一台服務器上，並且具有完全相同的配置：
- 軟件：Apache/2.4.51 (Unix)
- MySQL：（Ubuntu）v5.7.36
- PHP：7.4.24
- WordPress：5.8.1
- WordPress (PHP) 內存限制：256M
- WordPress 主題：OceanWP （眨眼眨眼）
兩個網站都有大部分共同的 WordPress 插件：
- 海洋額外
- 海洋產品分享
- 海洋社交分享
- WooCommerce
- TI WooCommerce 願望清單
- WPforms 精簡版
- 海洋粘頁眉
- WP Rocket（不用於創建 WordPress 模板）。
議程 WordPress 模板：
- 元素
- 海洋元素小部件
古騰堡議程 WordPress 模板：
- 海洋古騰堡街區
如您所見， Gutenberg 版本不需要任何額外的插件即可運行。 您只需要默認的 WordPress 塊編輯器 – Gutenberg 。
Elementor vs Gutenberg：Google Page Speed Insights
對於所有跳過部分文本並直接來到這裡的人來說——重要的是要強調Google Page Speed Insights 不會測量網站速度。 相反，它通過考慮不同的因素對網站進行評分。
此外，同樣重要的是要承認分數不僅可能是誤報（分數低但網站速度快，反之亦然），而且它們通常不會描繪真實的畫面。 談到移動 PSI（Page Speed Insights）分數時， Google 會從使用手機瀏覽您網站的真實用戶那裡收集信息。
這意味著實際情況將隨著時間的推移而變得可見——而不是立即可見。 這也意味著我們巧妙地建議您不要在安裝 WordPress 或構建頁面時檢查您的分數並嘗試對其進行處理——這些信息是不准確的。
要全面了解有關網站性能和數據處理的數據收集是如何工作的，我們建議您查看 Google 員工的此回复。 沒有什麼比直接從源頭獲得答案更好的了。
儘管如此，我們確實理解分數對用戶很重要。 這就是我們與您分享結果的原因。
談到移動 PSI 分數，在 Elementor 與 Gutenberg 的比賽中，獲勝者是 Gutenberg 。
所有數據之間的差異非常明顯，並且有利於古騰堡。
最讓我們驚訝的結果是總阻塞時間（TBT）的差異。 對於 Elementor 構建的頁面，TBT 為 310ms，而 Gutenberg 構建的頁面上的 TBT 僅為 50ms 。
你能想像如果我們在正確上傳和設置 WP Rocket 之前優化網站上的圖像而不是運行默認設置會產生什麼結果？ 不要像我們一樣 -優化您的圖像並為您的網站找到最佳緩存設置。
在桌面 Elementor 與 Gutenberg 的比較中，儘管結果略微偏向 Gutenberg，但差異並沒有那麼大。 至少，不是根據 PSI。
這就是為什麼我們要轉向另一個我們經常向用戶推薦的工具——GTmetrix。
Elementor vs Gutenberg：GTmetrix 比較
GTmetrix 似乎對我們的 Agenda WordPress 模板的兩個版本——Elementor 和 Gutenberg 都很滿意。
但是，我們不能忽視Time to Interactive 和 DOM Interactive Time 之間的巨大差異——這兩個指標都支持 Gutenberg。
互動時間：Elementor vs Gutenberg ：912ms vs 408ms 。
DOM 交互時間： Elementor vs Gutenberg ：714ms vs 405ms 。
當談到 Elementor 與 Gutenberg Structure 比較時，GTmetrix 再次向我們展示了綠色掃描。
但是有一件事立即引起了我們的注意——DOM 大小。 同樣，結果有利於古騰堡。
避免過多的 DOM 大小：Elementor vs Gutenberg ：1251 個元素 vs 929 個元素。
無論您是否是 Gutenberg 的粉絲，您都必須承認，對於內容幾乎相同的頁面來說，減少 300 多個元素是一個巨大的勝利。 更不用說，這也是一個開箱即用的勝利。
總而言之，圖表已經說明了問題。 儘管性能和結構分數完全相同，但兩個網站都獲得了GTmetrix A 級、性能分數 100% 和結構分數 98% - 如果您是一個巨大的優化和性能愛好者。
從 GTmetrix 來看，事情是清晰的。 當談到 Elementor 與 Gutenberg的並排性能比較時，Gutenberg 是絕對的贏家。
但是，等一下。 這是否意味著 Elementor 不好，不應該使用？ 不，因為使用 Elementor 也可以實現您引以為豪的令人滿意的分數。
結果僅表明 Gutenberg 提供了即時、輕鬆和前衛的性能優勢，而對於 Elementor，您需要成為一名精明且負責任的網頁設計師。
Elementor vs Gutenberg 性能總結
我們的網站模板都沒有針對速度/分數進行優化，並且我們都使用默認的 WP Rocket 緩存設置。 Gutenberg 提供了更多開箱即用的性能優勢，並且與 Elementor 相比，一些指標差異非常大，尤其是總阻塞時間、DOM 大小、交互時間和 DOM 交互時間指標。
具有高級優化技能的經驗豐富的網站設計師遵循最佳網站建設實踐並使用適當的工具，使用 Elementor 獲得最佳速度或分數將毫無問題。
與 Elementor 網站結合各種附加 Elementor 插件相比， Gutenberg 支持的網站還需要更少的資源，主要是 WordPress 內存限制，才能順利運行。
Elementor vs Gutenberg：好處
關於 Elementor 與 Gutenberg 的好處比較，很難決定。
每個頁面構建器都有自己的優點和使用理由。 同樣，每個頁面構建器都有其缺點。 優點和缺點都可以是主觀的。
當然，我們都喜歡 Elementor，因為它具有拖放功能，但使用 Gutenberg 也沒有那麼難。
Elementor 的響應設置以及能夠隱藏基於設備的部分或元素或基於設備的完全樣式元素，是喜歡它的額外原因之一。 現在，同樣的功能會讓初學者在剛開始時感到氣餒和不知所措，因為他們意識到網站建設需要比過去在各種博客中閱讀更多的努力。
在用戶友好的使用和釋放創造力方面，我們投票給 Elementor 。
但是，當我們的用戶向我們詢問 Elementor 的替代品時，他們提到穩定性是需要更改的主要原因。 需要明確的是，即使像 Facebook 這樣的公司也會發生錯誤和錯誤。 而且，無論網站所有者和開發人員正在運行什麼設置，都必須負責任並遵循最佳實踐，以避免不便。 是的，我們正在討論在暫存區域進行備份或測試新更新。
事實上，即使是遵循這些做法的有經驗的用戶也會懷恨在心，因為 Elementor 的創新和變化往往使他們無法在一段時間內 [正確] 使用該工具。
談到古騰堡，作為開發人員，我們支持它的性能（前端和後端）、可訪問性和穩定性。 請注意，一些 Gutenberg 插件可以像其他非 Gutenberg 頁面編輯器一樣向 HTML 添加更多甚至更多的膨脹，因此請明智地選擇。
儘管古騰堡不像 Elementor 那樣對初學者友好，但我們絕對鼓勵初學者嘗試一下。 而且，我們的建議完全基於缺少一些需要更專業或經驗豐富的方法的高級功能（例如在響應模式下編輯和針對不同設備調整內容）。
也可以肯定地說，那些處理和學習如何處理古騰堡的人也將快速掌握所有其他頁面構建器- 包括 Elementor。
Elementor vs Gutenberg 的好處總結
Elementor 的響應選項和設置可以幫助任何人調整所有設備的網站設計，甚至在需要時進行不同的調整。 但是，一旦WordPress 初學者意識到網站建設需要的時間、精力和實踐比他們讀到的更多，這也是同樣的設置。
古騰堡一開始可能看起來很嚇人，完全不直觀，但實際上是一個了不起的學習起點。 克服 Gutenberg 將幫助每個人更好地了解所有頁面構建器。 此外， Gutenberg 提供了更多的穩定性、可訪問性、SEO 和整體性能優勢。
Elementor vs Gutenberg：哪個頁面構建器更好？
你知道他們在說什麼——一隻鞋不會適合每隻腳，但除非你先試鞋，否則你不會知道這一點。
有些用戶喜歡 Elementor，有些喜歡 Gutenberg ，背後有各種原因。 由於我們談論的是您的網站，因此必須找出適合您和您的網站需求的內容。
當我們的用戶在不影響網站穩定性、性能、SEO、可訪問性和許多對網站建設至關重要的事情的情況下向我們尋求有關使用 Elementor 的建議時，我們建議他們以與我們使用 Elementor 構建 WordPress 網站模板相同的方式使用 Elementor . 在需要具有吸引力和吸引力的主頁上使用 Elementor – 將其他所有內容留給 WordPress 和您的主題。
簡而言之，避免創建自定義存檔模板，特別是如果您不是一個精明的設計師或在整體網站優化方面經驗不足的情況下。
如果您是初學者並且不想擔心額外的編輯和样式，或者如果您是不介意在網站設計上投入更多精力的專業人士（我們指的是沒有拖放-drop 功能）並且不反對缺少各種動畫選項，那麼您絕對應該選擇 Gutenberg 。 特別是考慮到所有性能優勢以及您可以使用 Gutenberg 創建同樣質量的設計這一事實。
您絕對不應該做的一件事，我們已經看到了這樣的設計，就是使用 Elementor 創建自定義模板，然後結合使用 Gutenberg 來添加內容。 不要讓您的生活變得比應有的更艱難，也不要扼殺您的網站
無論您選擇的頁面構建器是 Elementor 還是 Gutenberg，答案始終是 OceanWP 和 Ocean Core Extensions Bundle，因為我們為您提供小部件和塊來實現所需的網站設計
你的判決是什麼？ 您最喜歡的頁面構建器是什麼，為什麼？ 是的，您可以選擇並使用兩者。
一旦您從構建網站中休息一下，請發表評論並讓我們知道您的想法。