在WordPress中使用元素的初学者指南

几十年前，创建一个网站需要在开发人员、文案和项目经理之间来回奔波。你花了几个月的时间才更新了你的网站。

如今,知道如何写代码并不是建立吸引人的网站的必要条件。页面建筑商像Elementor让它超级容易为非编码人员创建任何WordPress的网站他们想要的东西。

在本指南中，您将了解Elementor以及它如何帮助您构建一个令人惊叹的网站。

这个WordPress插件是一个一体化的解决方案，让你在一个平台上控制网站设计的每个部分。您可以自定义您的网站，以配合您的品牌的运动效果，多种字体，和增强的背景图像。

为什么你应该使用元素元素

Elementor适用于团队中所有类型的专业人员。如果你不精通技术，可视化编辑器可以让你灵活地拖动90多个小部件来创建内容，比如按钮、星级评分和进度条。为WordPress的开发者，它仍然是首选平台，具有脚本优化、自定义属性和回滚版本。

你能用Elementor构建什么?

Elementor是构建任何东西的有效工具——从整个网站到特定的登录页面。您可以设计销售页面、促销页面，甚至定制表单。如果你能想象，这个平台可以帮助你设计它。

看看这个用Elementor创建的餐厅网站。

图片来源

Elementor价格

Elementor提供了一个免费计划和多个付费订阅计划。免费版本提供了在站点上创建强大用户体验所需的所有功能，包括拖放编辑器、40多个基本小部件和30多个模板。

如果您想访问更高级的功能，比如添加表单和自定义CSS的能力，那么您可以升级到专业版本．以下是定价结构:

• 49美元/年1网站
• 99美元/年3网站
• 199美元/年1000网站

犹豫不决?Elementor已编制了一个详细的，易于扫描的列表专业vs免费功能．

如何安装元素

像其他WordPress插件，安装Elementor是快速和简单。有两种方法可以做到。

通过Elementor.com安装

• 去Elementor.com并点击开始．
• 因为Elementor要求你有一个，你会被问到你是否有一个活跃的WordPress站点。如果有，点击是的继续。如果没有，也没关系!Elementor将带领您完成创建一个的过程。注意:为了演示，我们将点击Yes。

• 接下来，选择您想要注册的Elementor计划。在这个演示中，我们将选择免费计划。

• 在他们的检查器中输入你网站的域名，以确保你的网站是在WordPress平台上。

• 确认网站兼容性后，点击安装Elementor．

• 如果你被引导到你的网站的管理登录页面，继续并登录。如果你已经登录，你会直接被带到Elementor插件页面。点击现在安装在右下角。

• 之后，您将到达一个带有确认消息的页面。点击激活插件．

• 完成了!现在可以开始使用Elementor页面编辑器了。

通过WordPress仪表盘安装

• 从仪表板上单击插件>添加新的。
• 在搜索字段中，输入Elementor并找到Elementor Page Builder。

• 点击现在安装．安装后,点击激活．

您将被带到一个欢迎页面，页面构建器将自动添加到侧边栏。但是，这个侧栏菜单项仅用于访问后端Elementor的设置，而不是用于编辑页面。

如何在WordPress中使用元素

使用Elementor，您可以将您的设计愿景变成现实。实时编辑允许您在设计时查看每个元素，从而使这个过程更加轻松。让我们研究一下Elementor编辑器。

元素编辑器的快速游览

Elementor为用户提供了一种直观的设计。因此，您可以在几分钟内学习编辑器的基本知识。

首先，创建一个新的页面或帖子，然后单击编辑与Elementor．

您将进入Elementor页面编辑器。这是你的页面看起来像:

在左侧，你会看到Elementor侧边栏，里面有所有你可以用来构建网页的拖放功能。只需单击、按住并将小部件拖动到要添加新模块的位置。

Elementor编辑器由三个主要构建块组成:节、列和小部件。部分是最大的积木。在“节”中，您可以添加一组列，而小部件位于列中。

编辑器会通过突出显示蓝色框中的Sections和Columns来告诉您可以将小部件拖动到哪里。注意，不能将小部件拖动到导航栏或标题中。

您可以使用蓝色句柄控制Sections、Columns和Widgets。只需右击手柄来编辑块。

当您滚动到页面底部时，您可以选择将小部件拖动到一个新的空白区域。

您可以搜索特定的小部件来定制您的页面。从基本元素中选择，如标题或图片库，或探索更高级的元素，如动画标题和证明旋转木马。

在网站设置菜单中，您可以设置页面的默认颜色和字体。您还可以在Elementor上配置整个网站的全局设置。

Elementor自带一个内置的Revision History部分。在Actions选项卡下，您可以跟踪您的更改，在每个操作之间来回移动。在“修订”选项卡下，您可以在修订之间进行切换，并恢复到任何以前的版本。

如何在Elementor中创建您的首页

Elementor在其竞争对手中脱颖而出，因为它易于使用。你可以自己在这个平台上构建你的第一页——不需要任何编码技能。

