Divi：如何自定义“可过滤投资组合”模块网格的元素

平价 加埃唐 | Divi, Divi教程

您想知道如何自定义 Filterable Portfolio 模块的网格元素吗？ Divi ？ 在本教程中关注我们......

在你的身上有一个区域 网站Web 展示你的作品很重要。 如果您是造型师，您可以在您的电脑上创建多个项目 网站Web WordPress 来展示您的概念。 如果您是品牌建设者，则可以使用作品集来展示您的作品。 此外，我们甚至可以更进一步，为我们的项目添加不同的类别。 它在这里 Divi 的 Filterable Portfolio 模块有什么作用？ .

有了这个模块，我们能够以一种简单而有条理的方式展示我们的辛勤工作。 

在今天的教程中，我们将自定义 Filterable Portfolio 模块的各个网格元素。 我们将使用免费布局包中的布局 迪维会议 et Divi在线瑜伽教练 提供每次购买 Divi . 

关于一切 Divi，我们有能力定制这个模块以满足我们的需要和愿望。 然而，在我们进入样式之前，让我们了解更多关于模块的信息。

什么是 Divi 的 Filterable Portfolio 模块？

项目是自定义帖子类型的一部分，其工作方式与帖子相同。 您可以在 WordPress 仪表板中找到它们。

在这里您将创建您的个人项目，这些项目将填充您的 Filterable Portfolio 模块。 该模块为我们提供了两种方式来展示我们的项目： 以网格格式 ou 全角格式. 对于我们来说，我们将使用和自定义网格格式。 

通过 Filterable Portfolio 模块，我们将能够展示我们最近的项目。 我们网站的用户将在我们的投资组合网格顶部看到一个过滤栏。 从那里，他们可以浏览我们允许在模块中显示的不同投资组合类别。

这是带有一些示例项目的模块的示例网格配置：

创建 Divi 的可过滤投资组合时要考虑的领域

像所有模组一样 Divi，Filterable Portfolio 模块带有许多功能，我们可以根据自己的需要和愿望进行定制。 因此，模块附带的大部分功能都可以在选项卡中修改 设计 从模块设置模式。 我们可以编辑以下区域以及更多区域：

  • 项目名称
  • 项目类别
  • 小插图
  • 过滤文字
  • 悬停缩略图
  • 分页

这不是一个完整的列表，我们甚至还没有开始讨论 CSS 如何为这个模块添加更深层次的定制！

我们将如何定制 Divi 的可过滤投资组合模块

如前所述，对于本教程，我们将使用两种布局： 迪维会议 et Divi在线瑜伽教练. 您可以在下面概述我们将在本教程中完成的工作。

《Divi会议》版面元素排列

自定义 Divi 的 Filterable Portfolio 模块的网格元素

《Divi Online Yoga Instructor》版面元素排列

自定义 Divi 的 Filterable Portfolio 模块的网格元素

您可以轻松地从以下位置下载这两种布局 Divi 建造者。 

现在让我们开始吧！

也可以看看： Divi：在 Filterable Portfolio 模块的网格和全角布局之间进行选择

Divi可过滤组合模块定制：“Divi会议版”

首先，我们需要安装 Divi Conference Layout Pack 中的活动页面模板。 在 WordPress 中创建新页面并激活 Divi Builder 后，我们将进入 Divi 库。

进入 Divi 布局库

点击图标 « 从库中加载 进入Divi布局库

在 Divi 布局库中找到布局

使用Divi布局库中的搜索功能， 寻找 处置“ 会议活动页面”。

安装布局

选择布局后，单击“ 使用此布局 将布局安装到您的页面中。

移除和更换图像模块

我们将删除如下所示的图像模块，以便为我们将自定义的可过滤投资组合模块腾出空间。 点击“ 删除 将鼠标悬停在图像上以删除照片。

插入 Divi 的可过滤投资组合模块

删除图像模块后，我们现在可以为可过滤的投资组合模块腾出空间。 我们要点击图标“ 添加模块 （灰色加号），然后在出现的模块模态框中选择模块。

设置帖子数量和投资组合布局

默认情况下，此模块将在单列中展示您的工作。 但是，我们将使用默认带有 4 列的网格布局。 

因此，我们建议选择 4 的倍数（4、8、12、16 等）作为您投资组合的帖子数量。 

对于本教程，我们将在网格中使用 12 个项目。

开始自定义 Divi 的可过滤组合：标题和元文本

现在我们的项目显示在网格中，让我们链接我们所选模板的一些设计元素。 在这种情况下，我们将在新模块中使用 Divi Conference Layout Pack 提供的样式。

文字样式

  • 文本对齐方式：居中
  • 文字颜色：深色

