WordPress divi主题

使用 Divi 的主题生成器创建 WooCommerce 产品类别页面

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

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

类别页面是任何电子商务网站的重要组成部分。 客户浏览产品类别以找到他们需要的东西。 这就是为什么您的类别页面需要看起来和您的产品页面一样好。 使用 Divi 的 Theme Builder,创建类别页面模板比以往任何时候都容易。 在本教程中,我们将向您展示如何逐步创建类别页面模板并使用 Divi 的内置选项对其进行样式设置。 此外,我们将向您展示如何在 Themify WooCommerce 产品过滤器插件的帮助下使其可过滤。

google广告开户

并排打开两个浏览器选项卡。 将第一个选项卡用于主题构建器,将第二个选项卡用于类别页面的实时预览。 以这种方式工作以查看进度。 为了您的方便,我们还添加了模板作为免费下载。

让我们开始吧!

预览

在我们开始重新创建模板之前,让我们看一下类别页面模板在不同屏幕尺寸上的样子。

桌面

WooCommerce 产品类别页面

移动的

WooCommerce 产品类别页面

免费下载 Woo 类别页面模板

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

1.更新您的产品和类别

在构建模板之前,请确保您的产品按正确的类别进行组织。 检查它们是否也被正确标记。 这些在设置产品过滤器插件时很重要。

WooCommerce 产品类别页面

2.设置插件

下载并安装

下载 WooCommerce 产品过滤器。 导航到您的插件仪表板并上传插件的 .zip 文件以进行安装。 或者,在目录中搜索插件。 该插件将在您的仪表板菜单中添加一个新选项卡。 确保您也激活了插件。

WordPress divi主题

添加新的过滤器表单

单击仪表板中的插件选项卡。 在插件设置中,单击按钮以添加新的过滤器表单。

设置过滤器表单

要使您的可过滤侧边栏看起来与本文预览中的完全一样,请使用下面提到的设置。 之后您可以随时调整这些设置。

  • 布局:垂直
  • 空字段:如果为空,则不显示字段
  • 产品排序:隐藏产品排序
  • 分页选项:无限滚动
  • 重置按钮:无重置按钮
  • 分类法之间的逻辑关系:AND
  • 结果页面模板:在同一页面上显示结果

WooCommerce 产品类别页面

创建类别字段

在主区域下方的菜单栏中,您将看到一系列选项卡。 将“类别”选项卡拖放到其下方的构建器中。 然后调整设置如下:

  • 字段标题:类别
  • 包括儿童:是
  • 显示为:复选框
  • 逻辑:或
  • 顺序:名称,降序
  • 布局:水平,2列

创建标签字段

现在将“标签”选项卡拖放到构建器中。 确保它位于“类别”选项卡下方。 调整设置如下:

fiverr建站WordPress程序员
  • 字段标题:类型
  • 显示为:复选框
  • 顺序:名称,降序
  • 布局:水平,2列
  • 颜色图标
    • 背景:透明
    • 文字颜色:深棕色#44000d

WooCommerce 产品类别页面

单击保存以生成简码

保存您的工作并关闭构建器。 您将在插件的主菜单中看到简码。 复制它,你以后需要它。

WooCommerce 产品类别页面

WooCommerce 产品类别页面

独立站选品工具

3.在主题生成器中重新创建产品类别页面模板

打开主题生成器/添加新模板

是时候开始重新创建模板了! 打开您的主题生成器并添加一个新模板。

设置模板设置

在模板设置中,选择“特定产品类别页面”。 单击要将此模板分配到的类别。 我们将选择手工皮具。

WooCommerce 产品类别页面

添加自定义正文

然后,单击“添加自定义正文”。

高质量外链购买

WooCommerce 产品类别页面

选择构建自定义主体

我们将从头开始重新创建此模板,因此请继续选择“构建自定义主体”。

WooCommerce 产品类别页面

从头开始构建

进入可视化构建器后,再次选择从头开始构建的选项。

WooCommerce 产品类别页面

JasperAI 10000字免费额度试用

第 1 节 设置

背景

进入模板编辑器后,您会注意到一个部分。 打开该部分并添加背景颜色。

  • 背景颜色:透明蓝灰色 – rgba(68,66,109,0.02)

WooCommerce 产品类别页面

添加行

立柱结构

现在添加一个具有以下列结构的新行:

WooCommerce 产品类别页面

浆纱

接下来调整行的大小设置。

WordPress备份工具updrafplus
  • 天沟宽度:1
  • 宽度
    • 桌面:90%
    • 平板电脑和手机:85%
  • 最大宽度:1920px

WooCommerce 产品类别页面

间距

然后,在不同的屏幕尺寸上应用一些不同的间距值。

  • 左边距和右边距
    • 桌面:自动
    • 平板电脑:55px
    • 电话:30 像素
  • 上边距:100px

