Webflow 與 Elementor:動手比較(2022 年)

已發表: 2021-03-05

現代網站建設解決方案簡化了創建網站的過程。 使用用戶友好的拖放頁面構建器,您可以在幾分鐘內構建一個專業的網站,而無需事先了解編碼或設計。

最近引起很大轟動的一項在線網站建設服務是 Webflow。 該服務擁有易於使用的網站構建器、電子商務支持以及大量預製網站設計。

然而,最流行的在線建站解決方案仍然是 WordPress。 它是一個靈活的內容管理系統,可以通過 Elementor 等主題和插件進行極大擴展。

Elementor 是一個高級 WordPress 頁面構建器插件,在 WordPress 社區中擁有忠實的追隨者。 它是一個強大的工具,可為您提供構建網站所需的一切。

我最近發布了 Webflow 和 WordPress 核心版本的詳細比較,檢查了每種解決方案的優缺點。 Webflow 的頁面構建器比默認的 WordPress 塊編輯器更先進,但是 Webflow 如何與 Elementor 等現代 WordPress 頁面構建器抗衡?

在本文中,我將比較 Webflow 和 Elementor,並向您展示它們各自提供的功能。

什麼是網絡流

Webflow 是 2013 年在舊金山推出的在線網站建設服務。為了與 Squarespace 等成熟的在線建設服務競爭,Webflow 開發了他們獨特的視覺設計師。 這是一個現代解決方案,有許多樣式選項,您可以從大量預製網站設計中開始您自己的網站設計。

Webflow 的吸引力在於它是一個多合一的網站解決方案。 它可以節省您的時間,因為它可以為您處理大多數網站管理任務,例如網絡託管和網站更新。

按月付費,您可以使用 Webflow 構建博客、商業網站、投資組合、在線商店等。 註冊 Webflow 是免費的,只有當您決定在線發布您的網站時,您才需要付費。

網頁流主頁

什麼是 Elementor(和 WordPress)

WordPress 是 2003 年發布的開源內容管理系統。它作為博客解決方案越來越受歡迎,但其插件系統迅速允許開發人員擴展功能並將 WordPress 確立為最受歡迎的在線網站建設解決方案。

WordPress 插件 Elementor 於 2016 年推出,現已在超過 500 萬個網站上活躍。 這是一個全面的設計解決方案,可以改變 WordPress。

Elementor 主頁

使用 Elementor,您可以訪問現代前端拖放頁面構建器、高級模板系統以及用於彈出窗口、主題和電子商務插件 WooCommerce 的構建器。 Elementor 有 300 多個官方網站模板可用,並且有一個活躍的社區,可讓您訪問更多 Elementor 設計和功能。

便於使用

使用 Webflow 和 Elementor 構建網站的用戶體驗在很多方面都相似,但不可否認的是,如果您想使用 WordPress 和 Elementor 構建網站,則需要準備採用更加動手的方法。

首先,讓我們仔細看看使用 Webflow 和 Elementor 構建網站是多麼容易。

網絡流

Webflow 大大簡化了啟動網站的過程。

您可以使用您的 Google 帳戶在幾秒鐘內註冊 Webflow,或者,如果您願意,可以輸入您的電子郵件、密碼和姓名。 然後,Webflow 將通過詢問您的技術經驗和您想要構建的網站類型來為您提供服務。

註冊後,只需選擇創建一個新項目。

在 Web Flow 中創建新項目

Webflow Designer 使用 HTML5、CSS3 和 JavaScript,為您提供了創建專業網站的所有工具。 如果您願意,您可以從空白畫布開始,但在大多數情況下,最好選擇一個預製的網站模板並按照您想要的方式對其進行自定義。

這為您的設計提供了一個起點,它將幫助您熟悉 Webflow Designer 的工作原理。

選擇免費模板

我發現 Webflow Designer 使用起來很有趣。 如果您以前使用過頁面構建器,您會感到賓至如歸。 初學者應該能夠通過簡單地花時間修改預製模板來熟悉所有選項。

不幸的是,Webflow 不適合寫長篇文章,但我稍後會對此進行擴展。

