今天三儿为大家带来的两篇文章都来自雀巢品牌，雀巢的知名度就不用我多介绍了，那作为一个家喻户晓的品牌，他们的宣传推广的文章又有哪些值得我们学习的呢，三儿都给大家拆解分析好了，就等大家来学习了解啦~

这两篇文章都用到了同一款SVG效果——【图片弹窗自定义多个触发区】，两篇文章根据不同的主题，将此效果与推文内容结合的非常到位，话不多说，接下来三儿就带大家来认识这款宝藏SVG。

gif图展示

《黑色的Ta，最百塔》

点击绿色文字跳转

这篇文章介绍的是雀巢咖啡系列产品，围绕这个主题，推文分享了多款咖啡产品与其他食材进行DIY的可能性，产品介绍图并没有平铺直叙展示，而是做成卡片的形态，并借助图片弹窗SVG，引导用户点击之后再弹出咖啡产品图。提高了推文的神秘感和趣味性。

从上述两个案例中我们可以看出，图片弹窗SVG效果具有很强的可玩性，无论是应用在产品介绍类推文，还是合作宣传推文都能适配。它能将需要展示的主体图片，隐匿在首图下，从而引起用户的阅读兴趣，促进用户去点击查看。大家如果在排版过程中想要增加文章的趣味性和创意度，不妨多试试这个效果。

此款SVG除了做成卡片、盲盒外，还可以做成红包等形式，具体要根据自己的内容主题来设计。将此款效果应用在节日节气的推文中，比如新年拆红包、双11购物节的拆礼盒等，或者品牌方的新产品宣传推文中。

这两篇案例用到的SVG效果为图片弹窗自定义多个触发区，ID：55，三儿为大家讲解此款效果具体的制作方法。

在SVG页面的【互动效果】的搜索框输入55，或者是“图片弹窗”关键词，放入到编辑页面。

① 首先为SVG组件添加前景图。比如像雀巢案例一中的推文所用到的前景图为动态的卡片形式。

② 准备好需要弹出的图片，大家可以根据自己前景图来设置。将弹出的图片添加进去。每添加一张弹出图片，就要为其设置控制热区。

③ 拖拽红色虚线部分调整控制区域的范围，移动热区到你需要用户点击的位置。

④ 注意：如果需要放置gif图，gif图的宽高不能超过1000px。

⑤ 制作完成之后，选择右上角的【同步】【导出】到微信公众号后台即可。