Divi 插件亮点：DTS Filterable Portfolio Grid Pro

Divi 的可过滤投资组合模块可让您以全屏或网格形式构建投资组合。 如果您想要一个不同的外观，在网格中添加一个按钮和 3 或 4 列的选项，该怎么办？ 这正是名为 DTS Filterable Portfolio Grid Pro 的第三方插件所做的。

DTS Filterable Portfolio Grid Pro 向 Divi Builder 添加了一个新模块。 该插件使您的投资组合焕然一新，并在网格中提供 3 或 4 列选项。 它显示项目帖子类型。 它包括自定义按钮文本和自定义高级选项。

该插件可从开发人员的网站获得。

在这个插件亮点中，我们将看看 DTS Filterable Portfolio Grid Pro，看看它可以做什么。 图片来自 Unsplash.com。

安装 DTS Filterable Portfolio Grid Pro

正常上传并激活插件。 激活插件后，导航到仪表板中的设置并选择DTS Filterable Portfolio Grid Pro Activation 。 输入您的 API 密钥和电子邮件并保存更改。

模块设置

该插件向 Divi Builder 添加了一个新模块。 它是蓝色的，所以很难错过。

内容设置包括帖子数量、类别选择、显示标题、类别、分页、背景和自定义按钮文本。

设计选项卡包括布局、颜色、字体、图标、覆盖、边框和动画的设置。

示例 – 网格

默认设置使用 3 列网格。 您可以在中心磁贴中看到悬停动画。 图块包括带有标题部分的图像和放置在中心的按钮。 底部显示类别。 瓷砖显示一个阴影，在悬停时移开。 您可以猜到，这些元素中的每一个都是可自定义的。

在本例中，我将网格更改为 4 列并调整了按钮背景颜色、按钮背景悬停颜色和按钮字体悬停颜色。 四列布局更改图像大小以匹配。

在这个中，我减小了按钮半径，增加了按钮的字体大小，更改了悬停图标及其颜色，并更改了悬停叠加颜色。 所有这些调整都很简单直观。

在这个例子中，我将边框半径设为 0 来为按钮创建方角。 我增加了按钮文本、标题文本的字体大小，并更改了字体样式。 我还将悬停叠加层设置为黑色，具有足够的不透明度以显示图像并更改悬停图标。

这个减少了标题的行高。 我还使字体的颜色变暗并增加了字母间距。 我已将类别字体设置回默认值并将其设置为斜体。 按钮半径设置为 100，我添加了自己的按钮文本。 我还更改了叠加颜色并选择了不同的图标并将其颜色更改为白色。 此示例还使用了边框，该边框设置为红色且宽度为 2 个像素。 边框选项包括颜色、宽度和样式。

该模块确实有一个浅色和深色的文本颜色选项，以防您在标题后面使用深色背景，但目前没有更改标题后面背景的选项。 我怀疑这是即将推出的功能。

背景设置（标准颜色、渐变、图像和视频）应用于模块后面。 卡片接触背景颜色的边缘，并且模块内没有填充调整。

这会使背景看起来很尴尬，但有几个简单的解决方案。 您可以向部分或行添加填充，就像我在本文中的所有图像中所做的那样，或者您可以使用 CSS 向模块添加填充。

这是我添加到模块“主要元素”部分的“高级”选项卡中的 CSS。 它只是告诉 Divi 向所有 4 个位置添加填充。 这些值的应用顺序与行和模块的填充字段相同：顶部、右侧、底部、左侧。 这意味着我给顶部填充的值为 40，右侧填充值为 30，底部填充值为 20，左侧填充值为 30。

结果正是我想要的——所有四个边都有不同级别的填充。 这使得后台功能更有用并且易于实现。

示例 – 过滤器

由于这是一个可过滤的产品组合，因此过滤器也可以自定义。 正如预期的那样，对字体样式、大小、对齐方式、颜色、间距和高度进行了调整。 到目前为止，我们已经看到了过滤器的默认设置。

本示例使用红色的 Amatic SC 字体。 我增加了字体大小，但将间距和高度保留为默认值。

这个使用了一种叫做 Bevan 的字体。 我用的是深红色。 字体大小与之前的字体相同。

这个使用Arvo。 我减小了字体大小并选择了深灰色。

动画

Divi 的动画也可在模块的设置中使用。 选择无、淡入淡出、滑动、弹跳、缩放、翻转、折叠和滚动。 您还可以将动画调整为仅重复一次或循环，选择方向、持续时间、延迟、强度、开始不透明度和速度曲线。

此示例使用滚动。 我已将其他所有内容保留为默认值。

在布局中使用投资组合网格

DTS Filterable Portfolio Grid Pro 在布局中看起来很棒。 这是一个包含博客、投资组合和联系表格的示例摄影布局。 我正在使用投资组合网格的默认设置，它融合得很好。

使用额外的投资组合网格

DTS Filterable Portfolio Grid Pro 也与 Extra 兼容。 下面来看看与上面的 Divi 布局类似的布局。 这也使用默认设置。 我正在使用图像大小不匹配的 3 列网格。 这是一个简单的解决方法——只需使用相同大小的图像。

执照

有两种许可证选项可供选择：单站点和扩展。 两者都包括终身更新和 6 个月的支持。

最后的想法

DTS Filterable Portfolio Grid Pro 易于使用，并提供许多优雅的样式，让您的投资组合脱颖而出。 我希望添加一些功能，例如标题和元背景颜色，但它仍然提供了足够的功能，很容易推荐。 如果您对样式超出标准 Divi 模块的可过滤背景网格模块感兴趣，DTS Filterable Portfolio Grid Pro 值得一看。

我们希望听到您的意见！ 您是否尝试过 DTS Filterable Portfolio Grid Pro？ 请在评论中告诉我们您对此的看法。

精选图片来自 AF 工作室/shutterstock.com