是否想在完全自定义的布局中显示博客帖子，产品或自定义帖子类型等动态内容，而无需触摸代码行？ Beaver Builder中的循环模块使其成为可能。

Loop模块在Beaver Themer 1.5和Beaver Builder 2.9中引入，是一个强大的工具，可让您使用标准的Beaver Builder模块设计可重复的布局。无论您是构建博客，投资组合，活动列表还是WooCommerce商店，该模块都可以为您提供完整的设计控制，并具有动态内容的核心。

在本指南中，我们将分解如何使用循环模块构建现代，动态的布局，从而增强您的网站的设计，性能和灵活性。

什么是循环模块？

循环模块是一个灵活的容器，可通过查询内容循环，并使用创建的布局显示它。您可以构建自己的自定义设计，而不是依赖默认的WordPress模板，而可以使用模块，字段连接和有条件的逻辑来构建自己的自定义设计。

循环模块不仅限于博客文章或自定义帖子类型 - 它可以处理广泛的动态内容。这是您可以使用它来创建自定义布局并增强您的网站的几种强大方法：

• WooCommerce类别或标签- 使用分类法查询源在单个产品页面上显示相关的产品类别或标签。
• 自定义内容网格- 使用ACF中继器查询源（例如“与团队”或服务列表）上的ACF中继器查询来源显示动态内容，例如团队成员或推荐。
• 相关文章- 具有ACF关系查询源的单个发布页面上相关的博客内容，有助于提高参与度并降低跳出率。

循环中的每个项目都使用您的自定义设计，并吸引了动态数据，例如帖子标题，特色图像，摘录等。

循环模块的关键功能

循环模块包含功能，使其非常适合构建灵活，内容丰富的页面：

• 查询任何帖子类型的动态内容（标准或自定义）
• 使用循环布局内的任何海狸构建器模块
• 动态连接字段（例如，标题，特色图像，元元）
• 从多种布局类型中进行选择，例如网格，列表或轮播
• 添加过滤器和分页以增强用户体验

自定义和自动化的这种组合使您可以创建高级布局，而无需编写HTML，PHP或CSS。

如何构建自定义循环

使用循环模块创建自定义内容布局是简单，灵活的，并且不需要代码。无论您是想从现成的布局开始还是从头开始构建自己的循环模块，都可以完全控制您的动态内容。

循环模块预设布局选项

当您首先将循环模块拖到页面上时，您将提示您从以下预设布局中进行选择：列表，列，类别和产品类别。

预设布局可以通过提供可以完全自定义的预放的模块，从而为您提供了前端。调整循环设置以满足您的需求，重新排列或删除现有模块，并添加新的模块以微调布局。这些现成的设计可帮助您更快地创建抛光，响应的内容显示。

用空白的布局从头开始构建

更喜欢创建完全自定义的东西吗？选择空白布局选项并按照以下步骤：

1. 将循环模块添加到您的页面上，或在Beaver Builder编辑器中发布。
   
2. 选择空白布局以从一个空环容器开始。
   
3. 配置循环设置以定义要显示的内容，例如博客文章，WooCommerce产品，ACF中继器字段或自定义帖子类型。
   
4. 将模块拖动到循环容器中以从头开始构建布局。添加您需要的任何海狸构建器模块，例如标题，照片，图标，按钮等。
   
5. 使用字段连接来吸引每个循环项目的标题，图像，价格或自定义字段，例如。
   
6. 使用Beaver Builder的拖放工具来安排和设计模块。

此设置非常适合想要完全控制的高级用户或设计师。
使用它来构建自定义博客布局，产品网格或团队目录（无需代码）。

使用框模块进行布局控件

在布局精度和样式灵活性方面，盒子模块是循环模块的重要伴侣。

