如何在令人惊叹的 Divi 网站英雄部分突出显示产品类别

如果您熟悉电子商务网站，那么您无疑也熟悉产品类别。 产品类别可以是您网站上一些最强大的页面。 这就是为什么让它们易于查找并以简单而优雅的方式突出显示它们很重要的原因。 借助 Divi 的内置选项，您可以在多个方向上进行设计。 在本教程中，我们将向您展示如何在您的英雄部分突出显示产品类别。 我们将从头开始创建设计示例，希望它也能激发您以自己的创意方式突出产品类别！

让我们开始吧。

预览

在我们深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸下的结果。

让我们开始创作吧！

订阅我们的 YouTube 频道

添加新部分

渐变背景

首先向您的页面添加一个新部分。 打开此部分的设置，并为其添加渐变背景。

• 颜色 1：#ffffff
• 颜色 2：#757f1e
• 渐变类型：线性
• 梯度方向：90度
• 起始位置：50%
• 结束位置：50%

间距

然后，转到设计选项卡并向该部分添加一些自定义的顶部和底部填充。

• 顶部填充：130px
• 底部填充：130px

添加第 1 行

列结构

继续使用以下列结构添加新行：

第 1 列背景颜色

尚未添加任何模块，打开行设置并为第一列添加背景颜色。

• 第 1 列背景颜色：rgba(0,0,0,0.19)

第 1 列背景图像

向第一列添加背景图像以及混合模式。

• 第 1 列背景图像位置：底部中心
• 第 1 列背景图像重复：无重复
• 第 1 列背景图像混合：相乘

第 2 列背景颜色

第二列只需要白色背景色。

• 第 2 列背景颜色：#ffffff

浆纱

继续转到行设置的设计选项卡并更改大小设置。

• 使用自定义宽度：是
• 单位：PX
• 自定义宽度：2000px
• 使用自定义装订线宽度：是
• 天沟宽度：1
• 均衡柱高：是

间距

也删除该行的所有默认自定义填充。

• 顶部填充：0px
• 底部填充：0px

盒子阴影

并添加一个微妙的框阴影。

• 框阴影模糊强度：80px

将文本模块添加到第 2 列

添加内容

是时候开始添加模块了！ 在第二列中我们需要的第一个模块是标题文本模块。 添加一些选择的内容。

标题文字设置

接下来，转到标题文本设置并进行一些更改。

• 标题字体粗细：超粗
• 标题文字大小：60px（桌面和平板电脑），50px（手机）
• 标题字母间距：-4px
• 标题线高度：0.8em

间距

添加一些自定义边距和填充值。

• 最高利润率：17vw
• 左填充：2vw（桌面）、4vw（平板电脑）、5vw（手机）

将分隔模块添加到第 2 列

能见度

第二列中需要的第二个也是最后一个模块是分频器模块。 确保启用了显示分隔线选项。

• 显示分隔线：是

颜色

接下来更改分隔线的颜色。

• 颜色：#757f1e

样式

也在样式设置中修改分隔线样式。

• 分隔线样式：双

浆纱

并在模块的大小设置中增加 Divider Weight。

• 分隔线重量：6px

间距

最后，向分隔模块添加一些自定义的顶部和底部边距。

• 最高利润率：2vw
• 底边距：15vw

添加第 2 行

列结构

到第二排！ 为其选择以下列结构：

第 1 列背景颜色

打开行设置并为第一列添加背景颜色。

• 第 1 列背景颜色：#212121

浆纱

接下来，转到设计选项卡并调整行的大小。

• 使用自定义宽度：是
• 单位：PX
• 自定义宽度：2000px
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

通过将“0px”添加到顶部和底部填充，删除该行的所有自定义填充。

• 顶部填充：0px
• 底部填充：0px

盒子阴影

最后但并非最不重要的一点是，给该行一个微妙的框阴影。

• 框阴影模糊强度：80px

将文本模块 #1 添加到第 1 列

添加内容

我们需要的第一个模块是文本模块。 将一个添加到第一列，并选择一些内容。

文字设置

继续转到设计选项卡并更改文本设置。

• 文字字体粗细：轻
• 文字颜色：#ffffff
• 文字大小：18px（桌面）、15px（平板电脑）、12px（手机）
• 文本行高：1em
• 文本方向：左
• 文字颜色：浅

标题文字设置

还要修改标题文本设置。

• 标题 3 文本颜色：#ffffff
• 标题 3 文字大小：25 像素（桌面）、20 像素（平板电脑）、18 像素（手机）
• 标题 3 字母间距：-1px

间距

在间距设置中也添加一些自定义填充值。

• 顶部填充：30px
• 底部填充：30px
• 左填充：50px
• 右填充：50px

将文本模块 #2 添加到第 2 列

添加内容

继续向第二列添加另一个文本模块。 添加一些选择内容并在链接设置中链接产品类别页面。

默认背景颜色

然后，转到背景设置并添加背景颜色。

• 背景颜色：#eaeaea

悬停背景颜色

在悬停时更改此背景颜色。

• 背景颜色：#ffbb00

默认文本设置

接下来在设计选项卡中更改文本设置。

• 文字字体粗细：超粗
• 文本字体样式：大写
• 文字颜色：#333333
• 文字大小：16px
• 文字字母间距：-1px
• 文字方向：居中

悬停文本设置

并在悬停时修改这些设置。

• 文字颜色：#ffffff
• 文字大小：20px

默认间距

我们还应用了一些默认间距值。

• 顶部填充：45px
• 底部填充：45px
• 左填充：5px
• 右填充：5px

悬停间距

我们将在悬停时更改。

• 上边距：-50px
• 左边距：-20px
• 顶部填充：70px
• 底部填充：70px
• 左填充：5px
• 右填充：5px

默认框阴影

继续打开框阴影设置并添加一个完全透明的框阴影。

• 框阴影模糊强度：80px
• 阴影颜色：rgba(255,255,255,0)

悬停框阴影

更改悬停时完全透明的框阴影颜色以使其显示。

• 阴影颜色：rgba(0,0,0,0.34)

克隆文本模块 #2 两次并放置在剩余的列中

修改完第 2 列中的文本模块后，您可以继续克隆该模块两次，并将重复项放置在该行的其余两列中。

更改第一个副本

更改内容

打开第三列中的第一个副本并更改产品类别的内容和链接。

更改背景颜色

也更改此模块的背景颜色。

• 背景颜色：#dddddd

更改第二个副本

更改内容

也更改第 4 列中第二个副本的内容。

更改背景颜色

与背景颜色一起。

• 背景颜色：#c6c6c6

将用于较小屏幕尺寸的图像模块添加到第 1 行的第 2 列

上传图片

最后但并非最不重要的一点是，我们还将向第一行的第二列添加一个图像模块，以针对较小的屏幕尺寸优化所有内容。

能见度

通过将其隐藏在模块的高级选项卡中的桌面上，确保此模块仅出现在较小的屏幕尺寸上。

预览

现在我们已经完成了所有步骤，让我们最后看看在不同屏幕尺寸上的结果。

最后的想法

在这篇文章中，我们重新创建了一个令人惊叹的设计示例，它将您网站的主要产品类别置于聚光灯下。 我们希望本教程也能激发您创建自己的设计类型。 如果您有任何问题或建议，请务必在下方评论区留言！