Divi 插件亮點：Divi FilterGrid

Divi FilterGrid 是一個第三方插件，它為 Divi Builder 添加了一個新的可過濾模塊。 它可以顯示來自任何自定義帖子類型的帖子並創建自定義過濾器以根據您選擇的任何分類法顯示它們。 顯示博客文章、項目、產品、創建畫廊等等。

在這個插件亮點中，我們將看看 Divi FilterGrid，看看它可以做什麼，看看它是多麼容易使用。 您可以從開發者的網站上購買該插件。

Divi FilterGrid 模塊

Divi FilterGrid 模塊已添加到 Divi Builder。 圖標是彩色的，從其他圖標中脫穎而出。

Divi FilterGrid 內容選項卡

內容選項卡添加了許多功能。 它們包括帖子元素、查詢選項、過濾器選項、分頁選項和用於調整所有背景顏色的背景。 它還包括標準鏈接和管理標籤選項。

帖子元素

發布元素選項可讓您顯示或隱藏特色圖像，然後確定縮略圖操作。 您可以鏈接到帖子、在燈箱中、在燈箱庫中顯示圖像、在彈出窗口中顯示帖子或打開自定義燈箱庫。 對於此示例，我將在彈出窗口中顯示帖子。

這將在燈箱畫廊中打開圖像。 讀者可以選擇箭頭查看所有帖子的特色圖片。 單擊帖子標題仍會在同一選項卡中打開帖子。

您還可以更改疊加顏色、圖標和圖標顏色。 我已經自定義了上圖中的每一個。 您還可以顯示標題、添加標題鏈接、添加摘錄、限制摘錄字符數、顯示閱讀更多按鈕、添加自定義字段等。 我添加了一個摘錄並禁用了帖子元。

查詢選項

查詢選項讓您可以從基本、高級和自定義中選擇查詢類型。 選擇類別、帖子編號、偏移編號和按選項排序。 我在這個例子中選擇了一個類別。

高級選項為您提供了幾個新功能。 選擇特定的帖子類型、分類法、術語，並排除術語和分類法。 您還可以顯示私人帖子和置頂帖。 在上面的示例中，我正在設置分類法。 它讓我選擇要使用的特定類別或標籤，然後指定它們與搜索詞的關係。 子項的工作方式相同。 這使您可以獲得額外的詳細信息，而不僅僅是根據類別或標籤顯示帖子。 您還可以為分類設置帖子編號和順序選項。

自定義查詢類型允許您使用自定義內容。 它提供了一個指向文檔的鏈接，您可以在其中了解如何進行設置。 自定義查詢使用functions.php 文件中的代碼完成。 該文檔包括幾個示例來引導您完成它。

過濾器選項

過濾器選項允許您按搜索詞過濾網格。 選擇默認過濾器，您將看到一個模式，您可以在其中選擇帖子和項目的類別和標籤。 您還可以按 ID、名稱或自定義順序設置順序和過濾器。 對於自定義訂單，您會看到一個框，您可以在其中輸入以逗號分隔的值。

分頁選項

分頁選項允許您選擇分頁類型。 從分頁、加載更多按鈕或滾動加載更多內容中進行選擇。 對於分頁選項，您可以選擇鏈接中顯示的箭頭、文本和頁數。 我已經添加了文本並更改了此示例中的箭頭。

背景

背景設置可讓您自定義網格、過濾器、活動過濾器、分頁和活動分頁的背景。 它還包括您在 Divi 模塊中期望的標準背景選項。 在上面的示例中，我調整了過濾器、網格和分頁的背景顏色。

Divi FilterGrid 設計選項卡

“設計”選項卡為佈局選項、發布標題文本、發布元數據文本、發佈內容文本、過濾器文本、分頁文本、閱讀更多按鈕、加載更多按鈕以及所有標準 Divi 模塊選項提供自定義。

佈局選項

佈局選項讓您選擇佈局、外觀、設置項目寬度、列和行間距大小以及網格字體大小。 我減少了項目的寬度，移除了裝訂線，並為皮膚選擇了午夜。 我還減小了字體大小。

這是左垂直過濾器。 它將過濾器垂直堆疊放置在左側。 我增加了項目寬度，因此圖像更大。

這是疊加中的項目。 此選項中的帖子較短。

縮放圖像顯示每個圖像，中間帶有疊加層和標題。 圖像在懸停時放大。

庫顯示帶有邊框的卡片並將標題放置在圖像上方。

這是使用默認皮膚的列表佈局。

這是全角。 它將標題、元數據和摘錄放在圖像的底部。

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