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