WordPress divi主题

如何使用 Divi 为儿童产品制作有趣的产品页面模板

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

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

儿童产品网站具有独特的风格。 它们往往很有趣,色彩缤纷并激发微笑。 现在,使用 Divi 主题构建器和可自定义的 woo 模块可以更轻松地创建您的儿童产品 WooCommerce 商店。 为什么不通过独特而有趣的设计让它变得更加特别呢? 在这篇文章中,我们将向您展示如何在主题构建器中创建适用于您所有产品的儿童产品页面模板。 它最适合具有透明背景的产品图像。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

在我们开始重新创建设计之前,让我们看一下不同屏幕尺寸的结果。

桌面

儿童产品

移动的

儿童产品

免费下载有趣的儿童产品模板

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

1. 儿童产品模板的设计准备

从产品照片中删除背景

在开始儿童产品设计之前,我们要做的第一件事是准备图像。 从产品图像中删除背景。 您可以使用 Adob​​e Photoshop、Adobe Illustrator 或 remove.bg 实现此目的。 在产品周围留出一些空间,以便它在设计中很好地放置。 最终图像的最佳尺寸是 600X400 像素。

创建背景设计

第二步是创建背景设计以放置在图像后面。 这种具有重叠形状的设计很容易在 Adob​​e Illustrator 中创建。 或者,您可以在上面的可下载文件夹中找到此背景图像。 如果要创建背景,请执行以下步骤:

  • 创建(或来源)形状。
  • 给形状你想要的颜色。
  • 复制形状。
  • 用与原版相似的色调给它上色。
  • 旋转第二个形状以创建漂亮的构图。
  • 为两个形状添加一些透明度。
  • 添加与最终设计中的背景颜色相同的背景。
  • 另存为 1750X1650 像素左右的 JPG。

WordPress divi主题

2. 创建/添加新的 Woocommerce 产品

产品数据

一旦我们准备好产品图片和背景设计,就可以创建儿童产品了。 要创建与我们完全相同的设计,请插入以下信息。

  • 标题:木字母块
  • 详细说明:这些天然木块非常适合孩子们以有趣和创造性的方式学习他们的字母和数字。 小手指的边框是圆形的,油漆是无毒的。
  • 旧售价:12,99
  • 新售价:7,99
  • 特色图片:剪下木块图像。 首选尺寸:600 x 400 像素
  • 属性:见下文

在属性选项卡中,输入附加信息模块的值。

  • 材质:天然松木
  • 油漆:无毒白漆
  • 油漆颜色:白色、蓝色、绿色、紫红色

3. 在主题生成器中创建新模板

打开 Divi Theme Builder 并添加新模板

现在是时候使用 Divi 主题构建器了。 我们将在那里建立设计。 一种添加一个新模板。

开始为所有产品构建定制车身

在所有产品上使用此模板并开始构建身体。

fiverr建站WordPress程序员

主题生成器专业提示:

在主题构建器中创建产品设计时,请始终在另一个窗口中打开产品页面以检查更改。

4. 重现儿童产品设计

添加新部分

背景

在正文模板生成器中,您会注意到一个部分。 打开该部分并更改背景颜色。

  • 背景颜色:淡粉色#f9f2f2

独立站选品工具

添加新行

立柱结构

现在,添加一个包含 2 列的新行。

浆纱

然后,调整行的大小。

  • 自定义装订线宽度:2
  • 宽度:90%
  • 最大宽度:90%

第 1 列设置

背景

在第 1 列的设置中,添加您使用重叠形状创建的背景图像设计。

高质量外链购买

间距

然后,相应地调整间距。

  • 顶部和底部填充:5vw
  • 左右填充

第 2 列设置

间距

移至第 2 列并按如下方式调整间距值。

  • 顶部填充:1vw
  • 底部填充:
  • 左右填充:
    • 台式机:2vw
    • 平板电脑和手机:7vw

