如何一起使用Divi 5的循环构建器和分页模块

如果您显示所选且有限的帖子集，则静态列表的内容列表很好。但是通常，您希望用户访问比原始循环显示的更多内容。您想确定最初的内容加载多少，并为读者提供清晰的方式来在批处理之间移动。那就是Divi 5的循环构建器和分页模块成为完美的一对。

这篇文章将引导您完成每个工作的工作方式，然后向您展示如何连接它们。到最后，您将知道如何使用适当的分页构建循环布局。

认识Divi 5的循环构建器

循环构建器是Divi 5最大的升级之一。它为您提供了旧博客模块永远无法做到的自由。任何元素都可以成为“循环”容器。这意味着Divi将对与查询相匹配的每个帖子，产品或自定义帖子类型自动重复它。

您没有被预先设计的帖子列表粘住，而是将一个“模板”项目设计为循环。 Divi用于每个结果，从循环查询中交换动态内容。这可能是：

• 从帖子数据中获取的标题
• 特色图像
• 自定义字段
• 链接到完整的帖子或产品

您可以使用任何模块显示此数据，而不仅仅是博客特定的数据。想要一个花式的蓝色模块显示您的最新课程列表吗？完毕。需要用于WooCommerce项目的自定义产品卡布局吗？也完成了。

这很灵活，因为您自己正在建立设计和内容结构。 Divi处理重复。

从博客模块切换到循环构建器意味着从标准模板转移到完全自定义的布局系统。我真的很喜欢建造它，我也知道您也会！

满足分页模块

分页是说“将结果分为页面”的一种奇特方式。而不是将所有项目倒在单页上，而是将它们分解为较小的集合。有帮助：

• 页面加载时间
• 可读性
• 扫描性

Divi 5中的分页模块确实可以做到这一点，但具有一些智能集成。它不仅与博客文章有关。相反，它可以连接到您在页面上构建的任何循环。

它通过添加两个导航元素（即预览和下一个链接）来起作用，它们可以自定义。如果较旧的项目超过当前集，则“较旧”（或您选择的文本）将处于活动状态。如果有较新的项目，“较新”将处于活动状态。

构建循环 +分页布局

让我们通过完整的设置运行。此示例假设您需要一个带有分页的自定义循环。这是我创建的Flex布局，它将显示我们的循环。您可以在下面下载完整的布局。

请注意，该卡的宽度和柔性增长〜50％，因此，当循环卡在弹性行中本身时，它将在容器内部变成全宽。

步骤1：创建循环容器

在您的页面中添加一个部分。在其中，添加要重复的模块。这可能是一个单个模块（例如Blurb），也可以是列或组中多个模块的更复杂的布局。

选择您的容器后，打开其设置并启用循环选项。

选择您的数据源。这是循环将运行的“查询”。

首先，选择查询类型。根据您网站的配置，您可能会看到以下选项：

• 发布类型（例如您的博客文章或自定义帖子类型，例如“项目”）
• 术语（类别和分类法）
• 用户（返回网站用户列表，例如作者）
• 中继器字段（由插件创建的自定义字段用于在循环中创建循环）

接下来，根据您在上面选择的哪种查询类型，您将有机会更具体。选择“帖子类型”可能使您可以使用以下帖子类型：

• 博客文章
• 项目
• 产品
• 无论您为自己定制的CPT

从那里开始，您可以更具体地说明循环中应该出现的内容。你可以：

• 包括具有特定类别或标签的项目
• 排除具有特定类别或标签的项目
• 包括特定项目（通过邮政ID）
• 排除特定项目（通过邮政ID）
• 构建您自己的元查询（用于基于自定义字段数据创建包含物/排除的信息）
• 设置匹配查询的顺序（例如字母顺序和下降）
• 每个页面值的项目控制循环中显示多少
• 后偏置，如果您想在周期后期开始循环
• 忽略粘性帖子

这就是我们的示例在这一点上的看法。我们创建了循环并将其分配给我们的博客文章类型。我将显示限制设置为3。

现在，我们必须分配具有动态循环内容的超链接的各种文本字段和项目。

步骤2：在循环中添加动态内容

我们的下一个任务是单击每个循环的模块，然后用动态内容字段替换静态文本或图像。例如：

• 在文本模块中，从动态内容选择器中选择“帖子标题”
• 在图像模块中，您可以选择“特色图像”
• 在按钮模块中，将链接设置为“发布URL”
• 在整个循环容器上，还将链接设置为“邮政URL”

这告诉Divi为每个循环项目提取正确的内容。

请记住 - 每个结果都重复循环内部的任何内容。将非环内容（例如标题，广告或CTA）放在外面。如果循环中没有与动态数据连接的内容，则循环中的每个项目都会显示AS-IS（例如示例卡右下角的“读取→”文本）。

步骤3：添加分页模块

在循环部分下方，添加新行。插入分页模块。在模块的设置中，找到目标字段。使用它从页面上的循环列表中选择循环。这将分页控制与该特定循环联系起来。专家提示：如果您使用管理标签，则更容易选择正确的目标。这也用于互动。

自定义“上一个”和“下一个”标签。您可以使用“旧帖子 /较新的帖子”，“后背 /向前”，甚至可以使用“← /→”，以最少。

关键是分页模块必须坐在它控制的循环外部。并确保将其分配到正确的目标（如果您在同一页面/模板上有多个循环）。

步骤4：测试互动

保存您的页面并预览它。单击“较旧”以转到下一组循环项目。

请注意，URL如何通过标识循环页面的查询参数变化。另请注意，只有循环内容会随机变化/变化 - 桌面，页脚和侧边栏应保持不变。

获取此循环布局

是否想剖析这种布局，看看自己是如何为自己构建的？在这里下载！

解压缩文件夹后，导航到Divi库上传文件。上传后，您将可以将部分添加到您正在处理的任何页面中。

下载文件

免费下载

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

下载

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

享受一个更具活力的分区

Divi 5的循环构建器和分页模块是灵活性的巨大飞跃。循环构建器使您摆脱了旧模块的刚性设计，使您可以使用动态内容构建自己的重复布局。分页模块通过将它们分解为用户友好的块，可以使这些布局快速可管理。

循环构建器和分页模块与其他新的Divi 5功能（Flexbox，Interactions，HSL Color Controls）配对，一如既往地强大。您可以对所有这些进行一些令人难以置信的页面设计。

建立了第一个分页循环后，您将看到在博客，产品网格，投资组合或您需要组织的任何内容类型之间重复使用该方法的容易。