淘宝店铺首页全屏海报制作教程：双层固定海报设计方法详解

想让淘宝店铺更显大气时尚吗？双层全屏海报特效绝对是个好办法。底层固定，上层随页滚动，这种酷炫效果怎么操作，下面就详细说说。

特效魅力

双层全屏海报在淘宝店铺装修里很有优势。底层固定，仿佛给页面铺了稳定背景，上层随页面滚动动起来，像富有动态的画。有位店主用了这个特效后，店铺访客停留时长增加了 20%，可见它很能吸引顾客。

这特效可以让店铺的重要信息稳稳展示，比如最新活动、主打产品。同时上层滚动部分又能增添时尚感和互动性，顾客一打开店铺就被吸引，增加购买意愿。

素材准备

想实现特效，得准备素材。需要一张底部图片和一张局部透明的顶部图片。底图大小是 1920PX737PX，顶图大小是 1920PX666PX。就像建房子得有合适材料。底图起到稳固背景作用，如果大小不对，可能展示不全。顶图要局部透明，这样才能和底图搭配出双层效果。

要是没有符合要求的图片，可以用开淘网提供的现成图片试试。用这些图片操作，能更方便体验特效实现过程，等熟练了再自己设计制作。

新建页面

打开 Dreamweaver（简称 DW），新建一个 html 页面。在这个空白页面里，能开启海报特效之旅。就像画画前要准备好画布。新建好后，切换到代码视图，这里是设置代码的地方。把原有代码删除，这样可以避免干扰。代码视图有点像神秘代码世界，但不用怕，按步骤操作没问题。

这样一个干干净净的代码环境，是后续添加正确代码实现特效的基础。如果不删除原有代码，可能会出现各种奇怪问题，影响最后展示效果。

替换地址

在网上找教程，把淘宝装修代码复制到 DW 里。然后把制作好的素材上传到淘宝图片空间，分别获取两张图片的地址。回到 DW 中，把代码里的“底部图片地址文字”和“顶部图片地址文字”替换掉。这一步很关键，就像把钥匙插到正确锁孔。

替换后，在设计视图可能会发现图片显示不出来。别慌，把刚才粘贴的两张图片地址前面的“s”删掉就好了。可能有人会问为啥要删，这是淘宝规则和代码显示机制的问题，删了就能正常显示。

设置热点

在设计视图看到图片后，用鼠标选中顶层图片，下面会出现属性框，里面有淘宝店铺装修热点工具。这热点工具很实用，可以选择矩形、圆形或者多边形。选择后，连续在图片里按住鼠标左键画出热点区域。

每画一片热点区域，属性框就会出现这个区域的属性设置信息。在里面填写这个热点相应的宝贝链接。比如顾客点了图片上某个区域，就能跳到相应宝贝详情页。就像设置路标，让顾客顺利到达想买的商品页面。

完成制作

热点制作好后，在 DW 里返回代码视图。把里面的代码全部选中，复制粘贴到淘宝通栏自定义内容区。这相当于把做好的海报放到店铺展示位置。最后通过预览或者直接发布来查看效果。当看到特效在店铺完美展示，那种成就感很棒。如果预览效果不满意，还可以调整代码和热点设置。

现在就问大家，你觉得双层全屏海报特效在自己店铺使用，能带来多大流量提升？快点赞分享文章，留言说说看法！