走心但「不烧心」!DR这个点击擦除后自动展开怎么做?

i排版编辑器

发布于:2026-10-14

摘要:

 




切换图片的方式有很多,如果你想要一种高级又不能复杂的,第一个想到的效果是:


擦除切换。


点击擦除切换再配合上展开效果,简单高级同时又能装入足够的内容。


来看看DR珠宝的这个排版创意:


 



*素材来自DR珠宝郑重声明:DR已正式起诉售假商家

组合:点击-向上擦除切换+自动展开

编号:11544(组合)

DR用直击心灵的文案描述用户购买假冒产品的「至暗」心理,点击图片,文案以擦除切换的形式被划掉,继而展开购买真产品的「高光」时刻,两者形成巧妙对比,也完成了一次成功的品牌宣传。


擦除可用于划掉文字创意,也可用于从模糊到清晰的切换,点击试试:


 



*素材来自LEXUS雷克萨斯认证二手车3步get爱车焕新秘诀!

组合:点击-向上擦除切换+自动展开

编号:11544(组合)

还能用作什么创意,就交给大家啦!下面教大家如何实现以上排版效果,一起看一下详细教程吧。



详细教程:


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

组合:点击-向上擦除切换+自动展开

编号:11544(组合)


第1步:选择组合


登录i排版SVG编辑器后,点击编辑器左侧「组合」按钮,在「花样展开」分类中找到「点击-向上擦除切换+自动展开」组合,或者直接在搜索框中搜索组合编号11544,点击选择。



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


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



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



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


①点击「展开前」区域,接着点击右侧两个「换图」按钮,分别上传单击前和单机后图片。两张图片尺寸需保持一致。



②调整切换动画的时长。一般保持默认即可。



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


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


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

 


第5步:设置动画参数


点击页面空白处,在右侧设置展开时长。



展开高度一般无需调整,但当大家在手机上预览时,如果发现展开后有多余的空白或者没有展现出全部内容,可以通过「加减展开高度」使其恰好展开。填写负数为减少展开高度,填写正数为增加展开高度。


第6步:导入公众号后台


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



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



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

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




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

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


图片

● SVG交互排版👇🏻

 





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

 


图片

图片

                            
图片