使用The Grid插件设置网格布局

相信许多人刚刚接触X主题的时候会有这种感觉,为什么这个主题的设置只有这些,达不到演示站中的效果,主题太简单了….等等,作为一个使用了X主题有一段时间的用户,其实我想说这些都是可以的,可能我们都习惯了使用主题中的选项来控制网页的布局,而X Theme中除了在主题选项中有设置功能外,其赠送的高级插件也会对网站的布局起很关键的作用,可以说有时插件甚至比主题内置功能更加灵活好用,今天我们就介绍下X Theme中的The Grid插件,并用其实现网格布局。

The Grid插件

添加一个Grid

安装好Grid插件之后,先添加一个Grid,这里的名字可以随便写,shortcode中的代码是引用的,当你想在文章或者页面中使用这个Grid,在编辑器中粘贴这段代码即可

 

创建一个Grid

设置Grid内容

Grid内容这里有很多的选项,可以从站点、Instagram、youtube多种平台等添加,这里主要有2个选项

Item Number:设置初始显示的文章(图片数量)

Post Types:设置类型,比如这里你可以设置文章类型,那么网格显示文章缩略图,如果你选择媒体库,则显示为类似画廊的形式

Grid选择内容源

设置默认缩略图和图片格式

在Media中需要提到的一项是Default Image,这个选项可以为你提供一个默认的缩略图,防止有些文章忘记设置特色图片导致空缺,下面的Image Format为调整图片尺寸

Grid设置默认缩略图

 

设置网格样式

Grid是比较关键的一项,它决定了你的网格布局样式以及在各种屏幕下的效果

Grid Type:网格类型,比如整体一样大的格子,或者类似瀑布流的布局,调整型的布局,根据自己的喜好选择

Items:这个一般在Grid类型选择,当格子一样大小时,它决定了每个网格的图片宽高比例

Columns/Rows:不同尺寸下网格的列数,这个建议通过预览,观察不同尺寸屏幕下的表现决定

The Grid设置网格布局

 

设置筛选标签 Filter/Sort

在演示页面中我们可以看到分类切换的特效,其实就是通过该选项设置的

支持通过分类目录或者标签进行筛选,需要哪些可以直接拖到右边的筛选器中,在页面中会自动分类

The grid设置筛选器

 

设置网格部件位置

这个感觉没啥设置的,就那几个选项,筛选器、搜索框、排序、加载按钮,根据自己的需要布局,这个是可以调整成居中的

The grid添加部件

 

设置网格皮肤Skins

这个选项设置网格的样子,不同的皮肤会有不同的动画、样式等,有些是有幻灯片和点赞的,根据自己的需要来,这个功能很简单而且非常实用,貌似这个插件也是可以自己制作皮肤的,因为我感觉自带的20多种已经足够了,就没有研究,有兴趣的朋友可以看下在Grid插件菜单里面的Skin Builder。

The grid设置皮肤

 

设置网格加载动画

Grid布局总共2种动画,一种是鼠标悬浮的动画,在上面的Skin中设置,然后就是网格图片加载和切换时的动画,由Animation设置,几十种动画可以选择,可调整速度

The grid设置动画

 

Ajax设置

使用网格布局经常会使用Ajax方式加载更多,该选项就是专门设置加载的一些参数,比如设置是鼠标点击或者滚轮,可以自定义加载的文字提示,Load More Item Number 为每次加载的数量,如果想要加载前显示等待图像,可以将Pre-loader开启

the grid ajax加载设置

 

以上就是使用The Grid创建一个网格布局的方法,是不是非常的强大,当然这里面的选项也比较多,不过很多都不是必须要设置的,所以说熟悉了以后还是非常简单的,只需要简单的改几个参数,你就能创造出各种各样的网格布局。

 


【AD】BandwagonHost:$92.30/年/2核/2G内存/40G SSD/1T流量/1Gbps/香港CMI/大阪软银/洛杉矶CN2 GIA

【AD】美国洛杉矶CN2 VPS/香港CN2 VPS/日本CN2 VPS推荐,延迟低、稳定性高、免费备份_搬瓦工vps