WooCommerce + Elementor：让我们构建很酷的东西

已发表: 2022-07-27

您想在不聘请开发人员的情况下调整和设计您的 WordPress 网站吗？好消息：使用 WordPress 页面构建器插件完全可以实现。

WordPress 页面构建器插件带有直观的拖放界面，可以创建漂亮的自定义页面和网站。因此，无论您的技能或技术知识如何，页面构建器插件都可以让您轻松设计理想的网站，而无需编写任何代码。

现在，如果您想知道应该考虑使用哪个 WordPress 页面构建器插件，那么您来对地方了。在本文中，我们将回顾最流行的选项之一：Elementor，它被认为是黄金标准。 Elementor 是安装量第二多的 WordPress 插件，有 200 万次活动安装——大约 15.9% 的 WordPress 网站使用。

我们将从 Elementor 的简要概述开始，并进一步审查插件的界面、功能和定价，以帮助您确定它是否是您网站的正确选择。我们走吧！

Elementor 插件：简要概述

Elementor 是一个可视化拖放式 WordPress 页面构建器插件，与 WooCommerce 或 WordPress 主题附带的标准页面模板相比，它可以让您创建独特的网页和帖子。

它不需要编码，允许您轻松配置设置并使用拖放工具组织页面的内容和元素。

让我们通过查看 Elementor 界面的工作原理来开始插件审查。

了解 Elementor 插件界面

与许多其他页面构建器插件相比，Elementor 拥有最简单、最无缝的界面之一。首次启动插件时，您将进入如下页面：

点状灰色区域是您的内容区域。在此区域之外，您的常规主题将出现，而在虚线区域内，您可以添加小部件并构建您自己的设计。

在左侧，您会看到小部件，它们充当构建块，您可以将它们放在一起来设计您的页面。在这些小部件下方，您将找到用于预览设计、撤消更改或打开响应模式的常规设置，如图所示。

以下是在页面上拖放所需元素的简单方法：

当您在页面上放置元素时 - Elementor 将元素分为两个布局结构，给出两个不同的结构元素，如下所示。

这些结构要素包括：

部分：标有蓝色。
列：位于用黑色标记的部分内。您可以根据需要在该部分中添加任意数量的列。

放置元素后，您可以通过调整宽度和更改列间距和高度来轻松自定义其布局。

此外，您还可以根据您的特定要求选择合适的部分结构，并在列中添加其他元素，如图像、视频或图标。

例如，我添加了一张图片，并从默认的 Elementor 图片库中选择了一张，如下图所示。您可以更改图像的大小和对齐方式、添加标题并链接合适的 URL。

要进一步设置元素、结构或列的样式 - 您可以使用侧边栏中的样式和高级选项卡。只需单击要设置样式的内容，然后单击侧边栏选项卡即可进行更改。

您还可以通过单击显示在侧边栏右上角的方形图标从选项卡导航到元素侧边栏。

因此，Elementor 非常易于使用，并且具有简单的拖放和简单的自定义选项 - 您可以立即构建您梦想中的网站。

现在不用花太多时间，让我们直接进入 Elementor 页面构建器的功能。

使其成为 WooCommerce 的出色页面构建器的顶级 Elementor 功能

以下是 Elementor 的一些出色优势，使其成为 WordPress 和 WooCommerce 网站中最受欢迎的页面构建器之一。

广泛的预制模板库

Elementor 提供了广泛的模板。单击下面的添加模板图标以添加模板。

从Elementor 模板库中选择 300 多个模板，只需单击一下即可将它们添加到您的页面。

自 Elementor 2.0 发布以来，这些模板有两种格式：

块：为特定部分而不是整个页面提供设计。例如，您可以使用块将关于公司部分或预构建的联系人部分添加到现有页面布局。

页面 -提供整页设计，您可以通过单击导入并根据需要进行调整。

您还可以将一些设计保存为块和模板，以便以后在其他页面或网站上重复使用——这使得在整个网站中维护通用模板设计变得超级方便。

它还消除了每次从头开始构建新页面设计的麻烦。

响应式设计控件和移动预览

移动设备的使用量每个月都在持续增长，大约 73.1% 的网页设计师认为无响应的页面设计是网站放弃的最大原因之一。

