在 Elementor 中构建您的第一个页面 #
介绍 #
设置好网站后,您要做的第一件事之一就是构建第一个页面。即使您选择从套件开始,这也是了解编辑器的好方法,这将帮助您自定义套件。在开始之前,您需要 创建一个新页面。
如果您还不熟悉Elementor 编辑器的布局,您还应该熟悉它 。
构建块 #
Elementor 中的页面使用三个主要构建块构建:
- 部分: 最大的构建块,其中包含列内的内容。
- 列: 位于部分和房屋小部件内。
- 小部件: 放置在列内,是功能性站点组件。
让我们开始构建 #
现在是时候“动手”了——所以我们首先要构建所谓的“Hero 部分”。Hero 部分 是醒目的大元素,通常位于页面顶部。它们旨在吸引访客并让他们留在您的网站上。
好的英雄部分以精美的图片、视频或幻灯片开始。在这种情况下,我们将从照片开始。右键单击下面的图片并将其保存到您的桌面,我们很快就会将其放在您的网站上。

创建部分 #
现在让我们创建您要扮演英雄的部分。
1. 单击 图标创建一个部分。(单击文件夹图标将开始导入模板的过程,但我们将从头开始构建此部分)。
2. 选择 列 结构。在本例中,选择一列。

好的,现在是时候大放异彩了。让我们将图片添加到您的英雄部分。有几种方法可以将图片添加到部分,但在本例中,我们将图片作为背景添加到部分。这样我们就可以确保图片填满整个部分。
当您创建新的部分时,屏幕左侧的面板应该变成 “编辑部分” 面板。
如果没有,请单击该部分上方的蓝色选项卡中的点图标。

我们希望此部分占据整个屏幕,因此让我们使用下拉菜单将宽度更改为 全宽 ,并将高度设置为最小 91 VH(了解更多关于为什么 以 VH 或 VW 为单位测量比以像素为单位测量更好)。

现在该添加背景图像了。对于部分和列,可以在“样式”选项卡中找到背景图像。
选择样式选项卡并选择经典背景类型。

完成后,您可以通过单击图像图标来添加图像。

这将打开您的媒体库。在 WordPress 中,最佳做法是通过媒体库添加媒体,因此我们将这样做。
要将下载的图像添加到媒体库,请单击 “上传文件”。

导航到您选择的文件并单击“打开”。这会将图像添加到您的媒体库。虽然这是可选的,但最佳做法是添加替代文本和标题。这将有助于您的 SEO 并使您的网站更易于访问。然后单击 “插入媒体”。

看起来可能还不够英雄气概,不是吗?让我们解决这个问题。
将背景图像的位置 更改 为位于顶部中心, 将重复 设置为不重复, 将大小设置 为覆盖。现在,一张大图像将覆盖整个部分。

现在让我们添加一个标题来完成我们的英雄部分。单击小部件图标,以便您可以选择一个小部件。

将标题小部件拖放到该部分中。

让我们为英雄部分起一个合适的标题。在标题框中输入“烘焙艺术”,然后更改对齐方式,使文本居中。

现在最后一步。我们希望此文本出现在部分的顶部,而不是中间。在这里,我们将研究 Elementor 中比较棘手的概念之一 – 负边距。我们将通过降低标题小部件和部分顶部之间的边距来将文本向上移动。
在 Elementor 中,边距通过“高级”选项卡控制。因此,单击 “高级” 选项卡。默认情况下,边距是链接的,因此它们都是相同的。我们必须取消边距链接,然后将 上 边距更改为 -300。

这才像样子。
单击 “发布” 以保存您的页面。

当然,我们只是触及了 Elementor 的皮毛。接下来,您可以在英雄下方创建更多部分来完成您的页面。或者您可以尝试 将网站套件应用于您的网站并根据您的需求进行自定义。您也可以应用套件只是为了检查它并看看专家如何使用 Elementor。如果您喜欢从头开始工作,您可以了解有关使用主题构建器 创建整个网站结构的更多信息 。