• 进入你的WordPress仪表盘。
• 点击页面,然后添加新．
• 点击编辑与Elementor进入页面构建器。
• Elementor将会像这样加载:

• 接下来,添加一个标题，文本编辑器,图像小部件。

• 一旦你把它拖到合适的位置，你就可以编辑每个小部件到你想要的内容。单击绿色发布按钮,完成了!您已经在Elementor中构建了您的第一页。

当你完成了你的页面设计，你可以预览然后发布它。以下是如何做到这一点:

• 转到Elementor编辑器左侧的面板。
• 要预览您的页面，请单击眼睛图标．
• 要发布，请单击绿色发布按钮。

Elementor模板

模板是预先设计好的页面和模块，可以帮助你设计WordPress网站。页面是完整的内容布局，而块是带有预先构建的小部件的部分，如页脚、页眉和faq。

Elementor允许您为您的业务使用任何模板。有一个字段可以根据页面类型、模板名称或标记搜索特定的模板。另外，所有的模板都是移动响应的。你可以把它们插入任何页面只需点击一下。

• 在Elementor编辑器中，导航到页面底部，有一个部分写着在这里添加小部件．点击白色文件夹。

• 图书馆将载入。要预览模板，请单击放大镜图标或在图像上单击。

• 单击绿色插入按钮。
• 如果您还没有连接到Elementor的模板库，它会提示您这样做。Elementor会自动将你重定向到它的网站，在那里你可以注册或登录。
• 在您注册或登录后，您的连接将被确认。
• 回到你正在编辑的页面插入你想要的模板。

完成了!您的模板已经加载完毕，可以进行定制了。

如何在Elementor中使用高级功能

Elementor的专业版提供了先进的功能，使您的WordPress网站进入下一个级别。您可以访问更多小部件、主题构建器、弹出构建器和自定义字段功能。

如何在Elementor创建一个弹出窗口

弹出形式帮助您从线索中捕获电子邮件地址。Elementor使用弹出式构建器更容易创建这些表单。按照以下说明创建自己的弹出窗口。

• 在你的WordPress仪表盘，转到模板>弹出窗口>添加新．
• 命名模板并单击创建模板．
• 从库中选择一个模板或创建自己的设计。
• 点击发布,那年代大街和关闭．
• 在Elementor中打开一个新页面(PC用户按CTRL + E;Command + E for Mac用户)。
• 拖入一个按钮小部件。
• 在布局、选择链接>动态>行动>弹出．
• 去弹出>打开弹出然后选择你创建的弹出窗口。
• 转到实时页面。
• 然后，点击按钮，看到弹出窗口出现。

它可能是这样的:

图片来源

如何在元素中定制WooCommerce产品页面

WooCommerce是一个流行的电子商务平台，帮助您建立一个网上商店为您的业务。与Elementor一起，您可以创建定制的产品页面来提高您的销售。

在你可以定制你的产品页面之前，你需要安装并激活你的WordPress仪表板上的WooCommerce和Elementor。你还需要在你的网站上添加一些产品。你可以了解WooCommerce设置在这里．

设置完成后，您现在可以设计您的产品页面。遵循这些步骤。

• 在你的WordPress仪表盘，转到Elementor>我的模板．
• 点击添加新按钮。
• 选择单一的产品作为您的模板类型并单击创建模板．
• 将加载Elementor Library。
• 接下来，选择一个预先设计好的产品页面模板，或者从头构建一个。

图片来源

• 在模板中，添加不同的产品小部件来定制页面。你可以找到这里的完整列表．

图片来源

• 当你准备预览你的页面时，点击左下角面板上的眼睛图标。
• 点击设置，然后选择您想要显示的产品。

它可能是这样的:

图片来源

• 要发布页面，请单击绿色发布左下角面板上的按钮。

关于元素的常见问题

关于元素还有什么问题吗?没有问题。下面是一些关于插件的常见问题和答案。

Elementor是否适用于所有主题?

是的，它适用于所有遵循WordPress编码标准的主题。

Elementor会让你的网站变慢吗?

Elementor是最快的页面构建器之一。然而，有些网站可能会导致缓慢的加载时间，但Elementor提供了一个指南如何解决网站速度问题．

Elementor对SEO是好还是坏?

元素可能对搜索引擎优化如果它减慢了你的网站，但通过遵循最佳实践，如压缩图像和限制过多的脚本，你可以有一个快速的网站，即使安装了Elementor。

最终的结论是元素，就像任何伟大的WordPress页面构建器，对搜索引擎优化是有好处的。通过帮助你创建一个漂亮的、响应式的网站，这个页面构建器可以让你保持用户在你的页面上。当访问者参与你的内容，搜索引擎算法将理解你的网站是有价值的，提高你的排名和提高你的SEO。

用Elementor构建你的WordPress网站

Elementor是一个WordPress插件专为帮助您为您的业务设计一个定制网站。它的用户友好界面使其成为非编码人员的有效平台。如果你想吸引和培养更多的客户，安装Elementor和HubSpot WordPress插件来增加你的转化率。

编者按:本文最初发表于2019年8月，为全面起见已进行更新。