愛馬仕的這種雙向滑動排版，詳細教程來了！
左滑和右滑已經是品牌公眾號中非常常見的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條）