您想使用可过滤的投资组合模块吗？ Divi 你不知道选择哪种布局？
模块 « 可过滤的投资组合 “要 Divi 为您提供两种布局选项供您选择。 这两种选择都具有优势，并且对于某些目的非常有效。
在本文中，我们将比较此模块的全宽和网格布局，以帮助您确定您的需求 网站Web.
我们还将自定义这两种布局，看看它们在一种布局中如何工作 Divi.
让我们开始吧！
概观
首先，让我们看看我们将在本教程中创建什么。
桌面版的网格布局
立即下载DIVI！！！
手机版网格布局
全角布局的桌面版
另请参阅： Divi：如何使用阴影和悬停效果创建交互式内容
手机版全宽布局
如何更改可筛选投资组合模块的布局
默认情况下，“Filterable Portfolio”模块以全宽显示布局。 您可以更改布局以在网格中显示项目。 首先，打开 模块参数.
然后选择标签 设计。 第一个选项是 布局. 它有一个带有几个选项的下拉列表。 选择它以进行选择 全宽 et 格.
如果您选择当前未选择的选项，模块将重新加载并在此布局中显示投资组合项目。 下面的示例显示了网格布局。
可筛选投资组合模块布局比较
这两种布局非常不同，但也有一些相似之处。 两者都在模块顶部显示过滤器，在项目图像下方显示标题和元数据，在模块底部显示分页。
以下是它们的不同之处。
全宽布局
全宽显示一个大图像，其中一个投资组合元素占据了投资组合区域的整个宽度。 图像以其原始形式显示并扩展以适合可用宽度。
它不会在钱包物品之间增加很多空间。 我们建议将帖子的数量限制在几个。 下面的示例显示了具有 2 个帖子的全角布局。
网格布局
网格布局最多可连续显示 4 个项目。 它增加了元素之间的空间。 无论图像大小和形状如何，都会裁剪图像以创建相同大小的缩略图。
对于这个，我们将模块限制为显示四个帖子以显示分页。
何时使用可筛选投资组合模块的每个布局
两种安排都有其优势。 以下是有关何时使用每种布局的一些提示。
全宽布局
当您只有几个项目要显示或想要专注于几个项目时，请使用全角布局。
当您想要突出显示或吸引对特色图像的注意时，也可以使用此布局。
网格布局
当您想要显示许多项目或想要布局在较小的空间中显示更多项目时，请使用网格布局。
如何自定义可筛选的投资组合模块布局
现在我们已经了解了如何选择布局、它们如何工作以及何时使用它们，让我们看看如何自定义这两种布局。
我们将使用投资组合页面 免费画家布局包 在 Divi 中可用。 这是原始页面。
我们将用 Filterable Portfolio 模块替换投资组合，并使用相同的图像和标题。
我们将创建两个版本：一个具有全角布局，另一个具有网格布局。
如何自定义可筛选投资组合模块的网格布局
我们将从网格布局开始。 我将使用原始布局中的颜色和字体。
包装内容
打开它们 模块参数 并输入 4 发布数. 全选 类别 您想在模块中显示的内容。
- 帖子数：4
- 包含的类别：选择类别
提供
然后选择标签 设计 然后选择 格 在布局选项中。
- 布局：网格
图片
滚动到 图片 然后选择选项 盒子阴影。 更改 阴影颜色 在 rgba(0,0,0,0.05) 中。
- 盒子阴影： 4ème 选项
- 阴影颜色：rgba(0,0,0,0.05)
文本
然后向下滚动到 文本 并修改 结盟 在中心。 这使过滤器、标题、元数据和分页居中。
- 文本对齐：居中
标题文字
然后向下滚动到 标题文本 并更改以下设置。
- 标题字体：Merriweather
- 标题文字颜色：#000000
改变大小 警察 台式机为 26 像素，平板电脑为 20 像素，手机为 18 像素。
- 标题文字大小：桌面26px，平板20px，手机18px
过滤条件文本
然后向下滚动到 过滤条件文本 并更改以下设置：
- 筛选条件：
- 字体：蒙特塞拉特
- 字体粗细：粗体
- 款式：TT
- 文字颜色：#fd6927
- 文字大小：12px
元文本
然后向下滚动到 元文字. 更改 警察 在蒙特塞拉特和 钻石颜色 在#fd6927 中。
- 元文本大小：蒙特塞拉特
- 元文本颜色：#fd6927
设置 尺寸 在 12 个像素上，字母间距 在 2 个像素和 高度 1,2 em 上的线。
- 文字大小：12px
- 元字母间距：2px
- 元线高度：1,2 em
分页文字
最后，向下滚动到 分页文本 并改变它 警察 在蒙特塞拉特，并设置 钻石颜色 黑色字体。 关闭模块并保存您的设置。
- 分页字体：蒙特塞拉特
- 分页文字颜色：#000000
如何在全角布局中自定义可筛选投资组合模块
现在，让我们以全角布局配置模块。
我们将使用与网格布局相同的设计提示，但我们将做出一些适合此布局的更改。 我们将使用一些简单的 CSS 进行一些小的调整。
包装内容
打开它们 模块参数 并更改数量 出版物 到 2。这使页面更小，更易于管理大图像。 全选 类别 您想在模块中显示的内容。
- 帖子数：2
- 包含的类别：选择类别
分子
滚动到 元素 并禁用 显示类别. 让其他人启用。 过滤器仍将启用类别，但它们不会与标题一起显示。
- 显示类别：没有
提供
选择标签 设计。 SOUS 布局，将布局设置为 全宽，这是它的默认设置。
- 布局：全宽
图片
然后向下滚动到 图片 . 选择选项 盒子阴影 并改变它 钻石颜色 rgba 中的阴影（0,0,0,0.05）。
- 盒子阴影： 4ème 选项
- 阴影颜色：rgba(0,0,0,0.05)
文本
然后向下滚动到 文本. 更改 结盟 在中心。 过滤器、标题和分页将以图像为中心。
- 文本对齐：居中
标题文字
然后向下滚动到 标题文字 . 更改 警察 到 Merriweather 并更改 钻石颜色 黑色。
- 标题字体：Merriweather
- 标题文字颜色：#000000
改变大小 警察 台式机为 40 像素，平板电脑为 20 像素，手机为 18 像素。
- 标题文字大小：桌面40px，平板20px，手机18px
过滤条件文本
然后向下滚动到 过滤条件文本 并更改以下设置：
- 筛选条件：
- 字体：蒙特塞拉特
- 字体粗细：粗体
- 款式：TT
- 文字颜色：#fd6927
分页文字
然后向下滚动到 分页文本. 更改 警察 在蒙特塞拉特，改变 重量 半粗体并设置 字体颜色 在#fd6927 上。 关闭模块并保存您的设置。
- 分页字体：蒙特塞拉特
- 颜色：#fd6927
- 字体粗细：半粗体
CSS 标题文本
打开选项卡 高级 并滚动到 作品集标题. 选择桌面图标。 复制下面的代码以获取不同的屏幕尺寸。 关闭模块并保存您的设置。
作品集标题：
- 桌面版
padding-bottom:40px- 平板电脑
padding-bottom:30px- 电话
padding-bottom:20px
Résultats
桌面版的网格布局
手机版网格布局
立即下载DIVI！！！
全角布局的桌面版
也可以看看： Divi：如何在悬停时更改背景的渐变
手机版全角布局
立即下载DIVI！！！
结论
这是我们对在模块中使用全角布局而不是网格的看法 筛选投资组合 迪维。 在两个布局选项之间进行选择很容易。
每个选项都有优势，应该设计不同以配合您的 网站Web. 只需进行一些调整，以确保您的模块适用于任何 Divi 布局。
我们希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