Webflow 設計器用戶界面

所有設計和內容均由設計師處理。

Webflow 中的其他所有內容都在項目設置區域中進行。 您可以從此處管理常規設置、託管、計費、網站備份等。

Webflow 項目設置

元素

雖然 WordPress 的託管版本可以在線獲得,但要構建一個由 Elementor 提供支持的網站,您需要做三件事:

  1. 購買網站託管計劃
  2. 安裝自託管版本的 WordPress
  3. 安裝 Elementor WordPress 插件

要手動安裝 WordPress,您需要下載 WordPress,通過您的主機帳戶創建數據庫,然後運行著名的 5 分鐘 WordPress 安裝。 值得慶幸的是,您不必再手動安裝 WordPress,因為網站託管公司允許您通過單擊按鈕來安裝 WordPress。

儘管您確實需要花一點時間來配置 WordPress 網站,但多年來網站維護工作已大大減少。 如今,WordPress 可以自動更新您的網站主題和插件,託管的 WordPress 託管公司為您提供安全和備份。

WordPress 討論設置

WordPress 非常適合發布長篇博客文章和文章。 默認編輯器稱為塊編輯器。 在編輯器中寫作是一種有益的體驗,因為您可以全屏顯示並刪除頁面右側的選項面板。

在 WordPress 中撰寫博客文章

WordPress 允許您使用塊通過塊編輯器在後端設置內容樣式。 編輯器中有各種各樣的塊,您還可以使用 WordPress 主題定制器來定制您的網站。 然而,從設計的角度來看,這些功能是功能性的,但有限。

向前邁進 Elementor。

Elementor 徹底改變了 WordPress。 它為您提供一整套設計元素來定制您的網站設計和內容。 熟悉 Elementor 用戶界面後,您將體會到它的強大功能。

與 WordPress 塊編輯器相比,所有更改都發生在您網站的前端。 這使您可以實時查看更改。

與 Webflow 一樣,許多預製塊和模板可幫助您入門。 但是,Elementor 的模板系統使您可以更好地控制佈局。

Elementor 用戶界面

易用性——獲勝者:Webflow

一切設置好後,您會發現 Elementor 與 Webflow 一樣易於使用,但 Webflow 的託管服務無疑比自託管的 WordPress 網站更易於配置和維護。

設計經驗

現在,讓我們看看提供的網站模板和可供您使用的設計工具。

網絡流

在 Webflow 中創建新項目時,您可以從空白畫布、免費網站設計或高級網站設計開始。 Webflow 還有一個展示部分,您可以在其中復制其他設計,並且可以在第三方網站 Flowbase 上找到更多設計。

在撰寫本文時,Webflow 提供了超過 500 個預製網站模板,涵蓋設計、博客、電子商務、攝影等類別。 大多數設計不包含在您的 Webflow 計劃中,零售價約為每件 49 美元或 79 美元。 但是,大約有 100 種設計可供免費下載,並且它們的創建標準與高級同類產品相同。

不幸的是,Webflow 不允許您切換設計,因為沒有主題系統。 這意味著如果您想更改為另一個網站設計,您需要創建另一個網站。

這意味著,如果您的博客包含 1,000 篇文章,則不能簡單地更改博客設計。 您需要創建一個新項目,然後將所有內容傳輸過來。 這是完全不切實際的。

餐廳模板

Webflow 的設計器環繞您的網站,以便您可以實時查看建議的更改。 當您單擊頁面上的元素時,右側面板將加載其他樣式選項,例如佈局、邊框、CSS 等。

在用戶界面的頂部,您可以使用不同的設備預覽您的設計、定義畫佈區域、撤消和重做更改、導出代碼、共享您的項目以及發布您的頁面。 左側是您向頁面添加內容的位置。 您可以添加設計元素、頁面和集合,以及訪問符號、圖像和字體的現有媒體庫。

元素可用於添加部分、表單、按鈕、滑塊和完整佈局 - 但是,元素數量有限。

WebFlow 中的元素

元素

當為博客文章或頁面激活 Elementor 時,您將在畫佈區域底部看到一個文件夾圖標。 單擊該圖標將加載 Elementor 庫。

