在上一课中，我们创建了“我们的菜单”页面，涵盖了新的小部件，并提高了我们的 Web 构建技术。
在本课中，我们将通过创建“联系我们”页面、了解小部件定位并学习新的网站优化方法来完成网站。我们还将通过回顾来结束本课程，并建议您在 Elementor 旅程中采取的后续步骤。
让我们打开我们在课程前面创建的“联系我们”页面。
按Command 或 Control E打开 Finder，然后键入“联系人”。
请注意，找不到联系人页面。那是因为为了让它显示，我们需要先将联系人页面转换为 Elementor 页面。为此，单击退出到仪表板，返回页面，找到“联系我们”页面，然后单击将其打开。然后单击“使用 Elementor 编辑”按钮。从现在开始，我们将能够使用 Elementor Finder 找到此页面。
我们需要做的第一件事是添加我们之前创建的英雄部分的模板。单击灰色文件夹图标和我的模板选项卡。将鼠标悬停在模板上，然后单击插入。伟大的。
更改副标题……和标题文本。
然后，选择间隔符，并在“高级”选项卡中更改背景图像。
现在继续并删除其他元素，因为此页面不需要它们。
接下来，添加一个内部部分，然后右键单击此处，再添加一列。我们将在此处添加联系信息、电话号码和位置。
从小部件菜单中，找到一个图像框并将其拖到第一列中。更新图片……添加标题和描述。
接下来，在“样式”选项卡中，更改图像宽度。
在内容下，将标题颜色设置为罗勒色，并将排版更改为按钮文本。
现在，将描述的颜色更改为罗勒色，我们就完成了第一列！
在“高级”选项卡中，我们将添加一些填充。为此，
为单位选择百分比，取消选中链接值，并添加一些填充。
右键单击该列，并将其复制两次。现在删除空列。
更新第二个图像框的内容，并应用不同的颜色。对最后一个重复此过程。
就这样，我们完成了这一部分！
正如我在上一课中提到的，使用更少的元素（例如列和部分）会自动在您的网页上生成更少的代码，从而使它们加载速度更快。
所以接下来我们将看看如何优化这个部分，并在不使用内部部分和三列的情况下重新创建它。虽然此步骤是可选的，但我鼓励您尝试一下，以更好地理解这些优化技术。
所以，让我们开始吧！右键单击第一个图像框，然后复制它。现在，将其直接拖到垫片下方。默认情况下，每个小部件占据可用列宽度的 100%。蓝色轮廓显示小部件的宽度范围。
拖入第二个图像框，将其放在第一个小部件下方，因为在 100% 时，第一个图像框会将第二个图像框推到其下方。
但是，在“高级”选项卡中，您可以选择更改任何小部件的宽度。在定位下，您会看到“宽度”，其中有多个选项。
全宽，与默认设置相同，内联，将小部件的大小调整为其内容的宽度，以及自定义，让您可以自由设置您选择的宽度。
我们将选择自定义，这样我们就可以将 3 个小部件设置为它们之间的间距相等，就像我们之前创建的原始 3 列布局一样。
现在，我们知道列占用了 100% 的可用空间，因此通过将单位更改为百分比并输入 100，图像框小部件将继续占用列空间的 100%。
通过将其更改为 50，图像框将占据列宽度的一半。如果我们将第二个小部件的宽度更改为 50，您可以看到它们现在并排放置在列中。
（我想你可以明白我要说的是什么。）因为我们有三个小部件，我们需要每个小部件占据列宽的三分之一，所以将值设置为 33.3%。太好了，现在对第二个做同样的事情。
不继续复制第三个小部件，在这里，并将其拖到内部部分上方。在 Advanced 中，在定位下，为该图像框赋予相同的值。完美的！
我们现在已经为这个部分创建了完全相同的布局，但不需要内部部分小部件并且少了两列。
随着您不断获得在 Elementor 中构建网站的经验，您会开始发现自己想出了以更优化的方式构建网站的新方法。
因此，如果您想提升您的网页，请继续尝试优化布局！
接下来让我们删除内部部分，因为我们不再需要它了。
该页面看起来很棒，所以让我们进入响应模式以确保一切都正确显示。使用键盘快捷键Command Shift M，将带您直接进入平板电脑视图。
好的，这里的一切看起来都很棒所以让我们切换到移动设备
小部件在这里也彼此相邻显示，但是对于此视图来说有点紧，所以让我们将它们隔开以使它们更加可见。选择第一个图像框，然后在高级中的定位下，您会注意到移动视口图标。您会记得，这表示对此设置所做的任何更改都将仅显示在此视口大小，因为它是最小的断点。
将其设置为全宽。对第二个……和第三个图像框重复此步骤。太好了，让我们预览一下！
恭喜！您现在已经完成了在 Elementor 中构建您的第一个网站。做得好！
因此，让我们回顾一下我们所学的内容，并浏览一下该站点。
我们从安装和激活 Hello 主题开始，创建我们的网站页面，并添加导航菜单。
完成后，我们继续设置我们网站的设计系统和结构，包括我们的页眉和页脚。
然后，我们全力投入 Elementor Editor 来构建主页、我们的菜单页面和联系我们页面，并完成响应式编辑。
在整个课程中，我们涵盖了许多其他提示和技巧，以使您的网站构建过程更加高效和有效。
现在您知道如何从头到尾创建一个专业的网站，而无需使用一行代码！做得好！
如果您想进一步提高技能，您会在描述中找到我们众多资源中的一些链接，包括：
专用于 Elementor 小部件的播放列表、有关响应式编辑的视频、优化课程，甚至是完整课程关于使用 Elementor Pro 功能构建网站！
去看看吧！
我希望您喜欢这门课程，并对使用 Elementor 为您自己的企业或客户设计、构建和发布网站充满信心。
与往常一样，查看 Elementor Academy 以获取更多提示和教程。 直到下次！感谢收看。
