高考倒计时，每一份祝福都承载着沉甸甸的期许。

但普通的文字海报难免单薄，如何让品牌祝福既有趣又有仪式感？

如果抽签加上展开，可加的内容就更多。可以试试这个荣威汽车的这个排版——点击抽签，随即展开：

 

用户轻点屏幕，一张张好运签卡片快速轮播切换，接着点击完成抽签，随之展开的是完整的祝福图文、品牌信息或福利彩蛋。整个过程像打开一份专属好运，仪式感拉满。

如果想让用户一开始就看到卡片快速轮播，效果也不错：

 

直接看到轮播的效果，排版教程可以看这里：抽个签还能展开更多内容，元宵节可以这样玩！

前面的荣威汽车同款效果，需要组合间嵌套排版实现，一起实现教程吧。

详细教程：

工具：i排版SVG编辑器，网址：SVG.iPaiban.com

组合：点击消失+展开(可嵌套展开,有触发区)

编号：11848（组合）

组合：新年签-自动轮播,点击停止+展开

编号：11449（组合）

第1步：选择组合

登录i排版SVG编辑器后，点击编辑器右侧「组合」按钮，在「嵌套展开」分类中找到「点击消失+展开(可嵌套展开,有触发区)」组合，或者直接在搜索框中搜索组件编号11848，点击选择。

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

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

在组合编辑模式中，我们需要设置展开前和展开后的内容。

第3步：设置展开前的内容

①点击展开前区域，然后在右侧点击「换图」上传图片。

②双击展开前区域，拖拽调整点击触发区。

第4步：设置展开后的内容

设置展开后的内容，总共分为3步：添加组件位-拖动组件/组合到组件位中-上传素材。

每需要一个交互效果按照这3步走就可以，动图演示：

选择什么组件/组合大家根据自己想要的交互效果来定，这里案例中使用了「新年签-自动轮播,点击停止+展开」组合，放置如下所示：

第5步：编辑二级展开

在展开后的内容中，点击「新年签-自动轮播,点击停止+展开」的「编辑组合」按钮进入二级展开，还是按照2、3、4步操作即可。

第6步：调整展开效果的参数

每一个展开组合调整效果参数，如切换时长、展开时长、展开高度等。点击页面空白位置在右侧可以看到。

本文案例中，如果发现展开前没有点击就露出展开后的内容，这时候就可以通过调整展开高度使其正常。

第7步：导入公众号后台

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

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

使用同步功能不用频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码预览在公众号的效果。

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

● SVG交互排版👇🏻

 

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