WordPress divi主题

Divi 插件亮点:Divi FilterGrid

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

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

在 Divi 市场中找到它

Divi FilterGrid 在 Divi 市场上可用! 这意味着它已通过我们的审查,并符合我们的质量标准。 您可以访问市场中的 Divi 插件以查看其所有可用产品。 从 Divi Marketplace 购买的产品具有无限的网站使用和 30 天退款保证(就像 Divi)。

google广告开户

在 Divi 市场购买

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

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

Divi FilterGrid 模块

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

Divi FilterGrid 内容选项卡

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

发布元素

Post Elements 选项可让您显示或隐藏特色图像,然后确定缩略图操作。 您可以链接到帖子、在灯箱、灯箱库中显示图像、在弹出窗口中显示帖子或打开自定义灯箱库。 对于此示例,我将在弹出窗口中显示该帖子。

WordPress divi主题

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

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

查询选项

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

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

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

fiverr建站WordPress程序员

过滤器选项

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

分页选项

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

背景

独立站选品工具

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

Divi FilterGrid 设计选项卡

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

布局选项

布局选项允许您选择布局、皮肤、设置项目宽度、列和行间距大小以及网格字体大小。 我减小了项目的宽度,移除了排水沟,并为皮肤选择了午夜。 我还减小了字体大小。

高质量外链购买

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

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

JasperAI 10000字免费额度试用

缩放图像显示每个图像,其中包含一个叠加层和位于中心的标题。 图像在悬停时放大。

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

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

WordPress备份工具updrafplus

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

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

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题