由于 WooCommerce 模块已成为 Divi 的一部分，我们向您展示了您可以使用 Divi 的内置选项创建的几个产品页面设计。 今天，我们将向该列表添加一个新教程，向您展示如何创建漂亮的全屏产品页面。 我们将所有产品内容放在一个部分中，同时创造出令人惊叹的设计。 尽管我们限制了产品页面上所需的垂直滚动，但无论如何设计看起来并没有压倒性的。 我们还确保设计在小屏幕尺寸上保持美观和响应。 您还可以免费下载 JSON 文件！
让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载全屏产品布局
要掌握免费的全屏产品布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
订阅我们的 Youtube 频道
让我们开始重建吧！
打开现有产品页面
您需要做的第一件事是打开现有产品页面或创建新页面。 对于这个特定的布局，我们在产品页面中添加了以下元素：
- 产品名称
- 特色图片
- 简短的介绍
- 描述
- 价格
启用 Divi 和修改页面设置
继续启用 Divi 并在页面设置中更改页面布局。
切换到可视化生成器
完成后，您可以切换到 Visual Builder。
删除现有部分
在 Visual Builder 中，您会注意到包含默认产品页面项目的部分。 您可以继续删除整个部分。 在本文的后续步骤中，我们将重新创建自己的替代设计。
添加新部分
间距
是时候开始创作了！ 添加新部分，打开部分设置并修改顶部和底部填充值。
- 顶部填充：5vw
- 底部填充：5vw
溢出
也隐藏该部分的溢出。
- 水平溢出：隐藏
- 垂直溢出：隐藏
添加新行
立柱结构
继续使用以下列结构向该部分添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并调整大小设置，如下所示：
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
第 1 列
Z 指数
我们还在可见性设置中增加了第一列的 z 索引。
第 2 栏
渐变背景
接下来打开第 2 列设置并添加跨不同屏幕尺寸的渐变背景：
- 颜色 1：#ffcb49
- 颜色2：#ffffff
- 渐变类型：径向
- 径向：中心
- 起始位置：66%（台式机）、50%（平板电脑和手机）
- 终端位置：66%（台式机）、50%（平板电脑和手机）
将 Woo 标题模块添加到第 1 列
动态内容
是时候开始添加模块了！ 在第 1 列中，我们唯一需要的模块是 Woo 标题模块。
标题文本设置
转到模块的设计选项卡并更改标题文本设置，如下所示：
- 标题字体：蒙特塞拉特
- 标题字体粗细：超轻
- 标题文本对齐方式：左（桌面）、居中（平板电脑和手机）
- 标题文字大小：9vw
浆纱
也修改模块的大小。
- 宽度：50vw（桌面），100%（平板电脑和手机）
间距
连同间距设置。
- 最高边距：14vw（台式机），0vw（平板电脑和手机）
- 底边距：5vw（平板电脑和手机）
- 左边距：-11vw（桌面），2vw（平板电脑和手机）
- 右边距：2vw（平板电脑和手机）
变换旋转
最后但同样重要的是，在变换设置中旋转整个模块。
- 左：270 度（桌面），0 度（平板电脑和手机）
将 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 价格模块。
价格文本设置
更改模块的价格文本设置如下：
- 价格字体：蒙特塞拉特
- 价格文字颜色：#333333
- 价格文字大小：3vw（台式机）、7vw（平板电脑）、10vw（手机）
- 价格线高度：1.8em
间距
也修改间距设置。
- 最高边距：4vw
- 左填充：2vw（桌面），5vw（平板电脑和手机）
- 右填充：2vw（桌面）、5vw（平板电脑和手机）
将 Woo 添加到购物车模块添加到第 3 列
动态内容
我们需要完成此设计的下一个也是最后一个模块是 Woo 添加到购物车模块。
字段设置
更改模块的字段设置如下：
- 字段背景颜色：#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 频道，这样您将永远是第一批了解并从这些免费内容中受益的人之一。