深入了解 Elementor 的 Loop Grid：为什么它是你内容展示的强大工具

Elementor 作为最受欢迎的页面构建器，通过其 Loop Grid 小部件，为用户提供了一个灵活且功能强大的方式来展示各种内容。无论是文章、产品还是自定义内容，Loop Grid 都能以动态和视觉上引人注目的方式展示这些内容，提升用户互动和网站的整体效果。本文将深入探讨 Elementor 的 Loop Grid，为你们揭示它为何是内容展示的强大工具。

什么是 Elementor 的 Loop Grid？

Elementor 的 Loop Grid 是一个小部件，可以在网站中动态展示一组相同类型的内容。通过 Loop Grid，可以将文章、产品、分类等内容按网格形式展示，并且每一项内容都遵循相同的设计模板。这个小部件提供了极大的自定义空间，能让你控制每一项内容的布局、显示方式及样式，让网站的内容展示更加灵活和富有创意。

与传统小部件的对比

在 Elementor 中，展示内容的方式并不限于 Loop Grid。也可以使用如“文章”或“产品”小部件来展示单一内容。这些传统的小部件通常存在以下限制：

1. 布局限制：传统小部件大多限制了内容的排列方式，像标题、图片、描述等元素的位置往往是固定的，无法轻松调整。
2. 自定义性差：这些小部件虽然提供了样式修改选项，但无法为每个内容项应用完全独立的自定义样式，也无法自由控制内容的排列和显示方式。
3. 功能受限：传统小部件仅能展示特定的内容类型，例如“文章”小部件仅能展示文章，并且无法轻松与其他内容类型（如产品或分类）结合使用。

与此相比，Loop Grid 能够突破这些限制，实现更高程度的自定义。

Loop Grid 的核心优势

1. 自定义布局

Loop Grid 最大的优势之一就是其布局的高度可自定义。可以通过 Elementor 的 Flexbox 容器，轻松控制内容的排列方式。无论是横向排列、纵向排列，还是网格布局，Loop Grid 都能提供极大的自由度。

2. 动态内容显示

Loop Grid 可以使用动态标签来展示从 WordPress 数据库中提取的内容。这意味着可以将文章标题、图片、分类、日期、标签等动态内容直接嵌入到模板中，无需手动输入每一项内容。

3. 灵活的模板设计

使用 Loop Grid 时，需要创建一个模板，而这个模板会被应用到每一项内容中。模板设计可以非常简单，包含标题、图片、分类、摘要等，也可以非常复杂，加入更多自定义元素，如图标、按钮等。还可以为不同的内容类型（文章、产品、分类等）创建不同的模板，并根据需要切换和应用这些模板。每当内容更新时，模板中的样式和结构会自动适配新内容。

4. 增强的查询和筛选功能

Loop Grid 通过查询设置来精确控制展示的内容。可以选择只展示特定分类的文章或产品，或者按日期、评分、价格等条件筛选内容。查询设置不仅能够帮助你筛选出最相关的内容，还能避免展示重复或不相关的项目，从而优化页面加载和提高用户体验。

5. 支持不同的内容类型

一个显著的特点是，Loop Grid 不仅适用于文章，还可以用于展示 WooCommerce 产品、分类、页面等内容。无论你是希望展示博客文章，还是产品目录，Loop Grid 都能为你提供一致的展示方式。

Loop Grid 选项详解

内容选项卡

1. 布局部分

布局部分决定了 Loop Grid 中项目的外观。实际出现在 Loop Grid 中的项目由 查询部分确定。每个 Loop Grid 都必须包含一个模板。使用 选择模板类型 下拉菜单从以下布局类型中选择：

• 文章（Posts）：一个显示常规文章、页面或产品的 Loop Grid。
• 文章分类（Post Taxonomy）：一个显示文章不同分类的 Loop Grid。
• 产品（Products）：一个显示 WooCommerce 产品的 Loop Grid。
• 产品分类（Product Taxonomy）：一个显示产品不同分类的 Loop Grid。

