您可能会想要构建您的第一个页面。即便您使用了预设模板，构建自己的页面也有助于您了解编辑器，从而自定义您的站点。

页面构建模块

在 Elementor 中，页面由三个主要构建模块组成：

• 区块（Sections）：最大结构单元，包含内容和列。
• 列（Columns）：位于区块中，承载小工具。
• 小工具（Widgets）：置于列内，为页面提供具体功能组件。

开始构建

我们将从构建一个称为“Hero sections”的元素开始，这是页面顶部的大型显著部分，旨在吸引访客。一个好的英雄区块通常包含一个引人注目的图片、视频或幻灯片。这里我们将用图片作为背景。

创建区块

1. 点击**+ 图标**创建一个新区块（如果点击文件夹图标会启动导入模板的流程，而我们将从零开始）。
2. 选择列结构，选用单列。

设置英雄区块的背景图像

1. 调整区块的宽度和高度：
   • 将宽度设置为全宽，高度设置为最小 91 VH。
2. 添加背景图像：
   • 在左侧面板中点击样式选项卡，选择经典背景类型，点击图片图标以打开媒体库。
   • 点击上传文件，选择下载的图像，点击“插入媒体”。
   • 设置图像位置为顶部居中，重复设为不重复，尺寸设为覆盖，让图像覆盖整个区块。

Now it’s time to add the background image. For sections and columns, the background image can be found in the Style tab.

Select the Style tab and choose the Classic background type.

Once you’ve done that, you’ll be able to add an image by clicking the image icon.

This will open your media library. In WordPress, best practice is to add media through the media library so that’s what we’ll do.

To add the image you downloaded to your media library click Upload Files.

Navigate to the file you selected and click Open. This will add the image to your media library. Although it’s optional, best practice is to add Alt Text and a caption. This will help your SEO and make your site more accessible. Then click Insert Media.

Probably doesn’t look too heroic yet does it? Let’s fix that.

Change the Position of the background image to position it at the top center, set Repeat to No-repeat and the Size to Cover. Now one big image will cover the entire section.

Now let’s add a heading to complete our hero section. Click the widget icon so that you can select a widget.

Drag and drop the Heading widget into the section.

Let’s give our hero section a proper title. Type “The Art of Baking” in the Title box and change the alignment so the text is centered.

调整标题位置

为了让标题位于区块顶部，而不是中间，使用负边距调整位置：negative margins

在高级选项卡中，解除边距的链接，将顶部边距设为 -300，将文本上移。

保存页面

调整完毕后，点击发布以保存您的页面。