标题文字样式

  • 标题标题级别：H2
  • 标题字体：Krona One
  • 文字颜色：#000000

元文本样式

  • 元字体：默认（Open Sans）
  • 元文本颜色：#ff6651

现在我们已经为投资组合网格中的标题设置了样式，让我们对项目缩略图本身的实际形状进行一些更改。

更改项目缩略图边框和圆角

在我们的 Divi Conference Layout 包中，我们使用独特的圆角组合为包中的一些关键帧赋予独特的形状。 让我们将此样式应用于我们模块的缩略图。

图片

  • 图片 ：
    • 圆角：50px 50px 50px 0px
    • 边框样式：全部
    • 边框宽度：3px
    • 颜色：#000000
    • 边框样式：实心

这将为我们的缩略图提供与布局包中其他图像相匹配的形状。

自定义悬停叠加层

让我们对我们的样式更进一步，对这个模块附带的默认叠加层稍作更改。 我们将更改开箱即用的颜色和图标。

叠加

  • 缩放图标颜色：#bcf5fd
  • 悬停叠加颜色：#ff6651
  • 悬停图标选择器：缩放

正如您现在所看到的，我们已将此布局的品牌颜色添加到叠加层中，并更改了 Divi 默认提供的图标，用于此模块中悬停时的叠加层功能。

自定义分页

我们现在将开始使用 CSS 的小片段来为我们的 Filterable Portfolio 模块添加额外的定制。 首先，我们将自定义此模块的分页。 接下来，我们将使用一行 CSS 删除显示在其上方的边框

分页文字

  • 分页：
    • 字体：Krona One
    • 文字对齐方式：居中
    • 文本颜色：#ff6651、#000000（悬停）

对于我们的 CSS，我们将切换到选项卡 高级 我们的模块。 其次，我们将点击选项卡 自定义 CSS。 接下来，我们将输入以下代码片段以删除分页上方的边框，使其看起来更清晰。

投资组合分页 

border-top: 0px;

使用 Divi 设置和 CSS 自定义过滤文本

对于过滤器文本，我们将其提高一个档次。 我们将使用 CSS 来更改背景和悬停效果。 

我们希望新添加的模块和布局包的样式之间有一个完美的连续性。 首先，让我们输入字体的 Divi 设置。

筛选条件文本

  • 筛选条件：
    • 字体：Krona One
    • 字体颜色：#ffffff、#000000（悬停）

就目前而言，我们的过滤器似乎不见了。 实际上，在其默认状态下，它是白色背景上的白色文本。 但是，我们将在两个地方使用自定义 CSS 对此进行更改。 

首先，我们将在页面设置中添加一个 CSS 片段，为过滤器文本添加背景。 其次，我们将使用选项卡自定义活动投资组合过滤器 高级 du 模块。

自定义 Divi 的 Filterable Portfolio 模块的网格元素

访问 页面设置，点击屏幕中间的三个点。 然后 选择齿轮图标 这将打开页面设置。 然后你 导航到自定义 CSS 选项卡 并输入以下内容以向过滤器文本添加背景。

自定义CSS

在此 CSS 片段中，我们以过滤器的背景颜色为目标。 我们还定位并设计了它的悬停状态。 接下来，让我们向模块添加更多 CSS 并突出显示我们的 Active Filter 选项卡。

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}

投资组合过滤器活动选项卡样式

f 的活动选项卡投资组合过滤器 将用户的注意力吸引到他们正在访问的当前投资组合类别。 目前此过滤器具有白色文本和浅色背景。 

我们将转到选项卡 高级 Filterable Portfolio 模块，并将文本添加到此功能的默认和悬停状态。 以下是我们将在默认状态下添加的 CSS 属性：

background: #ff6651;
color: #ffffff !important;

悬停状态

悬停时，我们会将背景更改为黑色。

color: #000000!important;

通过“Divi Conference”最终了解 Divi 可过滤产品组合的设计

这是最终的样子！

自定义 Divi 的 Filterable Portfolio 模块的网格元素

现在，这就是你悬停时的样子！

自定义 Divi 的 Filterable Portfolio 模块的网格元素

Divi可筛选组合模块定制：“Divi在线瑜伽教练”

与 Divi Conference Edition 一样，在 Divi Builder 中的在线瑜伽教练布局包中找到您的布局。 

我们将在本教程中使用登陆页面布局。 向下滚动到标题为 Section 的 Section Classes 部分 所有即将上课.

自定义 Divi 的 Filterable Portfolio 模块的网格元素

插入可过滤投资组合模块

从这里，我们将删除带有类的行。 单击带有三个点的紫色图标 。 然后， 选择线框视图。 最后，您将删除包含三列的两行。

然后我们将它们替换为行里面的单个列。 然后，我们将添加我们的 Filterable Portfolio 模块。

