Divi 插件亮点 – Divi Portfolio Grid

Divi 包括一个投资组合模块，该模块以全宽或网格布局显示您的投资组合，并包括您期望从 Divi 模块获得的所有基本功能 - 背景、字体、颜色、边框、叠加层、图标等。如果您想要一个不同的布局，例如多栏设计，还是新功能，例如可自定义的按钮？ 您可能对名为 Divi Portfolio Grid 的第三方插件感兴趣。

Divi Portfolio Grid 是来自 Divi Theme Store 的第三方插件。 它不仅为您提供标准的 Divi 模块功能，还提供具有新样式功能的 2、3 和 4 列布局，因此您可以创建独特的投资组合。 它还添加了一个带有文本和悬停效果的按钮来更改颜色。

在本概述中，我们将使用我创建的示例投资组合来查看 Divi 投资组合网格。 投资组合和背景中使用的所有图像均来自 Unsplash.com。

安装 Divi Portfolio Grid 插件

在上传插件之前，您需要解压缩下载文件。 在压缩文件中，您将找到压缩插件文件和 PDF 快速指南。 快速指南是一份文档，可指导您完成安装以及如何使用该模块的概述。 上传下载文件中的压缩插件文件，正常安装和激活。

自定义投资组合模块功能

该插件向 Divi Builder 添加了一个名为 Custom Portfolio Module 的新模块。 该模块的工作方式与后端的任何其他 Divi Builder 模块一样 - 因此您可以将其拖放到任何行中，并调整内容、设计和高级设置。

自定义背景颜色、选择背景图像、选择布局、创建自定义按钮文本、选择要显示的帖子数量、选择类别、显示元、选择颜色等。

所有标准设计功能也都在这里。 调整颜色、字体、按钮、图标、叠加层等。

示例 – 使用 Divi 自定义投资组合模块

对于我的示例，我创建了一个页面，添加了一个背景以赋予它一些视觉效果，使行全宽，并添加了投资组合网格模块。 在我们看之前，让我们快速浏览一下标准的 Divi Building 投资组合模块以进行比较。

标准 Divi 投资组合模块

以下是使用标准 Divi 投资组合模块的页面。 我已将其设置为网格布局并将字体颜色设置为浅色。 所有其他功能都设置为默认值。 它还包括带有图标（网格模式）、边框、背景、元和字体样式的悬停覆盖。

项目的特色图像显示在图像下方，并带有项目标题和类别。 单击标题将带您进入项目。 单击类别标题会打开该类别的类别页面。 它还包括在使用网格布局时带有叠加颜色和图标选项的悬停效果。

自定义投资组合模块示例

它包括三种布局可供选择，因此您可以将投资组合设置为 2、3 或 4 列。 让我们看看具有各种自定义和功能的每个布局。

下面是 2 列布局。 它显示项目的特色图像，在图像下方的栏中包含可点击的标题和类别，并在图像和栏上放置一个带有文本的按钮。 这是默认的功能和颜色。

该图像包含与标准投资组合模块相同的悬停效果，但该按钮还包含悬停效果。 您可以在此示例中看到默认按钮设置将紫色背景更改为红色。

您还可以看到一个很好的悬停效果，它会在您悬停的卡片后面创建一个阴影。 标题显示为工具提示。 悬停覆盖也是默认功能，因此不必启用它。 悬停效果的过渡会显示较重的阴影，直到过渡完成。

下面是 3 列布局。 在本例中，我更改了按钮背景和文本的颜色，并更改了文本以显示我自己的消息。

该按钮还包括阴影悬停效果。 在本例中，我只是将鼠标悬停在按钮上，因此图像不会显示其悬停效果。 按钮背景和文本已更改颜色。

此示例使用 4 列布局。 我已将按钮半径设置为 0 并更改了所有字体样式。

悬停效果放置了一个不透明度为 47% 的蓝色叠加层（对于奇数很抱歉，但它是我的鼠标停止的地方，所以我继续使用它），以及一个红色的复选框图标。 该按钮从带有浅色标签文本的深灰色变为带有深灰色文本的灰白色。

在这个例子中，我添加了一个显示在标题和元后面的背景。 我添加了一个宽度为 2 像素的红色边框（因此很容易在图像中看到）。 我已经调整了所有字体和颜色，并更改了按钮背景颜色、悬停颜色和图标颜色。 我保留了默认的悬停叠加颜色以显示特色图像区域与标题和元部分后面的背景图像之间的对比度。

该按钮仅在您显示标题时显示。 此示例仅显示类别。

此示例仅显示项目标题。 由于标题显示，按钮也显示。

在本例中，我放置了一个不透明度为 66 的红色叠加层。我更改了悬停图标并自定义了按钮及其悬停效果。 背景图像（灰色天空）放置在标题后面。 这个使用不同的项目类别。 按钮半径设置为 10。

Divi Portfolio Grid – 响应式

该插件是响应式的。 这是 iPad 上纵向模式下的 3 列布局（在 Chrome 的开发人员工具中模拟）。 要了解有关 Google Chrome 开发人员工具的更多信息，请参阅为什么您应该立即开始使用 Chrome 开发人员工具一文。

这是横向模式下的相同布局。

这与处于纵向模式的 Galaxy S5 上的布局相同。

这是使用 Galaxy S5 的布局是横向模式。

许可证、更新和文档

该许可证涵盖无限使用并包括终身更新。 文档在压缩文件夹中的 PDF 文件中提供。 这是一个简短的文档，并提供图像演练以帮助您入门。 这是一个易于使用的插件，我发现一切都很直观。 如果您习惯使用 Divi 模块，您应该对这个模块感到宾至如归。

Divi Portfolio Grid 可在 Divi 主题商店购买。

最后的想法

Divi Portfolio Grid 易于使用，并且在标准的 Divi 投资组合模块之上提供了足够多的额外功能，许多用户会发现它必不可少。 它包括 2 列、3 列和 4 列布局，添加了带有悬停效果的按钮、带有图标的叠加层以及您期望的所有模块样式，包括高级 CSS 功能，因此您可以使用自己的代码对其进行自定义样式。 如果您想要一个具有超出标准 Divi 投资组合模块功能的投资组合，Divi Portfolio Grid 可能是您需要的模块。

我们想听听您的意见！ 您是否尝试过 Divi Portfolio Grid？ 在下面的评论中让我们知道您的体验。

精选图片来自 2RAL/shutterstock.com