如何使用Divi 5的Loop Builder构建投资组合网格

投资组合网格是展示您作品的简单，有效的方法。使用Divi 5的循环构建器，您可以设计可重复使用的卡片布局，并将其直接从视觉构建器中的内容中自动填充。

与单用途模块不同，循环构建器可让您使用任何Divi元素，为帖子或自定义帖子类型设置查询，并输出一个继承您的全局样式的响应式网格。在本教程中，我们将使用“自定义帖子”类型逐步构建一个投资组合网格。

了解Divi 5的循环构建器

Divi 5的循环构建器是一项新功能，可让您轻松创建动态循环的内容布局。与博客或投资组合模块不同，循环构建器使您可以轻松地循环任何Divi元素以显示帖子，条款或用户。这意味着您可以构建一个模板，该模板会自动从WordPress站点中填充内容。

LOOP构建器支持各种内容类型，包括自定义邮政类型（CPT），WooCommerce产品和高级自定义字段（ACF），从而使您可以准确地显示您的作品集。

循环构建器的主要好处

由于其强大的自定义选项，Loop Builder非常适合创建投资组合网格。这是其出色的功能：

• 设计自定义循环模板的灵活性：使用循环构建器，您不仅限于预定义的布局。您可以使用任何Divi模块为每个投资组合项目设计一个唯一的模板。
• 可自定义的查询：循环构建器可让您微调哪些内容出现在您的网格中。按类别，帖子类型或自定义字段过滤，以仅在您的首选订单中显示所需的项目。
• 动态内容集成：无缝吸引动态内容数据，例如项目标题，特色图像，描述或自定义元数据，以使每个投资组合项目引人入胜。

这些功能使Divi 5的循环构建器成为创建完全可定制且易于导航的抛光，专业投资组合的理想工具。

建立使用Loop Builder的投资组合

我们将使用Divi的内置项目自定义帖子类型（CPT）与Loop Builder创建投资组合。 CPT项目旨在展示投资组合风格的内容，使其成为我们布局的理想选择。尽管Divi确实提供了投资组合模块，但我们将使用Loop Builder，因为它为我们提供了创建独特投资组合的无限选项。

首先，将新行添加到您的页面。为此，我们将使用3列布局。

我们将向第一列添加标题模块。

输入标题或使用Divi AI为您生成一个。

导航到“设计”选项卡，请选择“标题”字体的Inter ，为标题字体重量重量，将标题文本大小设置为2EM ，然后分配1.3EM标题线高。

现在，让我们构建循环。导航到我们行的第二列。

找到“循环”选项卡，展开它，然后启用循环元素切换。

接下来，选择查询类型。对于本教程，我们将使用Divi的内置CPT项目。在邮政类型下，选择项目。我们想展示所有项目，因此我们将尽一切努力。

您可以通过设置，每个页面帖子和发布偏移选择订单。由于我们的第一列包含一个标题模块，因此我们将每个页面的帖子设置为8 。这样，即使在我们的三列行之间，输出也将是。

您会注意到我们的循环正在尝试堆叠所有列。要解决此问题，我们需要转到行设置。导航到3列行，单击“设计”选项卡，然后找到布局设置。

展开布局设置选项卡。找到布局包装设置，然后选择包装。这将把我们的循环归还为3列。

造型循环列

现在，循环设置已经到位了，是时候为我们的列设计了。我们在这里选择的样式设置将影响循环中的其余列。在3列行中，单击第二列，然后单击“设计”选项卡。导航到边框下拉列表，并将15px边框半径分配给列。在边框样式下，添加1PX边框宽度，并使用＃000000作为边框颜色。

将内容添加到循环中

我们可以通过分配的列样式开始将内容添加到循环中。单击以将图像模块添加到第二列中。添加后，循环中的每一列将显示一个图像占位符。

我们将使用Divi 5的动态内容功率来吸引我们项目的特色图像。悬停在图像上方以揭示图标。单击动态内容图标以继续。

当选项出现时，选择循环特色图像。

我们的循环将将每个项目的特色图像直接放入我们的投资组合循环中。

接下来，将标题模块添加到特色图像下的第二列中。这将用于项目标题。重复上述步骤以添加标题。但是，这次选择循环帖子标题。

在“设计”选项卡中，选择标题级别的H3 ，用于标题字体，标题文本对齐中心和20px的标题文本大小。

最后，我们将添加一个链接到每个项目的按钮。将按钮模块添加到帖子标题下方的第二列。单击按钮链接URL中的动态内容图标，然后选择循环链接。

