“一鍵換景展開，奔馳這個排版怎么做的？”
前兩天給大家介紹了滬上阿姨的一種點擊移出后展開的效果，感興趣戳：《??? ?》。
隨即就有不少小伙伴問到了奔馳的一個類似效果，那今天就來看看它。
點擊試試：
*素材來自梅賽德斯-奔馳《真想不如「 真享 」》
組合：點擊左移切換圖片+展開
編號：11026（組合）
效果確實有點兒像，但差別也很明顯。
滬上阿姨的的是點擊移出圖片，而奔馳這個是點擊移出一張同時移入一張圖片，并且有背景和前景圖，效果更復雜一些，可玩性也更大一些。
同款效果使用 iPaiban Pro 黑科技編輯器的「點擊左移切換圖片+展開」組合（編號：11026）即可實現。
使用該組合也可以不上傳設置前景圖，實現不同的排版創意：
*素材來自皮可力《真想不如「 真享 」》
組合：點擊左移切換圖片+展開
編號：11026（組合）
除了左移展開，編輯器中還包含「點擊右移切換圖片+展開」、「點擊上移切換圖片+展開」、「點擊下移切換圖片+展開」組合，大家搜索相關關鍵詞就能看到。
下面以梅賽德斯-奔馳的案例為例，一起來看看這個效果是如何制作的吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組合：點擊左移切換圖片+展開
編號：11026（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組合」按鈕，在「花樣展開」分類中找到「點擊左移切換圖片+展開」組合，或者直接在搜索框中搜索組合編號11026，點擊選擇。
第2步：進入組合編輯模式
點擊「點擊此處配置」，進入組合編輯模式。
在組合編輯模式中，分為展開前和展開后兩塊設置區域。
第3步：上傳「展開前」圖片
點擊「展開前」區域，在右側點擊4個「換圖」按鈕，分別上傳準備好的「點擊前」、「點擊后」、「背景圖」和「前景圖」的圖片。4種圖片尺寸需保持一致。
第4步：設置「展開后」內容
「展開后」的內容支持嵌套各種組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：
第5步：設置參數
點擊右側紅色小三角，可以設置切換時長和展開時長。
「切換時長」指點擊后圖片移動切換的時間。
「展開時長」即圖文全部展開花費的時長。
如果預覽效果發現內容沒有完全展開或者展開過長，可以通過「加減展開高度（px）」進行調整，輸入負數減小展開高度。
第6步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」逐步退出組合編輯模式回到編輯器主頁面。
繼續點擊最右側「預覽草稿」，效果滿意后接著點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）