福特中國的高級三層穿透式滑動圖文,教程來了!
都說三層穿透式上滑排版太好用了!
這種排版效果既能通過圖片間的鏤空、透明度設計,營造出很強的層次感,又能通過中間固定不動的元素設計將圖文主題貫穿全文。
*素材來自局部氣候調查組的《月亮看見了》
組件:三層滑動-上滑(多張)
編號:10803(組件)
在2022年就用局部氣候調查組的一篇圖文給大家出過教程,而現在,大家已經不再滿足于滑動時只是單純的圖片,還想加入豐富的交互效果,那怎么辦?
比如福特中國這篇在上滑中加入了點擊切換、視頻號和小程序:
*素材來自福特中國《雪季限定 建議速沖》
組合:三層上滑組合
編號:11761(組合)
這就要用到 IPaiban Pro 的「三層上滑組合」了,使用該組合在上滑的前景中嵌套需要組件即可實現福特中國的排版效果。
類似的排版創意還有MLB品牌這篇,在穿插滑動過程中加入了小程序圖片,上滑試試:
*素材來自MLB品牌《今年怎么走花路》
組合:三層上滑組合
編號:11761(組合)
以福特中國的排版為例,一起來看看是如何制作的吧。
詳細教程:
工具:iPaiban Pro 黑科技編輯器,網址:SVG.iPaiban.com
組合:三層上滑組合
編號:11761(組合)
第1步:選擇組合
登錄 iPaiban Pro 編輯器后,點擊編輯器左側「組合」按鈕,在「滑動組合」分類中找到「三層上滑組合」,或者在「組合」中直接搜索編號11761,點擊選擇。
第2步:進入組合編輯模式
點擊「編輯組合」,進入組合編輯模式。
在組合編輯模式中,分為「中間圖和背景圖」與「前景內容」兩塊設置區域。
第3步:上傳中間層和背景層圖片
點擊「中間圖和背景圖」區域,在右側繼續點擊「換圖」按鈕上傳1張中間層圖片,點擊「+」號批量上傳多張背景層圖片。
中間層圖片應為鏤空式,可以露出背景層圖片。整個滑動顯示畫面大小由中間層圖片尺寸決定。
第4步:設置前景層內容
「前景內容」不局限于單純的無縫圖,還可以嵌套使用各種交互效果組件。
需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中,然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片,每需要一個樣式就按照這3步操作:
注意,前景內容的總高度需等于背景圖片的總高度。前景內容中的圖片應有一定的鏤空或透明度設計,以便露出后面的中間層和背景層圖片,才能實現在滑動中穿插的效果。
第5步:導入公眾號后臺
內容編輯完畢后,點擊左上角「保存并退出」退出組合編輯模式回到編輯器主頁面。
繼續點擊最右側「預覽草稿」,效果滿意后接著點擊「同步至微信后臺」就可以了。
轉載請在文章開頭和結尾顯眼處標注:作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載,授權事宜請聯系作者本人,侵權必究。
本文禁止轉載,侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權,侵權必究。
評論
評論
推薦評論
暫無評論哦,快來評論一下吧!
全部評論(0條)