网格

注意:此扩展不再活动。Themeco的更新和对该插件的支持将于2021年9月30日结束。在此日期之后，您可以自行决定是否继续使用该插件。我们建议所有Themeco用户切换到本机帖子的元素可在所有基石构建器。可以实现更高级的布局网格元素可在专业版。

如果您正在寻找关于我们的网格元素(与这里讨论的“网格”插件不同)的文档，请访问我们的网格元素篇文章。

网格用例

Grid是一个非常通用的插件，你可以使用自定义的帖子类型，自定义的分类，类别，标签，帖子，页面，媒体等。为它创建多个用例，包括但不限于:

• 定制产品展示。使用网格的自定义帖子类型功能，在不同的页面上展示来自不同类别的产品，完美地保持专注于一组产品，而不是拥有188金宝搏官网登录-首页一个整体的商店页面。
• 自定义帖子页面。使用The Grid的自定义文章类型功能来显示来自选定类别或在不同页面上带有选定标签的文章，完美地实现了每个类别或每个分类(类别/标签)有一个页面。
• 展示你的产品或帖子在产品或帖188金宝搏官网登录-首页子使用的结尾网格的短代码或基石/内容生成器元素。非常适合追加销售或交叉推广。

我们将向您展示Grid插件的两个用例。在第一个例子中，我们将使用WooCommerce创建我们产品的网格，如果你没有安装WooCommerce，请查看我们的有用的WooCommerce指南188金宝搏官网登录-首页在这里．确保您还设置了一些产品以进入您的网格。188金宝搏官网登录-首页

在WooCommerce中使用网格

按照以下步骤在grid插件中添加一个以188金宝搏官网登录-首页产品作为网格项的网格:

1. 进入WordPress仪表板>的网格>的网格菜单项。
2. 单击创建网格按钮创建一个新网格。
3. 的选项中填写一般TAB如下:
   • 名称:向网格添加唯一的名称。
   • 商家:在您填写名称后，短代码会自动生成，它可以在WordPress生态系统的任何地方使用，以显示网格。
   • 网格ID:Grid ID是自动生成的，并为网格创建一个惟一的ID。
   • 自定义CSS类:添加一个全小写的、无空格的CSS类，如果需要的话，可以稍后使用它来选择这个网格并添加额外的自定义样式。
4. 单击保存按钮在屏幕右上角。

5. 单击源选项卡，以决定要使用哪个源作为网格项。我们将选择以下选项:
   • 文章类型:如果选中，您可以将帖子、产品、作品集或任何其他自定义帖子类型作为网格项目188金宝搏官网登录-首页的主要来源。
   • Instagram:如果你连接网格到Instagram，你可以使用Instagram feed作为网格项目。
   • Youtube:如果你将网格连接到Youtube，你可以使用Youtube频道作为网格项目。
   • Vimeo:如果你将网格连接到Vimeo，你可以使用Vimeo视频作为网格项。这将只有当你有Vimeo Pro订阅。
   • Facebook:如果你将Grid连接到Facebook，你可以使用Facebook的帖子作为网格项目。
   • Twitter:如果将Grid连接到Twitter，则可以使用Twitter tweet作为网格项。
   • Flickr:如果将Grid连接到Flickr，则可以使用Flickr提要作为网格项。
   • RSS:您可以将Grid连接到RSS提要，以作为网格项显示。
6. 为了能够检索Woocommerce插件的产品，我们需要188金宝搏官网登录-首页选择文章类型源。

7. 填写Source选项卡的设置如下:
   • 物品数量:将网格项的数量设置为在一个页面上显示。
   • 文章类型:选择188金宝搏官网登录-首页post类型以检索Woocommerce产品作为网格项。188金宝搏官网登录-首页
   • 后状态:选择要作为网格项检索的邮件的状态。我们将只选择发表职位。
   • 类别/分类术语:选择您希望邮件项目显示的类别或分类法。我们想要所有类别的产品，188金宝搏官网登录-首页所以我们将这个选项设置为空白。
   • 作者(年代):选择您将在此选项中选择188金宝搏官网登录-首页的具有特定作者的产品。
   • 排除项目:选择要从网格项中排除的特定产品。188金宝搏官网登录-首页
   • 排序:设置网格项的顺序。

