首页

使用Elementor编辑器，我们可以摆脱建站主题的束缚，随时随地创建自己喜欢的个性化页面。这里以房地产网页为例，实操首页内容的设置。

网站首页首屏内容设置

我们可以看到该版块中有文字、按钮和图像，按住鼠标左键在右边的图片上拖动，图片不会移位。显然，图片不是以图片元素的形式存在的，而是以背景图片的形式存在的。我们可以用两种方式做这样的背景。一种是将粉红色背景的纯色块和右侧的楼房图片分开设置为背景（粉红色可以到Elementor模板库里查看）。另一种方法是事先在Photoshop中将粉红色块和楼房图片处理成一张背景图片。

首先单击该内容块的图标，然后选择"样式"选项卡，在"背景"选项组中的"标准"里选择"经典"模式，并设置"颜色"（#FFF7F1）。接着单击"图像"，上传本地电脑中的楼房图片（请注意，必须是背景透明的png格式图片，否则会与之前设置的粉红色背景发生冲突），将"位置"设置为"中心右侧"，尺寸为"覆盖"。

设置完后，再调整整体内容高度，并对当前背景的高度进行设置。首先，在"编辑段"功能下的"布局"选项卡中，我们将"内容宽度"的类型设置为"方框"，并将"内容宽度"的大小设置为1400px。然后将最小高度单位设置为"VH"，并将"最小高度"的值设置为94。这样我们就完成了当前内容区域下的背景设置，也可以在上传前直接用Photoshop处理背景图片。

输入文字并进行相应设置。首先，我们将"标题"功能元素拖动到Elementor编辑器中的待编辑内容块中，在内容版块中输入标题文字，设置为左对齐。然后在"样式"选项卡中设置"文本颜色"的参数，在"排版"功能中设置字体参数。

然后我们输入第二个大标题名称。因为这个内容比较重要，是对整个首页的概括，所以我们在"HTML标签"中将其设置成"H1"。在"样式"选项卡中将文本颜色设置为"#011640"，在"排版"中设置字体参数。这样做的效果和原版有区别，因为文字直接遮盖了背景楼房，所以我们在该H1标题的高级设置中将其内距右侧设置为800px（移动端另行调整），这样我们就完成了第二个标题的相关设置。

第三部分的文字是对上述H1标题的阐述，因此我们应该使用Elementor的文本编辑器输出这部分内容并进行设置。首先将这段描述性文字添加到文本编辑器中，然后将对齐设置为左对齐（和标题的文字对齐方式不一样，标题的对齐方式是在内容版块中设置的）。将文本颜色参数设置为"#848484"。设置字体为"Montserrat"，文字尺寸为16px，字体"重量"为300。为了和H1标题宽度一致，需要在"高级设置"选项卡中设置描述性文字的内距为850px（移动端显示效果另行调整）。

添加按钮功能元素并进行设置。将Elementor编辑器的按钮功能元素添加到待编辑内容块中之后，我们要做的第一步就是把按钮上的文字"Explore Our Properties"输入文本框，然后设置"对齐"方式为左对齐，"尺寸"为"小的"。接着在"排版"中对按钮文字设置文字的各项参数。

由于该按钮设置了鼠标悬停的效果，因此在"标准"模式下的颜色参数应与"悬停"模式下的颜色参数有区别。在"标准"模式下设置文本颜色参数为#011640，背景颜色参数为#FFD6D6。设置完成后，切换到"悬停"模式，然后将文本颜色参数和背景颜色参数分别设置为#FFD6D6和#011640。最后调整一下按钮内距，上、右、下、左参数分别为15、30、15、30，单位为px。

至此，我们已经完成了首屏内容的设置（移动端尚未调整）。