Tag: Elementor Loop Grid 教程

在 WordPress 中，通过使用循环网格或循环轮播，可以创建美观且功能强大的类别页面。本文将详细介绍如何使用这些工具来实现这一目标。

一、为什么要使用循环网格或循环轮播创建类别页面？

循环网格和循环轮播是现代网页设计中非常实用的工具。它们允许你在页面上以网格或轮播的形式展示内容，既美观又实用。通过使用它们来创建类别页面，可以动态显示不同类别下的内容，如文章、产品、图像等，从而提升用户体验。

主要优势包括：

• 动态展示： 自动显示分类内容，减少手动更新的麻烦。
• 灵活性： 可以轻松调整布局、样式和内容显示方式。
• 用户体验： 提供更好的视觉效果和导航体验，增加用户在网站上的停留时间。

二、创建类别页面的步骤

在本指南中，我们将使用一个示例，详细介绍如何通过Elementor Pro的循环网格（Loop Grid）来创建一个显示文章分类的类别页面。尽管我们以文章为例，同样的方法也适用于产品和其他内容类型。

1. 设置和拖放循环网格

首先，我们需要在页面上设置一个循环网格来显示内容分类。

拖放循环网格：

• 登录到 WordPress 仪表板。
• 创建一个新页面或编辑现有页面。
• 在 Elementor 编辑器中，找到循环网格小部件并将其拖放到页面的画布上。

选择模板类型：

• 在左侧面板中，找到“选择模板类型”的下拉菜单。

• 从中选择“帖子分类法”作为模板类型。如果安装了 WooCommerce，还会看到“产品分类法”选项。

创建模板：

• 单击“创建模板”按钮。这将为你的类别页面创建一个新模板，可以在其中添加动态内容。

2. 使用动态标签构建模板

为了使模板能够自动显示分类内容，我们需要使用动态标签。这将使你无需手动输入类别名称、描述等信息。

添加标题小部件：

• 将标题小部件拖放到模板中，用于显示类别名称。

使用动态标签：

• 在标题小部件的设置面板中，点击标题字段旁边的动态标签图标。

• 从下拉菜单中选择“档案标题”。这样，模板会自动显示当前类别的名称，而无需手动输入。

删除不必要的文本：

• 通常，WordPress 会在分类名称前自动添加“Post”等字样。为了删除这些无关的文本，可以进入标题小部件的设置，找到“包含上下文”选项，将其设置为“否”。

添加类别描述：

• 使用文本编辑器小部件来显示类别描述。

• 在文本编辑器小部件的内容字段中，选择动态标签“存档描述”，这将自动显示当前分类的描述。

3. 使类别项目可点击

为了提高用户体验，可以让类别页面中的项目可点击，使用户能够通过点击类别标题或图像直接进入该类别的详细页面。

使容器可点击：

• 编辑模板时，点击左上角的图标选择容器。

• 在容器的设置面板中，找到“附加选项”部分。

• 从HTML标签下拉菜单中，选择“链接”选项。

• 在链接字段中，点击动态标签图标，选择“存档URL”。这将使整个容器成为一个链接，当用户点击时，会跳转到相应的类别页面。

使单个元素可点击：

• 如果只希望标题或图像可点击，而不是整个容器，可以在小部件的“内容”选项卡中找到“链接”字段。

• 点击动态标签图标，并选择“存档URL”。这样，只有标题或图像部分会变为链接。

4. 排除不需要的类别

在一些情况下，可能希望在类别页面中排除某些不需要的分类（如“未分类”）。以下是步骤：

打开查询设置：

• 选择循环网格或轮播小部件。
• 在左侧面板中，打开“查询”部分。

手动选择过滤条件：

• 在“过滤依据”下拉菜单中，选择“手动选择”。

• 点击“排除”选项，输入想要排除的类别名称（例如“Blog shortcodes > FAQ”）。

保存设置：

• 完成排除设置后，点击“保存”按钮。

三、将图像添加到类别页面

为类别页面添加图像可以显著提高页面的视觉吸引力。如果希望为每个类别添加一张图片，以下是操作步骤：

1. 添加图像小部件

添加图像小部件：

• 将图像小部件拖放到模板中的适当位置。

使用动态标签选择图像：

• 在图像小部件的“内容”选项卡中，点击图像字段旁的动态标签图标。

• 从下拉菜单中选择“WooCommerce 产品图像字段”。这将使你能够自动显示与每个类别相关的图像。

设置动态字段：

• 在动态字段中，点击钥匙图标，从下拉菜单中选择与类别图像相关的字段。

保存并预览：

• 完成设置后，保存模板并预览页面，确保类别图像正确显示。

四、设计与优化类别页面

创建了基础的类别页面之后，可以进一步优化页面的设计和功能，以提升用户体验。

1. 页面样式设置

利用 Elementor 的样式工具，可以自定义页面的布局、颜色、字体和其他视觉元素。通过调整这些设置，确保页面与你的网站整体风格一致。

2. 响应式设计

确保你的类别页面在各种设备（如手机、平板、电脑）上都能良好显示。使用 Elementor 的响应式设计工具，可以预览并调整页面在不同设备上的显示效果。

3. 性能优化

使用轻量级的图像和简洁的代码，以确保页面加载速度快。良好的加载速度不仅能提升用户体验，还能提高搜索引擎的排名。

结论

使用循环网格或循环轮播来创建 WordPress 类别页面，不仅可以使你的网站内容更加有条理，还能为用户提供更好的浏览体验。通过动态标签、可点击容器以及图像优化等功能，可以轻松创建一个既美观又实用的类别页面。