Divi 插件亮点：Divi FilterGrid

Divi FilterGrid 是一个第三方插件，它为 Divi Builder 添加了一个新的可过滤模块。 它可以显示来自任何自定义帖子类型的帖子并创建自定义过滤器以根据您选择的任何分类法显示它们。 显示博客文章、项目、产品、创建画廊等等。

在这个插件亮点中，我们将看看 Divi FilterGrid，看看它可以做什么，看看它是多么容易使用。 您可以从开发者的网站上购买该插件。

Divi FilterGrid 模块

Divi FilterGrid 模块已添加到 Divi Builder。 图标是彩色的，从其他图标中脱颖而出。

Divi FilterGrid 内容选项卡

内容选项卡添加了许多功能。 它们包括帖子元素、查询选项、过滤器选项、分页选项和用于调整所有背景颜色的背景。 它还包括标准链接和管理标签选项。

帖子元素

发布元素选项可让您显示或隐藏特色图像，然后确定缩略图操作。 您可以链接到帖子，在灯箱中显示图像，在灯箱画廊中，在弹出窗口中显示帖子，或打开自定义灯箱画廊。 对于此示例，我将在弹出窗口中显示帖子。

这将在灯箱画廊中打开图像。 读者可以选择箭头查看所有帖子的特色图片。 单击帖子标题仍会在同一选项卡中打开帖子。

您还可以更改叠加颜色、图标和图标颜色。 我已经自定义了上图中的每一个。 您还可以显示标题、添加标题链接、添加摘录、限制摘录字符数、显示阅读更多按钮、添加自定义字段等。 我添加了一个摘录并禁用了帖子元。

查询选项

查询选项让您可以从基本、高级和自定义中选择查询类型。 选择类别、帖子编号、偏移编号和按选项排序。 我在这个例子中选择了一个类别。

高级选项为您提供了几个新功能。 选择特定的帖子类型、分类法、术语，并排除术语和分类法。 您还可以显示私人帖子和置顶帖。 在上面的示例中，我正在设置分类法。 它让我选择要使用的特定类别或标签，然后指定它们与搜索词的关系。 子项的工作方式相同。 这使您可以获得额外的详细信息，而不仅仅是根据类别或标签显示帖子。 您还可以为分类设置帖子编号和顺序选项。

自定义查询类型允许您使用自定义内容。 它提供了一个指向文档的链接，您可以在其中了解如何进行设置。 自定义查询使用functions.php 文件中的代码完成。 该文档包括几个示例来引导您完成它。

过滤器选项

过滤器选项允许您按搜索词过滤网格。 选择默认过滤器，您将看到一个模式，您可以在其中选择帖子和项目的类别和标签。 您还可以按 ID、名称或自定义顺序设置顺序和过滤器。 对于自定义订单，您会看到一个框，您可以在其中输入以逗号分隔的值。

分页选项

分页选项允许您选择分页类型。 从分页、加载更多按钮或滚动加载更多内容中进行选择。 对于分页选项，您可以选择链接中显示的箭头、文本和页数。 我在这个例子中添加了文本并更改了箭头。

背景

背景设置可让您自定义网格、过滤器、活动过滤器、分页和活动分页的背景。 它还包括您在 Divi 模块中期望的标准背景选项。 在上面的示例中，我调整了过滤器、网格和分页的背景颜色。

Divi FilterGrid 设计选项卡

“设计”选项卡为布局选项、发布标题文本、发布元数据文本、发布内容文本、过滤器文本、分页文本、阅读更多按钮、加载更多按钮以及所有标准 Divi 模块选项提供自定义。

布局选项

布局选项让您选择布局、外观、设置项目宽度、列和行间距大小以及网格字体大小。 我减少了项目的宽度，移除了装订线，并为皮肤选择了午夜。 我还减小了字体大小。

这是左垂直过滤器。 它将过滤器垂直堆叠放置在左侧。 我增加了项目宽度，因此图像更大。

这是叠加中的项目。 此选项中的帖子较短。

缩放图像显示每个图像，中间带有叠加层和标题。 图像在悬停时放大。

库显示带有边框的卡片并将标题放置在图像上方。

这是使用默认皮肤的列表布局。

这是全角。 它将标题、元数据和摘录放在图像的底部。