該庫有大量預製塊和頁面。 您保存的任何設計都可以從“我的模板”頁面訪問。 Elementor 的免費版本可讓您訪問各種塊和 30 多個頁面模板,但如果您升級到 Elementor Pro,您將解鎖 300 多個預製塊和模板。

與 Webflow 不同的是,您可以隨時在設計之間切換,並且可以使用 Starter Templates 等第三方 WordPress 插件添加數百個額外的免費模板。

Elementor 庫頁面

Elementor 將所有控件放置在頁面的一側(默認為左側)。 在此面板的底部,您將看到設置圖標、查看頁面結構和歷史記錄、在不同設備中預覽設計以及保存設計。

當您單擊頁面上的元素時,主面板將顯示修改內容、調整顏色、效果、高級設置等選項。

在您的頁面上未選擇任何元素時,主面板會顯示所有內容元素。 如果升級到 Elementor Pro,則有 40 多個元素可用,並且會添加 50 多個元素。 即使您無法使用所提供的元素創建任何內容,也可以通過安裝眾多 Elementor 附加插件之一將數千個額外元素添加到 Elementor。

在 Elementor 中編輯背景

設計經驗 – 獲勝者:Elementor

初學者會喜歡在 Webflow 中選擇模板然後使用其強大的設計器對其進行修改的簡單性,但是您以後無法切換模板。 您必須繼續編輯您開始使用的那個,這是 Webflow 模板系統的限制。

Elementor 的用戶界面需要更長的時間來學習,但它有更多的內容元素,並且可以使用 WordPress 插件進一步擴展。 與 Webflow 不同,您可以隨時更改模板。


內容管理系統 (CMS)

在本節中,我們將研究 Webflow 和 Elementor (WordPress) 作為 CMS 的運行情況。

網絡流

如果您閱讀了我的 Webflow 與 WordPress 比較文章,您就會知道 Webflow 並不是最好的內容管理系統。 然而,也有一些積極的方面。

在 Webflow 中,所有內容都通過 Webflow Designer 進行管理。 您所要做的就是單擊頁面的任何部分,無論是段落還是標題,然後開始編輯。 當您這樣做時,將出現基本格式選項,使文本變為粗體或斜體或將其轉換為鏈接。

在頁面設置區域,您可以在設置之間快速跳轉並添加密碼保護,調整 SEO 設置,添加自定義代碼。 進行這樣的更改比在 WordPress 中要快得多。

正如我在比較 Webflow 和 WordPress 中所討論的,如果您升級到 Webflow 電子商務計劃之一,Webflow 可用於創建在線商店。 請務必查看該文章以了解其電子商務功能的比較

主頁設置

Webflow 作為 CMS 失敗的地方有很多。

能夠直接編輯頁面非常適合標題和短標題,但不適用於長文本。 更令人費解的是,有100頁的限制。 即使您購買了 Webflow 提供的最昂貴的計劃,您仍然被限制為 100 頁。

Webflow 將其他內容歸類為集合。 這包括博客文章、類別、作者等。 所有這些收集項目都是通過一個不太用戶友好的設置區域添加的。 例如,對於博客文章,您甚至無法格式化文本或在文章中輕鬆插入鏈接或圖像。 這絕對是對 Webflow 的一大黑標。

與頁面一樣,收藏品也有一些限制。 如果您選擇基本包月計劃,則該功能根本不可用,如果您選擇 CMS 計劃,您仍然僅限於 2,000 個項目。

在 Webflow 中添加博客文章

元素

Elementor WordPress 插件沒有自己的內容管理系統。 因此,您需要在 WordPress 中創建內容,然後使用 Elementor 設置帖子和頁面的樣式。

WordPress 是發佈內容的絕佳平台。 與 Webflow 不同,您添加到網站的帖子和頁面的數量沒有限制,並且使用自定義帖子類型,您可以以許多奇怪而奇妙的方式擴展 WordPress(例如將 Webflow 集成到 WordPress 中!)。 這就是 WordPress 為在線商店、會員網站、目錄等提供動力的方式。

