如何使用 Divi 创建日本美学灵感的产品页面模板
已发表: 2019-11-21您是否正在为您的在线商店寻找干净且简约的产品页面设计？ 今天，我们有一个灵感来自日本美学的设计。 这是极简日本杂志和网站的常见风格。 它可以轻松阅读文本，查看产品而不会分心。 按照下面的教程为您自己的产品重新创建此模板。 您也可以免费下载模板 JSON 文件！
让我们开始吧。
预览
在开始之前，让我们看一下设计在不同设备上的外观。
桌面
移动的
免费下载产品页面模板
要使用免费的产品页面模板，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
1. 添加/打开 Woocommerce 产品
产品数据
打开或创建一个新的 WooCommerce 产品。 要重新创建这种受日本美学启发的产品设计，您需要填写以下详细信息：
- 名称：书法集
- 描述：日本书法集，包含创作精美字体艺术所需的所有工具。 黑墨、马毛刷、石锤、搅拌碗、日本剪刀和防渗纸。
- 价格：31
- 类别：美术用品
- 特色图片：产品的横向图片。
- 图库：4张相同尺寸的风景图片
- 属性：见下文
属性选项卡包含 woo 附加信息模块的信息。 要添加此信息，请选择属性选项卡并创建一个自定义属性，如下所示：
- 包括什么：
- 1 刷
- 1碗
- 1个墨水瓶
- 1把剪刀
- 1 河石
- 1 令纸
启用 Divi Builder 和修改页面设置
准备好所有产品数据后，启用 Divi Builder 并将页面布局更改为“全角”。
切换到可视化生成器
现在，切换到可视化构建器。 单击“在前端构建”按钮。
删除默认产品部分
由于我们要从头开始设计此产品页面，因此删除整个默认部分。 这将为您提供一个空白画布。
2. 重现日式设计
添加新部分
让我们开始重新创建日本美学产品页面！ 添加一个新的常规部分。
背景
打开部分设置并更改背景颜色。
- 背景颜色：非常浅的灰色#f2f2f2
浆纱
接下来，调整大小。
- 宽度：100%
- 最大宽度：100%
间距
然后，间距值如下：
- 顶部填充：
- 桌面：0vw
- 平板电脑 + 手机：2vw
- 底部填充：
- 台式机 + 平板电脑：2vw
添加第一行
列结构
添加新行并选择以下列结构：
浆纱
在添加任何模块之前，请按如下方式调整行的大小设置：
- 宽度：
- 台式机：80%
- 平板电脑 + 手机：63%
间距
此外，调整间距值。
- 顶部 + 底部边距：0vw
- 顶部 + 底部填充：0vw
添加 Woo 面包屑模块
内容
现在，添加第一个模块； 呜面包屑。
- 产品：本产品
文本
在设计选项卡中，按如下方式设置文本样式：
- 字体：Duru Sans
- 字体样式：TT
- 颜色：黑色#000000
- 尺寸：
- 台式机：0.7vw
- 平板电脑：1.5vw
- 电话：1.7vw
- 字母间距：2px
浆纱
然后，调整大小。
- 宽度：100%
间距
最后，调整间距。
- 最高保证金：
- 桌面：3em
- 平板电脑 + 手机：0em
- 底部边距：
- 台式机 + 平板电脑：1em
- 电话：0em
- 顶部 + 底部填充：1em
- 左填充：2em
添加第二行
列结构
使用以下列结构添加第二行：
浆纱
打开行设置并更改不同屏幕尺寸的宽度。
- 宽度：
- 台式机：80%
- 平板电脑 + 手机：65%
间距
同样调整间距。
- 顶部填充：0vw
列 1 + 2 设置
背景
继续列设置。 第 1 列和第 2 列的样式相同。 从背景开始。
- 颜色：白色#ffffff
边界
并为两列添加边框样式。
- 边框样式：所有四个边
- 边框宽度：4px
- 颜色：#333333
将 Woo 图像模块添加到第 1 列
内容
是时候开始添加模块了！ 我们将需要第 1 列中的 woo 图像模块。
- 产品：本产品
元素
调整元素选项卡中的开关，如下所示：
- 特色图片：开
- 显示图库图片：关闭
- 显示销售徽章：关闭
将 Woo 标题模块添加到第 1 列
内容
在图像下方，添加一个 woo 标题模块。 选择内容。
- 产品：本产品
标题文字
在设计选项卡中，设置文本样式。
- 标题标题级别：H1
- H1 字体：Droid Sans
- H1 字体样式：TT
- H1 颜色：深灰色 #333333
- 字母间距：5px
- 线高：1em
间距
然后，调整间距值。
- 最高保证金：
- 平板电脑 + 手机：0vw
- 顶部填充：0vw
- 底部填充：
- 台式机：1.5vw
- 平板电脑：3.5vw
- 电话：6vw
- 左填充：
- 台式机：2vw
- 平板电脑 + 手机：5vw
- 右填充：
- 台式机 + 平板电脑：0vw
边界
通过添加边框完成模块的设置。
- 边框样式：底部边框
- 宽度：4px
- 颜色：深灰色#333333
将 Woo 描述模块添加到第 1 列
内容
继续，添加一个woo描述模块。 选择内容和描述类型。
- 产品：本产品
- 描述类型： 描述
文本
然后，将文本样式设置如下：
- 字体：Duru Sans
- 字体样式：TT
- 颜色：深灰色#333333
- 尺寸：
- 台式机：0.8vw
- 平板电脑：1.4vw
- 电话：1.8vw
- 字母间距：3px
- 线高：2em
间距
通过在不同的屏幕尺寸上添加一些自定义填充来完成模块设置。
- 顶部 + 底部填充：0vw
- 左 + 右填充：
- 台式机：2vw
- 平板电脑 + 手机：5vw
将 Woo 价格模块添加到第 1 列
内容
接下来，在列中添加 woo price 模块并选择产品。
- 产品：本产品
价格文本
样式价格文本如下：
- 字体：Duru Sans
- 颜色：深灰色#333333
- 尺寸：
- 台式机：1.5vw
- 平板电脑：3.2vw
- 电话：4vw
- 字母间距：3px
- 线高：1em
间距
调整间距设置。
- 底部边距：
- 台式机：1vw
- 平板电脑：3vw
- 电话：4vw
- 顶部填充：
- 台式机：1vw
- 平板电脑：3.3vw
- 电话：5vw
- 底部填充：0vw
- 左填充：
- 平板电脑 + 手机：5vw
- 右填充：
- 台式机：2vw
- 平板+手机：3vw
边界
最后，添加边框。
- 边框样式：顶部边框
- 边框宽度：4px
- 颜色：深灰色#333333
将 Woo 添加到购物车模块添加到第 1 列
内容
在价格下方，添加添加到购物车模块并选择产品。
- 产品：本产品
元素
切换元素如下：
- 显示数量字段：关闭
- 显示库存：开
背景
还要添加背景颜色。
- 背景颜色：深灰色#333333
按钮
在设计选项卡中，按如下所示设置按钮样式：
- 字体大小：
- 台式机：1vw
- 平板电脑：2.6vw
- 电话：3.1vw
- 颜色：白色#ffffff
- 边框宽度：0px
- 字母间距：3px
- 字体：Duru Sans
- 字体：TT
间距
接下来，调整间距。
- 顶部 + 底部填充：0.5vw
- 左填充：1vw
边界
最后，添加边框。
- 边框样式：顶部边框
- 宽度：4px
- 颜色：深灰色#333333
将 Woo 附加信息模块添加到第 2 列
内容
转到第二列并添加一个额外的信息模块。 选择产品。
- 产品：本产品
元素
切换元素设置如下：
- 节目名称：开
文本
在设计选项卡中，设置文本样式。
- 字体：Duru Sans
- 字体样式： I + TT
- 颜色：深灰色#333333
- 尺寸：
- 台式机：0.7vw
- 平板电脑：1.5vw
- 电话：2.4vw
- 字母间距：2px
- 线高：1.5em
标题文字
接下来为标题文本设置样式。
- 字体：Duru Sans
- 字体样式：TT
- 颜色：深灰色#333333
- 尺寸：
- 台式机：1vw
- 平板电脑：2vw
- 电话：2.2vw
- 字母间距：3px
- 线高：1.5em
属性文本
不要忘记设置属性文本的样式。
- 字体：Duru Sans
- 字体样式：TT
- 颜色：深灰色#333333
- 尺寸：
- 台式机：0.7vw
- 平板电脑：2vw
- 电话：2.4vw
- 字母间距：2px
间距
然后，调整间距。
- 顶部填充：
- 台式机：1vw
- 平板+手机：3vw
- 底部填充：
- 台式机 + 平板电脑：1vw
- 左填充：
- 台式机：2vw
- 平板电脑 + 手机：5vw
- 右填充：
- 电话：3vw
将 Woo Gallery 模块添加到第 2 列
内容
我们需要完成设计的最后一个模块是 woo 画廊模块。 选择产品。
- 产品：本产品
布局
转到设计选项卡并更改布局。
- 布局：滑块
间距
然后，调整间距设置如下：
- 最高保证金：
- 桌面：-2vw
- 平板电脑：-4vw
- 电话：-6vw
- 顶部填充：0vw
边界
最后，添加边框。
- 边框样式：顶部边框
- 宽度：4px
- 颜色：深灰色#333333
3.转换为Divi Theme Builder的模板
保存到 Divi 库
现在我们已经完成了设计，是时候将我们的产品页面布局保存到 Divi 库了。 如果您的产品布局没有类别，请创建一个。
- 另存为：布局
- 姓名： 日式产品大师
- 类别：产品布局。
打开 Divi Theme Builder 并创建新模板
为了在您的所有产品页面上使用此设计，您需要在主题构建器中为其创建一个模板。 在主题构建器页面中，添加一个新模板。 从下拉菜单中选择“所有产品”。 如果您只想将此设计用于您的部分产品，您可以调整设置。
从 Divi 库添加自定义正文
单击“添加自定义正文”并在下拉菜单中选择“从库中添加”。
在保存的布局中查找布局并应用
在布局窗口中，单击保存的布局并查找我们刚刚创建的布局。
保存对主题生成器的更改
不要忘记将更改保存到主题构建器。
预览
该模板现在将应用于您网站上的所有产品。 让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
这是一个包裹！
在这篇文章中，我们向您展示了如何创建一个日本美学灵感的产品页面。 款式简洁大方，非常适合展示精致或手工制品。 我们还向您展示了如何使用 Divi 主题构建器将布局转换为模板。 用你的新 Divi + WooCommerce 项目试试这个设计，告诉我们你的想法。