抓住那个会飞的粽子!这篇阅读暴涨5倍的端午节排版怎么做?

i排版编辑器

发布于:2026-06-03

摘要:

端午将至,提到端午节,肯定离不开粽子。


上海烟草2024年的一篇端午节推文,用一个简洁高效的交互效果,就实现了隆「粽」登场


点击那个飞来的粽子试试:


 




*素材来自上海烟草浓情端午|艾草飘香,“粽”享一夏,快来迎接这波节日福利吧!

组合:点击移动元素后放大消失+展开

编号:11833(组合)

这篇浓情端午|艾草飘香,“粽”享一夏,快来迎接这波节日福利吧!推文是上海烟草账号2024年阅读量第二高的文章,第一高的是一篇新年活动文章。


点击粽子后,粽子图片放大消失,接着图文展开,这样的视觉变化十分吸引眼球。


飞来的物品换成流星、雪花、红包等,便是不同主题的创意图文,飞入方向也可以选择,适用性高。


这个是换成雪花从左上飞来的效果:


 



*素材来自i排版编辑器2023年的最后1片「雪花」,抓住它!

组合:点击移动元素后放大消失+展开

编号:11833(组合)

效果看着高级,但实现起来并不难,一起来看看如何制作的吧。


详细教程:


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

组合:点击移动元素后放大消失+展开

编号:11833(组合)


第1步:选择组合


登录i排版SVG编辑器后,点击编辑器右侧「组合」按钮,在「花样展开」分类中找到「点击移动元素后放大消失+展开」组合,或者直接在搜索框中搜索组合编号11833,点击选择。



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


点击「编辑组合」,进入组合编辑模式。



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



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


①上传图片:点击「展开前」区域,在右侧点击2个「换图」按钮,分别上传准备好的背景图和移动图。移动图尺寸无需和背景图尺寸一致。



②调整效果参数:根据需求调整移动元素的动画参数。



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


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


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



第5步:设置效果参数


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



如果预览效果发现内容没有完全展开或者展开过长,可以通过「加减展开高度」进行调整,输入负数减小展开高度。


第6步:导入公众号后台


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



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



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


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




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

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

图片

● SVG交互排版👇🏻

 





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

 


图片

图片

                            
图片