仿致美化长图+宽图排版 – B2美化

仿致美化长图+宽图排版的WordPress美化教程

致美化是使用B2主题的,在美化这一方面,算得上是深度美化了,有很多有趣的地方我们可以来学习学习。

效果演示

我们模仿这一种

仿致美化长图+宽图排版 - B2美化

可以看到,在这一模块中,出现了两种图片比例,两种数量,

  • 上面:长图,6个
  • 下面:宽图,8个

为了模仿这种效果,我们可以用两个模块加上美化来实现类似的效果。

创建模块

我们需要创建两个区块,甲、乙,甲在第一个区块,乙在第二个区块。如下图:

仿致美化长图+宽图排版 - B2美化

  • 调用文章内容,列表样式一
  • 选择文章分类
  • 每行显示数量: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;}
}

需要注意的是,这两个模块需要在一起,方便使用上面提供的CSS来美化外观样式。CSS中的数字代表对应模块的Class,各位看一下网页源代码就懂了。

给TA打赏
共{{data.count}}人
人已打赏
其他源码

WordPress 主题 B2 幻灯片美化滑动视差模块

2020-10-13 7:19:11

其他源码

仿致美化特色模块 - B2主题WordPress 美化

2020-10-13 7:30:40

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索