如何使用Divi 5的循环构建器创建自定义博客文章循环

您的品牌不应受到静态布局的限制，因此，随着Divi 5的不断发展，我们旨在为您提供充分的灵活性。 Divi 5的新循环构建器是朝这个方向迈出的重要一步。它使您可以设计一个项目，然后将其循环到动态网格或列表中。

在本教程中，我们将向您展示如何设置自定义博客文章循环。我们将设计清单，连接动态字段，设置查询，并为干净的网格或列表完善布局。让我们开始！

什么是Divi 5的循环构建器

使用Divi 5的Loop Builder，您可以在视觉构建器中设计一个单个“卡”布局，并使用任意多的Divi模块，然后为您选择显示的每个项目循环Divi loops。

订阅我们的YouTube频道

在列上启用循环元素，设置查询（帖子，定制帖子类型，例如项目，术语或用户），以及地图动态字段，例如标题，特色图像，类别，自定义字段和按钮。您可以重新排序元素，控制间距，并让所有内容继承您的全局样式。

结果是响应迅速的可重复使用的列表，它与您的系统匹配，而无需额外的插件或自定义代码。

循环构建器的工作方式

您可以通过打开其内容选项卡并启用循环，在任何部分，行，列或模块中打开循环模式。

从那时起，Divi会自动重复与您的设置相匹配的每个帖子的元素。

这是真正控制的地方。在循环设置中，您可以：

• 查询类型：在基本帖子查询或元查询之间进行选择，按类别，标签，自定义字段或其他元数据进行过滤。
• 帖子类型：选择要显示的内容类型，从博客帖子到产品再到任何自定义帖子类型。
• 仅包含具有特定术语的帖子：仅显示与某些类别，标签或其他分类学条款匹配的帖子。
• 排除具有特定术语的帖子：删除与所选类别，标签或术语匹配的帖子。
• 仅包括特定帖子：选择要包括的单个帖子。
• 排除特定帖子：隐藏您不需要的单个帖子。
• 元查询：添加自定义字段条件以控制出现的内容。
• 订单作者：选择结果是否按日期，标题，菜单订单或自定义字段值进行排序。
• 订单：以上升或降序显示结果。
• 每页帖子：确定分页前显示多少帖子。
• 后偏置：从一开始就跳过一定数量的帖子，方便避免具有特色部分的重复项。
• 忽略粘性帖子：选择粘性帖子是否获得优先级或像普通帖子一样对待。

定义查询后，Divi会自动填充每个明信片的内容，并保持布局和造型相同。您完全关注卡的外观，Divi处理人口和重复。通过单个面板控制了所有内容，只需进行一些设置即可使您的博客列表在没有手动编辑的情况下进行更新。

了解有关Divi 5的循环构建器的所有内容

使用Divi 5创建自定义博客文章循环

使用循环构建器构建自定义博客文章循环有两个部分。首先，您设计明信片的布局，确切选择出现的内容以及外观。然后，您将该设计放置在一个循环中，因此Divi会在您要显示的每个帖子中自动重复它。

我们将逐步浏览它，从卡片布局开始，然后设置循环。

开始之前

如果您要从博客模块转到循环构建器，并且已经有一个博客列表页面，则可以跳过来创建循环布局。如果没有，这是快速设置：

1。添加博客页面

从您的WordPress仪表板中，转到页面>添加新的，将其命名为“博客”，然后发布。

此页面将是您帖子的主要枢纽。

2。在WordPress设置中设置您的博客页面

在设置>阅读中，选择一个静态页面。将您的主页和新博客页面分配给帖子页面。

仅当您使用单独的主页和博客列表页面时，才需要。

3。创建一个主题构建器模板

接下来，您将为博客列表页面创建一个新模板。如果您已经有一个，则可以自定义。确保您使用最新的Divi 5版本来访问循环构建器。

在Divi>主题构建器中，单击“添加新模板”>构建新模板。

将其分配到您的博客页面，然后单击“创建模板”。

要设计您的博客文章列表页面，请单击“添加自定义”>“构建自定义主体”。

现在，您将进入Divi Builder，我们将开始构建循环布局。

1。导入布局

从布局开始可以节省大量时间，并帮助您从一开始就保持一致的设计。对于本教程，我正在使用营销代理商博客页面布局进行品牌推广。

您可以选择相同的或导入任何为您提供良好基础工作的布局。在模板中，您将拥有一个现成的结构，您可以适应您的需求，而不是从头开始构建所有内容。

2。设计一张博客发布卡

这是Loop Builder真正实现的灵活性的地方。您没有被锁定在博客模块的固定布局中，而是确切地确定明信片上的内容以及它的布置方式。

将新部分添加到模板中。您可以从预设的结构中挑选或使用单列选项创建自己的。

对于此示例，让我们选择一个三列行结构部分。

在第一列中，我们将创建明信片。我们将使用一个模块组保存所有元素。

然后为特色图像添加图像模块，邮政标题的标题模块以及摘录的文本模块。我们还将添加元信息和更多读取按钮，以便访问者可以单击完整的帖子。

