如何在您的 Divi 登陆页面上创造性地展示热门产品

在着陆页上展示热门产品时，不仅选择合适的产品很重要，而且展示它们的吸引力也很重要。 借助 Divi 的新 WooCommerce 模块，无数新的设计可能性已经落入我们的怀抱。 为了帮助您获得灵感，我们将重新设计美观优雅的流行产品设计，您可以将其用于下一个 Divi 登陆页面。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

静止的

徘徊

移动的

免费下载热门产品布局

要了解免费的流行产品布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

让我们开始重建吧！

添加新部分

间距

首先将常规部分添加到新页面或现有页面。 打开部分设置并相应地调整顶部和底部填充值：

• 顶部填充：8vw
• 底部填充：8vw

添加新行

列结构

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

浆纱

在不添加任何模块的情况下，打开行设置并修改行的大小设置。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：85vw
• 最大宽度：100%

将 Woo 图像模块添加到列

动态内容

是时候开始添加模块了！ 我们需要的第一个模块是 Woo Image Module。 选择您要展示的产品。

图片

转到设计选项卡并更改图像设置。

• 图像圆角：20px（所有角）

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

将 Woo 标题模块添加到列

动态内容

我们需要的下一个模块是 Woo 标题模块。 选择您选择的产品。

标题文字设置

修改模块的标题文本设置如下：

• 标题标题级别：H3
• 标题字体：普拉塔
• 标题文字大小：3vw（桌面）、5vw（平板电脑）、7vw（手机）

间距

通过在不同屏幕尺寸之间添加一些自定义边距值来完成模块的设置。

• 最高边距：7vw（台式机），14vw（平板电脑和手机）
• 下边距：2vw（台式机），4vw（平板电脑和手机）
• 左边距：2vw（桌面），5vw（平板电脑和手机）
• 右边距：2vw（桌面），5vw（平板电脑和手机）

将 Woo 描述模块添加到列

动态内容

进入下一个模块，即 Woo 描述模块。 选择您选择的产品。

文字设置

转到模块的设计选项卡并按如下方式更改文本设置：

• 文字字体：蒙特塞拉特
• 文字大小：0.8vw（桌面）、1.6vw（平板电脑）、2vw（手机）
• 文本行高：1.8em

间距

还可以在不同的屏幕尺寸上使用自定义边距值。

• 最高边距：2vw（台式机），4vw（平板电脑和手机）
• 下边距：2vw（台式机），4vw（平板电脑和手机）
• 左边距：2vw（桌面），5vw（平板电脑和手机）
• 右边距：2vw（桌面），5vw（平板电脑和手机）

将 Woo 添加到购物车模块添加到列

动态内容

在 Woo 描述模块的正下方，我们将添加一个 Woo 添加到购物车模块。 选择您选择的产品。

默认字段设置

转到模块的设计选项卡并按如下方式更改字段设置：

• 字段背景颜色：#ffffff
• 字段文本颜色：#3d3d3d
• 字段字体：蒙特塞拉特

• 字段边框宽度：0px
• 字段边框颜色：#3d3d3d

悬停字段设置

修改悬停时的边框宽度。

• 字段边框宽度：1px

默认按钮设置

接下来打开按钮设置并设置按钮样式。

• 为按钮使用自定义样式：是
• 按钮文字大小：1vw（桌面）、3vw（平板电脑）、4vw（手机）
• 按钮文字颜色：#3d3d3d
• 按钮背景颜色：#FFFFFF
• 按钮边框宽度：0px
• 按钮边框颜色：#3d3d3d

• 按钮字体：Prata

• 顶部填充：0.5vw
• 底部填充：0.5vw
• 左填充：2vw
• 右填充：2vw

悬停按钮设置

在悬停时更改按钮边框宽度。

• 按钮边框宽度：1px

间距

然后，转到间距并在不同的屏幕尺寸上添加一些自定义边距值。

• 下边距：7vw（台式机），14vw（平板电脑和手机）
• 左边距：2vw（桌面），5vw（平板电脑和手机）
• 右边距：2vw（桌面），5vw（平板电脑和手机）

默认边框设置

也修改模块的边框设置。

• 底部边框宽度：1px
• 底部边框颜色：#3d3d3d

悬停边框设置