2. Query部分

Query部分用于确定在 Loop 中显示哪些项目，主要选项有Source、Hide Empty和Ignore Sticky Posts等。

• Source：选项有文章、页面、着陆页、手动选择的页面、当前查询（用于构建一个模板，该模板将应用于多个分类和/或标签）。这样，就不需要为每个分类或标签编写新的查询、相关项目。
• Hide Empty：将开关切换为“是”，以隐藏不包含文章或产品的分类、标签和类型。仅在显示分类和类型的 Loop Grid 中出现。
• Ignore Sticky Posts：置顶文章是指那些被指定始终显示在博客首页最前面的文章，即使发布了更新的文章。当切换为“是”时，查询在排列 Loop 时不会考虑文章是否为置顶文章。

3. Pagination部分

Pagination：如果 Loop 包含多个屏幕大小的项目，它将被分成多个页面。这些页面可以列出如下：

• Numbers（数字分页）
• Previous/Next（上一页/下一页）
• Numbers + Previous/Next（数字分页 + 上一页/下一页）
• Load on Click（点击加载）
• Infinite Scroll（无限滚动）

Page Limit：使用文本框输入希望 Loop 包含的最大页面数。

Shorten：如果使用页面编号，可以通过限制屏幕上显示的页面号码来减少页面杂乱。

4. Nothing Found Message

在某些情况下，网站访客可能会筛选 Loop，但没有找到结果。例如，在一个服装项目的 Loop 中，访客可能会筛选“蓝色”和“裤子”类别。如果 Loop 中没有蓝色裤子，则会显示没有结果。将开关切换为“开启”在 Loop 没有结果时显示消息。如果选择显示消息，可以进行以下设置：

• 文本框：填写希望显示给访客的文本。
• 对齐方式：将文本显示在 Loop 的右侧、居中或左侧。
• HTML 标签：将消息的 HTML 标签设置为 H1-H6、Div 或 Span。这有助于搜索引擎找到并理解这些消息。

样式选项卡

1. Pagination

Typography：设置用于分页的字体大小、类型和颜色。

Color选项：确定用于分页的数字或文本的颜色。

• 常规（Normal）：数字或文本的默认颜色。
• 悬停（Hover）：当访客将鼠标悬停在数字或文本上时的颜色。
• 活动（Active）：当访客正在查看的页面对应的数字或文本的颜色。
• 颜色（Color）：要选择颜色，可以使用颜色选择器或全局颜色。
• 页码间距（Space Between）：使用滑块控制页面数字或文本之间的间距。
• 边缘间距（Spacing）：使用滑块控制页面数字或文本与 Loop 边缘之间的距离。

2. Nothing Found Message

控制未找到消息的外观：

• 距离顶部的间距（Space from top）：使用滑块确定消息距离 Loop 顶部的距离。
• 距离底部的间距（Space from bottom）：使用滑块确定消息距离 Loop 底部的距离。
• 排版（Typography）：控制消息中使用的字体颜色、大小和类型。有关更多详情，请参阅排版。
• 颜色（Color）：为消息选择颜色。有关更多详情，请参阅选择颜色或使用全局字体和颜色。
• 文字阴影（Text Shadow）：点击铅笔图标为文字添加阴影。
• 文字描边（Text Stroke）：点击铅笔图标为文字添加描边颜色。了解更多关于文字描边的信息。

总结

Elementor 的 Loop Grid 是一个非常灵活的小部件，可以帮助用户在网站上以动态和创意的方式展示各种内容，包括文章、产品、分类等。它与传统的文章或产品小部件相比，提供了更多自定义选项和设计自由度，能够有效提升用户体验和网站的整体效果。

如果想了解更多WordPress相关的教程和资讯，请关注光子波动网，拥有最全的WordPress教程和最活跃的WordPress交流社区。