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