通過使用 WordPress 主菜單,您可以管理您的帖子、頁面和自定義帖子類型,並進行所需的任何更改。

WordPress 帖子列表

與 Webflow 一樣,Elementor 允許您直接在畫佈區域中修改文本。 選擇文本後,將出現一個格式欄,其中包含使文本變為粗體、下劃線和斜體的選項。 此欄還允許您添加鏈接、標題和列表。

這裡有比 Webflow 更多的控制。 選擇文本後,您可以跳轉到主面板並插入媒體、首字下沉和列,並更改顏色和邊框等樣式設置。

對於長篇內容,例如博客文章和深度文章,我建議從 Elementor 的文本編輯器切換回 WordPress 塊編輯器,這樣您就可以在簡約的用戶界面中享受無干擾的寫作。

Elementor 文本編輯器

內容管理系統 –獲勝者:Elementor (WordPress)

在添加內容方面,Webflow 和 Elementor (WordPress) 之間的區別是白天和黑夜。 Elementor 是迄今為止更好的解決方案。

支持質量

良好的支持是您在做出決定時應始終考慮的因素。

網絡流

我相信大多數人將能夠在 Webflow 中創建一個網站,並在幾個小時內將其發佈到網上。 但是,如果您不確定任何特定功能,我建議您訪問 Webflow 大學。 Webflow 做得非常出色,在那裡建立了一個廣泛的知識庫,其中包含數百個課程、課程和視頻教程。 提示也會定期在 Webflow 博客上分享。

如果您的網站離線,您應該檢查 Webflow 狀態工具以查看哪些服務正在運行。 如果您有特定問題,您可以通過 Webflow 論壇向其他 Webflow 用戶尋求幫助,但是如果問題很重要,您應該打開支持票。

Webflow 建議他們盡最大努力在 24-48 個工作時間內通過個性化回復來響應每個請求,但他們還指出,Webflow 支持僅在太平洋時間週一至週五上午 6:00 至下午 6:00 提供。 這令人失望,因為這意味著周五提出的任何支持票可能要到下週二才能得到解決。

Webflow 支持頁面

元素

使用 WordPress 建立網站的一個主要好處是社區。 WordPress 的流行使您可以從 Facebook 等社交媒體平台上的許多論壇和群組獲得幫助。

高級 WordPress 支持服務也很常見。 但是,對於重要問題,大多數 WordPress 用戶依靠他們的託管公司尋求幫助。 支持標準各不相同,但大多數託管公司提供 24/7 票務支持,有些還提供電話支持。

如果您想了解有關 Elementor WordPress 插件如何工作的更多信息,您應該訪問 Elementor 支持區域。 與 Webflow 一樣,Elementor 提供了大量的書面和視頻教程,以幫助您了解它的工作原理。 還有一個活躍的 Elementor Facebook 群組,擁有大約 100,000 名成員。

Elementor Pro 客戶可以通過 24/7 全天候運行的支持票證系統獲得直接幫助。

Elementor 支持選項

支持質量 – 獲勝者:Elementor

Webflow 和 Elementor 都為客戶提供了大量的教程來解釋他們的產品是如何工作的。 您可以期待兩家公司的良好支持。 但是,我認為 Webflow 有限的支持時間根本不夠好,尤其是當其他託管網站建設服務提供 24/7 支持時。

建立網站的成本

Webflow 與 Elementor 的成本將取決於許多因素——讓我們詳細了解一下。

網絡流

雖然 Webflow 對他們的服務成本是透明的,但他們的定價政策卻過於復雜。

要使用 Webflow 發佈網站,您需要選擇帳戶計劃和站點計劃。 Starter 帳戶計劃是免費的,允許您在帳戶中擁有兩個網站項目。 這是使用 Webflow 創建免費帳戶時分配給您的計劃。

如果每年支付,Lite 計劃每月收費 16 美元。 此計劃將項目總數增加到 10 個,並允許您導出代碼並將項目轉移給其他人。

