必要的网格

必要的网格是一个通用的WordPress网格构建解决方案，使您能够实现高度定制的网格。

开始

去Pro >验证或X >验证为X然后寻找必要的网格点击Install。

一旦安装，安装按钮会改变并说激活．单击该按钮，它将激活插件。然后您将看到状态更改为安装和激活．

激活后，您将看到必要的网格菜单项在WordPress仪表板上。

继续，点击“Ess”。Grid”，一旦你点击它，你会看到Essential Grid主管理界面，如下所示:

基本网格的用例

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

• 自定义产品展示。使用Essential Grids自定义帖子类型功能，在不同的页面上展示不同类别的产品，完美地保持对一组产品的关注188金宝搏官网登录-首页，而不是有一个整体的商店页面。
• 自定义页面．使用Essential Grid自定义帖子类型功能来显示来自选定类别或在不同页面上选择标签的帖子，完美地每个类别或每个分类(类别/标签)都有一个页面。
• 展示你的产品或帖子188金宝搏官网登录-首页在产品或帖子的末尾插入基本网格。非常适合追加销售或交叉推广。

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

在WooCommerce中使用Essential Grid

现在在主Essential Grid管理屏幕上继续点击创建新的Ess。网格：

一旦你点击它，你会看到Essential Grid提供的选项，如下所示:

让我们浏览这些选项并为我们的WooCommerce产品创建一个Essential网格。188金宝搏官网登录-首页首先，您将使用以下选项进入“命名部分”。

• 标题
• 别名
• 短码(输入别名时自动填写)
• CSS ID

出于这个目的，我们将CSS ID保留一个空白，并像这样填充其余部分:

完成之后，点击源选项卡。

在source选项卡上，您将看到各种设置和配置选项。你看到的地方类型及类别，你会看到文章类型向下滚动并选择产品是WooCommerce的post类型。选择产品后，您将看到职位类别选项，这允许您选择哪些产品包括标签或类别:188金宝搏官网登录-首页

出于本教程的目的，我们将选择服装类别，这意味着服装类别中的所有产品将显示在网格中。188金宝搏官网登录-首页值得注意的是，如果你愿意，你可以选择多个类别。

您将在source选项卡上看到的另一个选项名为最大的条目设置该选项将定义网格可以有多少项，将该选项设置为-1将完全禁用该选项，理论上允许无限的产品显示在我们的网格上。188金宝搏官网登录-首页

你将看到的下一个选项是网格项的媒体源，如下所示:

正如你所看到的，有很多不同的媒体选项，但由于这是产品，我们将只选择特色图像这将意味着，如果我们已经设置了WooCommerce产品的特色图像，Es188金宝搏官网登录-首页sential Grid将获取该图像并将其输出到网格中，以供您选择产品。

在这个选项下是一个设置默认图像的选项，如果你不总是为你的产品设置特色图像，并且仍然希望图像显示在网格上，这是一个有用的选项，设置这个将确保图像始终显示。188金宝搏官网登录-首页

接下来，点击Grid Settings选项卡。在这个页面上，你会看到基本网格整体布局的各种选项:

这里值得注意的是，如果在布局下，你选择全屏的网格布局，内容推而且项目比选项不再可用来设置。出于本文的目的，我们将继续使用盒装，但你可以选择任何你喜欢的选项。

注意:如果您选择使用全屏或全宽，您将需要检查Essential Grid提供的选择器选项，因为网格将扩展到内容区域之外，可能会导致布局问题。你可以查看这些文件在这里．

下一个选项是在不同屏幕尺寸上显示多少列，你会注意到有一个先进的模式选项，这实际上允许您在自定义断点等方面有更大的设置，但我们不会在这篇文章中涉及这些选项，只是让所有这些选项保持原样。尽管你可以自由地尝试，找到最适合你的方法。

这一页上的所有以下项目我们也将保持原样。这是延迟加载，项目间距和整个网格填充．同样，您不必保留这些，所以您可以自由地使用这些选项，并找到适合您的最佳设置。

现在继续，点击Nav-Filter-Sort选项卡，你会在这个页面上看到很多不同的选项，我们只会覆盖我们实际需要的网格。

如你所见，我们有很多不同的模块，我们可以在网格中使用，模块是拖放，拖放分页进入Dropzone底部1并拖动车模块进入Dropzone底部2。

当你向下滚动选项页面时，你会看到各种对齐选项，你可以根据需要设置:

在同样的选项页面下，你会看到各种其他的排序选项和筛选选项，正如我们所解释的，我们不会全部覆盖它们，但是在Essential Grid的官方文档中有一些关于这些选项的很棒的信息。出于本文的目的，我们将所有这些选项都设置为默认值。

接下来点击皮在这里你会看到各种不同的选项，允许你改变皮肤/样式的基本网格。出于本文的目的，我们将它设置为最小的光默认背景色。你也可以查看官方文档皮在这里．

其余可用的选项卡和设置/选项并不真正适用于本文的目的，有关各种设置/选项的更多信息，您应该参考本文开头提到的官方文档。

现在我们已经创建了我们想要的网格，点击保存图标保存你的网格:

一旦你第一次保存了你的Essential Grid，它会带你回到主Essential Grid管理页面，在那里你可以看到所有你创建的网格，复制的创建网格和编辑现有的创建网格:

如何在基石/内容生成器中使用基本网格

现在我们已经创建了网格，是时候使用它了!为了本文的目的，我们将添加一个新页面，当然您也可以使用现有的页面/帖子等。加载你想在基石中放置网格的任何页面/帖子。

在Cornerstone中加载页面后，添加一个部分，或向现有页面添加一个新部分，然后转到元素．搜索经典基本网格元素来添加您创建的网格:

继续并将其拖放到新创建的部分中。默认情况下，它会选择你创建的第一个网格，所以如果你只有一个网格，它会显示良好，如果你创建了多个网格，点击基石中的网格，然后在右手边，你应该会看到一个下拉选择框，点击它，然后从下拉框中选择你的网格:

一旦你选择了你的网格，添加任何其他你想要的内容到你的页面，如文本图像等，然后保存在基石。

现在，当你转到你刚刚创建的页面时，你会看到你的Essential Grid是这样的:

总结

网格是网页设计中具有美感的结构。创建网格曾经很困难。然而，使用插件必要的网格，你的X和Pro授权副本附带，你可以毫不费力地为你的帖子和产品创建网格。188金宝搏官网登录-首页

本文介绍了使用Essential Grid并在Cornerstone或Content Builder中添加它的基础知识。

进一步的阅读

有关详细讨论，您可以查看Essential Grid的官方文件在这里．