如何在 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 仪表板快速添加新项目，以使您的投资组合保持最新。 该模块非常适合设计师、艺术家、摄影师和其他创意人员通过精美的图像和简单的导航来展示他们的作品。 如需更多独特的投资组合设计理念，请查看有关创建动态投资组合项目模板的教程。 您是否在您的网站上使用过可过滤的投资组合模块？ 让我们在评论中知道！