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 适合您。