切换到“设计”选项卡并将对齐设置为中心。

展开按钮下拉设置，并启用使用自定义样式进行按钮。输入以下设计设置：

• 按钮背景： ＃000000
• 按钮边框半径： 15px
• 按钮边框宽度： 0px
• 按钮字体： inter
• 按钮文字颜色： #FFFFFF
• 按钮文字大小： 16px
• 保证金： 15px底部
• 填充： 15px顶部和底部，左右35px

就是这样！如您所见，使用Divi 5创建一个循环是一个简单的过程。

用循环构建器更换样式

编辑循环的样式与创建循环本身一样简单。假设您想从光线换成循环的黑暗主题。进行设计更改仅需几秒钟。您可以更改部分的背景颜色，然后单击几下对单个循环元素进行更改。

无需单独编辑循环项目。由于它们都是连接的，因此您只需要编辑一次模块，而Divi 5将在循环中的每个模块中自动应用更新的样式。

您可以在循环中添加更多模块，例如项目摘录，发布日期，评论计数，作者生物，自定义字段等。

如果要收紧循环中项目周围的空间，则可以调整行和列设置中的垂直差距。这样可以使用Divi 5的Flexbox布局系统来控制每行和单个模块之间的空间数量，从而使您可以完善循环的外观。

测试和完善投资组合循环

一旦建立了投资组合，就该对其进行测试以确保一切按预期工作。首先，使用Visual Builder顶部的预览链路预览前端的网格。

验证每个项目的标题，特色图像，摘录和循环链接正在从项目CPT中正确提取。确保没有占位符被破坏的元素。

回到视觉构建器中，检查以确保使用Divi 5的可自定义响应式断点来确保布局适当调整。默认情况下，Divi 5提供3个断点- 一个用于台式机，平板电脑和电话- 但您可以通过单击Visual Builder顶部栏中的省略号菜单来启用最多7个。

浏览每个断点，检查布局，并根据需要进行调整。

为了使布局更加友好，您可以使用Divi 5的更改列结构设置来更改较小设备上显示的列数。

最佳实践和技巧

为了确保您充分利用Divi 5和Loop Builder，在构建投资组合时，这里有一些最佳实践。

1.确保设计变量的设计一致性

Divi 5的设计变量功能使您可以在投资组合页面上定义一致的版式，颜色和间距。在Visual Builder中，为字体，颜色和填充/边缘设置全局变量，以确保每个投资组合项目看起来都均匀。要创建变量，请单击Visual Builder左侧菜单上的变量管理器图标。

从那里，您可以分配全局字体，颜色等，以确保整个网站的设计不仅仅是您的投资组合页面。

2。考虑可访问性

可访问性确保所有用户，包括残疾人，都可以导航并享受您的工作。将图像上传到媒体库时，请确保为图像添加替代文本。这有助于屏幕读取器将内容传达给视力受损的用户。

选择具有足够的对比度的颜色也可以确保视觉障碍用户的可读性。

3。保存和重用模板

完善循环构建器模板后，将其保存到Divi库中，右键单击“投资组合”部分并选择保存到库中。给它一个描述性的名称，以便简单参考。这使您可以在其他页面上重复使用模板，而无需从头开始重新构建。

要使用其他网站上的模板，您可以将其保存到Divi Cloud并一键将其导入其他Web项目。

保存模板简化了您的工作流程，并确保您可以快速部署未来项目的专业投资组合网格。

下载文件

免费下载

加入Divi新闻通讯，我们将向您发送终极Divi着陆页布局包的副本，以及大量其他惊人和免费的Divi资源，提示和技巧。跟进，您将立即成为Divi大师。如果您已经订阅，则只需在下面的电子邮件地址中输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。请检查您的电子邮件地址以确认您的订阅并获取免费的每周Divi布局包！

今天尝试Divi 5中的循环构建器

Divi 5的循环构建器使创建动态投资组合网格变得容易，从而使您可以以风格和效率来展示您的作品。通过利用内置项目CPT和Loop Builder的强大功能，您可以创建灵活且完全可定制的网格，以动态吸引项目的内容。它的灵活性使您可以使用任何Divi模块设计独特的布局，设置查询以显示特定的项目，并创建在任何设备上发光的响应网格。

您准备好将投资组合栩栩如生吗？潜入Divi 5的最新公共Alpha版本，并尝试使用您的投资组合布局。无论您是自由职业者展示项目还是突出客户工作的业务，Loop Builder都可以轻松创建专业，动态的显示。