您想在 WordPress 中创建自己的自定义页面布局吗?
Elementor 是一款拖放式 WordPress 页面构建器,可让您轻松设计自定义 WordPress 布局,而无需任何编码知识。
在本文中,我们将向您展示如何使用 Elementor 只需单击几下即可轻松创建自定义 WordPress 布局。
![如何使用 Elementor 创建自定义 WordPress 布局 如何使用 Elementor 创建自定义 WordPress 布局](https://www.wpbeginner.com/wp-content/uploads/2017/07/how-to-create-custom-wordpress-layouts-with-elementor.png)
为什么以及何时需要自定义 WordPress 布局?
许多免费和高级 WordPress 主题都为不同类型的页面提供了多种布局选择。然而,有时这些布局都不能满足您的要求。
如果您知道如何使用PHP、HTML 和 CSS 进行编码,那么您可以创建自己的页面模板,甚至为您的网站构建子主题。但是,大多数 WordPress 用户不是开发人员,因此此选项对他们不起作用。
如果您可以使用拖放界面来设计页面布局,那不是很棒吗?
这正是Elementor所做的。它是一个拖放式 WordPress 页面构建器插件,允许您轻松创建自己的自定义 WordPress 布局,而无需任何编码技能。
它具有直观的用户界面,可让您通过实时预览构建自定义布局。它配备了许多适用于各种网页设计元素的即用型模块。
Elementor 拥有多个专业设计的模板,您可以立即加载并用作起点。它适用于所有符合标准的 WordPress 主题,并与所有流行的 WordPress 插件兼容。
话虽如此,让我们来看看如何使用Elementor创建自定义 WordPress 布局。
Elementor 入门
首先,您需要购买Elementor Pro插件。它是免费 Elementor 插件的付费版本,让您可以使用附加功能和 1 年支持。
接下来,您需要安装并激活 Elementor 插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。
激活后,您必须访问Elementor » 设置页面来配置插件设置。
![元素设置 为不同的帖子启用 Elementor](https://www.wpbeginner.com/wp-content/uploads/2017/07/enable-elementor-for-different-posts.png)
在这里,您可以为不同的帖子类型启用 Elementor 。默认情况下,它会为您的 WordPress 帖子和页面启用。如果您的网站上有自定义帖子类型,那么这些类型也会出现在此处,并且您也可以启用它们。
您可以排除或包含在编写帖子或页面时可以使用 Elementor 的用户角色。默认情况下,页面构建器仅为管理员启用。
然后,不要忘记单击“保存更改”按钮来存储您的设置。
使用 Elementor 创建自定义 WordPress 布局
首先,您需要在 WordPress 网站上创建一个新页面或帖子。在帖子编辑屏幕上,您会注意到新的“使用 Elementor 编辑”按钮。
![使用 Elementor 按钮进行编辑 使用 Elementor 进行编辑](https://www.wpbeginner.com/wp-content/uploads/2017/07/edit-with-elementor.png)
单击它将启动 Elementor 用户界面,您可以在其中使用 Elementor 的拖放页面构建器编辑页面。
您可以添加部分并从头开始构建页面,也可以选择一个模板。
![Elementor 构建器界面 使用 Elementor 编辑页面](https://www.wpbeginner.com/wp-content/uploads/2017/07/edit-a-page-with-elementor.png)
模板为您提供了一种快速、简单的入门方法。Elementor 附带了几个专业设计的模板,您可以根据需要进行自定义。
让我们通过单击“添加模板”按钮开始创建模板。
这将弹出一个弹出窗口,您可以在其中看到可用的不同模板。您应该寻找与您想要的页面布局相似的模板。
在我们的示例中,我们正在查看404 页面模板。
![选择并插入模板 在 Elementor 中选择模板](https://www.wpbeginner.com/wp-content/uploads/2017/07/select-a-template-in-elementor.png)
现在,您需要单击选择您喜欢的模板,然后单击“插入”按钮将其添加到您的页面。
Elementor 现在将为您加载模板。
您现在可以开始编辑模板以满足您的需求。只需指向并单击任何元素即可选择它,Elementor 将在左栏中显示其设置。
![在 Elementor 中编辑项目 指向任意元素并对其进行编辑](https://www.wpbeginner.com/wp-content/uploads/2017/07/point-any-element-and-edit-it.png)
Elementor 布局如何工作
现在,我们来谈谈 Elementor 布局的工作原理。
Elementor 布局是使用部分、列和小部件构建的。部分就像您放置在页面上的行或块。
每个部分可以有多个列,每个部分和列可以有自己的样式、颜色、内容等。
您可以使用 Elementor 小部件在列和部分中添加任何内容。这些小部件是不同类型的内容块,您可以将它们放置在 Elementor 部分中。
只需选择一个小部件并将其放入您的部分或列中即可。有大量可用的小部件,涵盖了您能想到的所有流行的网页设计元素。
![元素小部件 将块添加到布局中](https://www.wpbeginner.com/wp-content/uploads/2017/07/add-blocks-to-the-layout.png)
您可以添加图像、文本、标题、图片库、视频、地图、图标、推荐、滑块、轮播等等。
您还可以添加默认的 WordPress 小部件,甚至是由您网站上的其他 WordPress 插件创建的小部件。例如,如果您使用WPForms为您的网站创建不同的表单,那么您可以在 Elementor 中使用它的小部件。
完成编辑后,您可以单击“发布”按钮旁边的箭头来查看不同的保存选项。
![保存并退出 Elementor 单击保存选项](https://www.wpbeginner.com/wp-content/uploads/2017/07/click-the-save-options.png)
注意:保存页面布局不会在您的WordPress 网站上发布页面,但会保存它。
您现在可以预览页面或转到 WordPress 仪表板。
这将使您返回 WordPress 帖子编辑器。您现在可以保存您的 WordPress 页面或将其发布到您的网站上。
![发布页面 更新或发布使用 Elementor 编辑的页面](https://www.wpbeginner.com/wp-content/uploads/2017/07/update-or-publish-page-edited-with-elementor.png)
在 Elementor 中创建您自己的模板
Elementor 允许您将自己的自定义布局保存为模板。这样,您将来就可以重复使用自己的模板来更快地创建新页面。
只需使用 Elementor 编辑您想要保存为模板的页面即可。
在 Elementor 构建器界面中,单击“发布”按钮旁边的箭头。您现在将看到更多保存帖子的选项。只需单击“另存为模板”选项即可。
![保存您的模板 Elementor 中的另存为模板选项](https://www.wpbeginner.com/wp-content/uploads/2017/07/save-as-template-option-in-elementor.png)
这将弹出一个弹出窗口,您需要在其中提供模板的名称。
输入名称后,单击“保存”按钮。
![模板名称 将您的页面保存到库中](https://www.wpbeginner.com/wp-content/uploads/2017/07/save-your-page-to-library.png)
下次创建自定义页面布局时,您将能够从“我的模板”选项卡中选择它。
您所要做的就是单击自定义页面布局的“插入”按钮。
![自定义模板 查看库中的页面布局](https://www.wpbeginner.com/wp-content/uploads/2017/07/view-page-layout-in-library-1.png)
您还可以导出此模板并使用 Elementor 在其他 WordPress 网站上使用它。
只需单击 3 点图标,然后单击“导出”选项。
![导出页面布局模板 导出页面布局模板](https://www.wpbeginner.com/wp-content/uploads/2017/07/export-page-layout-template-1.png)
从这里,您可以将模板下载到您的计算机上。
用于创建自定义布局的 Elementor 替代方案
除了 Elementor 之外,还有其他登陆页面和网站构建器可让您为网站创建自定义布局。
以下是您可以使用的一些最佳 Elementor 替代品:
- SeedProd是最好的拖放式 WordPress 网站构建器,可让您为登陆页面创建自定义布局。有 300 多个主题或登陆页面模板可供选择。SeedProd 还提供大量自定义选项和块来创建令人惊叹的页面。有关更多详细信息,您可以查看我们完整的SeedProd 评论。
- Divi是一个视觉主题和页面构建器。它已进入行业超过 14 年,提供用于创建 WordPress 布局的不同功能,包括布局库。可视化生成器中有很多自定义选项,您无需编辑任何代码。
- Thrive Architect是一款功能强大且适合初学者的页面构建器,您可以使用它来创建漂亮的布局。它配备了 352 多个模板和许多自定义选项。您可以使用其前端视觉构建器来编辑页面上的任何元素。有关更多详细信息,请参阅我们的Thrive Architect 评论。
- Beaver Builder是另一个流行的 WordPress 拖放页面构建器。它易于使用,您可以使用Beaver Builder轻松设置页面和帖子的布局。它还提供了登录页面的预构建模板,但数量没有 SeedProd 或 Divi 那么多。
我们希望本文能帮助您了解如何使用 Elementor 创建自定义 WordPress 布局。您可能还想查看我们对Elementor、Divi 和 SeedProd的专家比较,以及我们精选的最佳网页设计软件。