英雄部分被视为网页的投影部分。 因此,网站所有者将此部分用作吸引访问者注意力的武器。 如果您正在网站上寻找交互式粘性英雄部分动画,Divi 会支持您。 感谢Divi的 Sticky 选项,因为用它制作创意英雄部分滚动效果非常容易。

今天,我们将了解如何在 WordPress 网站的英雄部分使用视觉上令人愉悦的滚动效果。 在教程的第一部分中,我们将查看整体设计,在下一部分中,我们将在那里添加效果。 因此,让我们立即开始吧。
设计大纲
在我们继续之前,让我们看看我们的最终设计会是什么样子。
创建设计框架
新增部分
背景颜色
一开始,我们将更多地专注于创造设计。 在第二部分的后面,我们将应用粘性效果。 现在,请创建一个新页面并向其中添加一个新部分。 打开该部分的设置并添加背景颜色。
创建令人惊叹的网站
使用最好的免费页面构建器 Elementor
现在开始- 背景颜色:rgba(53,44,43,0.17)

间距
让我们在本节的设计选项卡上移动,并按如下方式更改值。
- 顶部填充:13vh
- 底部填充 0px

第 1 行添加
立柱结构
现在使用以下列结构添加新行。

浆纱
现在添加行设置并在设计选项卡上移动以更改尺寸设置,如下所示。
- 使用自定义装订线宽度:是
- 天沟宽度:2
- 均衡柱高:2
- 宽度:桌面 - 80%,标签和手机 - 90%
- 最大宽度:2580px

间距
现在我们将删除顶部和底部的所有填充。 因此,顶部和底部填充是 0px。

第 1 列(第 1 行)的设置
间距
此时,打开 Column 1 的设置并更改间距设置。

- 顶部填充 - 桌面 25vh,选项卡 & 电话 10vh
- 底部填充 - 桌面 25vh,选项卡 & 电话 10vh
- 5% 左侧和右侧的填充。

第 2 列(第 1 行)的设置
背景图像
接下来,从第 2 列的设置中为您的选择添加背景图片。
- 背景图片尺寸:封面
- 背景图像位置:中心

能见度
为确保这适用于较小的显示屏尺寸,我们将转到第二列的高级选项卡并禁用平板电脑和手机的可见性。

添加到第 1 列(第 1 行)的文本模块
标题内容
我们现在将添加模块。 让我们从第 1 列中的文本模块开始。添加您喜欢的任何 H1 内容!

H1 文字设置
现在从模块设计选项卡更改 H1 文本设置。
- 标题字体:深红色文本

- 标题文字大小:桌面 6vh,平板电脑 50 像素,手机 40 像素
- 标题行高度:1.2 em

添加到第 1 列(第 1 行)的分隔模块
能见度
是时候在我们的第一列中添加一个分隔模块了。 此外,启用显示分隔线选项。

线
现在切换到模块设计选项卡并更改行设置。
- 线条颜色:#35241f

浆纱
更改尺寸设置的值。
- 分隔线重量:5px
- 宽度:21%
- 高度:5px

描述内容
现在我们将在第 1 列中添加我们需要的最后一个模块,这是另一个文本模块。 在那里添加一些描述。

文字设置
修改模块文本设置如下。
- 文字字体:卡拉
- 文字大小:18px

- 文本行高:2.1em

第 2 行添加
立柱结构
为了使这种影响发挥作用,您只需在同一部分下的主要行下方添加一个全新的行。 此行将需要背景颜色和足够的高度和宽度,以便第一行可以放在其下方。 我们使用以下列结构。

背景颜色
现在,为行添加背景颜色。
- 背景颜色:#35241f

浆纱
从设计选项卡更改尺寸设置中的值。
- 宽度:100%
- 最大宽度:3000px

间距
对于间距设置,类似地更改值。
- 顶部填充:桌面 - 30vh,选项卡 & 电话 - 0vh。
- 底部填充:30vh
- 左填充:10%
- 右填充:10%

第 1 列(第 2 行)上的图像模块
上传图片(仅限移动设备和标签页)
现在,我们将图像模块添加到第一列。 您还记得我们禁用了平板电脑和 Phone? 图像的可见性吗?此图像模块将替换在较小屏幕尺寸上第一行使用的图像。 仅将图像用于平板电脑和手机!

移动到平板电脑和移动视图并添加图像。

间距
转到模块设计选项卡并按如下方式更改底部边距。
- 下边距:桌面 0px,平板电脑 & 手机 50px

添加到第 1 列(第 2 行)的分隔模块
能见度
现在在图像下方添加一个新的 Divider 模块并启用“Show Divider”选项。

线
切换到模块的设计选项卡并更改线条颜色。
- 线条颜色:#ffffff

浆纱
也从设计部分更改尺寸设置。
- 分隔线重量:5px
- 高度:5px

添加到第 1 列(第 2 行)的文本模块
标题内容
添加带有一些 H2 内容的新文本模块。

标题文本设置
修改H2文字设置如下
- 标题 2 字体:深红色文本
- 标题 2 文本颜色:#ffffff
- 标题 2 文字大小:桌面 6vh,平板电脑 50 像素,手机 40 像素。

添加到第 2 列(第 2 行)的文本模块
描述内容
我们将在第 2 列添加的唯一模块是一个文本模块,其中将包含一些描述内容。

文字设置
更改文本模块设置,如下所示。
- 文字字体:卡拉
- 文本字体粗细:常规
- 文字大小:桌面 30px,平板电脑 & 手机 18px
- 文字行高:2.2em
- 文字颜色:浅色

应用粘性效果
更改行 Z 索引值
第 1 行
现在我们已经确定了设计的基础,现在我们将专注于进一步制作英雄封面效果的步骤。 打开第一行设置并在高级选项卡中更改 Z 索引。
- Z指数:1

第 2 行
更改第二行的 Z 索引值。 该值需要高于第一行。
- Z指数:2

第 1 行的粘性效应
现在,再次打开第一行设置并从高级选项卡应用粘性效果。 其强制使底部粘性限制设置为部分。

第 1 列的粘性设置(背景颜色)
现在整行都变成了粘性的,我们将对行的子元素应用一些粘性效果。 打开第 1 列设置并应用以下粘性背景颜色。
- 粘性背景颜色:#edeaea

第 1 列的粘性设置(粘性变换倾斜)
现在,移动到设计选项卡并应用以下粘性偏斜值。
- 粘性底部倾斜:-4deg

第 2 列的粘性设置(粘性变换倾斜)
从第 2 列的变换设置中应用相同的粘性偏斜值。
- 粘性底部倾斜:-4deg

文本模块 x2 的粘性设置(粘性变换倾斜)
我们正处于设计的最后一部分。 我们将通过更改处于粘性状态的第 1 列中的两个文本模块的底部倾斜值来完成设计和效果。 这将平衡导航粘性列倾斜值。
- 粘性底部倾斜:4度

最后结果
由于我们已经完成了所有步骤并按照我们的要求做了,我们的最终产品将如下所示。
最后的话
Divi有很多选择可以使网站比其他网站更漂亮。 我们今天的教程是显示简短描述、服务等的好方法! 如果您有任何问题或建议,请随时在评论部分发表评论。 另外,如果您发现本教程对您有帮助,分享将非常棒!