WooCommerce 产品类别页面

将帖子标题模块添加到第一列

元素

是时候添加模块了,从第 1 列中的帖子标题模块开始。仅启用标题。

WooCommerce 产品类别页面

背景

接下来添加背景颜色。

WooCommerce 产品类别页面

标题文字

移至设计选项卡并设置标题文本的样式。

  • 职称等级:H1
  • 字体: Josefin Sans
  • 重量:粗体
  • 款式:TT
  • 颜色:#44000d
  • 尺寸
    • 桌面:32px
    • 平板电脑:28px
    • 电话:30 像素
  • 行高:1.2 em

WooCommerce 产品类别页面

间距

也调整间距。

  • 顶部填充
    • 台式机和平板电脑:100px
  • 底部填充:80px
  • 左填充
  • 右填充
    • 台式机和平板电脑:30px
    • 电话:10像素

WooCommerce 产品类别页面

边界

给模块一些圆角。

  • 圆角:15px 所有四个

WooCommerce 产品类别页面

盒子阴影

并添加一个微妙的盒子阴影。

  • 盒子阴影:第二个选项
  • 水平位置:12px
  • 垂直位置:12px
  • 模糊强度:20px
  • 传播强度:-5px
  • 阴影颜色:#dddddd

WooCommerce 产品类别页面

将文本模块添加到第一列

内容

在前一个模块的正下方添加一个文本模块。 在内容框中,添加您从插件复制的简码。

WooCommerce 产品类别页面

背景

接下来添加背景颜色。

WooCommerce 产品类别页面

文本

设置文本样式。

  • 字体: Josefin Sans
  • 颜色:#44000d
  • 尺寸
    • 桌面:20px
    • 平板电脑:18px
    • 电话:16像素
  • 间距:1px

WooCommerce 产品类别页面

间距

调整间距设置。

  • 上边距:50px
  • 顶部和底部填充:40px
  • 左右内边距:30px

WooCommerce 产品类别页面

边界

然后,添加一些圆角。

  • 圆角:15px 所有四个

WooCommerce 产品类别页面

盒子阴影

并通过添加一个微妙的盒子阴影来完成模块设置。

  • 盒子阴影:第二个选项
  • 水平位置:12px
  • 垂直位置:12px
  • 模糊强度:20px
  • 传播强度:-5px
  • 阴影颜色:#dddddd

WooCommerce 产品类别页面

将商店模块添加到第二列

内容

进入下一栏! 添加商店模块并调整主要设置如下:

  • 产品查看类型:默认
  • 使用当前页面:是
  • 列布局:3列

WooCommerce 产品类别页面

图片

转到设计选项卡并相应地设置图像样式:

  • 图像圆角:15px 所有四个
  • 图像框阴影:第二个选项
    • 水平位置:6px
    • 垂直位置:6px
    • 模糊强度:18px
    • 阴影颜色:#dddddd

WooCommerce 产品类别页面

WooCommerce 产品类别页面

标题文字

接下来为标题文本设置样式。

  • 字体: Josefin Sans
  • 重量:半粗体
  • 对齐方式:右
  • 颜色:#44000d
  • 尺寸
    • 桌面:26px
    • 平板电脑:24 像素
    • 电话:17px
  • 间距:2px

WooCommerce 产品类别页面

价格文本

不要忘记设置价格文本的样式。

  • 字体: Josefin Sans
  • 对齐方式:右
  • 颜色:#44000d
  • 尺寸:15 像素
  • 字母间距:2px
  • 行高:46px

WooCommerce 产品类别页面

间距

也调整间距设置。

  • 顶部填充
  • 左填充
    • 桌面:50px
    • 平板电脑和手机:0px

WooCommerce 产品类别页面

自定义 CSS

最后但同样重要的是,在高级选项卡中添加自定义的两行 CSS 代码,以在 shop 模块中的不同元素之间生成一些空间。 就是这样!

  • 图片:padding-bottom:20px
  • 价格:padding-bottom:40px
padding-bottom: 20px;
padding-bottom: 40px;

WooCommerce 产品类别页面

预览

我们已完成重新创建 WooCommerce 产品类别页面模板。 让我们再看看不同屏幕尺寸上的成品设计。

桌面

WooCommerce 产品类别页面

移动的

WooCommerce 产品类别页面

最后的想法

此产品类别页面模板可应用于您的 WooCommerce 商店中的所有类别和标签。 在产品过滤器插件的帮助下,您可以添加适合您自己的商店和产品的过滤器设置。 您可以使用任何 Divi woo 模块以任何方式个性化您的商店。 我们希望这个模板能帮助您为您的设计添加个性化的外观。 如果您有任何问题或建议,请在评论中告诉我们!