在上一课中，我们介绍了 Elementor Kit 库，学习了如何将工具包导入我们的站点，以及设置基本的导航菜单选项。
在本课中，我们将介绍
• Elementor 布局的基础知识
• 如何使用 Elementor Editor 添加元素，例如文本内容、图像和按钮
• 并自定义我们新导入的工具包以适合我们的风格
准备好？让我们开始吧！我已经创建了一个空白页面，以演示 Elementor Editor 的工作原理。您无需为您的博客创建此页面。但是，如果您想在我们开始自定义实际博客之前跟随并一起练习使用 Elementor，请随时这样做。
正如前面课程中提到的，每个 WordPress 网站都需要有一个主题，在我们的例子中，我们使用的是 Elementor Hello 主题。默认情况下，任何页面或帖子都会继承主题的页眉、页脚和标题。在某些套件中，您可能会遇到重叠的标题。不过别担心，我们马上就会解决这个问题。
使用 Elementor 构建页面时有两个主要区域：
位于屏幕右侧的内容区域，您可以在其中添加和编辑构成页面布局和设计的元素，以及提供各种有用的元素和选项。
让我们从内容区域开始。
我们可以通过两种方式开始。我们可以从头开始设计页面，也可以使用库中的模板。
让我们从图书馆开始吧。该库与套件库是分开的，不同之处在于它用于将单个模板添加到网页，而不是导入完整的网站。在这里我们可以预览我们保存的模板，查看完整的页面模板，甚至是用于组成页面小部分的块，并将它们插入到您的页面中。
通过选择类别或使用右侧的搜索栏来过滤块。
我们还可以将块和模板添加到我们的收藏夹中，以便于访问。
我将继续插入此块，以便我们了解 Elementor 编辑结构。伟大的！
使用 Elementor 构建的每个页面都可以深入到三个主要组件：部分、列和小部件。
部分是最大的，可以通过它们的蓝色边框来识别，就像我们在这里看到的那样。
每个部分都包含一个或多个列，我们可以通过黑色虚线边框来识别它们。这些列包含小部件，例如我们在此处看到的文本和按钮。我们用它们的句柄控制部分、列和小部件。
要更改部分、列或小部件，只需右键单击其句柄，我们可以在其中进行编辑、复制、删除等操作。
我们可以通过简单地拖放来移动部分、列和小部件。蓝线表示我们放手时它们的位置。
添加部分的另一种方法是单击此处的加号图标，然后选择这些预设结构中的一个，我们可以根据自己的喜好对其进行调整，或者直接删除它们。
Sections、Columns 和 Widgets 在左侧面板中有 3 个选项卡。部分和列有：布局、样式和高级选项卡。
而小部件有内容、样式和高级选项卡。很快我们就会看到如何使用这些设置来设计我们的页面。
请注意，每次我们单击一个元素时，它都会更改此处的 Panel Header 标题，以指示我们正在编辑的元素类型。
当我们第一次打开一个页面时，我们会看到小部件面板。小部件用于在您的页面上添加和设计元素，例如标题、文本编辑器、图像、视频等。我们可以随时通过单击面板标题中的九个方块图标来访问它们。
在面板底部，我们将找到对使用 Elementor 构建的页面有用的设置和选项。首先是页面设置，我们可以在其中编辑页面名称、上传特色图片、隐藏标题和更改页面布局。
接下来，我们可以通过单击此处启动导航器，或使用键盘快捷键 Command 或 Control I，快速导航到页面上的任何位置。目前，它是空的，因为我们还没有添加任何内容。我们稍后会在编辑我们的网站时使用它。
单击此处查看您的编辑历史记录，查看最近的更改或恢复到以前的修订。
没有针对移动设备进行调整的网站是不完整的。我们可以通过单击此处进入响应模式，并在屏幕顶部的不同设备之间切换，以调整我们的设计。或者，使用键盘快捷键 CMD 或 Ctrl+Shift+M 在设备之间快速切换。
一旦我们准备好预览我们的设计，我们可以单击此图标，这将在新选项卡中打开页面。当然，在我们这样做之前，我们需要将我们的更改保存为草稿，或者在准备好上线时发布页面。
返回面板标题，单击此图标打开菜单，其中提供了更多设置和导航选项。
站点设置，顾名思义，允许我们从一个地方全局定义我们站点的设置。我们会尽快回复他们。
Theme Builder，允许您从一个位置管理所有站点部分。我们将在下一课中更详细地了解主题生成器。
用户首选项，允许我们自定义 Elementor 工作区，例如切换到暗模式、更改面板的宽度等。
下面是 Finder，我们也可以使用快捷键 Command 或 Control E 启动它，并快速访问我们网站的不同部分。
最后，单击“查看页面”查看您的实时网站或“退出仪表板”返回 WordPress 仪表板。
好的，让我们使用刚刚学到的知识，编辑我们网站的页面，从我们的主页开始。我们将使用 Finder 快速访问使用 Elementor 编辑的任何页面。
还记得赞德吗？这是他的博客，因此我们需要对此页面和其他网站部分进行一些更改，以将此工具包变成 Xander 的网站。
我们将从第一部分开始，通常称为“英雄”部分。
我已经准备好我将在此页面上使用的所有内容，因此只需复制和粘贴即可更改它。单击文本编辑器小部件并更改文本及其上方的标题。
这里的图片很吸引人，但绝对不是 Xander。单击图像小部件；然后选择一个图像进行更改。您可以使用媒体库中的图片，上传自己的图片，或在课程描述中找到这些图片的链接。极好的。
现在，这个按钮仍然是橙色的，这与 Xander 的风格不太相符。这是来自套件的品牌，其设置来自全局样式。我们将有数十个（如果不是数百个）元素在我们的整个站点中使用这种颜色，因此我们不会一个一个地更改它们，而是很快就会看到如何从一个地方更改它们。
同时，让我们继续下一节，并更改此处的内容。我们将像上一节中那样更改文本和图像。不要忘记也编辑按钮文本。对于按钮的链接，我们将使用动态标记而不是添加页面的 URL。这将确保链接始终有效，即使我们将来更改 URL。
单击动态标签图标并选择“内部 URL”。然后点击扳手图标并从类型下拉列表中选择内容。接下来，我们将搜索并选择我们网站上的相关页面，在本例中为“关于”页面。
在我们的下一节中，我们只需要更改此标题和下面的按钮。我们甚至不需要触摸 Posts 小部件，因为帖子是从我们的 Posts Archive 中动态提取的。它目前由随套件导入的默认帖子组成。我们也会更新此按钮的链接，但我们不会选择内容页面，而是选择特定类别。为此，请再次选择“内部 URL”，然后在下拉列表中选择“分类法”。然后搜索“未分类”。这会将用户发送到一个存档页面，其中包含未指定特定类别的帖子。由于我们只有一个类别，“未分类”，它将显示 Xander 在他的网站上可用的所有文章。
继续我们的下一部分，该工具包显示来自不同类别的更多帖子，称为“提示”。由于 Xander 目前只为其文章使用一个类别，因此我们不需要显示此帖子类别。
但是，我们可以利用任何套件中的现有部件来发挥我们的优势，并更改它们的上下文以显示更多相关内容，例如推广 Xander 的数字产品。
首先，我们将更改标题。删除这些部分，以及这些帖子小部件。在小部件面板中，搜索号召性用语小部件，并将其放在左栏中。更改图像、标题和按钮文本。删除说明。
我们将在单击时设置此按钮，以便在单击时下载 Xander 创建的 PDF 文件。我们将再次使用动态标签和“内部 URL”选项来设置链接。从下拉列表中选择“媒体”。然后搜索适当的文件名。
现在让我们调整高度，并将此按钮的样式与套件的其余部分相匹配。转到“样式”选项卡并展开“按钮”选项。我们将调整按钮大小，并更改边框宽度。我们还将调整边框半径以锐化角，并匹配上面的其他按钮。
接下来我们将更新按钮悬停状态，即鼠标悬停时按钮的显示方式。单击悬停选项卡，并更改其样式，以匹配我们在此处看到的相同悬停效果。
对于文本颜色，单击全局图标并选择现有的白色。
对于背景颜色，选择强调。现在我们已经完成了第一个产品，我们将简单地复制和粘贴小部件，并更改其内容。
与免费清单不同，Xander 将提供此产品进行销售。因此，我们会将此按钮链接到内部产品页面或外部购买页面。有几个网站提供此服务，例如 Payhip 和 Gumroad。我们建议您自行研究并选择最适合您需求的。
或者，我们可以使用 PayPal 按钮小部件使用我们现有的 PayPal 帐户进行快速结账。
为确保此部分与下一部分之间有足够的空间，我们将单击右侧的列，转到高级，并将底部填充更改为 30%。Padding 用于在元素内添加空间，不应与 Margin 混淆，后者在元素外部添加空间。例如，如果我们向该部分添加边距，则会在该部分的底部和此处的这一行之间创建空间，该空间将应用于列的样式。
现在是时候个性化 Xander 的网站，让它完全属于他了。
单击汉堡菜单，然后转到站点设置。您会注意到面板颜色变为蓝色，表示我们正在编辑影响我们整个网站的设置，而不仅仅是打开的页面或帖子。
我们可以在这里个性化我们的站点标识。我们将看到站点标题和站点描述，我们已经在之前的课程中从 WordPress 仪表板添加了这些内容。
既然已经解决了，我们可以继续上传我们的标志。我们可以从许多不同的图像文件类型中进行选择，但对于初学者，我们建议从 JPG 或 PNG 文件开始。最后，我们将添加网站图标，这是我们在浏览器选项卡中看到的小图标。理想情况下，它应该是一个没有太多细节的简约图形，因为它以非常小的尺寸显示。单击更新以保存并刷新页面，以便预览我们所做的更改。
接下来，我们将使用独特的字体和颜色来定制我们网站的风格。
Xander 的网站应该包含成为数字游民、轻装上阵（因为他总是在移动）和专业人士意味着什么，因为每个数字游民都在远程工作。保持设计简约和干净是保持风格与 Xander 品牌一致的关键。
因此，让我们继续更新我们网站的样式。
我们可以从一个地方全部更改，而不是一个一个地更改每种颜色和字体，这可能会花费很长时间。
返回网站设置，让我们更新我们网站的样式。
在顶部，我们有全局颜色和全局字体。
我们将从全局颜色开始，在这里我们可以查看整个网站使用的主要颜色。请注意，在此处更改任何颜色都会影响使用此全局颜色的任何元素。
网络创建者通常使用品牌或风格指南来帮助促进他们的设计过程并保持整个网站的一致性。然而，当我们刚刚开始并且还没有这些指南时，这里有一个关于如何为我们的网站选择颜色的提示。
查看您的徽标，然后从中选择一种或两种颜色。通过 Xander 的标志，我们可以看到我们有这种鲜绿色。我们现在可以选择该颜色，并将其设置为我们网站上的焦点颜色。
对于这个网站，我们只需将次要颜色（橙色）更改为 Xander 的绿色，方法是粘贴颜色代码，其余颜色保持原样。
如果我们将来需要进行任何更改，我们可以随时返回此面板并调整我们的颜色。
随意暂停视频以进行您自己的更改，并在完成后返回。
接下来，我们将讨论全局字体，您可以在其中控制在整个网站上重复出现的不同字体样式。
但是我们怎么知道实际网站中哪种样式控制了哪些文本呢？
我会分享一个小技巧。单击面板一角的 X 返回编辑主页。
我们将单击我们看到的第一个标题，转到样式，然后将鼠标悬停在全局图标上。
将显示带有样式名称的工具提示。“英雄主称号”是我们的。
返回：菜单 > 站点设置 > 全局字体，然后搜索该名称。
现在我们可以修改全局字体样式，使用标题作为参考。
随意将默认工具包的字体（在本例中为 Poppins）更改为列表中您喜欢的任何字体。如果您知道字体的名称，只需在此处输入它的名称即可。我们将为 Xander 的站点使用“Krona One”。
还有更多的排版选项，例如尺寸、粗细等等。当谈到我们的在线品牌时，一致性是关键！
此外，一定要选择适合数字观看的字体，并且在小型设备上尤其可读。
伟大的！现在我们已经了解了如何使用 Elementor 自定义我们网站的不同部分，我们可以使用这些新知识来更新“关于”和“联系”页面上的内容。有了套件，它会快得多！
我已经准备好 Xander 的所有内容，只需复制和粘贴即可完成此过程。现在是上传我们将在整个站点中使用的所有 Xander 图像的好机会。如果您正在关注 Xander 的网站，您将在视频说明中的课程资产下找到内容。如果您正在创建自己的网站，那么现在是继续并相应地更新您自己的网站的好时机。
在我们的下一课中，我们将熟悉主题生成器，它允许我们编辑和管理我们所有的站点部分，例如页眉、页脚、页面模板等等——所有这些都在一个地方！
到时候那里见！
