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

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

让我们开始吧。

预览

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

桌面

移动的

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

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

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

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

从产品照片中删除背景

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

创建背景设计

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

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

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

产品数据

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

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

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

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

3. 在 Theme Builder 中创建新模板

打开 Divi Theme Builder 并添加新模板

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

开始为所有产品构建自定义主体

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

主题生成器专业提示：

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

4. 重现孩子们的产品设计

添加新部分

背景

在主体模板构建器中，您会注意到一个部分。 打开该部分并更改背景颜色。

• 背景颜色：淡粉色#f9f2f2

添加新行

列结构

现在，添加一个有 2 列的新行。

浆纱

然后，调整行的大小。

• 自定义天沟宽度：2
• 宽度：90%
• 最大宽度：90%

第 1 列设置

背景

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

• 背景图片

间距

然后，相应地调整间距。

• 顶部和底部填充：5vw
• 左右填充
  • 平板电脑：2vw
  • 电话：0vw

第 2 列设置

间距

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

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

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

内容

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

• 产品：本产品

元素

然后，选择将显示在设计上的元素。

• 特色图片：是
• 画廊：没有
• 销售徽章：是

销售徽章文本

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

• 徽章颜色：透明
• 字体：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 列

内容

在 description 模块下方，添加 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 价格模块不会在主题构建器中同时显示它们。 检查实际产品页面以了解最终设计的外观。

• 字体：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 add to cart 模块。 在内容选项卡中选择此产品。

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

• 产品：本产品

元素

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

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

背景

然后，添加白色背景色。

• 背景颜色：白色#ffffff

按钮

现在是样式按钮的时候了。 按如下方式添加值。

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

间距

然后，调整模块的间距。

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

边界

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

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

预览

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

桌面

移动的

这是儿童产品页面的包装！

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