您在 Elementor 上创建的所有设计和页面都会自动响应，并且在移动设备上看起来很棒。此外，您无需离开界面即可快速预览您的网站在其他设备上的外观。

单击侧边栏底部的响应模式按钮，然后通过单击下图中突出显示的按钮预览您网站的桌面、移动和平板电脑版本。

它允许您根据设备类型自定义页面设计，并允许您在某些设备上显示或隐藏某些小部件。例如，如果您网站的桌面版本有一张巨大的英雄图片，您可能会避免在您网站的移动版本上显示该图片。您可以选择该图像或您希望隐藏的任何部分，并使用Elementor 的响应式设计控件在移动设备上隐藏它们，只需单击一下即可。

因此，它可以确保您的网站 100% 响应 - 所以它在所有设备上看起来都很棒，包括台式机、平板电脑和移动设备。

无限的定制选项

Elementor 的定制是无限的，并且没有限制您如何设计您的网站及其元素。

Elementor 编辑器中的样式和高级菜单提供了大量的样式自定义选项。您可以根据多个属性设置内容的样式，包括颜色、宽度、大小、CSS 过滤器和边框。

同时，高级菜单允许您管理布局、运动效果、背景、边框、属性和其他因素，如下图所示。

详细的布局控件

深入了解自定义选项，Elementor 让您可以详细控制布局设计，因此您不必因为无法编写自定义代码而在设计灵活性上妥协。

Elementor 通过许多直观的控制选项，可以轻松地将您的部分、小部件和列准确地定位在您想要的位置。

使用高级菜单中的布局控件，您可以：

手动设置部分、小部件和列的边距和填充。
选择部分的宽度- 默认、全宽、内嵌和自定义。
调整小部件在列中的位置- 默认、固定和绝对。
调整列之间的间隙并为干净的布局创建一个空白区域。

因此，无需编码技能，您就可以轻松调整小部件的位置并根据需要自定义列和部分。

带有撤消/重做更改的完整进度修订历史记录

Elementor 的最佳功能之一是它可以让您预览您所做的所有更改的整个历史记录，从而记录历史记录中的每个操作。

此外，您可以在必要时轻松撤消更改并恢复到以前的版本。此外，每当您保存新设计时，如果需要，您可以轻松恢复到全新的版本。

留下干净的代码

如果您将来出于某种原因希望停用 Elementor，则不必担心它会留下大量短代码，例如 Divi Builder。

Elementor 留下干净的代码，确保最佳性能和页面速度。

Elementor Pro 评论

虽然核心 Elementor 页面构建器是开源且免费的，但您可以升级到 Elementor Pro 版本——它提供了额外的有用功能。

以下是新 Elementor Pro 插件的一些功能的简要介绍：

它使您可以构建整个 WordPress 主题。
它有更多令人兴奋的小部件，包括滑块、社交分享按钮、表单、倒数计时器和登录表单。
它提供了大量优质的优质 Elementor Pro 模板。

因此，如果您想要更多功能、高级模板和全局小部件——您可以购买 Elementor Pro 插件，起价仅为 49 美元。

Elementor 定价审查

如果您想构建简单且基本样式的网站，该插件的免费版本应该足以满足您的需求——考虑成为功能最丰富的免费页面构建器。

但是，为了创建更专业的网站，Elementor 提供了四个具有高级功能的高级计划，例如 VIP 支持和 Elementor Expert Profile。

Elementor 插件的 Essential、Expert、Studio 和 Agency 计划每年收费 49 美元、199 美元、499 美元和 999 美元。因此，Elementor 适合所有人，无论您是网页设计师、开发人员还是代理所有者 - Elementor 都提供满足各种需求的功能。

结论：最终判决

经过全面审查，可以肯定地说 Elementor 提供了构建 WordPress 或 WooCommerce 网站所需的所有基本功能。

它带有轻巧、简单、易于理解和不臃肿的界面，让没有编码经验的网站设计师可以构建漂亮的网站。最好的部分是它带有满足每个人需求的定价计划。此外，Elementor 开发人员继续发布和推出新功能和改进。

在审查了插件的易用性、整体功能、性能、支持、界面和定价之后，我们将 Elementor 排在 WordPress 页面构建器插件的顶部。因此，请自行查看并尝试 Elementor 插件，然后选择适合您特定业务需求的计划。