Visual Composer 與 Elementor：初學者的明確指南

在 Visual Composer 與 Elementor 之間進行選擇根本不是一件容易的事。 就我個人而言，我已經使用了這兩種工具，但仍然發現在使用這些頁面構建器工具中的每一個時都很難克服我所獲得的舒適空間。

由於我自己的經歷很難下定論，所以我尋找了不同的用戶視角，最後將它們整合為一篇文章。

Elementor 和 Visual Composer 網站構建器都非常受歡迎且靈活，並且在 2021 年排名前五的 5 頁構建器工具列表中鞏固了自己的地位。

然而，必須有人劃清界限並顯示差異，以便在開始之前很容易理解他們將要了解的內容。

我將把我對此事的集體理解放在一起。

因此，如果您想詳細決定 Visual Composer 和 Elementor 網站構建器，請與我一起直到最後。

我可以向你保證，你的問題會永遠結束。

匆匆？ 這是一個有用的建議

在 Visual Composer 與 Elementor 之間，我會站在 Elementor 一邊，原因有很多我認為很明顯。

雖然你可以用兩種工具做同樣的工作，但我的判斷是基於用戶對工具的預先理解、簡單性、用戶體驗、靈活性，以及​​每個人或多或少關心的其他方面。

簡要介紹

元素

幾乎所有 WordPress 用戶都知道 Elementor，驚人的 500 萬用戶表明它是如何被廣泛接受為用於創建 WordPress 網站的首選頁面構建器工具。

這主要是因為該工具帶來的簡單性、靈活性、多功能性和一流的支持。

最重要的是，它不需要任何代碼知識來構建一個簡約、設計、乾淨的網站。

價格： 49 美元 – 199 美元

優惠：試用版可使用 30 天

視覺作曲家

截至 2017 年，Visual Composer 已進行改造並更名為 WPBakery Page Builder。

毫無疑問，新版本比其前身更加靈活和簡潔。

毫無疑問，它是最受歡迎的頁面構建器工具之一，並且憑藉其獨特的小部件和模板庫，輕鬆躋身 WordPress 網站構建器的前 5 名。

價格： 45 美元 – 245 美元

優惠：購買可享受 15% 的折扣

Visual Composer 與 Elementor：比較表

Visual Composer 與 Elementor：有何相似之處？

Visual Composer 和 Elementor 在用法上是相似的。 因此，我們可以說這兩種工具的基礎幾乎相同。

兩個頁面構建器都可以創建 100% 響應式網站，這些網站既對搜索引擎友好，又非常易於使用。

簡單的設計令人著迷，恰好是這些頁面構建器工具最重要的地方。

您可以在幾秒鐘內跟踪您想要查找的內容和正在查找的內容，並且不需要您深入了解系統。

兩個工具中都存在視覺拖放系統，這是最明顯的相似之處。

您可以在空白的白色畫布上使用可視化頁面構建器構建自己的自定義網頁，構建後您的網站看起來完全一樣。

您可以從庫中選擇自定義小部件或從頭開始構建自己的主題概念，這也是可能的。

最後，如果您遇到麻煩並需要逐步解決問題，這兩種工具都提供廣泛的客戶支持，可在 30 分鐘到最多 24 小時內回复您的查詢。

Visual Composer 與 Elementor：與一般用戶視角的差異

細微的差異很難區分，因為這兩種工具都提供相同的功能。 您知道在開始注意事物之前，您需要熟悉該平台。

當歸結為 Visual Composer 與 Elementor 時，您應該預先註意以下一些差異。

用戶界面

元素

Elementor 的用戶界面由兩部分組成。 左側邊欄和右側畫布。

預覽部分或畫布佔據了屏幕的大部分，因為它顯示了您放入網站的所有視覺方面。

畫佈為您提供了每個人都關心的實時預覽選項。

老實說，當涉及到構建整潔簡約的網站時，這種實時預覽使無編碼體驗變得如此有趣。

此外，右側有一個超級菜單，顯示所有小部件、元素和設置。

它使您可以選擇從 Elementor 庫的大量模板中選擇模板。 您自定義保存的模板、小部件等。

屏幕左下角為您提供了另外三個選項 - 常規設置、歷史記錄、導航器和響應模式。

1. 常規設置允許您查看頁面的當前狀態、是否已發布、其標題、頁面上的特色圖像以及其他一些突出顯示的信息。
2. 歷史記錄允許您查看可以恢復的已保存項目的不同版本。
3. 導航器創建一個彈出式導航樹，使導航更加流暢。
4. 響應模式允許您僅使用一個屏幕跨所有設備查看您的站點。

