7折
减价出售
¥799
Elementor 教程：如何使用它以获得最佳效果
Elementor 简介
在我们深入了解 Elementor 教程之前，让我们先回顾一下一些基础知识。Elementor 是一个 WordPress 页面构建器插件。
过去，页面构建器是设计整个 WordPress 网站而无需处理任何编码的最佳方式。今天，这可以使用内置的 WordPress 功能（如站点编辑器和块编辑器）来实现。
但是，像 Elementor 这样的页面构建器仍然为您提供更大的灵活性和自定义选项：
Elementor 使您能够使用称为小部件的拖放“元素”来创建您的网站。
此外，它还为移动网页设计提供了有用的功能。而且，它为您提供了 Elementor AI 的一些尖端功能。简而言之，Elementor 使初学者能够构建令人惊叹的、具有专业外观的网站，而无需接触任何代码。
WordPress 的 Elementor 教程：初学者指南
现在您对 Elementor 有了更多的了解，我们将在引导您完成构建网页的过程时重点介绍一些关键功能和特性。
- 模板库
- 拖放界面和小部件
- 小部件定制和管理
- 移动和响应式设计控件
- 元素人工智能
模板库
Elementor 的一大优点是它带有强大的模板库。这些预制设计可以帮助快速跟踪您的网站创建过程。
安装并激活 Elementor 后，您应该会在菜单中看到一个模板选项卡：
当您刚接触该插件时，您的保存模板将为空。
但是，如果您使用的是 Elementor 的高级版本，则可以访问主题生成器部分中的预制模板：
当您升级到付费计划时，您将获得完整的页面模板，用于产品页面、博客文章等内容。您还将获得页眉和页脚等部分的模板部分。
如果您是高级用户并且想要创建登录页面，您可以转到模板→登录页面→添加新的：
还有一个“块”选项卡，其中包含更多模板部分。您可以打开下拉菜单以查看新的类别：
但请记住，如果您使用的是该插件的免费版本，您将无法使用这些模板。在这种情况下，只需继续下一部分即可。
拖放界面和小部件 🖱️
现在，真正的 Elementor 教程开始了！让我们看看如何使用插件的拖放界面制作网页。
转到您的 WordPress 仪表板并导航到页面→添加新的：
点击 使用 Elementor 编辑按钮启动 Elementor：
如您所见，您的 Elementor 菜单位于左侧，内容区域位于右侧。在您的 Elementor 菜单/面板中，您将看到可以拖放到页面上的所有“元素”或小部件。
这些小部件具有简单的名称，例如标题、图像和文本编辑器。它们还分为布局、基本、专业、常规等类别。
要使用小部件，只需单击它按住它，然后将其拖到右侧：
我们将在页面中添加一个标题小部件：
将模块添加到内容区后，我们的小部件设置将在左侧打开。要更改标题文本，我们只需在标题下的文本框中写字：
我们在我们的中写了“Elementor 教程示例页面”。
小部件定制和管理
现在，让我们在本 Elementor 教程中对小部件自定义进行更多实验。首先，我们将使用 Image 小部件：
点击下面的框 选择图片 上传一张：
使用对齐功能将两个控件居中。
此时，您可能需要进一步探索每个小部件中的自定义设置。它们有内容、样式和高级选项卡。
如果我们返回标题模块，我们可以使用样式选项卡来更改颜色：
您可以从全局主题颜色中进行选择，也可以使用颜色选择器。在“高级小部件设置”选项卡中，您可以修改布局、背景、边框等：
通过单击箭头折叠和展开这些部分。了解 Elementor 页面的更大结构如何工作也很重要。将鼠标悬停在任何小部件上时，您会看到一些选项：
点击 x 将删除该小部件。同时，当您单击 x 和 + 之间的点时，您将打开该小部件的容器设置：
容器是包含每个页面元素的框。单击 + 符号时，您可以添加一个新容器：
现在您已经基本掌握了小部件和拖放界面，我们将深入研究一些更高级的功能。但首先，现在是保存您的工作的好时机。
为此，请使用“发布”旁边的箭头展开菜单选项。将您的作品保存为草稿或模板：
然后，当您准备好公开页面时，点击发布。
另请注意，您使用页面构建器制作的每个页面的顶部都会有一个标题，上面写着“Elementor”，后跟一个数字。这是在创建时生成的。您只需在块编辑器中打开该页面即可将其删除。
移动和响应式设计控件
全球 95% 的用户使用手机访问互联网 [1]。因此，每个网站在每台设备上看起来都不错并且正常运行至关重要。
要在 Elementor 中利用响应式设计控件，您可以首先在屏幕左下角启动响应式设计模式：
这将在编辑器顶部启动一些新设置：
也许这里最有用的功能是能够像在另一台设备上一样查看当前页面。默认情况下，您会看到页面在桌面上的显示方式，但您也可以查看平板电脑或移动设备视图：
使用响应式 WordPress 主题是确保您的网站适合移动设备的最佳方式，但这些功能非常有价值。
此外，您可以在高级小部件设置中访问响应速度更快的功能：
在这里，您可以切换按钮以删除某些设备上的某些页面元素。例如，您可以对主页上的较大视频执行此作。
元素人工智能
最后，本 Elementor 教程中涵盖的最新和最前沿的功能之一是 Elementor AI。使用 Elementor 的免费版本，您可以使用它使用内置人工智能 （AI） 生成文本、图像甚至代码。
这些功能非常易于使用，您只需要知道在哪里可以找到它们。要生成文本，只需找到“使用 AI 编辑”按钮：
当您单击它时，您会看到一个页面，提示您连接到该工具：
完成该过程后，您将看到 AI 文本生成器框：
就像使用任何其他 AI 文本生成器一样使用它。它甚至包括复杂的选项，可让您更改语气和翻译文本。您可以使用它来生成标语、产品描述或您需要的任何类型的内容。
如果您想使用 AI 在 Elementor 中生成图像，只需找到任何图像字段旁边的“使用 AI 创建”按钮：
单击它即可启动 AI 图像生成器：
在左侧，您可以输入您的推广并自定义一些图像设置。
最后，您可以添加 HTML 小部件并使用 AI 生成自定义代码。只需点击 Edit with AI：
这将启动您的提示屏幕：
只需输入描述并点击生成代码。这些只是您将 Elementor 的 AI 功能用于网页设计的几种方法。
