7折
减价出售
¥799
Elementor 教程：如何使用流行的页面构建器插件
一想到要自己创建一个具有专业外观的网站，就感到不知所措吗？在本教程中，我们将向您展示 Elementor 页面构建器插件如何帮助您在没有技术技能或设计师巨额预算的情况下做到这一点。
Elementor 功能强大但用户友好。它具有拖放界面、广泛的模板库和设计小部件——轻松创建网站所需的所有工具。
在本文中，我们将探讨您需要了解的有关此页面构建器解决方案的所有信息。您将了解如何安装和设置 Elementor、创建首页并探索其强大的功能。
让我们开始吧。
安装和设置 Elementor
在开始使用页面编辑器之前，您需要先安装它。为此，请在仪表板上找到“插件”部分，然后单击“添加新”。在随后屏幕的搜索栏中，输入“Elementor”并按 Enter 键。您应该在搜索结果的顶部看到该插件。
单击旁边的立即安装按钮。进入您的网站后，单击激活。 做。
使用 Elementor 创建和编辑您的第一页
了解 Elementor 的最佳方法是实际尝试它。按照本教程更好地掌握 Elementor 及其功能。
但是，在我们开始之前，这里有一些功能需要事先熟悉：
- 拖放功能 – Elementor 吸引力的核心在于其用户友好的拖放构建器。此功能使您可以轻松地在页面上添加、排列和自定义元素，而无需任何编码知识。
- 实时编辑 – Elementor 提供实时编辑体验。当您对页面进行更改时，您会看到它们实时发生，这简化了设计过程并帮助您更高效地构建网站。
- 模板和块 – Elementor Free 包括预先设计的模板和块的基本集合。这些资源使您可以快速构建具有专业外观的页面。当然，Elementor 的付费版本显着建立在这一点之上。
- 样式选项 – 该插件提供常规设置，例如样式选项、动画效果和多列布局。这些选项可以更轻松地为您的网站创建独特的外观和感觉，并且足够灵活以满足各种设计需求。
- WooCommerce 集成 – 对于那些运行电子商务网站的人来说，Elementor 与 WooCommerce 集成。这种集成允许您设计自定义 WooCommerce 产品页面，从而显着增强购物体验。
现在，让我们来看看上述内容的一些实际应用。
1. 创建页面
在 WordPress 中，转到页面并选择添加新的。为您的新页面指定一个反映内容或其目的的标题。命名后，单击“使用 Elementor 编辑”按钮。这会将您从 WordPress 界面过渡到 Elementor 的页面构建器。
熟悉 Elementor 页面编辑器
Elementor 打开一个由两部分组成的界面：主编辑屏幕和侧边栏。
以下是它们协同工作的方式：
- 侧边栏 – 这是 Elementor 的控制中心。在这个地方，您会发现大量可用于构建网页的拖放功能和小部件。
- 主编辑区域 – 这是您的页面形成的地方。当您从侧边栏拖动小部件时，您可以将它们拖放到此区域并开始塑造页面布局。稍后会详细介绍。
- 导航器 – 这个非常有用的功能就像页面结构的路线图。它提供了页面上所有元素的可视化表示，并按层次结构组织。这包括部分、列和小组件。要访问导航器视图，请右键单击 Elementor 编辑器中的任何小部件、列或部分，然后从上下文菜单中选择导航器
- 查找器 – 此功能允许您搜索和访问 Elementor 和 WordPress 中的任何页面、模板或设置。这包括帖子、页面、设置、模板，甚至特定的 Elementor 小部件。您可以通过按 CMD / CTRL + E 轻松打开 Finder。
基本构建块
当您在整个教程中使用 Elementor 时，您可能会注意到大多数页面由三个主要元素组成：
- 部分 – 将部分视为页面的基础层。它们是您开始构建页面的最大构建块。
- 列 – 在每个部分中，您可以插入列。它们充当小部件的容器，有助于更精确地组织内容。
- 小部件 – 小部件是实际的内容元素——如文本、图像、按钮等。您会在侧边栏中找到许多小部件，可以拖放到您的部分和列中。
在构建页面时，您将使用这三个。
2. 添加页面元素
首先，您需要调整页面的布局。使用 + 按钮添加新部分。
之后，您可以在不同的列结构之间进行选择。
确定基本布局后，您可以添加小部件。例如，您可以通过将“标题”小部件拖到页面上的部分或列中来添加标题。
要添加一些文本，请将文本小部件从 Elementor 侧边栏拖到您想要的部分。单击文本框开始输入或粘贴您的内容。
当然，要添加图像，您可以使用图像小部件。您可以从库或直接从计算机上传图像。
重复此过程以添加按钮或您想要包含的任何其他功能。
3. 自定义 Elementor 小部件
放置后，可以自定义每个小部件。要编辑部分、列或小部件，只需单击它们即可。这允许您在左侧边栏中访问其他自定义选项，例如样式、布局调整等。
其一，有“样式”选项卡。在这里，您可以自定义不同元素的内容。例如，对于标题小组件，您可以调整字体、大小、颜色和对齐方式。
此外，还有“高级”选项卡。在这里，您可以更改边距和填充、边框、背景等。您甚至可以隐藏某些类型设备上的元素。
尝试不同的小部件和样式，找到适合您页面的完美外观。但请注意，免费版本仅附带一些基本选项。
基本上，您可以访问的只是用于向页面添加标题、文本、图像、视频、按钮、分隔线和间隔线以及 Google 地图和图标的小部件。
您还可以使用内置的 WordPress 小部件，例如类别列表、最近的帖子、导航菜单等。但是，如果您想要完整的工具箱，则必须获得网站构建器的付费版本。
4. 设置全局默认值
温在本 Elementor 教程中需要介绍的另一件事是如何为网站上的全局设置设置默认值，例如字体和颜色。为此，请单击 Elementor 侧边栏左上角的汉堡菜单，然后选择站点设置。
使用“设计系统”和“主题样式”下的选项来调整网站上的颜色，配置不同顺序的标题、样式按钮、图像或表单字段的外观，以及配置页眉和页脚的设置。
您可以在每个小部件的基础上覆盖其中的大部分内容，但是，建立默认值对于使最终结果看起来一致大有帮助。
5. 访问修订历史记录
如果您发现自己的设计已经发展到您不相信的方向，请不要担心。Elementor 的修订历史记录允许您通过单击几下来跟踪和恢复更改。
历史记录图标位于边栏底部，可让您查看编辑会话期间执行的所有作的日志。
您可以使用它在作之间来回移动，并在需要时恢复到以前的版本。这样，您就不必费力地记住并撤消所有让您陷入设计死胡同的事情。
6. 探索 Elementor 模板
模板可以节省大量时间。它们是预先设计的页面和部分，您可以按原样使用或自定义以满足您的需求。Elementor 以多种不同的形式提供它们。
要访问模板，请单击 Elementor 编辑器中任何部分内的文件夹图标。
这将打开模板库。
它包含块和整个页面布局的模板。使用顶部的搜索功能或类别过滤器来定位您要查找的内容。您可以通过单击模板来预览它们。如果您对自己的选择感到满意，请单击“插入”将模板放置在您的页面中（请注意，您必须创建一个免费的 Elementor 帐户才能使用模板库）。
加载模板后，您可以像以前一样开始自定义它。单击模板中的任何元素以修改其内容、样式和设置。
在免费版本中，可用模板的数量非常有限。专业版中还有更多功能。
7. 发布您的页面
对设计感到满意后，单击发布以使您的页面上线。您也可以随时稍后返回并编辑页面。
Elementor Pro 提供什么？
我们已经在本文中多次提到 Elementor 的付费版本。从纸面上讲，该插件是免费增值优惠，具有一些无需付费即可使用的基本功能以及高级优惠中的附加选项。
然而，事实上，免费插件版本不会让您走得太远。它提供基本的设计控制和常规设置，包括样式、动画、效果以及添加短代码和 HTML 代码的能力。它还包括移动编辑和响应式 UI 功能。
但是，如果您的目标是构建真正基本的网站以外的任何东西，则需要购买 Elementor Pro。它显着扩展了免费版本的功能，提供了一套高级功能，可满足广泛的网页设计和营销需求。
强大的主题生成器
Elementor Pro 添加了完整的WordPress主题构建支持，使您可以超越设计单个帖子或页面，例如本教程中。您可以直接使用 Elementor 自定义主题模板文件，包括设计页眉、页脚、单个帖子、存档甚至 404 页的模板。
此功能还包括用于动态插入各种元素（如帖子标题和特色图片）的特殊小部件。
扩展模板库
虽然 Elementor 的免费版本提供了基本的页面模板集合，但 Elementor Pro 提供了更广泛的选择。这包括 100 多个网站工具包，这些模板是帮助您创建完整网站的模板集合，涵盖各种利基市场。
这些工具包对于构建客户站点特别有用，因为您可以导入工具包，然后根据客户的要求对其进行自定义
WooCommerce 构建器
对于那些创建在线商店的人来说，Elementor Pro 的 WooCommerce Builder 可让您完全自定义您的商店，包括单个产品页面、商店列表页面以及购物车、结帐和我的帐户页面等关键元素。
此功能可确保在您的网站上提供一致的品牌购物体验。
全局设置
使用 Elementor Pro，您可以更好地控制网站的全局设置。这包括高级自定义选项，例如将自定义 CSS 直接添加到小部件、列和部分，以及在设计中使用独特的运动效果和自定义字体。
表单生成器
Elementor Pro 的内置表单生成器使创建复杂的表单变得简单，并与 CRM 和营销工具无缝集成。将其用于潜在客户生成，具有各种字段类型、样式选项以及在表单提交后设置作的能力。例如，您可以显示确认弹出窗口或将访问者重定向到感谢页面。
弹出窗口生成器
Elementor Pro 中的此功能取代了对专用弹出插件的需求。您可以设计各种类型的弹出窗口（模式、通知栏、滑入式、全屏填充物等），并具有详细的定位和触发规则。该构建器用途广泛，用途广泛，从公告和电子邮件列表构建到联系表单和社交分享提示。
人工智能功能
Elementor 是处于 WordPress 中使用 AI 最前沿的 WordPress 公司之一。因此，他们的插件具有许多功能，可帮助您在人工智能的帮助下更快地创建网站。
感谢您与 ChatGPT 的连接，您可以让该插件为您的网页创建文本和图像。此外，还支持 AI 用于创建代码片段和自定义 CSS。
最后的想法：Elementor 教程
今天，我们介绍了使用 Elementor 的基本步骤，从安装到创建第一个页面，并探索了 Elementor Pro 的扩展功能。
Elementor 对于任何试图构建复杂的 WordPress 网站但缺乏技术技能的人来说都是一个非常有用的工具。对于专业设计师和开发人员来说，它也是更快地构建网站的绝佳工具。
页面构建器插件提供了一个灵活而强大的平台，可以将您的网站创意变为现实。它的成功是有原因的。但是，如果您真的想利用它所提供的功能，您将无法绕过为其高级版本付费。
