使用适用于WordPress的Elements插件快速创建网站

您可能已经知道, Envato Elements是一个巨大的创意数字资产存储库。 通过订阅它,您可以获得无限制的下载和商业权利,可以访问超过一百万个高级主题,模板,插件和其他便于网站开发的便捷项目。

Elements WordPress插件
Elements WordPress插件

为了使WordPress用户更易于访问该存储库,Envato为此开发了一个优雅的新WordPress插件。 目前, Elements WordPress插件提供了数十个模板工具包,它们一起包含一千多个精心设计的模板,您可以在创建WordPress网站时使用它们。 因为它旨在与流行的WordPress页面构建器(例如Elementor和Beaver Builder)无缝协作 ,所以您在使用它时不必编写任何代码。

在本教程中,我将向您展示如何使用Elements插件以及Elementor页面构建器插件来快速创建WordPress网站。

首先登录到WordPress实例的管理信息中心,然后选择插件>添加新内容 在打开的页面的搜索字段中,输入“ Envato Elements”以查找Envato Elements-Template Kits插件。 该插件仍处于测试阶段,但非常稳定,已经有40,000多个活动安装。

Envato Elements的搜索结果

按下插件卡中显示的“ 立即安装”按钮开始安装。 安装完成后,请按“ **”按钮,以便您可以开始使用插件。

要充分利用Envato Elements插件,您需要一个支持拖放操作的WordPress页面构建器。 Elementor就是这样的一个插件。 它的免费和付费版本都与Elements插件兼容。 对于本教程,免费版本的插件就足够了。

在同一搜索字段中键入“ Elementor”,以找到Elementor Page Builder插件的卡片。

元素搜索结果

然后按其中显示的立即安装按钮开始安装。 安装成功完成后,请不要忘记按“ **”按钮。

要开始使用Elements插件,请切换到仪表板上新添加的Elements选项卡。 首次打开此选项卡时,必须提供您的电子邮件地址并同意Envato的使用条款。

Envato Elements欢迎屏幕

完成此操作后,您可以按“ 继续”按钮转到插件的主页,您可以在其中浏览所有可用的模板套件。

Envato Elements模板工具包的所有模板都倾向于具有相同的主题,并且每个模板通常都可以用作网站的单独页面。 某些模板套件甚至可以为同一页面提供多种设计。 例如, Day Spa模板套件为您的网站主页提供了两个模板。

日间水疗模板套件

请注意,某些模板上带有Pro标签。 如果要使用它们,则必须升级到Elementor Pro。

单击模板时,您将对其进行仔细研究。 您还将能够看到它意味着什么类型的页面。

日间水疗中心首页模板

要开始使用模板,您可以从模板创建一个草稿页,也可以将其导入,以便可以在Elementor界面中使用它。 现在,我建议您通过按“ 导入模板”按钮来导入它。

导入完成后,您将在WordPress管理面板的“ 模板”>“已保存的模板”页面中找到该模板。

已保存模板列表

现在有了模板,您可以使用它为WordPress网站创建页面。 因此,转到WordPress管理面板的信息中心,然后按“ 元素或概述”部分中的创建新页面按钮。 完成后,Elementor将为您生成一个新页面,为其分配一个随机数,并显示一个直观的WYSIWYG界面,您可以对其进行编辑。

Elementor页面编辑界面

如您在上面的屏幕快照中所见,该页面具有一个包含三个按钮的放置区:一个用于添加部分,一个用于添加模板,一个用于添加Envato Elements块。 因为我们要使用保存的模板来创建此页面,所以单击第二个按钮,即带有文件夹图标的按钮。

在弹出的对话框中,切换到“ 我的模板”选项卡,然后单击保存的模板旁边显示的“ 插入”按钮。

当询问您是否要导入模板的文档设置时,选择“ 是”

然后,您将需要等待几秒钟的时间,模板才能将您的空白页转换为具有专业外观且几乎可以立即使用的页面。

模板已应用于页面

恢复对页面的控制后,您唯一需要做的就是用与业务相关的所有占位符文本和图像替换其所有占位符文本和图像。 您可以单击一次该文本,以在左侧显示的功能强大的文本编辑器中对其进行编辑,也可以单击两次以内联方式对其进行编辑。

