越来越多的品牌，开始推出自己的专属表情包了。

品牌们如何在图文中如何能够方便的向用户展示自己的表情包呢？

这就要用到特别的排版了。

今天给大家推荐3种既能展示又能保存表情包的排版效果。

第1种，多触发区点击弹出图片效果。

将动态表情包隐藏在一张图片里面，用户点击某个位置即可弹出对应的表情包：

 

                                    

                                    

                                    

                                    

                                    

*素材来自奈雪的茶《Quokka陪你喝米布丁珍珠大红袍奶茶，暖暖的 ᵔᴥᵔ 可爱鼠了！》

第2种，多列布局嵌套点击弹出图片效果。

同样是将动态表情包隐藏在图片之下，使用多列布局组合嵌套点击弹出图片的效果优势是，表面的图片也方便制作成动态的：

 

                            

                            

                            

                            

*素材来自来自瑰丽酒店RosewoodHotels《玉兔跃年, 跃迎花开》

第3种，多触发区的多层图片。

即在一张背景图上方任意位置，直接摆放表情包，摆放的表情包也可点击弹出保存，点击试试：

 

*素材来自夏日纷西打酒《人在职场，有些话只能喵来说🤭》

使用「多层图片」与前面两个效果相比，优势是让读者保存的表情就是直接展示给读者的表情，所见即所存。前面两个效果保存的表情包都是隐藏在图片下面的。

i排版也在陆续上线西游系列表情包啦，唐三藏系列大家可以点击保存或者直接扫码用起来了：

 

                                    

今天咱们以夏日纷西打酒的效果为例，一起看下「多层图片」展示表情包的排版教程吧。

详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com

组件：多层图片(设置区域)

编号：11158（组件）

第1步：选择组件

登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，找到「多层图片(设置区域)」组件，或者直接搜索组件编号11158，点击选择。

第2步：上传背景图

点击右侧「换图」按钮上传背景图。

第3步：上传前景图

点击「+」号依次上传图片，如上传错误，可拖拽调整顺序。

第4步：设置图片保存

设置图片保存为「支持」，方便读者点击保存图片。

第5步：调整前景图摆放位置

在编辑器区双击上传的背景图，即可拖拽设置前景图的摆放位置。设置完成后点击「保存设置并退出」按钮。

第6步：导入公众号后台

点击最右侧「预览草稿」，效果满意后接着点击「同步至微信后台」就可以了。

使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。

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

● SVG 黑科技交互排版👇🏻

 

iPaiban 团队可提供运营服务、创意策划、多种风格设计、SVG交互开发等服务，如需定制，请添加玉兔微信（ID：playhudong15）沟通咨询。