效果演示
我们模仿这一种
可以看到,在这一模块中,出现了两种图片比例,两种数量,
- 上面:长图,6个
- 下面:宽图,8个
为了模仿这种效果,我们可以用两个模块加上美化来实现类似的效果。
创建模块
我们需要创建两个区块,甲、乙,甲在第一个区块,乙在第二个区块。如下图:
甲
- 调用文章内容,列表样式一
- 选择文章分类
- 每行显示数量:6
- 每页显示数量:6
- 缩略图比例:3/5
- 是否显示加载更多按钮:隐藏
乙
- 调用文章内容,列表样式一
- 每行显示数量:4
- 每页显示数量:8
- 缩略图比例:4/2
- 是否显示加载更多按钮:隐藏
根据列表要求配置好模块,注意甲模块和乙模块的位置。
外观美化
.home_row_0 {margin-bottom: -6px;}
@media screen and (max-width: 768px) {
.home_row_0 .post-item-4 ul.b2_gap > li:nth-child(n+3) {display: none;}
.home_row_1 .post-item-5 ul.b2_gap > li:nth-child(n+5) {display: none;}
}
上面的代码需要放到主题根目录下的style.css底部,其中的数字,如果你放在第一个模块,那么数字为0,第二个模块,数字为1,以此类推
需要注意的是,这两个模块需要在一起,方便使用上面提供的CSS来美化外观样式。CSS中的数字代表对应模块的Class,各位看一下网页源代码就懂了。