几十年前，创建网站涉及开发人员、文案和项目经理之间的大量来回。 仅仅在您的网站上更新了一些简单的更改就需要几个月的时间。
如今，不需要知道如何编码来构建引人入胜的网站。 像 Elementor 这样的页面构建器让非编码人员可以非常轻松地创建他们想要的任何 WordPress 网站。
在本指南中，您将了解 Elementor 以及它如何帮助您构建令人惊叹的网站。
什么是Elementor？
Elementor 是 WordPress 的拖放页面构建器。该插件可帮助您使用可视化编辑器创建漂亮的页面。它专为您快速构建动态网站而设计。
这个 WordPress 插件是一个多合一的解决方案——让您可以在一个平台上控制网站设计的每个部分。您可以使用动态效果、多种字体和增强的背景图像自定义您的网站以适应您的品牌。
为什么你应该使用Elementor
Elementor 适用于您团队中的所有类型的专业人士。如果您不精通技术，可视化编辑器让您可以灵活地拖动 90 多个小部件中的任何一个来创建内容，例如按钮、星级和进度条。对于 WordPress 开发人员来说，它仍然是具有脚本优化、自定义属性和回滚版本的首选平台。
您可以使用Elementor构建什么？
Elementor 是构建任何东西的有效工具——从整个网站到特定的登录页面。您可以设计销售页面、促销页面，甚至自定义表单。如果你能想象到，这个平台可以帮你设计。
查看这个使用 Elementor 构建的餐厅网站。
Elementor 是免费的吗？
Elementor 提供免费计划以及多个付费订阅计划。免费版具有在您的网站上创建强大的用户体验所需的所有功能，包括拖放编辑器、40 多个基本小部件和 30 多个模板。
如果您想访问更高级的功能，例如添加表单和自定义 CSS 的能力，您可以升级到专业版。 Elementor 价格分级如下：
1 个站点每年 49 美元
3 个站点每年 99 美元
25 个站点每年 199 美元
100 个站点每年 499 美元
1,000 个站点每年 999 美元
未定？ Elementor 编制了一份详细的、易于浏览的专业与免费功能列表。
如何安装 Elementor
与其他 WordPress 插件一样，安装 Elementor 既快速又简单。有两种方法可以做到。
通过 Elementor.com 安装 Elementor
第 1 步：转到 Elementor.com，然后单击开始。
如何通过 elementor.com 安装 elementor：单击 elementor 主页上的开始按钮
第 2 步：填写您的电子邮件地址和密码以创建帐户。
如何通过 elementor.com 安装 elementor：输入电子邮件地址和密码以创建帐户
第 3 步：回答一些有关该网站的用途以及您有多少建立网站的经验的问题。
第 4 步：选择您希望如何构建网站。您可以购买 Elementor Pro 插件或包含该插件以及 WordPress 安装和托管的捆绑包。您还可以查看其他专业计划或从基本免费版本开始。对于此演示，我们将选择免费计划。
如何通过 elementor.com 安装 elementor：选择 Elementor 计划
第 5 步：由于 Elementor 要求您拥有一个活跃的 WordPress 网站，请在他们的检查器中输入您网站的域，以确保您的网站在 WordPress 平台上。
如何通过 elementor.com 安装 elementor：Elementor 安装向导提示用户输入他们的网站域以检查它是否托管在 WordPress 上
第 6 步：确认您的网站的兼容性后，单击安装 Elementor。
如何通过 elementor.com 安装 elementor：Elementor 安装向导提示用户安装插件
第 7 步：如果您被定向到您网站的管理员登录页面，请继续登录。如果您已经登录，您将被直接带到 Elementor 插件页面。单击右下角的立即安装。
WordPress 插件库上的 Elementor 插件页面，标题为“Elementor Website Builder”
第 8 步：之后，您将进入带有确认消息的页面。单击激活插件。
完成的！ 一切顺利，准备开始使用 Elementor 页面编辑器。
通过 WordPress 仪表板安装 Elementor
第 1 步：在您的仪表板中，单击插件 > 添加新的。
第 2 步：在搜索字段中，输入 Elementor 并找到 Elementor Website Builder。
在 wordpress 仪表板中搜索 elementor 以立即安装
第三步：点击立即安装。 安装后，点击激活。
WordPresss 插件库中的 Elementor 插件卡带有一个按钮，显示激活页面构建器将自动添加到您的侧边栏。 但是，此侧边栏菜单项仅用于访问 Elementor 在后端的设置，而不用于编辑页面。
Elementor 添加到 WordPress 仪表板的侧边栏以配置后端
如何在 WordPress 中使用 Elementor
使用 Elementor，您可以将设计愿景变为现实。实时编辑允许您在设计时查看每个元素，从而使过程变得轻松。让我们探索如何使用 Elementor 编辑器。
Elementor 教程
Elementor 为用户提供直观的设计。因此，您可以在几分钟内了解编辑器的基础知识。
第 1 步：首先，创建一个新页面或帖子，然后单击使用 Elementor 编辑。
WordPress 页面，顶部工具栏中带有“使用 Elementor 编辑”按钮
第 2 步：您将进入 Elementor 页面编辑器。这就是您的页面的样子：
编辑视图中的 Elementor 页面编辑器，左侧是小部件库，右侧是页面内容
第 3 步：在左侧，您将看到 Elementor 侧边栏，其中包含可用于构建网页的所有拖放功能。
在开始拖放小部件之前，您首先必须了解 Elementor 编辑器由三个主要构建块组成：部分、列和小部件。部分是最大的构建块。在 Sections 中，您可以添加 Columns 组，并且 Widgets 位于 Columns 中。
编辑器将通过在蓝色框中突出显示部分和列来告诉您可以将小部件拖动到哪里。请注意，您不能将小部件拖到导航栏或标题中。
带有以蓝色突出显示的部分的 Elementor 编辑器，可供编辑您使用蓝色手柄控制部分、列和小部件。只需右键单击手柄即可编辑块。
第 4 步：准备好后，只需单击、按住并将小部件拖动到您要添加新模块的位置。例如，当您滚动到页面底部时，您可以选择将小部件拖到一个新的空白区域。
Elementor 页面编辑器的底部包含一个空白部分，其中包含文本 _Drag widgets here_
第 5 步：您可以搜索特定的小部件来自定义您的页面。从基本元素中进行选择，例如标题或图片库，或探索更高级的元素，例如动画标题和推荐旋转木马。
Elementor 仪表板中小部件的搜索栏
第 6 步：单击左角的汉堡按钮，然后单击站点设置。在此菜单中，您可以设置页面的默认颜色和字体。您还可以在 Elementor 上为整个网站配置全局设置。
elementor仪表板中的站点设置菜单包括设计系统、主题样式和设置的选项
第 7 步：最后，您可以单击面板底部的历史记录图标以访问 Elementor 的内置修订历史记录部分。在“操作”选项卡下，您可以跟踪您的更改，在每个操作之间来回移动。在“修订”选项卡下，您可以在修订之间切换并恢复到任何以前的版本。
Elementor 仪表板中的修订历史记录部分
如何在Elementor中创建您的第一个页面
Elementor 因其易用性而在其竞争对手中脱颖而出。通过在平台中构建您的第一页来亲自尝试——无需编码技能。
第 1 步：转到您的 WordPress 仪表板。
第 2 步：点击页面，然后添加新的。
第 3 步：点击 Edit with Elementor 进入页面构建器。
第 4 步：Elementor 将加载如下所示：
Elementor 页面编辑器，右侧是小部件库，左侧是新页面的内容
第 5 步：接下来，添加标题、文本编辑器和图像小部件。
用户将标题小部件拖放到 Elementor 页面编辑器内的可编辑列中
第 6 步：将其拖动到位后，您将能够根据自己的喜好编辑每个小部件。单击绿色的发布按钮，完成！您已经在 Elementor 中构建了第一页。
第 7 步：完成页面设计后，您可以预览然后发布它。首先，转到 Elementor 编辑器左侧的面板。
第 8 步：要预览您的页面，请单击眼睛图标。
第 9 步：要发布，请单击绿色的发布按钮。
Elementor模板
模板是预先设计的页面和块，可帮助您设计 WordPress 网站。页面是完整的内容布局，而块是带有预构建小部件的部分，例如页脚、页眉和常见问题解答。
Elementor 为您提供完全许可，可以为您的业务使用任何模板。有一个字段可以按页面类型、模板名称或标签搜索特定模板。另外，所有模板都是移动响应的。您只需单击一下即可将它们插入任何页面。
第 1 步：在 Elementor 编辑器中，导航到页面底部，其中有一个部分显示在此处添加小部件。点击白色文件夹。
Elementor 页面编辑器中的新页面，带有一个显示“将小部件拖到此处”的框和一个带有白色文件夹的按钮（应单击该按钮以访问模板库）
第 2 步：将加载一个库。要预览模板，请单击放大镜图标或图像。或者只是将鼠标悬停在一个上。
Elementors 模板库，有各种页面模板可供选择
第三步：点击绿色的插入按钮。
第 4 步：如果您尚未连接到 Elementor 的模板库，它会提示您这样做。 Elementor 会自动将您重定向到其网站，您可以在其中注册或登录。
页面提示用户连接到 Elementor 模板库
第5步：注册或登录后，您的连接将被确认。
第 6 步：返回您正在编辑的页面并插入所需的模板。
完成的！您的模板已全部加载并准备好进行自定义。
如何在 Elementor 中使用高级功能
Elementor 的专业版提供高级功能，可将您的 WordPress 网站提升到一个新的水平。您可以访问更多小部件、主题构建器、弹出窗口构建器和自定义字段功能。
如何在 Elementor 中创建弹出窗口
弹出式表单可帮助您从潜在客户那里获取电子邮件地址。 Elementor 使用其弹出式构建器更轻松地创建这些表单。按照这些说明创建您自己的弹出窗口。
第 1 步：在您的 WordPress 仪表板中，转到模板 > 弹出窗口 > 添加新的。
第 2 步：为您的模板命名，然后单击创建模板。
第 3 步：从库中选择一个模板或创建您自己的设计。
第 4 步：单击发布，然后单击保存并关闭。
第 5 步：在 Elementor 中打开一个新页面（PC 用户使用 CTRL + E；Mac 用户使用 Command + E）。
第 6 步：拖入一个按钮小部件。
第 7 步：在 Layout 下，选择 Link > Dynamic > Actions > Popup。
第 8 步：转到弹出窗口 > 打开弹出窗口并选择您创建的弹出窗口。
第 9 步：转到实时页面。
第 10 步：然后，单击按钮并看到弹出窗口。
以下是它的外观：
用户在 Elementor 页面构建器中创建一个弹出窗口并在实时页面图像源中对其进行测试
如何在 Elementor 中自定义 WooCommerce 产品页面
WooCommerce 是一个流行的电子商务平台，可帮助您为您的企业建立在线商店。与 Elementor 一起，您可以创建自定义产品页面以提高销售额。
在您可以自定义您的产品页面之前，您需要安装并激活 WooCommerce 和 Elementor 到您的 WordPress 仪表板。您还需要向您的网站添加一些产品。您可以在此处了解 WooCommerce 设置。
设置完成后，您现在可以设计您的产品页面。跟着这些步骤。
第 1 步：在您的 WordPress 仪表板中，转到 Elementor > 我的模板。
第 2 步：单击添加新按钮。
第 3 步：选择 Single Product 作为您的模板类型，然后单击 Create Template。
在 elementor 仪表板中创建单个产品模板的表单
图片来源
第 4 步：将加载 Elementor 库。
第 5 步：接下来，选择一个预先设计好的产品页面模板，或者从头开始构建一个。
Elementor 产品页面模板，有多种选项可供选择
第 6 步：在模板中，添加不同的产品小部件以自定义您的页面。您可以在此处找到完整列表。
Elementor 产品页面小部件的概述，包括菜单购物车按钮、添加到购物车按钮、产品图像和相关产品轮播
第 7 步：当您准备好预览页面时，单击左下方面板上的眼睛图标。
第 8 步：单击设置，然后选择要显示的产品。
它可能看起来像这样：
使用 Elementor 构建的产品页面示例，其中包含戒指的图像和标题“Love Knot Ring”
第 9 步：要发布您的页面，请单击左下方面板上的绿色发布按钮。
关于 Elementor 的常见问题
您还有关于 Elementor 的问题吗？没问题。以下是有关该插件的一些常见问题以及答案。
Elementor 是否适用于所有主题？
是的，它适用于所有遵循 WordPress 编码标准的主题。
Elementor 会减慢您的网站速度吗？
Elementor 是最快的页面构建器之一。但是，某些网站可能会导致加载时间变慢，但 Elementor 提供了有关如何解决网站速度问题的指南。
Elementor 对 SEO 是好是坏？
如果 Elementor 会减慢您的网站速度，它可能对 SEO 不利，但是通过遵循最佳实践，例如压缩图像和限制过多的脚本，即使安装了 Elementor，您也可以拥有一个快速的网站。
结论是 Elementor 与任何出色的 WordPress 页面构建器一样，对 SEO 有好处。通过帮助您创建一个美观、响应迅速的网站，此页面构建器允许您将用户留在您的页面上。当访问者与您的内容互动时，搜索引擎算法将了解您的网站是有价值的，从而提高您的排名并改善您的 SEO。
使用 Elementor 构建您的 WordPress 网站
Elementor 是一个 WordPress 插件，专门用于帮助您为您的企业设计自定义网站。其用户友好的界面使其成为非编码人员的有效平台。如果您想吸引和培养更多潜在客户，请安装 Elementor 插件以增加您的转化率。
编者注：这篇文章最初发表于 2019 年 8 月，为了全面性已经更新。不要忘记分享这篇文章！