8. 去网格选项卡，您可以在其中设置网格类型和响应相关选项。你可以选择3种类型:
   • 网格:这是标准的网格布局。
   • 砌体:砖石类型有不同高度的项目。
   • 合理的:它基本上是带有合理模式的砖石类型。

9. 去布局选项卡，按如下方式拖放额外的功能到网格中:
   • 搜索:可以将搜索功能添加到网格中。
   • 过滤器:您可以向网格添加过滤器功能。
   • 排序:您可以向网格添加排序功能。
   • 负载:您可以向网格添加加载更多的特性。
   • 分页:您可以向网格添加分页功能。
10. 也可以将网格设置为水平或垂直模式在布局选项卡。
11. 的宽屏在布局选项卡中的选项将使网格走出网站的容器和侧边栏，它将占据整个屏幕。如果你看到这样的情况，你不想有那种视图关闭全宽选项。

为博客文章创建网格

Grid插件的一个流行用例是拥有一个博客文章列表页面，而不是在X和Pro主题中默认可用的默认博客文章页面。添加贴子项网格的过程与上面的部分相同，但是您将使用Posts而不是Products贴子类型。188金宝搏官网登录-首页

重要的一点是要考虑项目的数量，最好是10或更低的数量。如果你加上-1或0，它会一次加载所有的帖子，这不是一个好主意，会给网站使用的服务器带来压力。最好的方法是为条目编号设置一个编号，然后转到Pagination选项卡来决定用于加载博客条目的分页模式。我们之前没有讨论的另一点是Source选项卡中的排序选项，它将提供给你使用任何WordPress查询来排序网格结果的选项。点击这里以了解更多关于WordPress中的自定义排序的信息。

如何在X和Pro中使用网格

现在我们已经学习了如何在Grid插件中添加网格，我们需要将创建的网格添加到网站的页面中。的标准方法是使用经典的网格元素基石(X)和内容生成器(职业)。你可以在元素选项卡，它可以被拖到页面上。

的经典的网格元素有一个选项，那就是选择您已经创建的网格。该选项将列出您使用Grid插件创建的所有网格。

由于网格的复杂性以及Grid插件嵌入资产以显示网格的方式，您无法在构建器中动态地查看网格。你会看到一个消息，提到没有预览可用，你需要检查前端的网站，以查看实际的结果。

使用皮肤构筑器

方法可以决定每个网格项将包含哪些元素皮肤建设者．要访问皮肤构建器，请访问WordPress仪表盘>网格>皮肤生成器你会看到下面的屏幕:

我们将通过下面的步骤添加一个示例来讨论皮肤构建器中可用的几个选项:

1. 单击创建皮肤按钮添加新皮肤。
2. 你会在屏幕的右角看到皮肤构建面板，在左角看到布局设置。
3. 你可以使用设置面板来设置皮肤的整体特征。
4. 要向皮肤构建器面板添加元素，请单击添加元素按钮。

5. 在那里，您将看到可以使用的可用元素类型，单击元素类型并设置适当的选项，最后单击添加到皮肤按钮将元素添加到皮肤构建器中。
6. 您可以重复上面的步骤来添加和配置网格项的视图。
7. 最后，如果你点击添加到皮肤构建器的元素，你会看到一组选项来微调元素，比如:
   • 位置
   • 可见性
   • 字体
   • 边境
   • 影子
   • 背景
   • 自定义(自定义CSS)

如果你对深入了解细节感兴趣，请查看官方皮肤生成器文档．

进一步的阅读

本文仅仅触及了网格功能的皮毛。如果你有兴趣更深入地学习插件特性，我们建议你查看官方文档．

总结

我们已经讨论了Grid插件和它使用通用源代码创建网格的特性。我们讨论了最常用的案例，如Woocommerce产品和创建博客列表网格。188金宝搏官网登录-首页然后，我们深入研究了使用X中的基石和Pro主题中的内容生成器将网格添加到页面中。最后，我们简要地讨论了插件的Skin Builder特性。