这两年国家除了鼓励大家健身,还有一件事就是读书。
马上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小助手安装和使用教程》中导入功能的「导入代码」部分。
























