基本网格:详细概述和审查

已发表: 2018-10-17

ThemePunch 为 WordPress 制作了一些最受欢迎的插件。 Essential Grid 是他们图书馆中收入最高的人之一,与 Slider Revolution 并驾齐驱 随着时间的推移,Essential Grid 已成为 CodeCanyon 上最受欢迎和最成功的插件之一。 所以我们想给这个插件一个亮点,让你们决定它是否可以改善你的网站。

基本网格

网格插件并不少见。 事实上,我们自己的 Divi builder 有一个 Portfolio 模块可以达到这个目的。 但是 Essential Grid 远远超出了大多数其他网格插件所做的,这就是为什么即使在许多主题都包含他们自己的自定义网格模板之后,人们仍然每天都在购买 EG 许可证。

ThemePunch 概述和审查的基本网格

简单地使用原始的销售简介会告诉你你可以用 EG 做什么:

Essential Grid Gallery 是 WordPress 的高级插件,允许您在高度可定制的画廊网格中显示各种内容格式。 可能的应用范围包括作品集、博客、画廊、WooCommerce 商店、价格表、服务、产品滑块、Instagram、YouTube、推荐书以及您可以想象的任何其他内容。

但他们的宣传并没有告诉你的是所有定制所包含的内容。 这是我们的工作,我们打算这样做。 所以让我们深入研究一下,看看有什么大惊小怪的。

入门

首先,请记住这是一个高级插件。 您需要前往 CodeCanyon 并以 27 美元的价格下载。 然后完成手动安装过程(插件 - 添加新 - 上传)。 此时,您的 WordPress 管理仪表板中将有 3 个新项目: Ess。 GridPunch FontsEss。 网格示例帖子。 首先,让我们看看简单的Ess。 网格

第一个菜单项是您输入激活码、检查更新、更改日志之类的地方。 他们确实提供了一些关于如何使用插件的简单说明,归结为:使用短代码或将小部件拖动到侧边栏。

ThemePunch 概述和审查的基本网格

此页面也将是您创建要使用的任何新网格的地方,因此请习惯单击该按钮。

ThemePunch 概述和审查的基本网格

物品皮肤编辑器

Item Skin Editor 下,您拥有 Essential Grid 附带的所有基本模板。 您可以逐个皮肤地编辑这些内容,更改您想要的任何内容。 或者按原样使用它。 您甚至可以从头开始创建自己的。

ThemePunch 概述和审查的基本网格

在这里,EG 为您提供了通过选项卡对不同类型的网格项目进行排序的选项。 (甚至间距、砌体设计、帖子或 WooCommerce 产品网格。)当您将鼠标悬停在每个网格上时,它会以动画方式显示标题、摘录、颜色叠加等,您可以通过单击绿色齿轮图标进行自定义。

在此选项面板中,可以编辑每个元素。 从元素之间的间距、显示的图标、动画风格和持续时间、链接、阴影、媒体类型和适合度,一切。

ThemePunch 概述和审查的基本网格

我想提醒您注意,Essential Grid 在普通视图中提供了 CSS 类,您可以随意操作。 如果由于某种原因在此处的选项中找不到完美的设计选项,您可以通过自定义 CSS 自行添加。

在页面底部,您可以鸟瞰您可以访问的每个图层以及它当前的样式。

ThemePunch 概述和审查的基本网格

元数据和搜索设置

皮肤编辑器可能是 Essential Grid 中最强大的独立部分,但 EG 不会在其他地方回避这些选项。 您可以在Meta Data Handling下创建自定义元框,这使您可以选择为插件中可能需要的自定义功能放置框。

ThemePunch 概述和审查的基本网格

您可以在Search Settings下做几乎相同的事情,但用于(您猜对了)搜索。 EG 也可用作搜索结果页面,因此如果您对正常存档的方式和外观不满意,这是快速修复它们的好方法。

ThemePunch 概述和审查的基本网格

全局设置

就像听起来一样,全局设置涵盖了您的所有基础。 您可以为谁可以更改和编辑网格、字体和 JavaScript 加载方式、您为缓存做什么、从何处获取图标、为网格元素设置默认图像等设置权限。 如果它适用于整个插件而不是单个元素,例如仅皮肤,您将能够在此处找到它。 令人印象深刻的部分是您获得的控制权——许多插件没有为您提供选择使用哪种查询的选项,但 EG 让您选择get_posts()WP_Query() 是否最适合您的网站(如果您不这样做)不知道那是什么意思,就让它默认吧。这样就好了。

ThemePunch 概述和审查的基本网格

进出口

当您第一次设置插件时,您一定要查看导入/导出页面。 如果您单击“导入完整演示数据”和“导入社交媒体演示网格” ,您将拥有大量可以开始使用的初始模板。 它们也很好,所以只需单击按钮,导入/下载几乎是即时的。

ThemePunch 概述和审查的基本网格

当您导航回Ess时,导入的网格将出现在列表底部 网格。 您的新网格库将在那里与您会面。

ThemePunch 概述和审查的基本网格

埃斯。 网格示例帖子

第二个新的管理菜单选项是Ess。 网格示例帖子 为菜单标题做一个奇怪的选择,因为这是您的模板化网格项目可能存在的地方。 您会看到,此页面上列出的所有帖子实际上都是Ess下网格中包含的框的内容 网格概览。