如果每年支付,Pro 計劃每月收費 35 美元。 該計劃允許無限數量的項目,並具有白標和網站密碼保護功能。 團隊計劃也可從每位團隊成員 35 美元起購買。

Webflow 帳戶計劃

因此,Webflow 的帳戶計劃的成本將主要取決於您打算創建多少個網站項目,但是站點計劃將取決於您收到的流量和您需要的功能。

如果按年支付,Webflow 的零售價為基本計劃每月 12 美元,CMS 計劃每月 16 美元,商業計劃每月 36 美元。 這些計劃分別允許每月訪問 25,000、100,000 和 1,000,000 次。

請務必注意這些計劃的許多限制。 例如,基本計劃不包含收藏,這意味著您無法發布博客文章。 您還需要升級到他們的更高級別的商業計劃,以允許用戶上傳表單中的文件。 如本文前面所述,所有計劃也限制在 100 頁以內。

Webflow 網站計劃

如果您想將電子商務功能添加到您的網站,您需要選擇一個電子商務網站計劃。 如果您按年付費,標準計劃的零售價為每月 29 美元,Plus 計劃的零售價為每月 74 美元,高級計劃的零售價為 212 美元。

更昂貴的計劃允許您向商店添加更多產品,取消 2% 的交易費用,並提高年度銷量限制。

Webflow 電子商務計劃

如您所見,Webflow 的成本取決於您要創建的項目數量、您期望的流量、您需要的功能、您是按月付費還是按年付費,以及您是否想在您的網站上進行銷售。 然而,對於一個簡單的網站,使用 Webflow 每月可能只需 12 美元。

元素

如果您想使用 Elementor 設計網站,則需要考慮託管 WordPress 網站的成本以及是否要升級到 Elementor Pro。

WordPress 的自託管版本可免費下載。 但是,謹慎考慮任何預期的額外成本,例如您想在您的網站上使用的託管和高級 WordPress 插件。

在我們關於廉價 WordPress 託管的文章中,我們展示了 Hostinger 等託管公司提供每月低至 0.80 美元的 WordPress 託管。 你可以用這麼少的錢來託管一個 WordPress 網站真是太神奇了,但是我通常建議多花一點錢去一家提供更好可靠性和支持的公司。

SiteGround 的入門級套餐每月僅需 6.99 美元,而 WP Engine 的套餐起價為每月 22.50 美元,而 Kinsta 的起價為每月 30 美元。 貨比三家,看看哪家公司適合您的預算和要求。

Kinsta定價

Elementor 越來越受歡迎,因為他們的 WordPress 插件的免費版本幾乎沒有限制。 這個核心版本不僅能夠構建漂亮的網站,而且您可以使用第三方 WordPress 插件免費添加其他元素和功能。

Elementor 專業版的單網站許可證零售價為每年 49 美元,三網站許可證每年零售價 99 美元,1,000 個網站許可證每年零售價 199 美元。 除了支持的網站數量外,所有計劃都提供相同的功能。

Elementor 定價表

每月大約 4 美元,Elementor Pro 添加了 50 多個元素、300 個模板和大約十幾個完整的網站模板。 它還為您的主題、表單、WooCommerce 和彈出窗口添加了構建器。

我相信 Elementor Pro 物超所值,但我始終建議您先使用該插件的免費版本,然後在您確定它是適合您的解決方案後進行升級。

建立網站的成本 – 獲勝者:Elementor

如果我們僅談論成本,Elementor 是更好的選擇,因為您可以使用可靠的公司(例如 SiteGround)託管 WordPress,每月僅需 6.99 美元。 即使您考慮購買 Elementor Pro 的成本,每年的總成本仍然低於 Webflow 的入門計劃,並且它的限制要少得多。

未來預測

我已經談到了使用 Webflow 與 Elementor 的優缺點,但重要的是要記住,本文反映了這兩種解決方案在撰寫本文時的情況。

Webflow 和 Elementor 的開發人員會定期修復錯誤、添加新功能並改進他們的產品。

讓我們回顧一下這些產品在未來如何發展。

網絡流

