如何在 Divi 的可过滤投资组合模块中设置类别过滤器的样式

Divi 的可筛选投资组合模块包含许多元素，每个元素都可以单独设置样式。 过滤器是最有用的元素之一，但有时会被忽视。 在这篇文章中，我们将了解如何在 Divi 的可过滤投资组合模块中设置类别过滤器的样式。 我们将看到使用标准设置可以做什么，我们将深入研究 CSS 以了解如何进一步设置它的样式。

让我们开始吧！

预习

首先，让我们看看我们将在本教程中构建什么。

桌面类别过滤器示例一

电话类别过滤器示例一

桌面类别过滤器示例二

电话类别过滤器示例二

桌面类别过滤器示例三

电话类别过滤器示例三

将项目拆分为类别

为了充分利用类别过滤器，您需要将项目分成对读者最有意义的类别。 要创建您的类别，请转到 WordPress 仪表板中的项目>类别。

在这里，您将看到用于添加名称、slug、父类别和描述的字段。 您还将在一个列表中看到您的类别列表，您可以在其中编辑它们。

创建类别后，请务必为每个项目选择对读者最有意义的类别。 要创建您的项目，请转到项目并单击菜单中或页面顶部的添加新项目。

对于我的示例，我为一家家居装修公司创建了项目。 该公司将专注于家庭装修，但也包括类似的企业工作，他们可以从头开始建设。 对于家庭，我使用的是内部和外部类别。 对于所有其他工作，我添加了企业和建筑。

可过滤的投资组合模块设置

在我们的示例中，我将使用可过滤的投资组合模块替换免费 Renovation Layout Pack 中投资组合页面的投资组合部分。 首先，让我们看看如何为模块设置样式。 然后，我们将以三种不同的方式设置过滤器的样式。 这是我进行更改之前的页面。

这是添加可过滤投资组合模块代替图像后的页面。

首先，我们将样式化模块。 我们将对所有三个示例使用这些相同的设置。

内容

在 Content 选项卡中，将Post Count设置为 8 并从 Included Categories 列表中选择Categories 。

• 帖子数：8
• 包含类别：您的选择

元素

向下滚动到Elements并禁用Show Categories 。 我们将只使用标题并允许过滤器显示类别。

• 显示类别：否

布局

接下来，转到“设计”选项卡并选择“布局”下的“网格”。 我已经为之前的图像选择了它，但该模块默认显示全角。

• 布局：网格

文本

接下来，滚动到文本并将文本对齐设置为居中。 这使过滤器和分页以模块为中心，标题以项目图像为中心。

• 文本对齐：居中

标题文字

接下来，滚动到Title Text 。 将字体更改为Kanit ，并将粗体设置为半粗体。 将颜色设置为黑色。

• 字体：Kanit
• 重量：半粗体
• 颜色：#000000

将字体大小更改为台式机的 20 像素、平板电脑的 18 像素和手机的 16 像素。 将行距设置为 1px，将行高设置为 1.3em。

• 尺寸：20px 桌面，18px 平板，16px 手机
• 字母间距：1px
• 线高：1.3em

分页文本

接下来，向下滚动到分页文本并将字体更改为 Kanit。 将颜色更改为黑色。

• 字体：Kanit
• 颜色：#000000

将行距更改为 1px。 保存您的工作。 我们现在可以为我们的示例设置类别过滤器的样式。

• 字母间距：1px

类别过滤器示例

现在，我们可以继续我们的类别过滤器示例。 我正在使用布局包中的设计提示。

类别过滤器示例一

我们的第一个例子是三个中最简单的一个。 它使用基本设置，并没有做任何花哨的事情。 它适用于布局设计。

过滤条件文本

在Design选项卡中，向下滚动到Criteria Text 。 将字体更改为 Kanit。 将样式更改为 TT，将颜色更改为黑色。

• 字体：Kanit
• 款式：TT
• 颜色：#000000

