展开里嵌套情书展开,莫斯利安的这篇母亲节排版教程来了!

小黄人科技

发布于:2026-05-08

摘要:

五一期间和妈妈好好相处一下了吗?


马上就是母亲节,母亲节SVG交互图文案例戳:五一之后的母亲节,案例已备好!


点击展开,在SVG交互排版中早已是大家耳熟能详的效果。今天给大家推荐莫斯利安的一种更为高级的展开方式——嵌套式展开,来表达对母亲的爱。


下面我们一起来看下:


 

                                
                                
                                
                                
                                
                                
                                
                                


*素材来自莫斯利安MOMCHILOVTSI母亲节丨给妈妈的三行情书

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

编号:11848(组合)

组合:点击消失+展开

编号:11186(组合)

点击展开后,里面还有点击展开效果,这就是嵌套式展开。


需要注意的是,嵌套式展开与其他单次展开不同,需要使用编辑器「嵌套展开」分类中的展开组合制作。其他分类中的展开,仅支持嵌套非展开类效果,不支持嵌套展开。



以莫斯利安的排版为例,一起来看看如何实现吧。


详细教程:


工具:i排版SVG编辑器,网址:SVG.iPaiban.com

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

编号:11848(组合)

组合:点击消失+展开

编号:11186(组合)


第1步:选择组合


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



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


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



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



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


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



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


图片


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


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


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


图片


选择什么组件/组合大家根据自己想要的交互效果来定,这里案例中使用了「批量无缝图」组件和「点击消失+展开(设置触发区域)」组合,放置如下所示:



第5步:编辑二级展开


在展开后的内容中拖入相关组件/组合后,接着上传素材即可。其中「点击消失+展开」组合还是按照2、3、4步操作。



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


每一个展开组合至少可以调整3个参数:切换时长、展开时长和展开高度,点击空白位置可以看到。



展开高度一般无需调整,但当大家在手机上预览时,如果发现展开后有多余的空白或者没有展现出全部内容,这时候就可以通过调整展开高度使其精准展开。


第7步:导入公众号后台


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



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



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


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




制作SVG交互图文认准i排版SVG编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端谷歌浏览器打开,即可注册,编辑器所有组件/组合现已全部支持免费试用了。

新用户在「新手礼包」可领取3天企业标准版会员免费商用,以及22个常用必备组件的大礼包(1年)。随礼包附赠千元优惠券,每单最高立降500元。 

图片

● SVG交互排版👇🏻

 





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

 


图片

图片

                            
图片