并删除悬停时的边框宽度。

• 底部边框宽度：0px

将 Woo 价格模块添加到列

动态内容

我们在列中需要的最后一个模块是 Woo Price 模块。 选择您选择的产品。

标题文字设置

转到模块的设计选项卡并相应地更改价格文本设置：

• 价格文本字体：蒙特塞拉特
• 价格文本字体重量：轻
• 价格文字颜色：#333333
• 价格文字大小：2vw（桌面）、4vw（平板电脑）、6vw（手机）
• 价格线高度：1.8em

间距

也修改边距值。

• 底边距：5vw
• 左边距：2vw（桌面），5vw（平板电脑和手机）
• 右边距：2vw（桌面），5vw（平板电脑和手机）

克隆列两次

完成列及其中的所有模块后，您可以克隆整个列两次。

更改行列结构

接下来更改行的列结构。

更改所有动态内容

继续将第 2 列和第 3 列中的所有动态内容更改为您选择的其他产品。

更改第 2 列模块间距

Woo 标题模块

第二列中的模块需要一些额外的间距更改。 从 Woo 标题模块开始。

• 左边距：5vw（所有设备）
• 右边距：5vw（所有设备）

Woo 描述模块

接下来更改 Woo 描述模块的间距设置。

• 最高边距：4vw（所有设备）
• 下边距：4vw（所有设备）
• 左边距：5vw（所有设备）
• 右边距：5vw（所有设备

Woo 添加到购物车模块

转到 Woo 添加到购物车模块的间距设置。

• 左边距：5vw（所有设备）
• 右边距：5vw（所有设备）

Woo 价格模块

并通过修改 Woo Price 模块的间距设置来完成第 2 列模块。

• 左边距：5vw（所有设备）
• 右边距：5vw（所有设备）

列样式

所有列

背景颜色

现在我们已经准备好了所有的模块，我们可以开始设置列的样式。 每一列都需要一个白色的背景色。

• 背景颜色：#ffffff

边界

您也可以在每列的角上添加“20px”。

• 圆角：20px（所有角）

第 1 和第 3 栏

默认框阴影

继续向第 1 列和第 3 列添加默认框阴影。

• 框阴影垂直位置：22px
• 框阴影阴影模糊强度：150px
• 阴影颜色：rgba(0,0,0,0)（桌面），rgba(0,0,0,0.1)（平板电脑和手机）

悬停框阴影

在悬停时更改悬停阴影颜色。

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

默认过滤器

然后，转到过滤器设置并为第 1 列和第 3 列添加一些模糊效果。

• 模糊：4px（桌面），0px（平板电脑和手机）

悬停过滤器

消除悬停时的模糊。

• 模糊：0px

默认 Z 索引

为接下来的列分配相同的默认 z 索引值。

• Z指数：9

悬停 Z 索引

并在悬停时增加相同的 z 索引。

• Z指数：12

仅第 1 列

转换 翻译

继续使用转换转换选项更改第 1 列的位置。

• 右：7vw（台式机）、0vw（平板电脑和手机）
• 底部：2vw（台式机），0vw（平板电脑和手机）

仅第 3 列

转换 翻译

接下来打开第 3 列转换设置并应用以下设置：

• 右：7vw（台式机）、0vw（平板电脑和手机）
• 底部：-2vw（台式机），0vw（平板电脑和手机）

仅第 2 列

盒子阴影

移至第 2 列设置并应用微妙的框阴影。

• 框阴影垂直位置：22px
• 框阴影模糊强度：150px
• 阴影颜色：rgba(0,0,0,0.27)（桌面），rgba(0,0,0,0.1)（平板电脑和手机）

Z索引

最后但并非最不重要的一点是，更改第二列的 z 索引就大功告成了！

• Z指数：11

预览

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

桌面

静止的

徘徊

移动的

最后的想法

在这篇文章中，我们向您展示了如何在 Divi 登录页面上优雅地展示流行产品。 我们已经逐步向您展示了如何仅使用 Divi 的内置选项来创建美丽的结果。 这个设计示例展示了 Divi 的新 WooCommerce 模块的多功能性，以及您如何立即创建令人惊叹的电子商务网页设计。 如果您有任何问题或建议，请随时在下面的评论部分发表评论！

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。