打开文章，一张报纸展现在眼前。

点击报纸的指定位置，弹出大图查看详情内容。

一直以来，这种 「点击报纸弹出图片」 的排版方式频繁在各个大品牌公众号亮相，很是抓人眼球。

比如VOGUE的这个，点击报纸上的标题：

 

                                    

                                    

                                    

                                    

                                    

                                    

                                    

                                    

*素材来自VOGUE今天的头条是Prada

VOGUE的是静态报纸，maxandco这个是动态报纸，点击报纸上的图片：

 

                                    

                                    

                                    

                                    

                                    

                                    

                                    

                                    

*素材来自maxandco品牌服务号MAX&Co. DAILY：今日「星」动头条

今天就教大家用i排版SVG编辑器的来实现同款效果。用起来，让你的产品也「上回报纸」。

以maxandco的为例，一起看下教程吧。

详细教程：

工具：i排版SVG编辑器，网址：SVG.iPaiban.com

组件：点击弹出-弹出图片(设置多个触发区)

编号：10100（组件）

第1步：选择组件

登录i排版SVG编辑器后，点击编辑器左侧「组件」按钮，在「组件」分类中找到「点击弹出-弹出图片」组件，或者直接搜索组件编号10100，点击选择。

第2步：上传图片素材

点击右侧「换图」按钮上传1张背景图，点击「+」按钮上传对应弹出图。

弹出图与封面图尺寸可不一致；弹出图支持GIF，但受微信限制，GIF长和宽尺寸都需不超过1024px，否则点击弹出后可能静止不动。

第3步：设置弹出区域

双击中间编辑区背景图片，出现「弹出区域」设置窗口。分别拖拽设置每个弹出图的弹出位置，然后点击「保存设置并退出」。

第4步：添加遮罩图

点击编辑器左侧「组件」按钮，在「组件」分类中找到「遮罩」组件，或者直接搜索组件编号10829，点击选择。

点击右侧「换图」按钮上传遮罩图。尺寸与前面的背景图尺寸一致。

第5步：导入公众号后台

这种弹出效果需要导入公众号发送手机预览，设置完毕后点击「同步至微信后台」同步到自己的公众号就可以了。

使用同步功能不用频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码预览在公众号的效果。

如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。