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