??? ?
很多品牌的圖文排版，每次必用「點擊展開」的交互效果。
但每次「點擊展開」的效果并不完全相同。
這次向大家介紹一種看似簡單，但不一樣的花樣展開效果。來看看下面這些案例感受一下吧。
點擊向上移出切換圖片后展開：
*素材來自滬上阿姨《新品！維C天花板「超頂刺梨」登場！》
組合：點擊向上移出切換圖片+展開(有觸發區)
編號：10995（組合）
點擊向下移出切換圖片后展開：
*素材來自深藍汽車DEEPAL《深藍汽車上海車展首秀，都「秀」了些什么》
組合：點擊向下移出切換圖片+展開(有觸發區)
編號：10996（組合）
點擊向左、向右移出切換圖片后展開：
*素材來自華洛芙Wellendorff《因愛轉動》
組合：點擊向左移出切換圖片+展開(有觸發區)
編號：10993（組合）
組合：點擊向右移出切換圖片+展開(有觸發區)
編號：10994（組合）
點擊指定觸發區，原本的圖片可以從上、下、左、右四個方向移出，切換新的圖片并自動展開剩余的內容。
上述案例效果使用 iPaiban Pro 黑科技編輯器的對應組合即可實現，相較于常見的點擊切換圖片，這種點擊移出切換圖片的方式，給人一種揭示重大消息或內容的感覺。
四個方向的制作流程一致，均支持設置點擊觸發區域、圖片的移出切換時長和圖文的展開時長。
以第1個滬上阿姨的案例為例，一起來看看這個效果是如何制作的吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組合：點擊向上移出切換圖片+展開(有觸發區)
編號：10995（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組合」按鈕，在「花樣展開」-「切換圖片+展開」分類中找到「點擊向上移出切換圖片+展開(有觸發區)」組合，或者直接在搜索框中搜索組合編號10995，點擊選擇。
第2步：進入組合編輯模式
點擊「點擊此處配置」，進入組合編輯模式。
在組合編輯模式中，分為展開前和展開后兩塊設置區域。
第3步：設置「展開前」內容
①上傳圖片：點擊「展開前」區域，在右側點擊2個「換圖」按鈕，分別上傳準備好的「點擊前」和「點擊后」的圖片。兩種圖片尺寸需保持一致。
②調整觸發區域：雙擊「展開前」區域圖片顯示觸發區域，拖動紅色色塊調整觸發區域。（觸發區不建議完全貼近圖片邊緣，否則可能影響觸發）
第4步：設置「展開后」內容
「展開后」的內容支持嵌套各種組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：
第5步：設置參數
點擊右側紅色小三角，可以設置切換時長和展開時長。
「切換時長」指點擊后圖片移出切換的時間。「展開時長」即圖文全部展開花費的時長。
如果預覽效果發現內容沒有完全展開或者展開過長，可以通過「加減展開高度（px）」進行調整，輸入負數減小展開高度。
第6步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」逐步退出組合編輯模式回到編輯器主頁面。
繼續點擊最右側「預覽草稿」，效果滿意后接著點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）