使用 Divi 的 Theme Builder 创建 WooCommerce 产品类别页面
已发表: 2020-06-05类别页面是任何电子商务网站的重要组成部分。 客户浏览产品类别以找到他们需要的东西。 这就是为什么您的类别页面需要与产品页面一样好。 使用 Divi 的 Theme Builder，创建类别页面模板比以往更容易。 在本教程中，我们将向您展示如何使用 Divi 的内置选项逐步创建类别页面模板并为其设置样式。 此外，我们将向您展示如何在 Themify WooCommerce 产品过滤器插件的帮助下使其可过滤。
并排打开两个浏览器选项卡。 使用主题构建器的第一个选项卡和类别页面的实时预览的第二个选项卡。 以这种方式工作，以便随时查看进度。 为方便起见，我们还添加了模板作为免费下载。
让我们开始吧！
预览
在我们开始重新创建模板之前，让我们先来看看分类页面模板在不同屏幕尺寸下的样子。
桌面
移动的
免费下载 Woo 类别页面模板
要使用免费的 Woo 类别页面模板，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
1. 更新您的产品和类别
在构建模板之前，请确保您的产品按正确的类别进行组织。 检查它们是否也被正确标记。 这些在设置产品过滤器插件时很重要。
2.设置插件
下载并安装
下载 WooCommerce 产品过滤器。 导航到您的插件仪表板并上传插件的 .zip 文件以进行安装。 或者，在目录中搜索插件。 该插件将在您的仪表板菜单中添加一个新选项卡。 确保你也激活了插件。
添加新过滤器表单
单击仪表板中的插件选项卡。 在插件设置中，单击按钮以添加新的过滤器表单。
设置过滤器表单
要使您的可过滤侧边栏看起来与本文预览中的一模一样，请使用下面提到的设置。 之后您可以随时调整这些设置。
- 布局：垂直
- 空字段：如果为空则不显示字段
- 产品分类：隐藏产品分类
- 分页选项：无限滚动
- 复位键：无复位键
- 分类法之间的逻辑关系：AND
- 结果页面模板：在同一页面上显示结果
创建类别字段
在主区域下方的菜单栏中，您将看到一系列选项卡。 将“类别”选项卡拖放到其下方的构建器中。 然后调整设置如下：
- 字段名称：类别
- 包括儿童：是
- 显示为：复选框
- 逻辑：或
- 顺序：名称，降序
- 布局：水平，2 列
创建标签字段
现在将“标签”选项卡拖放到构建器中。 确保它位于“类别”选项卡下方。 调整设置如下：
- 字段标题：类型
- 显示为：复选框
- 顺序：名称，降序
- 布局：水平，2 列
- 彩色图标
- 背景：透明
- 文字颜色：深棕色#44000d
单击保存以生成简码
保存您的工作并关闭构建器。 您将在插件的主菜单中看到短代码。 复制它，你以后会用到它。
3. 在 Theme Builder 中重新创建产品类别页面模板
打开主题生成器/添加新模板
是时候开始重新创建模板了！ 打开您的主题构建器并添加一个新模板。
设置模板设置
在模板设置中，选择“特定产品类别页面”。 单击要将此模板分配到的类别。 我们将选择手工皮具。
添加自定义正文
然后，单击“添加自定义正文”。
选择构建自定义主体
我们将从头开始重新创建此模板，因此请继续选择“构建自定义主体”。
从头开始构建
进入可视化构建器后，再次选择从头开始构建的选项。
第 1 节设置
背景
进入模板编辑器后，您会注意到一个部分。 打开该部分并添加背景颜色。
- 背景颜色：透明蓝灰色-rgba(68,66,109,0.02)
添加行
列结构
现在添加一个具有以下列结构的新行：
浆纱
调整下一行的大小设置。
- 天沟宽度：1
- 宽度
- 台式机：90%
- 平板电脑和手机：85%
- 最大宽度：1920px
间距
然后，在不同的屏幕尺寸上应用一些不同的间距值。
- 左右边距
- 桌面：自动
- 平板电脑：55px
- 电话：30px
- 顶部填充：100px
将帖子标题模块添加到第一列
元素
是时候添加模块了，从第 1 列中的帖子标题模块开始。仅启用标题。
- 节目名称：是
背景
接下来添加背景颜色。
- 颜色：#e8e8e8
标题文字
移至设计选项卡并设置标题文本的样式。
- 职称等级：H1
- 字体： Josefin Sans
- 重量：粗体
- 风格：TT
- 颜色：#44000d
- 尺寸
- 桌面：32px
- 平板电脑：28px
- 电话：30px
- 线高：1.2 em
间距
也调整间距。
- 顶部填充
- 台式机和平板电脑：100px
- 底部填充：80px
- 左填充
- 台式机和平板电脑：30px
- 右填充
- 台式机和平板电脑：30px
- 电话：10px
边界
给模块一些圆角。
- 圆角：15px 所有四个
盒子阴影
并添加一个微妙的框阴影。
- 框阴影：第二个选项
- 水平位置：12px
- 垂直位置：12px
- 模糊强度：20px
- 传播强度：-5px
- 阴影颜色：#dddddd
将文本模块添加到第一列
内容
在上一个模块的正下方添加一个文本模块。 在内容框中，添加您从插件中复制的短代码。
- 正文：插件简码
背景
接下来添加背景颜色。
- 颜色：#e8e8e8
文本
为文本设置样式。
- 字体： Josefin Sans
- 颜色：#44000d
- 尺寸
- 桌面：20px
- 平板电脑：18px
- 电话：16px
- 间距：1px
间距
调整间距设置。
- 上边距：50px
- 顶部和底部填充：40px
- 左右填充：30px
边界
然后，添加一些圆角。
- 圆角：15px 所有四个
盒子阴影
并通过添加一个微妙的框阴影来完成模块设置。
- 框阴影：第二个选项
- 水平位置：12px
- 垂直位置：12px
- 模糊强度：20px
- 传播强度：-5px
- 阴影颜色：#dddddd
将商店模块添加到第二列
内容
进入下一栏！ 添加店铺模块，调整主要设置如下：
- 产品视图类型：默认
- 使用当前页面：是
- 列布局：3 列
图片
转到设计选项卡并相应地设置图像样式：
- 图像圆角：15px 所有四个
- 图像框阴影：第二个选项
- 水平位置：6px
- 垂直位置：6px
- 模糊强度：18px
- 阴影颜色：#dddddd
标题文字
接下来为标题文本设置样式。
- 字体： Josefin Sans
- 重量：半粗体
- 对齐方式：右
- 颜色：#44000d
- 尺寸
- 桌面：26px
- 平板电脑：24px
- 电话：17px
- 间距：2px
价格文本
不要忘记设置价格文本的样式。
- 字体： Josefin Sans
- 对齐方式：右
- 颜色：#44000d
- 尺寸：15px
- 字母间距：2px
- 行高：46px
间距
调整间距设置。
- 顶部填充
- 平板电脑和手机：50px
- 左填充
- 桌面：50px
- 平板电脑和手机：0px
自定义 CSS
最后但并非最不重要的一点是，在高级选项卡中添加自定义的两行 CSS 代码，以在商店模块中的不同元素之间生成一些空间。 就是这样！
- 图像：填充底部：20px
- 价格：padding-bottom：40px
padding-bottom: 20px;
padding-bottom: 40px;
预览
我们已完成重新创建 WooCommerce 产品类别页面模板。 我们再来看看不同屏幕尺寸下的成品设计。
桌面
移动的
最后的想法
此产品类别页面模板可应用于您的 WooCommerce 商店中的所有类别和标签。 在产品过滤器插件的帮助下，您可以添加适合您自己的商店和产品的过滤器设置。 您可以使用任何 Divi woo 模块以任何您想要的方式个性化您的商店。 我们希望这个模板能帮助您为您的设计添加个性化的外观。 如果您有任何问题或建议，请在评论中告诉我们！