您的位置：制图网首页 -> 新闻动态 -> 淘宝店招制作教程【淘宝店招如何制作】

热门排行

淘宝店招制作教程【淘宝店招如何制作】

2023/1/31 来自于：制图网 点击：36

大家好，亿卓智库的小卓又来给大家分享了，继昨天分享了做全屏的店铺装修后，有很多童鞋说学了之后做出来的不好看，店招位置短了一块，这怎么解决呢？

今天小卓给大家分享的主题就是【利用代码】做一个自己想要的全屏店招

首先，自己先做一张店招的图片吧，尺寸需要大于950像素的（要与主页上的图片宽度一致哦，否则做好后会宽度不一样的），高度是150PX,如下图所示。

淘宝店招制作教程【淘宝店招如何制作】

你想要的结果应该是这样的吧，与下方的主页面无缝对接，点击“所有分类”或“双十二活动专区”会有相应跳转，还要加上“收藏店铺”的提示，如下图所示。

淘宝店招制作教程【淘宝店招如何制作】

接下来就来学习吧，2分钟内学会。

有了图片在，那么工作就会快很多了，接下来，把这张图片上传到自己淘宝店铺的图片空间（登陆淘宝网-卖家中心-图片空间-上传图片），上传成功后，点击图片下方的“回形针”标志的复制链接键，如下图所示。

淘宝店招制作教程【淘宝店招如何制作】

做好上面的工作，那么接下来打开制作代码的工具“码工助手”【可以百度直接搜索码工助手进入】，进入主页面登陆后点击“在线布局”

淘宝店招制作教程【淘宝店招如何制作】

进入“在线布局”后展示的页面是下面这样子的，把刚刚图片空间复制的链接粘贴进“背景图里吧，然后在模块宽度里写上，950PX宽，150PX高。

淘宝店招制作教程【淘宝店招如何制作】

填写好后就是下面展示的了，出现了你之前做的图片，有童鞋是否在问，为什么是950PX，不能直接填我做的图片大小，小卓回答”当然可以，但店招热区只有950PX以内是可以使用的“。所以还是950方便点。

淘宝店招制作教程【淘宝店招如何制作】

接下来就要对”所有分类、首页、双十二活动专区、本店特价“等进行添加类似于”超级链接“一样的可点击的操作了，专有名词叫”热区“，点击热区，把区域进行调整到你想要点击的位置，然后双击把想要跳转到的链接复制进来，这就做好一个热区了。

淘宝店招制作教程【淘宝店招如何制作】

接上面的方法重复操作，就看到下面的样子了，小卓做了四个热区，当然你的先项多可以多做几个也是OK的。

淘宝店招制作教程【淘宝店招如何制作】

下面再加上个收藏吧，点击”收藏“，弹出后调整大小和位置后进行双击，跳出弹出窗后输入收藏的链接。

看到这里，你的工作已经完成大部分了，再接再厉，马上OK。

淘宝店招制作教程【淘宝店招如何制作】

点击右上角的”生成代码“后将代码复制粘贴。如下图所示。

淘宝店招制作教程【淘宝店招如何制作】

接下来进入到自己的店铺装修页面。具体流程：登陆淘宝网-卖家中心-店铺装修-编辑店招。

即然是代码装修，就要在店招编辑里面选择”自定义招牌“，再选择”双向箭头“的源码。

将刚刚”码工助手“里面复制的代码粘贴进来，再把高度改成150PX(这是你图片制作的高度)，然后保存。

淘宝店招制作教程【淘宝店招如何制作】

好了，主体工作都已经做好了，“预览”一下吧，咦？为什么左右分别少了一块呢？如下图所示

原因是你设计的店招是950PX宽，而下面的主体图片宽度大于950PX，所以出现2块空白，那么你需要进入“店铺装修”里面“页头背景图作个设置”。

淘宝店招制作教程【淘宝店招如何制作】

点击“页头”，将你之前做好的图片上传上来，记住一定点击“不平铺”。

淘宝店招制作教程【淘宝店招如何制作】

如果你做好上面的工作，那么就已经大功告成了，你可以预览一下，如果可以就发布吧，来看看自己的作品吧。

淘宝店招制作教程【淘宝店招如何制作】

当然，有些童鞋在说小卓做的不漂亮，我想说我不是美工出身，这里只给大家用代码做全屏店招的方法，希望对大家有帮助。

这里做一个总结，其实全屏店招的做法很简单，1.做一张全屏的店招图；2.把这张图生成代码；3.将代码装修进店铺；4.插入页头背景图。如果你懂了就会发现，全屏店招就是两张图片的叠加。

如果您看到这里，我相信您可能是淘宝开店不久的小卖家，小卓想说句：“创业者辛苦了”。亿卓智库将一直陪伴大家共同成长。

最后请大家微信关注“亿卓智库”，服务于创业培训垂直领域，将架起创业者与创业大伽、专家导师的桥梁，提供课程视频、课件下载、课堂互动游戏等免费资源。

制图网(www.makepic.net)，专业的logo免费设计在线生成网站，全自动智能化logo设计，商标设计，logo在线生成！

欢迎使用制图网制作属于您公司自己的logo，不仅专业而且经济实惠，全方位满足您公司品牌化、视觉化的需求。

输入激活码：

只需简单一步,使用微信扫码(或长按识别二维码)并在任一小程序首页根据提示获取激活码！ chatGPT中文网页版，无需注册，快来体验全网最火爆的人工智能应用!
刻字印章刻章子定刻光敏盖章印订制(淘宝商家)

输入激活码：

只需简单一步,使用微信扫码(或长按识别二维码)并在任一小程序首页根据提示获取激活码！ chatGPT中文网页版，无需注册，快来体验全网最火爆的人工智能应用!
刻字印章刻章子定刻光敏盖章印订制(淘宝商家)
请使用手机淘宝进行扫码