視覺作曲家

Visual composer 有一個類似於 Elementor 的界面。 事實上，您也可以將其稱為所見即所得 (WYSIWYG) 前端編輯器。

這意味著您將可以看到您在畫布上創建的任何內容，也就是說您基本上不會有任何代表特定頁面塊的佔位符。

以下是您可以在 Visual Composer 儀表板上找到的以下部分：

• 元素編輯器窗口
• 實時編輯器或前端編輯器（拖放功能）
• 導航面板
• 設置
• 網站的樹狀視圖

元素編輯窗口浮動在網站的每個被阻止元素的頂部。 只需將鼠標懸停在所選元素上，即可從下拉菜單中獲取可更改選項列表。

前端編輯器是 Visual Composer 的可視化編輯器。 它允許您通過將不同的組件從小部件欄拖放到編輯器中來排列和對齊不同的組件。

最好的事情是，您可以隨心所欲地玩，並且仍然不會使設計複雜化，因為這一切都在後台處理，您甚至不會注意到。

導航面板允許您訪問設置，您可以通過更改圖像、組件的高度和寬度、字體大小和粗細等來微調網站的不同元素。

這些設置與網站的其餘部分沒有太大關係。

作為初學者，您不需要在第一個項目中使用它。

但是您可以在完成第一個網站後開始探索它有哪些選項。

樹視圖是一種非常輕鬆地瀏覽網站不同頁面的有效方式。

事實上，您還可以使用樹視圖模式隨時隨地編輯網頁上的任何選定組件。

Visual Composer 的高級版具有用於編輯側邊欄、toter、標題的附加選項，這也是一個相當不錯的賣點。

判決書

兩個界面都具有相同的功能，但有細微的變化。 但是，在小型創意設計方面，我傾向於使用 Elementor。

可用元素

元素

元素可幫助您使用頁面構建器工具創建網頁。 因此，像 Elementor 這樣的優秀頁面構建器需要具有相當數量的元素。

在這方面，Elementor 有 3 種主要類型的元素——按特定順序排列的部分、列和小部件。

Elementor 的免費版本為您的網站提供了 30 個不同的小部件，購買 Elementor Pro 版本後可增加到 50 個。

此外，您可以在 Elementor 庫中找到大量創意製作的模板存檔。

如果我不告訴你我對 Elementor 圖書館所提供的東西印象深刻，那我就是在騙你。

第一個區別是，如果您對特定部分進行更改，它會影響整個部分。

將更改應用於列時也會發生同樣的情況。

但相反，如果您將更改應用於小部件，則更改仍僅限於該小部件。

視覺作曲家

Visual Composer 元素由內容塊組成，例如圖標、按鈕、文本塊等。

作為用戶，您可以將這些塊集成到您的網頁中，為您的網站創建佈局。

Visual Composer 的免費版和高級版中都有超過 100 個內容元素，這些元素被分為以下邏輯組 - 基本、媒體、容器、社交、WordPress 和內容。

基於雲的模板中心允許您下載您需要的特定內容塊，這可以防止您的網站速度變慢。

這也減少了對第三方插件的依賴，從而讓您的網站在沒有額外資產的情況下運行得更快。

判決書

這是一個平局。 這兩種工具都提供了大量的模板、小部件和組件供使用，這對我來說是一個巨大的勝利。

樣式選項

元素

Elementor 中的樣式選項很簡單。 如果您選擇一個元素，它會自動將全局樣式放置在您現有的內容上。

通過根據您的喜好更改小部件、部分和列，可以按照您希望的方式從“樣式設置”中調整設置。

此外，隨著您對造型的熟悉和了解，有許多造型選項可供您逐步探索。

視覺作曲家

數百個樣式選項簡化為一個窗口，以便用戶在使用 Visual Composer 時無縫理解系統。

您可以說它在很多方面與 Elementor 相似，因為您可以在 Visual Composer 中執行相同的操作。

判決書

這兩種工具都提供了簡化而廣泛的樣式選項。 這是一條領帶。

模板

元素

Elementor 在免費版本中有 40 個設計精美的模板，如果您繼續使用它們，它們會終身更新。

但這有其局限性。 您可以在免費版本中使用的小部件數量限制為一定數量。

但是，如果您選擇專業版，那麼您可以立即訪問 300 多個不同的組件和模板。

塊模板用於創建頁面的特定部分，例如 – 聯繫表單、CTA 表單等。另一方面，頁面模板更適合創建整個頁面。

視覺作曲家

Visual composer 有兩種不同類型的模板——預定義模板和用戶定義模板。