将行间距设置为 1px，将行高设置为 1.3em。 第一个就是这样。 现在，保存您的设置并关闭模块。

• 字母间距：1px
• 线高：1.3em

类别过滤器示例二

我们的第二个示例将为模块和页面使用一些简单的 CSS 来创建圆角和盒子阴影。 这个看起来最不一样。

过滤条件文本

转到Design选项卡并向下滚动到Filter Criteria Text 。 将字体更改为 Kanit。 将颜色设置为黑色，大小设置为 16px，行高设置为 1.5em。 字体大小适用于所有屏幕尺寸，因此我们无需针对平板电脑或手机进行调整。

• 字体：Kanit
• 颜色：#000000
• 尺寸：16 像素
• 线高：1.5em

模块 CSS

接下来，转到“高级”选项卡。 向下滚动到Active Portfolio Filter并为背景颜色添加CSS并关闭模块。 这会更改活动过滤器的背景颜色。 用户单击的任何过滤器都会更改此背景颜色，而之前的过滤器将恢复为常规颜色。

• 主动投资组合过滤器 CSS：

  background-color:#ffd000;

页面设置 CSS

接下来，在页面菜单中打开页面设置。 在页面设置模式中，选择高级选项卡并将自定义 CSS粘贴到字段中。 此 CSS 从过滤器项中移除边框，创建 25px 的边框半径，并在项之间添加 5px 的边距。 它还在项目的底部添加了一个小盒子阴影并改变了阴影的颜色。 关闭模块并保存您的设置。

• 自定义 CSS：

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {border-width:0px; border-radius: 25px!important; margin:5px; box-shadow: 1px 2px rgba(0,0,0,0.3);}

类别过滤器示例三

我们的第三个示例遵循与前一个示例类似的 CSS 设计思想。 它不包括圆角，并且在悬停时会更改字体和背景颜色。 它还为模块和页面使用 CSS。

过滤条件文本

转到Design选项卡并向下滚动到Filter Criteria Text 。 为Font选择 Kanit，将Style设置为 TT，并将Color设置为白色。

• 字体：Kanit
• 款式：TT
• 颜色：#ffffff

接下来，为文本颜色选择悬停选项并将颜色更改为黑色。 这会处理悬停时的字体。 我们将使用 CSS 处理背景。 将字母间距更改为 1px，将行高更改为 1.3em。

• 悬停颜色：#000000
• 字母间距：1px
• 线高：1.3em

模块 CSS

接下来，转到Advanced选项卡并向下滚动到Active Portfolio Filter 。 添加以下CSS以更改活动过滤器的背景。 关闭模块。

• 主动投资组合过滤器 CSS：

  background-color:#ffd000

页面设置 CSS

最后，打开页面设置。 转到高级选项卡并输入以下自定义 CSS 。 关闭模块并保存您的设置。 这会将背景更改为黑色，在顶部和底部添加 15px 的填充，在左侧和右侧添加 30px 的填充。 这会调整过滤器项目的大小以紧密匹配布局中的按钮，并有助于为悬停效果创建颜色变化。 悬停时背景将变为白色。

• 自定义 CSS：

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {background-color:black; padding: 15px 30px 15px 30px;}

结果

桌面类别过滤器示例一

电话类别过滤器示例一

桌面类别过滤器示例二

电话类别过滤器示例二

桌面类别过滤器示例三

电话类别过滤器示例三

结束的想法

这就是我们如何在 Divi 的可过滤投资组合模块中设置类别过滤器的样式。 类别过滤器包含与其他元素相同的样式工具，因此可以轻松设置样式以与任何 Divi 布局一起使用。 将 CSS 添加到模块和页面中，我们可以通过许多独特的方式对类别过滤器进行样式设置，从而在人群中脱颖而出。

我们希望收到你的来信。 您是否在 Divi 的可过滤投资组合模块中设置了类别过滤器的样式？ 在评论中让我们知道。