与前面的示例一样，我们将为此模块使用网格布局，帖子数为 4 的倍数。 

现在让我们对地图上显示的信息做一些不同的事情。 

在标签中 内容， 导航 分子 并取消选择 显示类别 . 这意味着 Portfolio 模块将只显示项目的名称，而不显示它所在类别的名称。

自定义过滤条件文本、项目标题和分页文本

让我们为模块的文本部分定义样式基础。 此布局的正文是 开放三世 用于主标题的字体是 凿子. 因此，我们将在整个样式设计过程中结合使用这两种字体。

文本

  • 文本对齐方式：居中
  • 文字颜色：浅色

标题文字

  • 标题字体：Cinzel
  • 标题文字颜色：#ffffff

筛选条件文本

  • 过滤条件字体粗细：粗体
  • 筛选条件文本颜色：#ffffff

分页文字

  • 分页字体粗细：粗体

这就是我们的可过滤投资组合模块现在的样子。 不多，但我们正在慢慢地到达那里！

自定义 Divi 的 Filterable Portfolio 模块的网格元素

创建半透明悬停叠加层

让我们从这个布局中的不同模块和美丽的渐变中获得灵感。 为此，我们将创建一个半透明的悬停叠加层并自定义悬停时也会出现的图标。

  • 缩放图标颜色：#323741
  • 悬停叠加颜色：rgba (255 201 165, 0,85)
  • 悬停图标选择器：搜索工作表并查看上面的图标

使用自定义 CSS 向投资组合网格元素添加边框

与我们的第一个示例类似，我们现在将使用 CSS 为我们的 Filterable Portfolio 模块添加更多兴趣。 

现在我们将在投资组合网格中的每个单独项目周围添加边框。 在页面设置的自定义 CSS 部分使用下面的 CSS 片段来添加我们的边框。 

我们还将使用“边框”作为该模块的 CSS 类。

  • CSS 类：边框

自定义CSS

/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}

在这里，我们现在有了我们的 Filterable Portfolio 模块，每个网格项目周围都有漂亮的边框和填充。

自定义 Divi 的 Filterable Portfolio 模块的网格元素

添加 CSS 样式分页边框

与我们之前的示例不同，让我们使用 CSS 为分页的边框添加颜色。 这也将进入该地区 设置 > 自定义 CSS 页面 .

/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}

筛选条件文本样式

类似于我们的 Divi Conference Portfolio 模块的风格，我们想将爵士乐添加到我们的类别过滤器中。 同样，我们希望从提供给我们的模板中已经存在的样式中提取。 

这是我们将在自定义 CSS 部分中添加的 CSS，用于定位过滤栏的背景和悬停。

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
 
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}

将这两个新添加到我们的自定义 CSS 中，这就是我们的 Filterable Portfolio 模块正在形成的样子。

自定义 Divi 的 Filterable Portfolio 模块的网格元素

但是，请注意活动投资组合过滤器是如何丢失的。 它总是有一个浅色背景，上面有白色文字。 让我们转到模块设置并添加一些 CSS 来更改它。

自定义CSS

主动投资组合过滤器：

background: #ffffff;
color: #323741 !important;

移除模块动画

为了提供更清晰的体验，我们将删除可过滤投资组合模块附带的默认动画。 为此，我们首先需要返回到我们的页面设置并添加一些 CSS 以投资组合网格元素为目标并删除 滑动过渡 开箱即用。

自定义CSS

/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}

另请参阅： Divi：如何更改博客中的列数

将投资组合网格从四列更改为三列

我们最新添加的 CSS 将把我们的 Filterable Portfolio 模块从四列变成三列。 这将为我们提供更多空间来查看我们的项目。 

此外，我们将在我们的模块中添加一行。 您还将找到可用于转换列的最新 CSS 片段。

自定义 Divi 的 Filterable Portfolio 模块的网格元素

自定义CSS

对于最后一个片段，我们将添加 CSS ID #三列网格 到我们的模块。 我们仍然会保持我们之前的 CSS 类完好无损。

/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
 
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}

立即下载DIVI！！！

结论

与大多数 Divi 模块一样，Divi 附带的设置可以使用 CSS 进一步开发。 展示您的作品是经营在线业务、博客或品牌的重要组成部分。 

因此，有条理地展示您的作品至关重要。 获得今天分享的技巧，以参与您自己的 Divi 可过滤投资组合模块的设计之旅。

希望这项技术能为未来的项目增加另一种有用的设计技能。

我们希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。

您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。

不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.

但与此同时， 在您不同的社交网络上分享此文章.

...

发表评论

您的电子邮件地址将不会被发表。 必填字段标 *

这个网站使用Akismet来减少不需要的。 详细了解如何使用您的评论数据.