如何在 WordPress 中使用 Elementor 页面构建器

当我们谈论 WordPress 页面构建器时，最受欢迎、活跃安装数量最多、社区最大的绝对是 Elementor。 到目前为止，大约有 800 万多个站点使用 Elementor 构建。 许多专家推荐使用它，因为它在构建 WordPress 网站时易于使用、速度快和巨大的可能性。

我已经测试了 Elementor 的 Pro 版本并构建了一个登陆页面。 它带有拖放功能，适用于任何主题，您可以同时使用所有 Free、Pro 和 WordPress 小部件。 让我们阅读本文以了解有关使用 WordPress 安装和配置 Elementor 的更多信息。

为什么选择 Elementor 页面构建器？

Elementor 是目前市场上第一个也是最先进的 WordPress 页面构建器之一。 它还拥有一个庞大的生态系统，许多较小的作者正在构建有用的附加组件和模板，您可以使用它们来减少最终结果所需的时间。

在 Elementor 的情况下，最终结果可能是一个非常棒的网站，设计精良，具有您需要或可能需要的所有功能。 您不会找到任何无法使用 Elementor 构建的 WordPress 网站。 如果您需要一些额外的功能，可以使用短代码轻松实现。

Elementor 页面生成器的功能

Elementor 的免费版本提供的 Elements 数量有限，但使用 Pro 版本，您可以获得诸如 QI、Ultimate Add Ons 等附加组件。此外，您将拥有大量有用的元素和模板来轻松构建您的网站.

忽略 Gutenberg 和 Elementor 的 Crocoblock 插件是不公平的，这是大多数 Elementor 用户最喜欢的工具之一，因为它扩展了原生 Elementor 的功能。

Elementor 将其功能分为 4 类。

1. 基本小工具

Basic Widgets 随免费版本一起提供，它们足以构建一个令人惊叹的网站，不需要目录、投资组合或表单等高级选项。 此外，在免费版本中，您无法构建标题/导航菜单，您可能需要找到一些带有您喜欢的导航菜单的酷 WordPress 主题。

2. 专业小工具

带有 Elementor Pro 的 Pro Widgets 几乎涵盖了构建任何类型网站所需的每个方面和每个小部件。 添加和选择来自不同类别、帖子类型的帖子或简单地列出最新的帖子、价格表、图库、翻转框、轻松嵌入的社交媒体网络、各种媒体轮播、Lottie Widget 和 HotSpot（我将在稍后讨论这个）。

3. 主题元素

主题元素也随 Elementor Pro 一起提供，当然它们对于构建所有模板页面和单个帖子模板很重要。 如您所知，有些页面会动态填充类别、标签、作者等内容。

对于这些页面，您需要使用主题元素创建模板。 单个帖子也是如此，您可以在其中为您的帖子设计一个漂亮的模板，所有帖子都将使用该模板，而无需每次都创建它们。 只需添加您习惯的内容即可。

4. WooCommerce 小部件

最后但并非最不重要的是，WooCommerce 小部件。 这些小部件允许您使用 WooCommerce 元素轻松地再次创建类似于 Theme Builder、模板页面和单个产品模板。

Elementor Page Builder 的定价和计划

Elementor Pro 附带 5 种不同的计划，所有计划都包含相同的 Elementor Pro 页面构建器和功能，例如：

• 拖放实时编辑器
• 响应式设计
• 90 多个基本和专业小工具
• 300 多个基本和专业模板
• 主题生成器

最低的计划是 Essential for 1 个站点，价格为 49 美元。 使用此计划，您可以获得高级支持，这意味着您可以在 24 小时内获得响应。 下一个计划是高级计划，它以 99 美元的价格涵盖 3 个站点的许可证，并提供相同类型的支持。

可能最受欢迎的是 Expert，25 个站点售价 199 美元。 此外，您将获得 Elementor 专家档案，您可以在其中发布在 Elementor 中完成的项目并获得一些新客户。

顶部之前的一个是 100 个站点的 Studio，价格为 499 美元，您可以享受 VIP 支持的额外好处，这意味着您有优先权，您的票将在 30 分钟内得到答复。 以 1000 美元的价格购买 1000 个站点的最昂贵的计划代理也是如此。

所有计划都是年度计划，如果您想知道订阅到期后网站会发生什么情况，答案是，网站看起来和以前一样，但您将无法编辑或使用 Elementro Pro 中的元素和模板。

Elementor 的系统/托管要求

根据 Elementor 的系统要求页面，即使使用 128MB 的 PHP、MySQL 5.6 或更高版本或 MariaDB 10.0 或更高版本，它也应该可以工作。 此外，它应该适用于任何 PHP 7+。 出于测试目的，我使用了带有 2GB PHP 内存的 VultrHF。

当然，您需要最新的 WordPress 版本和所有其他插件。

安装和配置 Elementor 页面生成器

安装 Elementor 的免费版本与安装 WordPress 插件存储库上的任何其他插件相同，转到 WordPress 仪表板 → 插件 → 添加新，浏览 Elementor，安装并激活插件。

对于 Pro 版本，您需要购买将在 Elementor 自动创建帐户的计划。 当您登录时，您将看到下载按钮以下载最新的 Pro 版本。

