WordPress divi主题

如何使用 Divi 创建受日本美学启发的产品页面模板

by | May 8, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

您是否正在为您的在线商店寻找干净且简约的产品页面设计? 今天我们的设计灵感来自日本美学。 这是极简日本杂志和网站的常见风格。 它可以轻松阅读文本,查看产品并且不会分心。 按照下面的教程为您自己的产品重新创建此模板。 您还可以免费下载模板 JSON 文件!

google广告开户

让我们开始吧。

预览

在开始之前,让我们看一下设计在不同设备上的外观。

桌面

移动的

免费下载产品页面模板

要使用免费的产品页面模板,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

1. 添加/打开 Woocommerce 产品

产品数据

打开或创建新的 WooCommerce 产品。 要重现这种受日本美学启发的产品设计,您需要填写以下详细信息:

  • 名称:书法集
  • 描述:日本书法套装,包含创作精美字体艺术所需的所有工具。 黑色印度墨水、马毛刷、石锤、搅拌碗、日本剪刀和无出血纸。
  • 价格:31
  • 类别:美术用品
  • 特色图片:产品的横向图片。
  • 图库:4张相同尺寸的风景图片
  • 属性:见下文

属性选项卡包含 woo 附加信息模块的信息。 要添加此信息,请选择属性选项卡并创建一个自定义属性,如下所示:

  • 包括什么:
    • 1 刷
    • 1碗
    • 1 个墨水瓶
    • 1 把剪刀
    • 1 河石
    • 1 令纸

启用 Divi Builder 和修改页面设置

准备好所有产品数据后,启用 Divi Builder 并将页面布局更改为“全宽”。

WordPress divi主题

切换到可视化生成器

现在,切换到可视化构建器。 单击“在前端构建”按钮。

删除默认产品部分

由于我们要从头开始设计此产品页面,请删除整个默认部分。 这会给你一个空白的画布来工作。

2. 再造日式设计

添加新部分

让我们开始重新创建日本美学产品页面! 添加一个新的常规部分。

背景

打开部分设置并更改背景颜色。

  • 背景颜色:非常浅的灰色#f2f2f2

浆纱

接下来,调整大小。

fiverr建站WordPress程序员
  • 宽度:100%
  • 最大宽度:100%

间距

然后,间距值如下:

  • 顶部填充:
    • 桌面:0vw
    • 平板电脑+手机:2vw
  • 底部填充:

添加第一行

立柱结构

添加新行并选择以下列结构:

独立站选品工具

浆纱

在添加任何模块之前,请按如下方式调整行的大小设置:

  • 宽度:
    • 桌面:80%
    • 平板电脑 + 手机:63%

间距

此外,调整间距值。

  • 顶部+底部边距:0vw
  • 顶部 + 底部填充:0vw

添加 Woo 面包屑模块

内容

现在,添加第一个模块; woo面包屑。

高质量外链购买

文本

在设计选项卡中,为文本设置如下样式:

  • 字体:Duru Sans
  • 字体样式:TT
  • 颜色:黑色#000000
  • 尺寸:
    • 台式机:0.7vw
    • 平板电脑:1.5vw
    • 电话:1.7vw
  • 字母间距:2px

浆纱

然后,调整大小。

JasperAI 10000字免费额度试用

间距

最后,调整间距。

  • 最高边距:
    • 桌面:3em
    • 平板电脑 + 手机:0em
  • 底边距:
    • 台式机 + 平板电脑:1em
    • 电话:0em
  • 顶部 + 底部填充:1em
  • 左填充:2em

添加第二行

立柱结构

使用以下列结构添加第二行:

浆纱

打开行设置并更改不同屏幕尺寸的宽度。

WordPress备份工具updrafplus
  • 宽度:
    • 桌面: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 项目中试用此设计,并告诉我们您的想法。

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题