“就像在图文里读书, Airbnb爱彼迎这篇排版怎么做啊?”

i排版SVG编辑器

发布于:2026-04-22

摘要:

这两年国家除了鼓励大家健身,还有一件事就是读书。


马上4月23日世界读书日了,品牌公众号图文如何与读书日结合,请看这里:《2026世界读书日SVG交互图文案例合集》


今天我们从中拿出爱彼迎的一篇看一下。


这个排版用于读书日的创意再适合不过,点击试试:


 


                                                        
                                                
                                                




*素材来Airbnb爱彼迎读万卷书,行万里路,在这儿合体了

组件:点击左移切换组合

编号:11796(组件)

组件:点击-无限选择切换图片

编号:11765(组件)

整体是书籍样式的设计,点击一下,封面向左移出,继续点击右侧标签可来回切换书籍内容查看。


单独的来回选择切换书籍内容查看,我们可以使用i排版SVG编辑器的「点击-无限选择切换图片」组件实现(教程),那最开始点击左移的效果怎么弄?


借助一个组合即可搞定,下面一起看下详细教程吧。


详细教程:


工具:iPaiban Pro 黑科技编辑器,网址:SVG.iPaiban.com

组合:点击左移切换组合

编号:11796(组合)

组件:点击-无限选择切换图片

编号:11765(组件)


第1步:选择组合


登录i排版SVG编辑器后,点击编辑器左侧「组合」按钮,在「点击切换」分类中找到「点击左移切换组合」,或者在「组合」中直接搜索编号11796,点击选择。



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


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


在组合编辑模式中,分为「左移前」、「左移后」两块设置区域。



第3步:设置「左移前」图片


击右侧第1个「换图」按钮上传点击前图片。本文要实现的效果无需上传左移首屏内容图片,点击清空一下即可。



*当想要点击后封面左移,左移后的内容像跟着移入进来的效果时,才需上传一张左移首屏内容图片。


②在「左移前」位置双击图片,调出触发区域调整窗口,拖动红框调整触发区位置和大小。



第4步:设置「左移后」内容


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


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


这里我们拖动一个「点击-无限选择切换图片」组件到组件位中,并上传图片。如下所示:



第5步:调整效果参数


点击页面空白处,在右侧可设置「左移时长」。



本文要实现的效果因为左移后内容与左移前内容高度一致,无需设置「展开时长」和「加减展开高度」。


第6步:导入公众号后台


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


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



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


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




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

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

图片

● SVG交互排版👇🏻

 





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

 


图片

图片

                            
图片