使用容器构建您的第一个页面

现在您已经知道如何创建新页面，我们将向您展示如何在 Elementor 中使用 containers（容器） 构建您的第一个页面。容器取代了之前的 sections（部分）和 columns（列）系统，提供了一种更简单、更灵活的方式来构建网页。

在开始之前，如果您还没有熟悉 Elementor 编辑器的布局，您应该先了解一下。

您可能还想熟悉一下 containers（容器） 的概念。

让我们开始构建吧

现在是动手实践的时候了——我们将从构建一个称为 Hero section（头部区域） 的部分开始。Hero section 是页面顶部通常具有突出显示的大型元素。它们旨在吸引访客并使其留在您的网站上。

我们将基于我们的模板库中可以找到的一个 Hero section 来进行构建，所有 Elementor Pro 和云用户都可以使用。

一个好的 Hero section 从一张出色的图片、视频或幻灯片开始。在本例中，我们将从一张照片开始。如果您想跟着一起操作，您可以点击下方的图片并将其保存到您的桌面，作为背景图片使用。

创建 Hero section

首先，我们需要创建一个容器来容纳您的 Hero section。

1. 点击 “+” 图标，为您的容器创建一个布局。（点击文件夹图标将开始导入模板的过程，但我们将从头开始构建此部分）。
2. 选择容器结构。目前，我们将保持简单，使用一个容器——然而，我们仍需选择容器是采用行（Row）还是列（Column）结构。在我们的例子中，元素将垂直排列，因此我们选择 Column（列） 布局。
   

现在是展示您的才华的时候了。让我们将图片添加到您的 Hero section。有几种方法可以将图片添加到容器中，但在本例中，我们将图片作为背景添加。这样我们可以确保图片填满整个容器。

当您创建新容器时，屏幕左侧的面板应该已变为 Edit Section（编辑部分） 面板。

如果没有，点击容器上方蓝色标签中的圆点图标。

我们希望我们的 Hero section 占据整个屏幕，因此我们将 Content Width（内容宽度） 设置为 Boxed（盒装），宽度为 1140 PX，Min Height（最小高度） 为 540 PX。（了解更多关于不同测量单位的信息）。

Hero section 中的文本位于屏幕中间，因此让我们将 Justify Content（内容对齐） 和 Align Items（项目对齐） 都设置为 Center（居中）。

现在是时候添加背景图片了。对于容器，背景图片位于 Style（样式） 选项卡中。

了解更多关于使用 flexbox containers（弹性盒容器） 可用的所有选项。

1. 选择 Style（样式） 选项卡，选择 Background Type（背景类型） 为 Classic（经典）。
   
2. 点击图片图标，添加图片。这将打开您的媒体库。在 WordPress 中，最佳实践是通过媒体库添加媒体，这就是我们要做的。
3. 要将您下载的图片添加到媒体库，点击 Upload Files（上传文件），然后点击 Select Files（选择文件）。
   
4. 导航到您选择的文件并点击 Open（打开）。这将把图片添加到您的媒体库。虽然是可选的，但最佳实践是添加 Alt Text（替代文本） 和 Caption（标题）。这将有助于您的 SEO 并使您的网站更加易访问。然后点击 Insert Media（插入媒体）。
   

现在看起来还不够精彩，对吗？让我们来修复它。

我们将更改以下选项：

• Position（位置）：Center-Center（中心）
• Attachment（附件）：Scroll（滚动）
• Repeat（重复）：No-repeat（不重复）
• Size（大小）：Cover（覆盖）

现在，一张大图片将覆盖整个部分。

向 Hero section 添加文本

在本例中，我们使用了两种不同样式的文本，因此我们将使用两个 Heading（标题） 小工具。

1. 点击小工具图标，以便您可以选择小工具。
   
2. 将一个 Heading 小工具拖放到容器中。
   
3. 在 Content（内容） 选项卡中，在 Title（标题） 框中输入 “Total Body Fitness”。
4. 将 Alignment（对齐） 更改为 Center（居中）。
   
5. 现在，我们需要设置标题的样式。
   • 点击 Style（样式） 选项卡。
   • 将 Text Color（文字颜色） 更改为 #F8F812（了解更多关于选择颜色的信息）。
   • 将 Typography（排版） 设置为：
     • Family（字体）：Montserrat
     • Size（大小）：22 PX
     • Weight（字重）：400
     • Transform（变换）：Normal（正常）
     • Style（样式）：Normal（正常）
     • Decoration（装饰）：None（无）
     • Line Height（行高）：26 PX

   （了解更多关于 typography）

   

了解更多关于 Heading 小工具 的这些选项 options for the Heading widget。

添加第二个标题

1. 在第一个小工具下拖放另一个 Heading 小工具。
2. 在 Content（内容） 选项卡中，将文本更改为 “CHALLENGE YOURSELF.<br>TAKE IT TO THE NEXT LEVEL”，并将 Alignment（对齐） 设置为 Center（居中）。（文本中的 <br> 表示换行）。
   
3. 转到 Style（样式） 选项卡。
   • 将 Text Color（文字颜色） 更改为 #FFFFFF。
   • 将 Typography（排版） 设置为：
     • Family（字体）：Archivo
     • Size（大小）：65 PX
     • Weight（字重）：800
     • Transform（变换）：Uppercase（大写）
     • Style（样式）：Normal（正常）
     • Decoration（装饰）：None（无）
     • Line Height（行高）：1 EM
   

添加按钮

最后，我们将添加一个按钮，让感兴趣的访客快速转换为客户，将他们直接带到注册页面。为此：

1. 在第二个标题下拖放一个 Button（按钮）小工具。
2. 在 Content（内容） 选项卡中，将 Text（文本） 更改为 “SEE PRICING >”。
3. 将 Alignment（对齐） 更改为 Center（居中）。
4. 转到 Style（样式） 选项卡。
   • 将 Typography（排版） 设置为：
     • Family（字体）：Archivo
     • Size（大小）：18 PX
     • Weight（字重）：800
     • Transform（变换）：Uppercase（大写）
     • Style（样式）：Normal（正常）
     • Decoration（装饰）：None（无）
     • Line Height（行高）：1 EM
   • 将 Text Color（文字颜色） 更改为 #1B252F。
   • 将 Background Color（背景颜色） 更改为 #F8F812。
   • 在 Padding（内边距） 部分，点击锁定图标以取消链接数值。
   • 将数值更改为：
     • Top（上）：20
     • Right（右）：55
     • Bottom（下）：20
     • Left（左）：55

   （了解更多关于 Padding（内边距） 和 Margins（外边距） 的信息  padding and margins）

   

您的容器现在应该看起来与页面顶部的示例相似。如果不是，请查看有什么不同，尝试找出您可能跳过或输入错误的数值。

5. 点击 Publish（发布） 来保存您的页面。
   

下一步

当然，我们只是触及了您可以使用 Elementor 做到的事情的皮毛。接下来，您可以在 Hero section 下创建更多部分来完成您的页面。或者，您可以尝试将网站套件应用到您的网站，并根据您的需要进行自定义。您也可以仅仅应用一个套件来研究它，看看专家们如何使用 Elementor。如果您更喜欢从头开始工作，您可以了解更多关于使用 Theme Builder（主题构建器） 创建整个网站结构的信息。

---

通过以上步骤，您已经学习了如何使用 containers（容器） 在 Elementor 中构建您的第一个页面。祝您在创建网站的过程中取得成功！