JasperAI 10000字免费额度试用

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

内容

现在是时候添加模块了。 首先,在第 1 列中,添加一个 woo 图像模块,并在内容下选择此产品。

元素

然后,选择将在设计中显示的元素。

  • 特色图片:是的
  • 图库:没有
  • 销售徽章:是的

销售徽章文本

在设计选项卡中,调整销售徽章的值,如下所示。

WordPress备份工具updrafplus
  • 徽章颜色:透明
  • 字体:Nunito
  • 字体粗细:粗体
  • 文字颜色:粉色#f24881
  • 字体大小:
    • 台式机:5vw
    • 平板电脑:12vw
    • 电话:10vw

浆纱

然后,调整间距以使事情更适合。

  • 顶部填充:
    • 台式机和平板电脑:1vw
    • 电话:2vw
  • 底部填充:0vw
  • 左右填充:0vw

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

内容

在第二列中,添加 woo 标题模块并在内容选项卡中选择此产品。

背景

给模块一个白色背景。

  • 背景颜色:白色#ffffff

标题文字

然后,在 H1 级别设置标题文本的样式。

  • 标题级别:H1
  • 字体:Nunito
  • 字体粗细:超粗体
  • 文本对齐:居中
  • 文字颜色:绿色深灰色#314942
  • 字体大小:
    • 台式机:2.6vw
    • 平板电脑和手机:6.4vw

间距

继续调整模块中的间距。

  • 顶部和底部填充:
    • 台式机:1.5vw
    • 平板电脑和手机:2.5vw
  • 左右填充:2vw

边界

最后,调整桌面和响应式尺寸的边框。

  • 圆角:
    • 桌面:1vw 所有四个角
    • 平板电脑和手机:3vw 所有四个角

将 Woo 描述模块添加到第 2 列

内容

在产品标题下方,添加 woo 描述模块。 在内容选项卡中选择描述类型和该产品。

  • 产品:本产品
  • 描述类型:描述

背景

然后,给模块一个背景颜色。

  • 背景颜色:白色#ffffff

文本

转到设计选项卡并设置文本样式。

  • 字体:Nunito
  • 颜色:绿色深灰色#314942
  • 尺寸:
    • 台式机:1vw
    • 平板电脑:2.5vw
    • 电话:3vw

间距

然后,调整模块的间距。

  • 最高边距:
    • 台式机和平板电脑:-0.5vw
    • 电话:-3vw
  • 顶部和底部填充:
    • 台式机:1.5vw
    • 平板电脑和手机:4vw
  • 左右填充:
    • 台式机:2vw
    • 平板电脑和手机:6vw

边界

最后,添加圆角。

  • 圆角:
    • 桌面:1vw 所有四个角
    • 平板电脑和手机:3vw 所有四个角

将 Woo 附加信息模块添加到第 2 列

内容

在描述模块下方,添加 woo 附加信息模块。 在内容选项卡中选择此产品。

背景

然后,添加白色背景。

  • 背景颜色:白色#ffffff

文本

在设计选项卡中,开始设置不同文本类型的样式。 首先,适用于属性值的文本。

  • 字体:Nunito
  • 风格:斜体
  • 颜色:绿色深灰色#314942
  • 尺寸:
    • 台式机:0.8vw
    • 平板电脑:1.5vw
    • 电话:2vw

标题文字

其次,设置标题文本的样式。

  • 字体:Nunito
  • 重量:超粗体
  • 颜色:粉色#f24881
  • 尺寸:
    • 台式机:1.7vw
    • 平板电脑:3vw
    • 电话:3.5vw
  • 行高:1em

属性文本

第三,设置属性文本的样式。

  • 字体:Nunito
  • 重量:粗体
  • 颜色:绿色深灰色#314942
  • 尺寸:
    • 台式机:0.9vw
    • 平板电脑:2vw
    • 电话:3vw

间距

