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

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

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

您可能还想熟悉 容器的概念。 

让我们开始构建 #

现在是时候“动手”了——所以我们首先要构建所谓的“Hero 部分”。Hero  部分 是醒目的大元素，通常位于页面顶部。它们旨在吸引访客并让他们留在您的网站上。

我们将根据模板库中的英雄部分构建一个英雄部分，供所有 Elementor Pro 和 Cloud 用户使用。 

好的英雄部分以精美的图片、视频或幻灯片开始。在这种情况下，我们将从一张照片开始。如果您想跟着做，可以点击下面的图片并将其保存到桌面，用作背景图片。 

创建英雄部分 #

我们需要做的第一件事是创建一个容器来容纳你的英雄部分。

1. 单击  图标为您的容器创建布局。（单击文件夹图标将开始导入模板的过程，但我们将从头开始构建此部分）。
2. 现在我们需要选择一个容器结构。现在，我们将保持简单并使用一个容器 – 但是，我们仍然需要选择容器是否具有行或列结构。在我们的例子中，元素将垂直排列，因此我们将选择列布局。 
   
   好的，现在是时候大放异彩了。让我们将图像添加到您的 Hero 部分。有几种方法可以将图像添加到容器，但在这种情况下，我们将图像添加为背景这样我们将确保图像填满整个容器。 
   当您创建新容器时，屏幕左侧的面板应该变成 “编辑部分” 面板。 
   如果没有，请单击容器上方蓝色选项卡中的点图标。 
   
3. 我们希望英雄部分占据整个屏幕，因此我们将内容宽度设置为 Boxed ，宽度  为 1140 PX，最小高度为 540PX。（详细了解 不同的测量单位）。 
   
4. Hero 部分中的文本位于屏幕中间，因此让我们设置 “内容对齐” 和 “项目 居中对齐”。
   
   现在是时候添加背景图像了。对于容器，可以在 “样式” 选项卡中找到背景图像。 
   详细了解 flexbox 容器可用的所有选项。
5. 选择 “样式” 选项卡并选择“经典”背景类型。
   
   完成后，您可以通过单击图像图标来添加图像。
   这将打开您的媒体库。在 WordPress 中，最佳做法是通过媒体库添加媒体，这就是我们要做的。 
6. 要将下载的图像添加到媒体库，请单击 “上传文件” ，然后 单击“选择文件”。
   
7. 导航到您选择的文件并单击“打开”。这会将图像添加到您的媒体库。虽然这是可选的，但最佳做法是添加替代文本和标题。这将有助于您的 SEO 并使您的网站更易于访问。然后单击 “插入媒体”。
   
   可能看起来还不太英勇，是吗？让我们解决这个问题。
8. 我们将更改以下选项：
   1. 背景图片的位置 ：中心-中心
   2. 附件： 卷轴
   3. 重复: 不重复
   4. 尺寸： 封面
       现在一张大图像将覆盖整个部分。
      
       

让我们将文本添加到英雄部分。
在本例中，我们使用两种不同的文本样式，因此我们将使用两个标题小部件。

1.  单击小部件图标以便您可以选择一个小部件。 
   
2. 将标题小部件拖放到容器中。
   
3. 在内容选项卡的 标题 框中输入“Total Body Fitness”。
4. 将对齐方式 改为 居中。
   

现在，我们需要设置标题的样式。

1. 单击 样式 选项卡。
2.  将文本的 文本颜色更改 为#F8F812（了解有关选择颜色的更多信息）。
3. 将字体改为  ：
   1. 家族: 蒙特塞拉特 
   2. 尺寸: 22PX
   3. 重量： 400
   4. 变换：正常
   5. 风格: 正常
   6. 装饰：无
   7. 行高：26PX
      （了解有关 排版的更多信息）
      

了解有关标题小部件的所有这些选项的更多信息 。

添加第二个标题：

1. 将“标题”小部件拖到第一个小部件下方。
2. 在 “内容 ”选项卡中，将文本更改为“挑战自己。<BR>将其提升到下一个级别”，并将 对齐方式改为 居中。（文本中的 <br> 表示换行符。）
   
3. 转到 “样式” 选项卡。
4.  将文本的文本颜色更改 为#FFFFFF。
5. 将字体 改为 ：
   1. 家庭: Archivo 
   2. 尺寸: 65PX
   3. 重量： 800
   4. 变换：大写
   5. 风格: 正常
   6. 装饰：无
   7. 行高：1EM

最后，我们将添加一个按钮，将感兴趣的访问者直接带到注册页面，从而快速将其转化为客户。具体操作如下：

1. 将一个按钮小部件拖到第二个标题下方。
2. 在 “内容” 选项卡中将“文本” 更改 为“查看定价>”
3. 将对齐方式 改为居中。 
4. 转到 “样式” 选项卡。
5. 将字体 改为 ：
   1. 家庭: Archivo
   2. 尺寸:  18PX
   3. 重量：800
   4. 变换：大写
   5. 风格: 正常
   6. 装饰：无
   7. 行高：1EM
6. 将文本颜色更改  为#1B252F。
7. 将背景颜色更改为#F8F812。
8. 在 “填充” 部分中，单击锁定图标以取消值的链接。
9. 将值更改为：
   1. 前20 名
   2. 右：55
   3. 底部：20
   4. 左：55

（了解有关 填充和边距的更多信息）

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

单击 “发布” 以保存您的页面。

后续步骤Next steps #

当然，我们只是触及了 Elementor 的皮毛。接下来，您可以在英雄下方创建更多部分来完成您的页面。或者，您可以尝试 将网站套件应用于 您的网站并根据您的需求进行自定义。您也可以应用套件只是为了检查它并看看专家如何使用 Elementor。如果您喜欢从头开始工作，您可以了解有关使用 主题构建器创建整个网站结构的更多信息。要充分利用Elementor，请前往 Elementor 学院 获取更多学习资源。如果您有任何问题或需要帮助，请联系我们的 支持中心。