2017 年,Webflow 宣布了一個新的基於社區的未來發展路線圖。 Webflow 沒有從社交媒體、支持票和他們的社區論壇中策劃想法,而是創建了一個名為 Webflow Wishlist 的專門建議網站。

每個人都可以提交他們對該願望清單的新功能和更改的想法。 每個想法都可以投票贊成或反對,並與開發人員和其他 Webflow 用戶進行詳細討論。 然後將最好的想法添加到 Webflow 的開發路線圖中。

在撰寫本文時,三個新功能正在測試開發中並即將發布,四個想法計劃用於未來的開發。

即將推出的值得注意的功能是能夠通過 Webflow 和桌面應用程序銷售數字商品,從而允許您在 Webflow 網站上離線工作。

Webflow 願望清單

元素

Elementor 的開發人員從他們的大型社區中獲取反饋。 您可以通過 Elementor 博客跟踪已添加到 Elementor 的新功能。 如果您願意,您還可以通過安裝 Elementor 開發者版來測試新功能並向 Elementor 團隊提供反饋。

在不久的將來,Elementor 將為 Elementor Pro 採用新的定價結構,並為大公司推出兩個更高級別的計劃。 這些產品的零售價分別為每年 499 美元和 999 美元。

此外,Personal 和 Plus 計劃將更名為 Essential 和 Advanced,購買專家計劃的任何人都將獲得 25 個網站的支持和更新,而不是 1,000 個。

WordPress 頁面構建器市場與以往一樣競爭激烈,隨著 Elementor 增加其更高級別計劃的成本,公司將不得不確保他們繼續改進他們的插件(尤其是許多 Elementor Pro 客戶對這些價格變化不滿意) .

也許對 Elementor 的最大威脅不是來自其他頁面構建插件,而是來自 WordPress 本身。 完整站點編輯是計劃在不久的將來為 WordPress 核心版本提供的一項功能,它可能會阻止許多 WordPress 用戶使用第三方頁面構建器來設計他們的網站。

Elementor 新的定價結構

最後的想法

我希望您喜歡 Webflow 和 Elementor 之間的比較。 正如您所看到的,這兩種產品都可以用來設計漂亮的網站,並且使用每種解決方案都有利有弊。

如果您想發布一個小型網站或一個簡單的在線商店,Webflow 是一個很好的解決方案。 您所要做的就是選擇一個預製的網站模板,使用其用戶友好的設計器添加一些內容,然後自定義設計。 Webflow 處理其餘部分。

對於較大的網站,Webflow 目前限制太多,無法推薦。 選擇網站模板後,您只能通過創建新項目來更改為其他設計。 發布長篇內容也是不切實際的。 我希望這些是公司在明年解決的問題。

網絡流優點

  • 非常容易使用
  • Webflow Designer 可用於在幾分鐘內構建漂亮的網站
  • 還可以添加電子商務功能

網絡流缺點

  • 網站無法輕易更改他們使用的模板
  • 100 頁的限制
  • 難以添加博客文章和文章等內容

使用 WordPress 構建網站確實需要您更多地親自進行網站維護,但對您可以做的事情的限制更少,添加功能的方式更多,以及更好地選擇誰託管您的網站和誰提供支持。

Elementor 顯著增強了 WordPress,並允許您輕鬆自定義網站設計的每個部分。 博客文章和長篇文章仍然建議使用 WordPress 塊編輯器,但您可以輕鬆地在兩個編輯器之間切換。

但是,我會說,與 Webflow 和其他 WordPress 頁面構建器相比,Elementor 的用戶界面需要更長的時間來學習和掌握。 這是一個強大的解決方案,不會以任何方式限制您。 它不像 Webflow Designer 那樣對初學者友好。

元素優點

  • 大量預製塊和佈局
  • 強大的用戶界面,有大量的塊選擇
  • 驚人的第三方支持

元素缺點

  • 需要時間來學習用戶界面
  • 免費版僅提供有限數量的預製設計

與往常一樣,我鼓勵大家自己進行研究並徹底測試 Webflow 和 Elementor,然後再在實時網站上使用它們。 這將使您能夠就哪種解決方案最適合您做出明智的決定。

祝你好運。

凱文