GQ《红了》自动层层展开效果炸裂，我们又推出2种升级模板！

原创赞收藏评论

举报 2022-12-02

扫描,分享朋友圈

之前给大家写过GQ《红了！》同款效果的教程，感兴趣的戳：《GQ《红了》同款自动层层展开，用编辑器也能做啦！》

截至目前已经有许多品牌通过教程中的组件制作出了想要的交互图文，最终推送后的效果也是不错，有的甚至相当炸裂。
比如新东方的《瞧，这很新东方》，推送当天阅读量就达到了10W+，是前一篇阅读量的30多倍，成为同账号历史上阅读量最高的一条；

中国农业大学的《爱你！》，阅读量和点赞在看数比日常图文都翻了10倍多。

教程中用到的组件，层层展开的内容只能是图片，当然也包括GIF，但在越来越多的小伙伴使用过程中，我们也听到了更多的升级需求。

最多的两条就是最后一次展开中能否嵌套其他交互以及开头能否让用户点击后再开始自动展开。
现在它们来了！
在 iPaiban Pro 的「组合」-「花样展开」-「层层展开」分类中，最新上线了两个组合，分别是「自动层层展开(最后一层可嵌套)」（编号：11373）和「点击+自动层层展开(最后一层可嵌套)」（编号：11375）。

正如名称中提到的一样，它们在最后1次展开中都可以嵌套其他交互效果，比如点击切换、滑动、音视频、小程序、签名等，而后者支持点击后再自动展开。下面是简单制作的一个 Demo，体验下：

组合：点击+自动层层展开(最后一层可嵌套)

编号‍：11375

在接下来的时间里会有圣诞、元旦等接二连三的节日热点，大家可以用起来了。很快 iPaiban Pro 还将会上线新的层层展开效果组件，可以期待一下。
这两个组合的使用方法基本一样，咱们以制作上方 Demo 为例，一起看下「点击+自动层层展开(最后一层可嵌套)」组合的教程：

详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com

组合：点击+自动层层展开(最后一层可嵌套)

编号：11375（组合）

第1步：选择组合

点击「点击此处配置」，进入组合编辑模式。

在组合编辑模式中，分为展开前和展开后两块设置区域。

第3步：设置「展开前」内容

注意，这里的「展开前」内容包括点击第一张图片和除了最后一次展开的图片。

①点击「展开前」区域，在右侧点击「+」号上传第一张图片和除了最后一次展开的图片。每一张图片系统会自动识别展开一次，展开高度由图片高度决定。

如果发现图片顺序错误，可上下拖动图片进行调整。

②在下方调整每张图片的停留时间以及每次展开的动画时间。

③注意根据自己的素材情况在下方选择图片背景是「不透明」or「透明」的，否则展开效果可能出现问题。

④双击「展开前」的区域，调整点击展开的触发区。

第4步：设置「展开后」内容

这里的「展开后」内容指最后一次展开的内容。

该部分支持嵌套各种组件，需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。

添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作：

本文 Demo 使用的是「点击弹出-弹出图片(设置多个触发区)」组件（编号：10100）。设置完毕后点击右侧红色小三角，单独设置最后一次展开的时长：

第5步：导入公众号后台

内容编辑完毕后，点击左上角「保存并退出」逐步退出组合编辑模式回到编辑器主页面。

先点击最右侧「预览草稿」，然后微信扫码预览效果，效果满意后接着点击「同步至微信后台」同步到自己的公众号就可以了。

使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。

如需局部导入可参考：《iPaiban Pro小助手v2.0安装和使用教程》

制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
新用户在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。