Divi FilterGrid 模块高级选项卡

高级选项卡为模块中的几乎每个元素添加了 15 个自定义 CSS 字段。 CSS 用户在定位要自定义的特定元素时不会遇到任何问题。

Divi FilterGrid 模块样式

布局选项可以创建一些有趣的设计。 在这个例子中，我减少了宽度，所以它们显示在一行中。 我还删除了元数据和摘录。

对于这个，我增加了项目宽度。 这创造了一个漂亮的马赛克画廊设计。

在这一篇中，我添加了标题、所有元数据、摘录和阅读更多按钮。 我改变了标题的颜色，全部大写，增加大小，居中，并增加字符间距。 我还缩小了“阅读更多”按钮的大小并将文本样式设置为白色。

阅读更多按钮有很多样式选项。 对于这个，我已经恢复到默认大小，但使文本的重量变轻。 我已经把边缘弄圆了，并给了它一个背景渐变。

它不会在编辑器模式下显示，但您也可以向按钮添加图像。 您可以使用纯色叠加或渐变叠加单独添加图像。 在这个例子中，我在我的绿色渐变后面添加了图像。

帖子元数据文本一起调整所有帖子元数据。 我改变了颜色和行距。

过滤器文本可让您设置过滤器字体的样式。 我增加了字体的大小，改变了颜色，并添加了阴影效果。 对于选定的过滤器，默认过滤器样式具有不同的颜色。 您可以在“内容”选项卡的背景选项中单独调整。

在这个例子中，我正在调整分页文本。 我改变了颜色，增加了尺寸，添加了一些字符间距，并添加了一个阴影。 我还调整了模糊强度。

加载更多按钮还包括基本样式选项。 我使用的是默认文本（可以在内容选项卡中更改）。 我还将文本设置为白色（默认为绿色）。

我增加了字体大小，添加了字符间距，调整了边框，添加了渐变，并禁用了仅在悬停时显示图标。

Divi FilterGrid 和自定义帖子类型

我发现自定义帖子类型很容易使用。 在查询选项中，单击选择帖子类型，然后从模式中选择帖子类型。

它仍然显示原始过滤器，但您可以创建自己的过滤器或禁用​​它。 在过滤器选项中，单击过滤器分类法并从列表中选择您的分类法。 单击设置值。

我现在有我的 WooCommerce 产品的自定义过滤器。

我现在有一个 WooCommerce 产品模块，我可以根据自己的喜好进行设计。

Divi FilterGrid 博客示例

对于本示例，我替换了 Dog Walker 布局博客页面中的博客模块。 我设计了它以匹配帖子的颜色、字体样式和圆角。 然后我添加了 WooCommerce 产品以显示在博客列表中。 这是在博客流中添加各种类型内容的好方法。

结果看起来很神奇。 它创建一个可过滤的博客，或者您可以禁用过滤器并只显示内容。

Divi FilterGrid 模块文档和价格

文档可在开发人员的网站上找到。 单击按钮可查看有关高级功能的特定信息。 您可以访问常见问题页面或从这里提交支持票。 您还可以单击模块中每个功能的问号以查看如何使用它的说明。

购买 Divi FilterGrid 有四种选择：

• 单个站点 – 19 美元
• 5 个站点 – 39 美元
• 无限站点 – 59 美元
• 终身无限站点——129 美元

您可以从开发者的网站上购买该插件。

结束的想法

Divi FilterGrid 是一个有趣的插件。 它是用于显示不同类型内容的出色模块。 您几乎可以显示任何帖子类型，也可以同时显示多种帖子类型。 过滤选项可以像您希望的那样复杂。

我喜欢背景的颜色调整选项。 在内容选项卡中有颜色选项意味着颜色选项位于两个不同的位置。 我确实认为如果将这些颜色调整移到“设计”选项卡会更直观。 不过，能够独立自定义颜色是很好的。

我发现它非常直观。 我建议您探索以查看所有选项。 如果您有兴趣添加功能强大的过滤网格来显示您的帖子类型，Divi FilterGrid 是一个值得推荐的简单插件。

我们希望听到您的意见。 您是否尝试过 Divi FilterGrid？ 请在评论中告诉我们您对此的看法。

精选图片来自 Thepanyo/shutterstock.com