公众号弹弹球效果签名区制作教程：用 i 排版编辑器实现趣味底部交互

给大家看个效果，来自POMELLATO宝曼兰朵：

 

*素材来自POMELLATO宝曼兰朵《当代表达再绎黄金年代》。因受账号外链跳转限制，小红书、微博链接换为了原文链接。

这种弹弹球式文章底部签名区（媒体矩阵），是不是很有意思，今天就教大家如何制作

关于文章签名区的介绍，其实已经发过不少文章了。加上这篇，相信几乎可以解决大家关于签名区排版的所有问题啦。

不知道签名区有哪些样式？看这篇：《公众号图文底部签名区样式大全》

不知道宫格式的签名区怎么排版？看这篇：宝马、奔驰等品牌号的底部签名区，一次教会你！

每次排版不知道怎样复用之前的签名区排版？看这篇：“图文底部签名区（媒体矩阵），怎么可以快速复用之前的啊？”

那开头弹弹球式签名区是怎么制作的？

宝曼兰朵这个签名区分为四个宫格部分，我们在 iPaiban Pro 黑科技编辑器选择两个「二列布局」组合，每个宫格中嵌套对应的效果组件然后上传图片就可以。

但宫格与宫格之间是互相切分的，如何将四个宫格的动效连贯起来呢？很简单，最后再以「遮罩」的形式加上一张完整的GIF动图即可。

下面一起看下详细排版教程吧。

详细教程：

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

组合：二列布局（编号：10144）

组件：超链接-图片(无角标)（编号：10033）

组件：全能无缝图（编号：10028）

组件：小程序-图片(无角标)（编号：10015）

组件：遮罩（编号：10829）

第1步：选择组合

登录 iPaiban Pro 编辑器后，点击编辑器左侧「组合」按钮，在「多列布局」分类中找到「二列布局」组合，或者直接在组合中搜索编号10144，点击选择。

第2步：进入组合编辑模式

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

第3步：设置宫格内容

根据需求，我们在左侧「组件」中找到需要的效果组件，然后拖动嵌套到宫格布局中。案例中对应的是「超链接-图片(无角标)」组件（编号：10033）。

然后在右侧上传切分好的静态图片，并填写对应参数。两个宫格的图片尺寸比例需保持一致。

第4步：再次设置「多列布局」

内容编辑完毕后，我们点击左上角「保存并退出」编辑模式来到首页。

接着重复第1-3步，排版剩余宫格部分。

*注意，如果我们宫格中需设置长按识别二维码的效果，为了更方便用户长按识别扫码，这里的二维码图案可以大些（如下图），即便与其他宫格内容风格不符也无妨，因为下一步会盖住。

第5步：设置遮罩动图

宫格内容编辑完毕后来到首页。

在左侧「组件」中找到「遮罩」组件（编号：10829），点击选择。

继续点击右侧「换图」按钮上传完整的GIF动图。GIF图将会自动覆盖在前面的宫格之上。

当然，这里的GIF图不一定是和案例一样的弹弹球效果，没有创意限制。

第6步：导入公众号后台

点击最右侧「预览草稿」，效果满意后接着点击「同步至微信后台」就可以了。

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

如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。

● SVG 黑科技交互排版👇🏻

 

iPaiban 团队可提供运营服务、创意策划、多种风格设计、SVG交互开发等服务，如需定制，请添加玉兔微信（ID：playhudong15）沟通咨询。