如何復制公眾號SVG排版圖文?
在知乎上有一個瀏覽量非常高的問題:如何復制公眾號SVG排版文章?
看了下幾乎沒有答到點上的,這個問題也有許多小伙伴問過我,今天來給大家做個詳細解答。
復制公眾號SVG排版文章,可以分為兩種情況:
一種是在第三方編輯器排好版,復制到公眾號后臺;
一種是已經發(fā)布的SVG圖文,再次復制到自己的公眾號后臺。
沒想到大多數(shù)小伙伴問的是第二種。
眾所周知,因為SVG交互排版的特殊性,它不能像普通圖文一樣可以直接進行復制粘貼,否則會造成代碼丟失,交互失效,排版錯亂。
為了讓交互效果不受改變的完美復制,我們需要進行圖文代碼的轉移。那這兩種情況具體應該怎么操作?我們一個一個來看。
一復制編輯器的SVG交互排版到公眾號
制作SVG交互排版,當然還是使用 iPaiban Pro 黑科技編輯器。
iPaiban Pro 黑科技編輯器是全網首款 SVG 交互圖文編輯器,目前已更新1000+交互效果模板,配合 iPanban Pro 小助手插件使用,可以真正實現(xiàn)0代碼、10分鐘制作交互圖文。
iPaiban Pro 編輯器的使用邏輯也很簡單,選擇交互模板→上傳素材→預覽效果→導入公眾號就完事。
說說最后一步導入公眾號,也就是復制編輯器的SVG交互排版到公眾號。
第1步:復制排版代碼
排版滿意后,我們點擊「導入微信后臺」會生成整個排版的代碼,接著點擊「復制」。
第2步:安裝 iPanban Pro 小助手插件
導入公眾號代碼需要用到前面提到的 iPanban Pro 小助手插件,插件下載和安裝教程戳:《「iPaiban Pro 小助手」瀏覽器插件v1.4》。
第3步:粘貼排版代碼
小插件安裝成功后,打開公眾號后臺新建圖文。
在公眾號圖文編輯頁面,點擊右上角插件按鈕打開小助手,選擇「導入代碼」,然后粘貼剛才復制的代碼,最后點擊「清空導入」就完成了。
如果我們是給已經編輯好的圖文局部插入交互排版,在要導入的位置輸入下方標志(包括大括號)再點擊「局部導入」即可。
{code}
在圖文結尾插入交互排版,無需輸入標志,粘貼代碼后點擊「尾部導入」即可。
二復制已經發(fā)布的SVG交互排版到公眾號
iPaiban Pro 有導入圖文的功能,如果是使用 iPaiban Pro 制作的交互圖文,我們使用該功能將排版導入到編輯器,然后再用情況一的方法就能導入到公眾號。
如果是定制的,復制已經發(fā)布的SVG交互排版到公眾號就需要另外的方法了,一起看下。
第1步:打開并了解瀏覽器「檢查」模式
將要復制的SVG交互圖文用瀏覽器打開,在頁面空白處鼠標右鍵,在出現(xiàn)的快捷菜單中選擇「檢查」打開瀏覽器「檢查」模式(部分瀏覽器為「審查元素」)。
在「檢查」模式下,點擊左上角的小鼠標按鈕后,鼠標所到之處就會變藍,在變藍處點擊一下,「檢查」頁面中就會定位控制該處的代碼。
第2步:選中并復制排版代碼
我們移動鼠標至交互圖文正文開頭,點擊一下,控制此處的代碼在「檢查」模式中就被選定。
想要選中全文,我們只需在代碼中向上找到選擇第一個 div 標簽,就會看到圖文全文變藍也就是被全選中了,Ctrl+C 復制代碼。
第3步:粘貼排版代碼
粘貼代碼還是推薦 iPaiban Pro 插件,下載和安裝教程戳:《「iPaiban Pro 小助手」瀏覽器插件v1.4》。
安裝成功后在公眾號圖文編輯頁面,點擊右上角插件按鈕打開小助手,選擇「導入代碼」,然后粘貼剛才復制的代碼,最后點擊「清空導入」就完成了。
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器,網址:x.iPaiban.com,復制網址在 PC 端 Chrome(谷歌)瀏覽器打開,即可開始注冊并使用。
轉載請在文章開頭和結尾顯眼處標注:作者、出處和鏈接。不按規(guī)范轉載侵權必究。
未經授權嚴禁轉載,授權事宜請聯(lián)系作者本人,侵權必究。
本文禁止轉載,侵權必究。
授權事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權,侵權必究。
評論
評論
推薦評論
暫無評論哦,快來評論一下吧!
全部評論(0條)