當然，每個模板都是為滿足特定目的而設計的，您也可以根據需要重新設計它們。

但是，如果您使用免費版，這些可定制的選項就會受到限制，如果您決定購買高級訂閱，這顯然會增加十倍。

判決書

這是最難決定的，因為這兩種工具都提供了許多有前途和獨特的元素。 我會說這個也是平局。

WooCommerce 集成

元素

在我看來，無縫 WooCommerce 集成是必不可少的功能，而 Elementor 做得很好。

此外，自定義功能很容易與幫助您確定的產品存檔小部件一起使用。

哪些產品將顯示在列表中，自定義列表中每個項目的外觀、排版、調色板和其他功能？

有一些選項可以自定義產品搜索結果頁面並合併其他小部件以使頁面更具交互性。

菜單購物車是另一個不錯的選擇，它允許您在頁面上添加“添加到購物車”按鈕，並且您可以根據需要對其進行自定義，使其更具吸引力。

視覺作曲家

Visual composer 支持 WooCommerce 與其主題的無縫集成，因此每個人都發現創建電子商務 WordPress 網站很有用。

您可以從 Visual Composer Hub 訪問 WooCommerce 元素以創建產品頁面。 以下是您可以使用的一些元素：

WooCommerce 添加到購物車、產品類別、產品頁面、最近的產品、相關產品、訂單跟踪、結帳頁面、特色產品、購物車、購物車結帳等。

判決書

這是他們所有人的一個要點。 如果您只集成 WooCommerce 插件和 WooCommerce 元素，那麼它就是平局。

但是，如果您再添加一些諸如 CRM 集成之類的東西，那麼 Elementor 是最佳選擇。

我這樣說是因為很多時候，您需要集成除 WooCommerce 之外的其他復雜工具，並且您會發現 Elementor 提供了各種集成，與 Visual Composer 不同。

主題生成器

元素

主題構建器插件允許您創建自己的主題 - 無論是從頭開始還是在現有模板上，就像您可以在 Elementor 上創建網頁一樣。

該過程與您在空白畫布上設計自己的概念、自定義與網站主題一致的頁眉和頁腳的過程相同。

您可以應用相同的過程來創建標題、站點徽標、菜單和其他對您的站點至關重要的相關組件。

視覺作曲家

Visual Composer Premium 允許您創建自己的主題，就像網頁構建器一樣，在這種情況下與 Elementor 沒有太大區別。

如果您考慮畫布和編輯工具，您會注意到其中有細微的變化。 例如，每個組件的高度和寬度編輯器更多地向側邊欄傾斜。

在您開始在 Visual Composer 上創建自己的主題之前，請確保安裝了 Theme Builder 插件。

這樣您就可以訪問頁眉、頁腳和側邊欄編輯器，最重要的是，您可以訪問需要從 Visual Composer Hub 下載的組件。

此外，全局控件允許您更輕鬆地編輯頁眉和頁腳。 您可以啟用自定義帖子類型、帖子和頁面以及默認的 WordPress 頁面。 它伴隨著它，例如 - 搜索結果頁面、404 錯誤頁面、存檔頁面、WooCommerce 頁面可以被更改。

判決書

這是 Visual Composer 的一個加分點。 他們的頁眉和頁腳編輯器以及我在 Elementor 中沒有看到的主題的其他一些部分提供了足夠的編輯選項。

插件

元素

Elementor 團隊一直致力於創建從其他市場中脫穎而出的直觀設計資源，您可以在其中找到免費模板、主題、小部件等。

大量的插件為您的網站提供了更具創造性的優勢，並由額外的塊和構成完整包的小部件提供支持。

視覺作曲家

當預先構建的額外小部件或模板不足以滿足您的工作時，您知道是時候構建一些超出 Visual Composer 當前能力範圍的東西了。 但這裡有一個快速的解決方案。

前往 Visual Composer Hub 的 Addons 部分，在那裡您可以找到專為特殊目的創建的專屬擴展，您可以免費下載。

此外，您還可以使用全局模板、導入和導出、模板小部件、古騰堡塊、主題生成器、動態字段、維護模式頁面、彈出窗口生成器、高級圖標庫和其他高級設計選項。

但他的功能僅適用於 Visual Composer Premium 用戶。

判決書

這個去 Visual Composer，因為他們在 Visual Composer Hub 中收集了大量的插件。

Elementor 在這方面具有創造性，但 Visual Composer 具有數量優勢。

獨特的功能

元素

Elementor 具有一些僅適用於 Elementor 用戶的功能。

