为 Divi 下载漂亮的全屏产品页面

由于 WooCommerce 模块已成为 Divi 的一部分，我们向您展示了一些您可以使用 Divi 的内置选项创建的产品页面设计。 今天，我们向该列表添加了一个新教程，向您展示如何创建漂亮的全屏产品页面。 我们将所有产品内容整合到一个部分中，同时创造出令人惊叹的设计。 尽管我们限制了产品页面上所需的垂直滚动，但无论如何设计都不会让人难以抗拒。 我们还确保设计在小屏幕尺寸上保持美观和响应。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

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

桌面

移动的

免费下载全屏产品布局

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

下载文件

免费下载

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

下载

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

订阅我们的 YouTube 频道

让我们开始重建吧！

打开现有产品页面

您需要做的第一件事是打开现有产品页面或创建一个新页面。 对于此特定布局，我们在产品页面中添加了以下元素：

• 产品名称
• 特色图片
• 简短的介绍
• 描述
• 价钱

启用分区和修改页面设置

继续启用 Divi 并在页面设置中更改页面布局。

切换到 Visual Builder

完成后，您可以切换到 Visual Builder。

删除现有部分

在 Visual Builder 中，您会注意到一个包含默认产品页面项目的部分。 您可以继续删除整个部分。 在本文的后续步骤中，我们将重新创建我们自己的替代设计。

添加新部分

间距

是时候开始创作了！ 添加新部分，打开部分设置并修改顶部和底部填充值。

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

溢出

也隐藏该部分的溢出。

• 水平溢出：隐藏
• 垂直溢出：隐藏

添加新行

列结构

继续使用以下列结构向该部分添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并按如下方式调整大小设置：

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

第 1 栏

Z索引

我们还在可见性设置中增加了第一列的 z 索引。

• Z指数：10

第 2 栏

渐变背景

接下来打开第 2 列设置并添加跨不同屏幕尺寸的渐变背景：

• 颜色 1：#ffcb49
• 颜色 2：#ffffff
• 渐变类型：径向
• 径向：中心
• 起始位置：66%（桌面），50%（平板电脑和手机）
• 最终位置：66%（台式机），50%（平板电脑和手机）

将 Woo 标题模块添加到第 1 列

动态内容

是时候开始添加模块了！ 在第 1 列中，我们唯一需要的模块是 Woo Title 模块。

• 产品：本产品

标题文字设置

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

• 标题字体：蒙特塞拉特
• 标题字体粗细：超轻
• 标题文本对齐方式：左（桌面）、中心（平板电脑和手机）
• 标题文字大小：9vw

浆纱

也修改模块的大小。

• 宽度：50vw（桌面），100%（平板电脑和手机）

间距

随着间距设置。

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

变换旋转

最后但并非最不重要的一点是，在变换设置中旋转整个模块。

• 左：270deg（桌面），0deg（平板电脑和手机）

将 Woo 图像模块添加到第 2 列

动态内容

进入第二个模块！ 在那里，我们唯一需要的模块是 Woo Image Module。

• 产品：本产品

图像设置

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

• 图像圆角：1vw（所有角）

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

浆纱

通过更改大小设置中的宽度和模块对齐来完成 Woo 图像模块的设置。

• 宽度：35vw
• 模块对齐：居中

将 Woo 描述模块 #1 添加到第 3 列

动态内容

进入最后一栏！ 在那里，我们需要的第一个模块是 Woo 描述模块。

• 产品：本产品
• 描述类型：简短描述

文字设置

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

• 文字字体：蒙特塞拉特
• 文本字体样式：大写
• 文字大小：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 文字字母间距：-0.07vw
• 文本行高：1.8em

间距

也修改间距设置。

• 最高利润率：9vw
• 左填充：2vw（桌面），5vw（平板电脑和手机）
• 右填充：5vw

将 Woo 价格模块添加到第 3 列

动态内容

进入下一个模块，即 Woo Price 模块。

• 产品：本产品

价格文本设置

更改模块的价格文本设置如下：

• 价格字体：蒙特塞拉特
• 价格文字颜色：#333333
• 价格文字大小：3vw（桌面）、7vw（平板电脑）、10vw（手机）
• 价格线高度：1.8em

间距

也修改间距设置。

• 最高利润率：4vw
• 左填充：2vw（桌面），5vw（平板电脑和手机）
• 右填充：2vw（台式机），5vw（平板电脑和手机）

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

动态内容

我们需要完成此设计的下一个也是最后一个模块是 Woo Add To Cart 模块。

• 产品：本产品

字段设置

更改模块的字段设置如下：

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

• 字段文本大小：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 场圆角：50vw（所有角落）

按钮设置

也可以使用按钮设置。

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

• 按钮字体：蒙特塞拉特

• 顶部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 底部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
• 左填充：4vw（桌面）、8vw（平板电脑）、10vw（手机）
• 右填充：4vw（桌面）、8vw（平板电脑）、10vw（手机）

间距

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

• 最高利润率：2vw
• 左边距：-3vw（桌面），5vw（平板电脑和手机）
• 右边距：5vw（平板电脑和手机）

将产品页面变成模板

将页面布局保存到 Divi 库

完成全屏产品页面后，您可以使用 Divi 的 Theme Builder 将其用于您的每个产品。 为此，请将您刚刚创建的布局保存在您的 Divi 库中。

向主题生成器添加新模板

转到 Divi 设置中的 Theme Builder 并添加一个新模板。

选择要显示此布局的产品页面。

将布局上传到模板的正文

然后，单击“添加全局主体”并选择“从库添加”。

在“您保存的布局”选项卡中选择您的布局。

并保存所有更改！

预览

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

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何重新创建一个漂亮的全屏产品页面，您可以将其用于您正在设置的任何类型的电子商务网站。 我们匹配了各种 woo 模块的设置，以创建令人惊叹的结果并限制所需的垂直滚动。 我们希望这个设计也能激发您创建自己的全屏产品页面！ 如果您有任何疑问，请随时在下面的评论部分发表评论。

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