然后,如下调整间距。

  • 最高边距:
    • 台式机和平板电脑:-0.5vw
    • 电话:-3vw
  • 顶部填充:
    • 台式机:1.5vw
    • 平板电脑:3vw
    • 电话:5vw
  • 左填充:1vw
  • 右填充:
    • 台式机:2vw
    • 平板电脑和手机:5vw

边界

最后,添加圆角。

  • 圆角:
    • 桌面:1vw 所有四个角
    • 平板电脑和手机:3vw 所有四个角

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

内容

添加 woo 价格模块并在内容选项卡中选择此产品。

背景

此外,为模块添加粉红色背景以使其脱颖而出。

  • 背景颜色:粉色#f24881

销售旧价格文本

转到设计选项卡并设置旧价格的样式。

* 当您为产品添加新旧销售价格时,woo price 模块不会在主题构建器中同时显示它们。 检查实际产品页面以查看最终设计的外观。

  • 字体:Nunito
  • 颜色:白色#ffffff
  • 尺寸:
    • 台式机:1.5vw
    • 平板电脑:2.5vw
    • 电话:3vvw

销售新价格文本

继续设计新价格。

  • 字体:Nunito
  • 重量:粗体
  • 颜色:白色#ffffff
  • 尺寸:
    • 台式机:2vw
    • 平板电脑:2vw
    • 电话:4vw
  • 字母间距:1px

间距

然后,调整模块的间距。

  • 最高边距:
    • 台式机和平板电脑:-0.5vw
    • 电话:-3vw
  • 顶部和底部填充:
    • 台式机:1.5vw
    • 平板电脑和手机:
  • 左右填充:
    • 台式机:2vw
    • 平板电脑和手机:5vw

边界

最后,添加圆角。

  • 圆角:
    • 桌面:1vw 所有四个角
    • 平板电脑和手机:3vw 所有四个角

最终设计

这是实际产品上的设计与主题构建器中的外观。

添加 Woo 添加到购物车模块到第 2 列

内容

在价格模块下方,放置一个 woo 添加到购物车模块。 在内容选项卡中选择此产品。

* 当您添加 woo 添加到购物车模块时,您会注意到顶部有一个颜色选项的下拉菜单。 如果您没有在产品页面上指定此内容,则它不会出现在您的最终设计中。 您可以通过在主题构建器中构建时检查实时产品来确保。

元素

继续,选择将在模块中显示的元素。

  • 数量字段:关闭
  • 库存:关闭

背景

然后,添加白色背景颜色。

  • 背景颜色:白色#ffffff

按钮

现在是时候为按钮设置样式了。 添加值如下。

  • 字体大小:
    • 台式机:2vw
    • 平板电脑:3vw
    • 电话:5vw
  • 文字颜色:粉色#f24881
  • 背景颜色:白色#ffffff
  • 字母间距:1px
  • 字体:Nunito
  • 重量:重
  • 上下边距:-0.3vw

间距

然后,调整模块的间距。

  • 最高边距:
    • 台式机和平板电脑:-0.5vw
    • 平板电脑:-3vw
  • 顶部和底部填充:0vw
  • 左右边距:0vw

边界

最后,添加一个圆形边框。

  • 圆角:
    • 桌面:1vw 所有四个角
    • 平板电脑和手机:3vw 所有四个角

预览

让我们最后看一下不同屏幕尺寸的最终设计。 儿童产品设计模板现在将应用于您商店中的所有产品。 确保您返回检查图像尺寸以确保它们都适合。

桌面

儿童产品

移动的

儿童产品

这是儿童产品页面上的一个包装!

在这篇文章中,我们向您展示了如何为儿童产品页面重新创建设计。 这种设计具有柔和的边缘、有趣的背景设计和令人愉悦的色彩,将使您的所有产品看起来很诱人,随时可以购买。 我们希望您喜欢这种设计,并将用它来激发您自己的 Divi 创作。 在评论中留下您的想法!

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