一旦基本结构出现，请自定义卡的设计，以便适合您的品牌。调整颜色，字体，间距以及使其成为您的任何独特视觉细节。

3。启用行包裹

为了确保您的卡在不同屏幕尺寸的行中整齐地显示，您需要启用Flex包装。选择主行并打开“设计”选项卡。

去布局。确保布局样式设置为弹性。

启用布局包装，使卡在需要时可以移至新线路，然后选择最适合您设计的包装对齐。

4。打开循环

现在是使其全部自动的步骤。选择卡的列。

然后，在“内容”选项卡下打开循环选项。启用循环后，Divi将为满足您查询设置的每个帖子重复您的卡设计。

对于此布局，我设置了：

• 帖子类型：帖子
• 每页帖子： 10
• 订单：日期
• 订单：下降（最新第一）
• 后偏置： 0（从最新开始显示全部）
• 忽略粘性帖子：是的

这些小调整确保网格按照所需的顺序准确显示您想要的帖子。您可以随时更改这些值，以使布局适应不同的需求。

5。添加动态内容

使循环栩栩如生的最后一步是将卡中的每个模块连接到实时发布数据。这就是将静态卡变成自动化的，始终始终至今的列表的原因。例如：

• 将图像模块链接到帖子的特色图像。
• 将标题模块链接到帖子标题。
• 将文本模块链接到帖子摘录。
• 将更多按钮连接到帖子URL。

循环时，Divi将用循环中每个帖子的正确数据代替占位符内容。

要设置特色图像，请打开图像模块，悬停在图像选项上，然后单击动态内容图标。选择循环的特征图像，所有相关图像将立即填充。

重复您要显示的帖子标题，已发布日期，摘录以及任何其他字段。

当您单击模块的动态内容图标时，您将看到一系列特定于循环的选项。您不仅限于标题和图像；您还可以显示发布日期，修改日期，作者名称，评论计数，类别，标签，甚至自定义字段。

这意味着您的明信片可以尽可能少或详细。构建一个干净的，以图像为中心的网格，富含内容的布局，甚至突出显示小众自定义邮政类型字段。一次设计一次，Divi在整个循环中保持准确和一致。

6.保存模板并预览

一旦一切都正确，请进行任何最终调整，并节省Divi Builder和主题构建器的更改。

预览您的页面以查看行动中的循环。这是完成的博客列表页面：

博客模块有限制，循环构建器没有

博客模块工作正常，所以我们为什么要推动循环构建器？因为“罚款”是指固定的。博客模块将您锁定在其模板中，但是循环构建器为您提供了空白的画布。您可以自动选择它的布局，顺序，样式和分区循环。

那是真正的转变：您不是在调整别人的模板，而是在设计自己的模板。让我们再次将其付诸实践，并设计与典型的博客模块结构不同的布局。

首先，添加一个单列行和部分。调整尺寸，并确保为行启用Flex和Flex包装。

此行将包含您的博客卡。现在，在列内添加另一个嵌套行以创建您的卡结构，图像在左侧，右侧的元数据在右侧。

完全按照需要设计您的结构，无需遵循博客模块序列。现在将左列的空白留。我们将添加特色图像作为列的背景图像。

自定义您的博客列表卡。

您还可以在设计>布局>垂直间隙选项中的右列中修改模块组的垂直间隙。

接下来，我们启用循环选项。从父行中选择第一列。

同样，我们循环动态内容。从图像开始，转到左列的背景选项，其余的将相同。

这是您的列表式博客循环。现在，如果要将其转换为网格，只需更改列的宽度即可。因为我们在行中启用了FLEX包装，所以随着我们更改其尺寸，卡片将自己包装。

如果这使您的图像太大，则可以删除摘录，更改行的列结构，甚至将水平差距调整为零。

就像您的网格也准备好了。

这个示例只是瞥见循环构建器所能做到的。真正的收获是，您不再限于几个预设布局。明信片的每个部分都是您的安排，样式和重新构想，而Divi会自动重复它。这种灵活性将简单的博客列表变成了为您的网站设计的东西。

使用分页模块

如果您限制循环查询中每个页面的帖子，则可能需要一种让读者查看其余部分的方法。在您的网格下方添加分页模块，并将其目标循环设置为启用循环的元素。要进行完整的演练，请参阅如何一起使用Divi 5的循环构建器和分页模块：阅读教程。

下载博客模板

如果您想在博客模板中尝试使用网格，请下载以下本教程中使用的模板。要导入这些，请导航到您的Divi主题构建器。您可以使用右角的导入/导出图标导入这些内容。

下载文件

免费下载

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

下载

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

立即在Divi 5中构建您的自定义博客文章循环

在Divi 5的循环构建器之前，创建一个真正的自定义博客文章循环通常意味着用刚性模板来搏斗或为每个小更改编写自定义代码。现在，这是一个从头到尾的视觉过程。您可以设计一次卡，将其模块链接到实时数据数据，然后让Divi处理其余的。

如果您一直在博客模块的范围内工作，则循环构建器是您一直在等待的升级。在下一个项目中尝试一下，看看创建一个确切想要的博客（或产品，事件或列表）要容易得多！