爱马仕的这种双向滑动排版，详细教程来了！
左滑和右滑已经是品牌公众号中非常常见的SVG交互了，那如果滑动的第一屏图片既能左滑也能右滑呢？
我们来体验下「Melissa梅丽莎」一篇浓人和淡人创意图文的滑动：
*素材来自Melissa梅丽莎官方《浓淡测试题｜你是哪种时髦精？》
组合：左滑组合(自动对齐)
编号：10249（组合）
组合：右滑组合(自动对齐)
编号：10294（组合）
组件：超链接-图片(默认角标)
编号：10034（组件）
这种有趣的双向滑动效果，非常适合用作两者对比相关的创意，比如i人和e人、浓人和淡人、过去和将来等。
左滑或右滑后的图片也可以设置各种交互，前面是超链接，我们也可以像「HERMES爱马仕」这样设置点击跳转视频号：
*素材来自HERMES《如何创造爱马仕橙？》
组合：左滑组合(自动对齐)
编号：10249（组合）
组合：右滑组合(自动对齐)
编号：10294（组合）
组件：视频号-图片
编号：110228（组件）
像「施耐德电气」这样，将滑动的第一屏图片设计为明显区分的两列，对比效果更加明显：
*素材来自施耐德电气《Power Story | 点击攻略，开启2022 Easy模式》
组合：左滑组合(自动对齐)
编号：10249（组合）
组合：右滑组合(自动对齐)
编号：10294（组合）
组件：超链接-图片(无角标)
编号：10033（组件）
双向滑动效果使用 iPaiban Pro 黑科技编辑器可轻松实现，制作诀窍就是左滑组合嵌套右滑组合，再在组合中嵌套需要的效果组件。
有一点要注意的是，无论是左滑组合还是右滑组合，选择可以自动对齐的效果更好一些。
以「Melissa梅丽莎官方」的效果为例，一起看下如何制作的吧
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com组合：左滑组合(自动对齐)
编号：10249（组合）
组合：右滑组合(自动对齐)
编号：10294（组合）
组件：超链接-图片(默认角标)
编号：10034（组件）
第1步：选择左滑组合 登录 iPaiban Pro 编辑器后，点击编辑器左侧「组合」按钮，在「滑动组合」分类中找到「左滑组合(自动对齐)」组合，或者在「组合」中直接搜索编号10249，点击选择。
第2步：进入组合编辑模式
点击「编辑组合」，进入组合编辑模式。
在组合编辑模式中，分为「背景图」和「滑动布局」两块设置区域。
组合默认有两个组件位，每一个组件位相当于一个滑动页，如果想要添加滑动页，点击「添加组件位」即可。
第3步：设置左图和中图 ①在「滑动组合」分类中找到「右滑组合(自动对齐)」组合，或者在「组合」中直接搜索编号10294，拖动该组合到滑动布局的第1个组件位中。
如果把双向滑动的三张图片按照位置分为左、中、右三张图片的话，那么右滑组合第1个组件位上传的图片则为左图，第2个组件位上传的图片为中图，左滑组合的第2个组件位上传的图片为右图。
点击「点击此处配置」，进入右滑组合编辑模式。
我们可以拖动左侧任意组件到组件位中，然后再对组件进行编辑。这里我们需要两个组件：
组件：超链接-图片(默认角标)
编号：10034（组件）
组件：全能无缝图
编号：10028（组件）
②如图拖动「超链接-图片(默认角标)」组件至右滑组合第1个组件位中，拖动「全能无缝图」组件至右滑组合第2个组件位中。
③点击「超链接-图片(默认角标)」组件进行编辑，分别上传相应的左图和超链接。
点击「全能无缝图」组件进行编辑，上传相应的中图。
第4步：设置右图
编辑完成后点击左上角保存并「返回上一级」，点击编辑器左侧「组件」按钮，在「超链接」分类中找到「超链接-图片(默认角标)」组件，或者在「组件」中直接搜索编号10034。
拖拽「超链接-图片(默认角标)」组件到滑动布局的第2个组件位中。
接着点击「换图」上传图片并添加「跳转链接」。
第5步：上传背景图
滑动组合还提供一个背景图的设置，点击红色小三角符号就能看到。
这里根据所需效果，两个滑动组合中都上传滑动的背景图。
第6步：导入公众号后台
内容编辑完毕后，点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。
继续点击最右侧「预览草稿」，效果满意后接着点击「同步至微信后台」就可以了。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）