Elementor文本编辑器

如果要从页面中删除元素,则必须右键单击它,然后按Delete键。 此外,您可以通过单击Delete Section按钮删除它所属的整个部分。

在根据您的要求自定义页面后,继续并单击“ 发布”按钮以使其在WordPress网站上可用。

发布的WordPress页面

默认情况下,Elementor会为页面分配一个基于数字的随机永久链接。 要为其提供更有意义的URL,请单击“ 退出到仪表板”按钮退出Elementor界面。 然后单击“ 永久链接”下拉列表,键入所需的URL,然后按“ 更新”按钮。

更改固定链接


如果您希望对页面的布局和外观进行细粒度的控制,则最好使用块而不是模板。 模板代表完整的页面,而块仅代表页面的独立部分。

WordPress的Envato Elements插件提供了数百个手工制作的块。 它具有基本块,例如英雄单位,页眉,页脚和地图。 它还具有更复杂的功能块,例如定价菜单,常见问题解答部分,图像库和滑块。

要使用块创建新页面,请再次单击仪表板中的“ 创建新页面”按钮。 接下来,在Elementor界面中,打开“ 设置”选项卡,然后将“ 页面布局 选项更改为Elementor Canvas 您必须执行此操作才能创建一个完全空白的页面,其中没有任何默认的页眉,页脚或侧栏,而这可能是WordPress主题的一部分。

Elementor页面编辑界面中的空白页面

要添加第一个块,请单击放置区域内的Envato图标。 在弹出的对话框中,您将能够看到Envato Elements插件提供的所有块。

显示所有可用块的对话框

为了举例,让我们向页面添加一个英雄单位。 因此,请选择Hero类型的任何块,然后按Insert Block按钮。

插入块对话框

页面上的块可用后,编辑其内容与编辑模板的内容没有什么不同。 您需要做的就是单击要编辑的项目,然后内联或使用文本编辑器进行更改。

编辑英雄单位

一个页面通常由几个块组成。 因此,在对第一个块的内容满意之后,可以继续将另一个块添加到同一页面。 因此,向下滚动页面,直到找到下一个拖放区,然后单击其中包含的Envato图标。

这次,让我们添加一个显示常见问题列表的块。 要仅查看这种类型的阻止,请在“ 按类型浏览”字段中选择“ 常见问题解答”选项。 然后选择与您的英雄单位完美融合的任何方块并将其插入。

您会注意到,用于编辑该块内容的编辑器略有不同。 那是因为您现在正在处理项目列表。 使用此编辑器,添加更多列表项以及删除或重新排列现有列表项非常容易。

列表编辑器界面

要编辑问题或其答案,只需单击相关的列表项。 一旦这样做,您将看到熟悉的文本编辑器再次出现。

列表编辑器中可用的文本编辑器

您可以随时单击“ 预览更改”按钮查看页面外观。 此外,如果您希望在手机或平板电脑的屏幕上查看页面的外观,可以按Control / Command-Shift-M Envato Elements插件提供的所有块和模板都具有响应能力,并且在所有屏幕尺寸上均显示出色。

Elementor的移动视图

完成第二个块的编辑后,您可以再次向下滚动以找到下一个拖放区并添加另一个块,例如Footer类型。 这是一个示例页脚块:

样本页脚块

最后,当您认为页面已完成时,可以单击“ 发布”按钮以将其发布到WordPress网站上。

结论

现在,您知道如何使用Envato Elements插件和Elementor页面构建器快速轻松地创建有吸引力的WordPress网站。 在本教程中,您使用了两个插件都提供的一些最重要的功能。

Envato Elements插件正在Swift发展。 这意味着,除了模板工具包之外,它还将很快开始提供大量库存照片和其他创意资产。 确保定期进行更新,以便您始终可以访问其所有最新功能。

要了解有关Elements插件的更多信息,可以参考其源代码或访问其支持论坛

Envato Elements上有成千上万的图形,模板,视频,插件等可供选择。 最重要的是,您可以以每月低廉的价格下载任意数量的内容! 使用Elements插件,可以在WordPress网站中轻松使用这些项目。

翻译自: https://code.tutsplus.com/tutorials/create-websites-fast-with-the-elements-plugin-for-wordpress--cms-32913