如何在 Divi 的可過濾投資組合模塊中設置分頁樣式

Divi 的可過濾投資組合模塊是在您的網站上顯示您的工作和項目的一種簡單易用的方式。 您可以使用類別為您的投資組合模塊創建不同的過濾器，它提供了一種簡單的方法來保持更新的投資組合，而無需每次都修改您的網站設計。 只需在 WordPress 儀表板中添加一個新項目，只要它被正確分類，它就會自動填充到您網站的投資組合模塊中。

在本教程中，我們將向您展示在 Divi 的可過濾投資組合模塊中設置分頁樣式的 3 種不同方式。 通過自定義此設計，您可以使作品集模塊適合您網站的整體設計，並引起人們對您想要展示的作品的關注。

讓我們開始吧！

搶先看

這是我們將設計的預覽

分頁樣式一

分頁樣式二

分頁樣式三

你需要什麼開始

安裝和激活 Divi

在我們開始之前，安裝並激活 Divi 主題，並確保您的網站上有最新版本的 Divi。

添加投資組合項目

為了讓項目組合在我們將項目添加到頁面後填充項目，我們首先需要在 WordPress 儀表板中添加項目。 在 WordPress 儀表板側邊欄中選擇項目，然後添加一個新項目。 確保項目具有特色圖像和類別，以便可以對其進行過濾。

現在，您可以開始了！

如何在 Divi 的可過濾投資組合模塊中設置分頁樣式

使用預製佈局創建新頁面

讓我們從使用 Divi 庫中的預製佈局開始。 我們將使用 Painter 佈局包中的 Painter Portfolio Page 進行此設計。

向您的網站添加一個新頁面，為其命名，然後選擇使用 Divi Builder 選項。

在本示例中，我們將使用 Divi 庫中的預製佈局，因此選擇瀏覽佈局。

搜索並選擇 Painter Portfolio Page 佈局。

選擇使用此佈局將佈局添加到您的頁面。

現在我們已準備好構建我們的設計。

添加可過濾的投資組合模塊

我們將用可過濾的投資組合模塊替換此頁面上的現有投資組合內容。 首先，刪除現有的投資組合部分。

接下來，在頁面上的“最近工作”部分下方插入一個新部分。

然後在該部分中添加一行和一列。

將可過濾的投資組合模塊添加到新行。

您的可過濾投資組合應該填充您的項目，只要它們已添加到 WordPress 儀表板的項目部分。

可過濾的投資組合設置

現在讓我們自定義可過濾投資組合的設計。 打開模塊設置，然後將帖子計數更改為 6。

• 帖子數：6

在元素下，禁用顯示類別。

• 顯示類別：否

移至設計選項卡並打開佈局設置。 將佈局設置為網格。

• 佈局：網格

接下來，打開覆蓋設置。 設置縮放圖標顏色、懸停覆蓋顏色和懸停圖標選擇器，如下所示：

• 縮放圖標顏色：#fdd23a
• 懸停覆蓋顏色：rgba(61,61,61,0.28)
• 懸停圖標選擇器：加號圖標

打開圖像設置，然後添加圖像框陰影。

然後，設置陰影顏色。

• 陰影顏色：#f2f2f2

接下來，更改標題字體設置，如下所示：

• 標題字體：Merriweather
• 標題字體粗細：粗體
• 標題文字顏色#000000

設置標題文本大小和行高。

• 標題文字大小：25px
• 標題行高度：2em

移至 Filter Criteria Text 部分並更改字體設置，如下所示：

• 過濾標準字體：蒙特塞拉特
• 過濾條件字體粗細：粗體
• 過濾條件文本顏色：#000000

現在我們的大部分模塊設計已經完成，我們可以繼續自定義分頁樣式。

分頁樣式一

對於第一個分頁樣式，我們將為活動頁面設置不同的字體顏色。 此外，我們將設置分頁文本大小以在懸停時增加。 讓我們開始吧。

在可過濾的投資組合設置中，打開分頁文本設置。 自定義字體如下：

• 分頁字體：蒙特塞拉特
• 分頁字體粗細：粗體
• 分頁文本對齊：右
• 分頁文字顏色：#000000

設置文字大小。 然後。 使用懸停設置來增加懸停時的文本大小。

• 分頁文字大小：17px
• 懸停時分頁文字大小：21px

最後，導航到 Advanced 選項卡並將以下自定義 CSS 添加到 Pagination Active Page CSS 部分。 這會在活動頁面上啟用黃色。

color: #FDD23A !important;

最終設計

這是我們第一個設計的最終外觀。

分頁樣式二

我們將設計的第二種分頁樣式包括分頁後面的背景顏色、一些懸停顏色效果以及活動頁面的不同顏色。

在可過濾的投資組合設置中，打開分頁文本設置。 自定義字體如下：

• 分頁字體：Merriweather
• 分頁字體粗細：粗體
• 分頁文本對齊：居中
• 分頁文字顏色：#9e9e9e
• 懸停時的分頁文本顏色：#000000

接下來，設置文本大小和行高。

• 分頁文字大小：26px
• 分頁行高：2em

移動到 Advanced 選項卡並將以下自定義 CSS 添加到 Portfolio Pagination CSS 部分。 這將添加背景顏色並刪除邊框：

background:#f2f2f2;
border:none;

最後，將以下 CSS 添加到 Pagination Active Page CSS 部分，為活動頁面設置不同的文本顏色。

color: #000000 !important;

最終設計

這是我們第二個分頁樣式的最終設計。

分頁樣式三

對於我們最終的分頁設計，我們將在活動頁面後面添加一個黃色圓圈。 我們還將為活動頁面和懸停設置不同的字體顏色。

在可過濾的投資組合設置中，打開分頁文本設置。 然後自定義字體如下：

• 分頁字體：Merriweather
• 分頁字體粗細：粗體
• 分頁文本對齊：居中
• 分頁文字顏色：#000000
• 懸停時的分頁文本顏色：#FDD23A
• 分頁文字大小：26px

移動到 Advanced 選項卡並將以下自定義 CSS 添加到 Portfolio Pagination CSS 部分以刪除邊框：

border:none;

最後，將以下 CSS 添加到 Pagination Active Page CSS 部分。 此 CSS 將為活動頁面設置不同的文本顏色和圓形背景。

padding: 10% 60% 10% 60%;
background-color: #FDD23A;
border-radius: 80%;
color: #ffffe7!important;

最終設計

這是我們最後一個佈局的最終設計。

最後結果

現在讓我們來看看我們不同分頁樣式的所有三個最終設計。

分頁樣式一

分頁樣式二

分頁樣式三

最後的想法

可過濾的投資組合模塊易於定制以適應您的網站設計，您可以從 WordPress 儀表板快速添加新項目，以使您的投資組合保持最新。 該模塊非常適合設計師、藝術家、攝影師和其他創意人員通過精美的圖像和簡單的導航來展示他們的作品。 如需更多獨特的投資組合設計理念，請查看有關創建動態投資組合項目模板的教程。 您是否在您的網站上使用過可過濾的投資組合模塊？ 讓我們在評論中知道！