当您仍然登录到 Elementor 仪表板时，登录到您的 WordPress 仪表板 → 插件 → 添加新并选择上传，从您的计算机浏览下载的 Elementor Pro 文件，安装并激活它。

在 WordPress 仪表板的左侧边栏中完成后，转到 Elementor → 单击许可证 → 单击连接和激活按钮。

单击后，它会自动将您重定向到 Elementor 上的仪表板以激活它。 单击绿色的激活按钮，您就完成了。 您的 Elementor Pro 已连接并激活。

激活后，您将看到确认您的 Elementor 已激活。 但是，如果您已经在临时域上构建了站点并且您不想购买另一个实时许可证，您可以轻松地断开临时帐户并在实时域上激活它。

是时候开始使用 Elementor 并构建您的网站了。 我的建议是使用 Elementor 专门为 Elementor 构建的 Hello 主题。

为此，让我们首先创建一个页面“主页”并使用 Elementor 对其进行编辑。 转到页面 → 添加新，将其命名为主页并发布，然后单击使用 Elementor 编辑按钮。

在“编辑”页面上，您将看到无法编辑的元素，因为布局设置为默认值。 要在空画布上使用 Elementor，请单击左下角的齿轮图标，选择 Elementor Full Width 或 Elementor Canvas。

在开始构建站点之前，请确保单击左上角的汉堡图标并设置其余工作所需的所有全局设置。

站点设置与设置主题非常相似。 在这里，您可以为每个 HTML 标签选择全局颜色、您将使用的字体以及完整的站点版式。

除此之外，您还可以设置全局按钮样式、页眉、页脚、自定义 CSS（如果需要），以及您需要设置的所有内容，并在整个站点中保持相同以保持一致性。

第二个选项是 Theme Builder，它允许您创建模板页面和单个帖子/产品模板，这些模板将由特定的动态生成的页面、帖子或产品自动使用。 就像每个 WordPress 主题都需要有模板文件来显示上述所有内容一样，Elementor 让您无需编写任何代码即可完成。

最后一个选项是用户首选项，您可以在其中设置 Elementor 中的工作环境，不会影响站点本身，只会影响您作为管理员的 UI。

要启动您的网站，所有可用的小部件都放置在左侧边栏中，所有内容都可以通过拖放进行可视化编辑。 如果您想要一种更简单的方法，您可以通过单击文件夹图标使用预制块或模板之一开始。

文件夹图标将打开一个弹出窗口，您可以在其中看到预制的块和模板，以及您之前保存的块和模板。 您还可以保存您创建的块或整个模板，并在其他一些内部页面上重新使用它。 将您保存的块用于推荐是很常见的，一些特定的号召性用语不应显示在每个页面上，而是显示在某些页面上。

当您在没有任何以前经验的情况下开始构建网站时，您还需要了解一件事，它易于使用，非常直观，并且在几天内没有任何以前的经验，您将完全有能力为自己构建一个漂亮的网站，我什至可以说看起来很专业。

但是，您的网站需要在所有设备尺寸上看起来都很棒，并且与编辑桌面版本的方式相同，您可以编辑所有其他尺寸。 请注意，元素和小部件只能添加到桌面版本，然后您可以欺骗较小尺寸的外观。

此外，您可以轻松设置小部件或部分在不同设备上的可见性，这样您就可以在相似的部分中包含不同的内容，方法是让一个部分在桌面上可见，但在平板电脑和移动设备上隐藏。 同样，另一个隐藏在桌面上但在平板电脑和移动设备上可见。

要编辑手机和平板电脑版本，请单击左侧边栏底部的图标响应模式，它将在手机上显示您的网站。 在顶部，您可以在不同的屏幕尺寸之间切换。

为更清晰起见，我添加了两个部分，其中一个在移动设备和平板电脑上隐藏，另一部分在台式机上隐藏。 请看下面的例子。

最终结果是在移动设备上。

桌面上的最终结果只有一个部分，但不同的部分。

Cloudways 上的 Elementor 页面构建器性能

Elementor 表现相当不错，在 GTMetrix 上得分为 100，其他测试工具表现出非常出色的表现。 请注意，对于我们所做的所有测试，我尚未优化任何图像以具有完全相同的页面大小和图像。

– Elementor 在 GTMetrix 上的结果

– Pingdom 工具上的 Elementor 结果

– Elementor 在 WebPageTest 上的结果

概括

如果您需要一个直观且易于使用的页面构建器，Elementor 可能涵盖构建一个漂亮网站所需的所有方面。 如果您对 CSS 有任何了解，那么从设计中构建像素完美的网站并不难。

凭借庞大的社区和数百个扩展基本 Elementor 功能的附加组件和外部插件，我看不到任何类型的网站都无法使用 Elementor 构建。

我们经常看到 Elementor 是如何臃肿的，加载了很多不必要的代码，很难优化，但是从测试中可以看出，Elementor 在 Cloudways 上的表现似乎相当不错。 我已经测试了包含 25 张图片和 7 个部分 + 页眉和页脚的登录页面，这高于主页的平均水平。

Elementor 的另一个优点是学习曲线不陡峭但很轻松，通过使用一些预制模板或块，只需几分钟，您就可以拥有一个设计精美、外观现代的网站。