在上一课中，我们设置了设计系统，在本课中，我们将在此基础上定义网站设置和结构，其中包括网站标识、页眉和页脚以及网站布局等元素。
如果您像我一样，可能已经等不及要开始设计您的主页了。
我们快到了！但是设置站点结构是创建网站不可或缺的一部分，因此我强烈建议您在开始构建之前完成此步骤。
我们将从此处的站点标识开始。此部分是您定义网站的站点名称、描述、徽标和网站图标的地方。这些详细信息将被反复调用，以便在整个站点的各个位置以及外部（例如网络搜索结果）中重复使用。
输入您的网站名称……以及您的网站描述，也称为标语。此信息将显示在搜索结果中，因此它应该准确并包含相关关键字。
接下来，我们将添加网站徽标。您可以从许多不同的图像文件类型中进行选择，但对于初学者，我建议从 JPG 或 PNG 文件开始。PNG 非常适合徽标，因为它们以更好的质量显示文本和标志性图形，并且允许透明背景，所以这就是我要使用的。
单击加号图标以上传您的徽标。然后上传文件，选择您的徽标，然后插入媒体。
最后是站点图标。您的网站图标出现在您网站的浏览器选项卡中，以便在其他浏览器选项卡中快速轻松地识别您的网站。理想情况下，它应该是一个没有太多细节的简约图形，因为它以非常小的尺寸显示。
单击更新，然后刷新页面以预览这些更改。刷新页面，将我们带回编辑器，因此单击 Hamburger 菜单和 Site Settings 返回主站点设置菜单。
接下来我们将创建标题和导航菜单并为其设置样式。页眉出现在每个页面的顶部，有助于引导访问者浏览网站。
在我们开始之前，让我们查阅一下设计，这样我们就可以快速应用所有正确的设置。我们在左上角有一个徽标，在右侧，我们有一个菜单，其中包含指向网站页面的所有链接。
太好了，现在我们可以继续通过页眉设置来执行此设计。
请注意，您在此处看到的页眉和页脚选项仅在安装了 Hello 主题后才会显示。
点击进入页眉设置。
我们将通过每个选项，并配置我们希望出现在标题中的元素，以及它们的布局和样式。
根据设计，应显示徽标，因此将站点徽标保留为默认的 SHOW。接下来将标语切换为隐藏，因为它未在设计中使用，并保持菜单显示。
即使菜单设置为显示，也不会显示任何内容，因为我们还没有选择菜单。
让我们跳过设置来设置它，这样我们就可以看到我们正在使用的是什么。
单击底部的菜单……然后选择我们在课程前面创建的菜单。要显示选定的菜单，我们需要更新…并刷新。完美的。
让我们从页眉设置中中断的地方继续，并检查不同的可用布局。默认布局非常适合我们的设计。
现在我们来看看宽度选项。Full width 将标题内容的外部元素带到屏幕边缘，而 Boxed 将内容限制在特定大小的容器中。将其设置回盒装。
在 Content With 中，您会注意到 Pixels 的百分号和 PX。这表示您可以为此设置选择度量单位。在这种情况下，PX 是默认值。您可以使用滑块设置宽度，但在 XD 文档中，我们看到该网站设计为跨越 1,500 像素，因此您可以准确地输入 1,500。
现在将间隙设置为 20px 以允许我们在设计的每个部分周围看到的空白。
下面是背景类型。您可以使用它来设置背景样式，例如颜色或渐变。继续玩吧，玩得开心，因为当您构建站点的其余部分时，您将在图中再次看到这些选项。
完成后，单击方形色样并通过单击此图标清除颜色，将其保留为默认的白色。
单击站点徽标。将它从标题切换到徽标。哇，有点大 输入 125 作为宽度。
现在我们只需要设置菜单样式，我们就可以完成标题了！
我们已经选择了要显示的菜单，所以我们可以直接移动到菜单布局。切换到下拉菜单会将菜单设置为所有尺寸的汉堡包图标。我们将其保留在 Horizontal 上……并使用断点来设置切换或汉堡图标显示的大小。
由于我们在这个网站上只有三个页面，它们仍然很适合平板电脑大小，我们不需要断点……直到显示达到移动设备大小。
在颜色旁边，单击全局图标并选择我们之前在课程中创建的“葡萄”全局颜色，以设置导航菜单链接的颜色。
对切换颜色执行相同的操作。我们现在还看不到它，但稍后我们会在移动视图中预览标题时看到它。
最后，对于排版，单击全局图标以选择我们为导航菜单链接创建的全局字体样式。
好的，是时候预览响应式设计了。单击底部面板上的响应图标。
完美，一切在手机上看起来都不错。出现汉堡包菜单，我们可以点击它来查看菜单。通过单击编辑器顶部的平板电脑图标切换到平板电脑。平板电脑看起来也很棒，因此我们不需要在此处进行任何响应式更改。但别担心，我们将在课程后面详细介绍如何进行设备特定的更改。
这样，标题就准备好了。是时候处理页脚了。退出响应模式，单击返回，然后单击页脚。
参考网站设计，我们可以看到页脚由彩色背景和中心的版权文本组成。回到编辑器，您首先会注意到页脚设置与页眉的设置非常相似。因此，让我们快速浏览一下它们。
继续并隐藏站点徽标、标语和菜单，因为我们不需要这些元素。将 Layout 设置为 Centered，将内容宽度设置为 Boxed，1,500 像素，就像我们在 Header 中所做的那样。
对于背景，单击经典的画笔图标，然后选择葡萄。
展开版权部分并输入您的文本。为文本选择一种全局颜色，为排版选择一种全局字体。
单击以预览响应。一切看起来都很棒！
页眉和页脚将在网站的每个页面上自动重复，除非它们在页面设置中被禁用。这将使您的访问者可以轻松地浏览整个站点以找到他们正在寻找的内容。
单击 返回桌面，然后返回站点设置。
单击以进入布局设置。回想一下网站内容的宽度是 1,500 像素。我们可以设置一次并将其应用于所有页面，而不是在每个单独的页面上设置它，方法是在“站点设置”中进行。
对于内容宽度，输入 1,500。将默认页面布局设置为 Elementor 全宽，以隐藏标题并在每个页面上显示页眉和页脚。太好了，让我们更新以保存站点设置，然后返回到编辑器。
我将继续并通过右键单击此处并选择删除所有内容来从页面中删除示例。
现在，网站布局和结构已准备就绪，页面焕然一新，是时候开始构建页面内容了！所以请继续观看，并加入我们下一课，我们将在下一课构建我们的主页。