ThemePunch 概述和审查的基本网格

当您在要显示网格的任何帖子或页面中使用从概览页面获得的短代码时,这些是弹出的单个项目。

ThemePunch 概述和审查的基本网格

为新网格创建帖子也很容易。 它的工作原理就像添加任何其他类型的新帖子一样。 只需点击此标题下的添加新按钮并设置参数。

ThemePunch 概述和审查的基本网格

使用保存的基本网格

无论您是使用模板还是自己制作模板,您都需要知道如何使用它们。 一切都围绕着 Essential Grid 的短代码。 如果您有一个想要反复使用的特定网格,则需要单击Ess下的Create New Ess Grid 管理面板中Grid的概览页面。 在里面,你可以从如何对网格中的项目进行排序、它具有什么加载动画、它的元素实际来自哪里等方面进行选择,然后你就可以给它命名了。

命名时,您还可以选择其短代码别名。 该别名仅用于使用 Essential Grid 短代码调用此特定网格。 我还选择对 CSS ID 使用相同的 ID,以防将来我想进行外部调整。

ThemePunch 概述和审查的基本网格

接下来只需将短代码放在帖子或页面的文本编辑器中。

ThemePunch 概述和审查的基本网格

瞧!

ThemePunch 概述和审查的基本网格

使用独一无二的基本网格

如果你知道你只需要在一个页面或一个帖子中显示一些东西,可能没有任何理由去设置一个全新的网格,为其内容制作新帖子作为模板,以及制作别名等等那。 您可以简单地从帖子编辑器本身生成动态短代码。 只需按下工具栏中的Essential Grid Shortcode Creator按钮。

ThemePunch 概述和审查的基本网格

然后,您将需要通过这些步骤来告诉此短代码您希望它呈现什么内容。 您可以从概览菜单中选择一种预定义的(无需手动复制/粘贴其短代码),或者您可以根据显示的选项制作自己的短代码。

ThemePunch 概述和审查的基本网格

您将浏览页面以选择您在其他地方拥有的所有相同选项(动画、布局等),当您准备好开始时,按下“生成简码”按钮。

ThemePunch 概述和审查的基本网格

如您所见,动态生成的简码要复杂得多,因为它包含有关网格本身的所有信息。

ThemePunch 概述和审查的基本网格

但是当它被渲染时,没有区别。 特别是如果您在创建过程中选择应用皮肤。

ThemePunch 概述和审查的基本网格

基本网格小部件

最后,您可以选择将您创建的任何基本网格放在小部件中。 这个比其他任何一个都更容易设置,因为它实际上是拖放式的。 进入Appearance – Widgets ,选择 Essential Grid 小部件并将其拖到您想要呈现的位置。 如果您只想在主页上使用它,您可以设置它,或者您可以选择任何预制网格。 但是,您不能像上面那样以这种方式创建动态网格。 这些必须预先生成。

ThemePunch 概述和审查的基本网格

但是,要记住的一件事是,并非所有布局在侧边栏中都看起来不错。 您的某些内容可能会以非常奇怪的方式呈现,但不要惊慌。 如果发生这种情况,只需更改设置,使其显示不同 - 可能是盒装而不是全屏,或者甚至可能是砌体而不是 Masonry。 试验直到它看起来像你想要的那样。 为此制作侧边栏特定的网格可能是个好主意。 (你可以复制你想要的那个并调整它而不是原始的。)

ThemePunch 概述和审查的基本网格

打孔字体

最后,您可以使用 Essential Grid 进行最后一点自定义。 Punch Fonts是一个在 EG 中使用 Google Fonts 的简单界面。 就是这样。

ThemePunch 概述和审查的基本网格

您可以通过按标题很好的添加新字体按钮来选择要安装的字体。 如果您按照模式中的链接访问 Google 字体,您将找到所需的参数,插件会将字体拉入您的网站。

ThemePunch 概述和审查的基本网格

当它说tp- moniker 仅供内部使用时,这仅意味着它与之前的别名基本相同。 当您将字体应用于事物时,您会看到这一点。 所以适当地命名它们。

ThemePunch 概述和审查的基本网格

最后的想法

总的来说,Essential Grid 是目前最强大、最强大的网格插件之一。 如果您曾经使用过 Slider Revolution,那么布局和图层的工作方式与此非常相似,您应该会感到宾至如归。 如果没有,当您弄清楚哪些部分适合在一起时,可能会有一些学习曲线。 但是一旦你这样做了,你将能够创建一些真正漂亮的页面。

如果您不需要这种级别的定制,您可能不想支付高价。 还有很多其他网格插件可以满足您的需求。 此外,根据您制作网格的重量,站点速度可能成为一个问题。 我的意思是,您可以出于某种原因自定义加载动画。

但是,如果既必要又正确完成,该插件就会真正发挥作用。 Essential Grid 是同类产品中排名第一的卖家是有原因的。 如果您查看评级和支持线程,ThemePunch 会快速回复和提供帮助。

所以对于 27 美元,它可能是值得的入场价格。 另外,如果您是主题设计师,您可以购买他们的扩展许可证并将其作为您自己主题的一个包。 这很酷。

你使用基本网格吗? 让我们在评论中看到您的一些创作!

文章精选图片来自 Bloomicon / shutterstock.com