公眾號排版技巧：愛彼迎同款SVG效果教程
想要讓你的公眾號內(nèi)容脫穎而出嗎？本文詳細介紹了如何利用愛彼迎風格的SVG動畫效果，為你的公眾號排版增添互動性和吸引力。掌握這些創(chuàng)新技巧，讓你的推文在眾多公眾號中脫穎而出，提高用戶參與度和閱讀體驗。
嗨嘍，各位寶子們，三兒來了，最近是不是苦于推文排版平平無奇，想做一些新的創(chuàng)意了，這不，今天我就要為大家?guī)硪环N新的SVG玩法，此玩法來自于最近我刷到的一篇愛彼迎的創(chuàng)意推文，這款效果很吸睛，適用性廣，話不多說，趕緊跟著三兒一起來復刻吧！
（來自Airbnb愛彼迎公眾號）
這是一條關于世界讀書日的推文內(nèi)容，其創(chuàng)意靈感源自諺語“讀萬卷書，行萬里路”。推文巧妙地利用了一些書名中蘊含的地名元素，自然地融入了自己品牌旗下的民宿宣傳。在設計層面，他們模仿了書籍的樣式，并加入了可反復點擊切換的SVG動畫效果，使得內(nèi)容的展現(xiàn)方式更加栩栩如生，帶給用戶一種沉浸式的閱讀享受。
此效果名稱為點擊封面圖-無限選擇器，ID：913，它可以幫助我們優(yōu)化推文排版布局，同時還能確保用戶可以反復瀏覽內(nèi)容。除了用在這種讀書日的主題外，我們還可以將其用在人物介紹、產(chǎn)品功能介紹、新品上新推薦的主題中。
點擊135編輯器頁面左側，選擇SVG編輯器進入界面，在【互動效果】中搜索ID：913，找到該效果，點擊放入編輯界面。
這里需要添加三個部分的素材，即背景圖、封面圖、切換圖。注意：這三個部分圖片需要寬高保持一致。
① 分別上傳背景圖、封面圖。
封面圖設計小tips：由于所有圖片的寬高要求一致，所以在設計封面圖部分時需要將封面圖右側的一小部分區(qū)域做成鏤空透明的狀態(tài)，以便能顯示出底部切換圖部分的標簽。
方向調(diào)整：大家可以根據(jù)自己圖片的情況設置封面圖移出的方向是左還是右。
② 接著將切換圖上傳到組件中。并為每張圖的標簽部分都添加上控制熱區(qū)。
組件全部設置完畢后，就可以選擇右上角的【導出】【同步】到公眾號后臺。
以上就是本次三兒
分享的全部內(nèi)容了
如果你還有什么想看想學的
歡迎在評論區(qū)留言哦
如果覺得還不錯
記得點贊+在看
*以上素材僅供學習交流使用，侵聯(lián)刪
立即登錄