其中一個功能是 – Embed Anywhere 功能，該功能允許您嵌入選定的模板並使用短代碼複製它。

事實上，Elementor 中的所有部分都接受短代碼，這使開發速度大大加快。

Global Widget 是另一個很棒的功能，它允許您保存自定義設計一次並在將來隨時復制它，就像跨多個網站的模板一樣。

最後，它有一個簡化的彈出窗口構建器，允許您設計創意問候欄、全屏顯示消息、飛入消息和其他類型的彈出窗口。

這些東西對於提高您網站的轉化率和提高您網站上最受好評產品的銷售百分比至關重要。

視覺作曲家

Visual Composer Hub 允許高級用戶從雲存儲中的各種插件、模板、庫存圖像和其他內容中進行選擇。

它由幾乎所有類型的設計組成，從插件、塊、頁腳元素、頁眉元素等等。

此外，如果您是 Visual Composer Hub 的高級訂閱者，您每週都可以訪問新模板。

判決書

Elementor 具有一些我測試過的其他頁面構建器工具中沒有提供的獨特功能，因此我將在這個方面與 Elementor 站在一起。

Visual Composer 與 Elementor：開發人員視角的差異

當您從開發人員的角度看待 Visual Composer 與 Elementor 之間的比較時，它會繪製一個全新的水平，尤其是當您可以看到一些可能有用的全新比較角度時。

以下是您會發現有用的內容。

執照

主題集成是使用 WordPress 頁面構建器工具的一個重要方面。 它允許開發人員將新設計集成到現有主題中，並根據當前標準重新開發它們。

有些人甚至可能試圖轉售它，這完全不是理想的做法。

主題集成選項僅適用於 Elementor 和 Visual Composer 網站構建器的免費版本。

但是您不能包含任何高級主題並根據條款和協議轉售它們。

元素

Elementor 免費版本可從 wordpress.org 插件庫中獲取。

或者，您可以從 Elementor 網站下載它。

Elementor 的一大優勢是它託管在 WordPress 中，因此您無需將其包含在您的插件包中。

高級版本帶有各種小部件、模板、頁眉和頁腳構建器，以及用於創建您自己的自定義模板的模板系統。

視覺作曲家

Visual Composer 有兩個版本——免費版和付費版，它們的網站上很容易找到。

但是，Visual Composer 不容易與 WordPress 集成，這對 Visual Composer 用戶來說是一個劣勢。

但是您仍然可以從他們的網站下載免費版本或使用 TGM 激活器使用下載鏈接。

高級版本有一個頁眉和頁腳構建器，這是一個巨大的賣點，更不用說模板系統使使用單獨組件的工作變得更加容易。

一般要求

元素

除了通常的 WordPress 一般要求之外，Elementor 不需要額外的依賴項。

視覺作曲家

WordPress 安裝默認不附帶 Visual composer，因此您需要安裝額外的依賴項才能運行它。 這是您需要的清單：

1. Webpack 4.0 或更高版本
2. 節點 8.0 或更高版本

開發者API

元素

豐富的開發人員 API 是優秀頁面構建器工具的強項之一。

雖然您認為這是一個結果，但您還應該知道這種靈活性允許您使用 React 組件構建自定義元素。

了解 Developer API 如何允許您將網站的每個元素創建為系統的獨立部分的最佳方法是在您需要的任何地方單獨使用它。

視覺作曲家

Visual Composer 網站構建器與 React 組件協同工作。

創建每個元素，使其作為單獨的代碼塊獨立工作，在其自己的 HTML、CSS、PHP、JavaScript 和 JSON 依賴項集上運行。

通過這種方式，它不再像在早期版本中那樣依賴於簡碼系統。

這種構建自定義小部件的系統與構建原生 WordPress 小部件沒有什麼不同。

在這方面，我不得不支持 Visual Composer，因為我熟悉 React。

而對於了解 React 的人來說，更容易理解文件結構和開發流程。

對比分析

總結

Visual composer 與 Elementor 之間的選擇是主觀的，取決於一個人對工具的理解和一個人的品味，我們可以或不能改變。 但是，嘿，我們總是可以從另一個角度學習一兩件事。

這是我在整個 Visual Composer 與 Elementor 辯論中的 2 位。 首先，如果歸結為使用情況並且您是單個用戶/開發人員，那麼 Visual Composer 是一次性付款的更便宜的選擇，並且提供與 Elementor 一樣多的選擇。

但是，如果您正在經營一家代理機構，並且更願意為開發提供更大的靈活性並願意花費更多的錢並縮短開發時間，那麼 Elementor 適合您。