公眾號推文創意霜降SVG排版教程
探索秋季最后一個節氣的創新表達方式！本文介紹了如何使用SVG技術打造沉浸式霜降推文，通過點擊紅葉展開內容，引領讀者體驗成都周邊紅葉觀賞點。結合SVG交互效果與橫屏設計，為讀者帶來全新的視覺享受。立即閱讀，獲取創意靈感，讓你的新媒體內容脫穎而出！
“一夜西風緊，葉落疊成詩。霜伴紅葉， 是對秋最浪漫的告別。”
還有一周時間我們就要迎來秋季的最后一個節氣——霜降了，寶子們是否已經開始準備推文了呢？以往大家可能習慣用傳統的圖文形式來展示，但看起來中規中矩，所以今天三兒想為大家介紹一種新的形式，用SVG打造有新意的霜降排版效果。快跟著三兒一起來獲取靈感吧！
這是來自成都發布推出的一篇充滿創意的霜降推文。該推文巧妙運用了SVG交互效果與橫屏設計，精心向讀者推薦了成都周邊觀賞紅葉的絕佳景點。
整篇推文的排版設計頗為巧妙，通過讓讀者點擊紅葉的方式展開全文內容，引領讀者隨著紅葉緩緩飄落的軌跡，逐步瀏覽各個景點。相較于傳統的平鋪直敘式的圖片展示，這種新穎的方式更能捕獲用戶的注意力，使他們能夠沉浸其中，完整地閱讀整篇推文。
本文用到的SVG效果為點擊展開時上層物體移動，ID：130。
在135編輯器頁面左側選擇【SVG編輯器】——【進入SVG編輯器】，在互動效果中搜索ID:130，將該效果放在編輯頁面。
該組件需要添加3個部分的圖片素材，分別是展開首圖、小元素圖片、展開后的圖片。
這里需要注意的是小元素圖片部分在設計時，需要做成png格式的透明圖。同時，展開首圖和展開后圖片這兩個部分的圖片素材寬度需要保持一致。
①設置小元素的觸發區：拖拽紅色區域的位置，放在元素圖的上方即可。
② 添加展開后內容部分的圖片：點擊【編輯展開內容】，在這里選擇無縫圖組件，可以在效果中心搜索無縫圖，選擇批量無縫圖組件，ID：3。將展開后需要用到的圖片添加到組件中去。
點擊【展開動畫時長】，設置該效果展示的時間，數字越大，組件展開的速度越慢，數字越小，組件展開的速度越快。
組件設置完成后，點擊右上角的【同步】【導出】，即可導入到公眾號后臺。
以上就是三兒分享的全部內容了
如果覺得還不錯
記得點贊+在看哦
如果你還有什么想看想學的
歡迎在評論區留言哦
*以上所涉及的素材僅供學習交流使用，侵聯刪
立即登錄