• 将循环模块包装在盒子模块中，以管理外部容器的宽度，填充，边距和背景样式。这使您可以完全控制您的循环内容如何在整个页面布局中。
• 在循环内嵌套一个盒子模块，以分组每个循环项目的内部内容。此设置使您可以利用高级布局技术（例如CSS网格或Flexbox） 。例如，您可以在每个循环项目中创建一个两列布局。将图像放在左侧，并在右侧放置文本 - 完全控制间距和对齐方式。

使用框模块进行战略性的使用，有助于维护干净，响应式的设计，同时增强动态内容的视觉结构。

查询设置：将显示哪些内容？

循环模块中的“内容”选项卡可让您控制循环内容的查询和显示方式，例如：

• 选择帖子类型（帖子，页面，CPT，产品等）
• 通过分类学，类别，标签或作者过滤
• 根据帖子状态或日期显示内容
• 设置偏移，排序订单和邮政限制

这包括查询源，要显示的项目数量，订购和高级过滤器选项。

分页

“分页”选项卡可让您控制内容如何分配和显示在多个页面上，这是用于改善导航和用户体验的理想。

• 数字：在您的帖子下方显示编号链接。单击一个数字加载一个带有相应帖子集的新页面。
• 滚动：在用户滚动时，自动加载其他帖子，将内容保存在单个页面上。
• 无：禁用分页。使用此选项显示有限数量的帖子（例如最新的三个），而无需导航控件。
• 每页帖子：设置每页出现多少个项目。默认值为10。

这些选项有助于将内容交付到您的布局和用户交互目标。

带有字段连接的动态数据

在循环布局中，您可以使用字段连接来动态地吸入帖子数据，例如：

• 帖子标题
• 特色图像
• 摘录或完整内容
• 自定义字段
• 作者，日期，类别，标签

任何支持动态内容的模块（例如标题，照片，按钮，HTML等）都可以连接到邮政数据。

高级样式和有条件的逻辑

是否希望以不同的方式样式的不同帖子类型或根据条件显示/隐藏元素？循环模块支持条件逻辑和自定义CSS类。

例如，您可以：

• 隐藏按钮如果自定义字段为空
• 为特色帖子添加徽章
• 根据邮政类别应用不同的颜色或样式

这使您可以微调用户体验并在内容中保持一致的品牌。

现实世界循环模块用例

Beaver Builder中的循环模块具有难以置信的通用性，可让您在符合您的设计需求的布局中显示动态内容。以下是一些使用它的有力方法：

• 博客档案：创建具有特色图像和摘录的最新博客文章的视觉吸引人网格或列表。
• WooCommerce产品：在可自定义的网格中展示WooCommerce产品，并具有动态定价，图像和添加到车按钮。
• 投资组合展示：以灵活的布局来突出显示您的项目或案例研究，以反映您的品牌风格。
• 推荐：从自定义帖子类型中显示客户推荐，并样式与您的网站设计相匹配。
• 事件列表：以日期，位置和事件描述为按时间顺序列出即将举行的事件或网络研讨会。
• 团队成员：使用照片，名称，标题和BIOS介绍您的团队 - 将每个项目链接到详细的个人资料页面。
• 房地产清单：使用自定义帖子类型提供带有属性图像，定价和关键细节的房地产清单。
• 课程目录：显示在线课程或讲习班的目录，并附有标题，描述和注册链接。
• 作业清单：建立一个定制的工作板，其中包含动态清单，其中包括标题，位置和简短的角色摘要。
• 食谱索引：配备图像，标题和描述的食谱集合，这是食品博客作者的理想之选。

这些用例证明了Beaver Builder中环模块的多功能性。它可以在各种行业和网站上使用，可帮助您创建动态，引人入胜和自定义的内容布局。

最终想法：为什么使用循环模块？

Beaver Builder中的循环模块使您有能力轻松创建完全自定义的动态布局。无论您是构建博客，商店还是复杂的内容目录，此模块都可以控制数据的显示方式，同时保持工作流的视觉流和无代码。

如果您认真地使用Beaver Builder构建现代定制的WordPress网站，则循环模块是您工具包中的必备品。在此处探索完整的循环模块文档。