旺铺专业版 全屏通栏店招制作方法（图文教程）

php道勤

旺铺专业版 全屏通栏店招制作方法（图文教程）

上次做的通栏店招教程是适用于旧版店铺的，今天做一个适用于旺铺专业版的全屏通栏店招制作教程。旺铺专业版制作通栏店招并不难，相信大家都会，但如果要制作一个带导航栏的通栏店招（也就是把导航栏做成了图片），那可能有些朋友就不会了。

用旺铺专业版的应该都知道，模板自带的导航是不可删除的，根本没有删除的按钮。但问题总有解决的办法，这也不例外。淘宝建议店招高度是120px，超过120的话，导航显示可能异常，那到底会有什么异常呢？其实就是会把导航挤下去，如果你的店招高度是150px，那导航就完全不见了，为什么？因为淘宝在店招和导航设置了“max-height: 150px;overflow: hidden;”，意思就是店招和导航的最大高度是150px,如果高出150px,多出来的部分将会自动隐藏。所以要想删除模板自带的导航，只需要把你的店招高度设置为150px即可。

好了，说完如何删除模板自带的导航，下面就正式开始进入教程。本教程只有两步，只要两步即可实现旺铺专业版全屏通栏店招，而且你不用打开任何软件，更不需要切图。

第一步、进入旺铺专业版店铺装修页面，双击“店铺招牌”模块，招牌类型选择“自定义招牌”，高度输入150，点击自定义内容区的”源码“




输入以下代码，点击保存

1. <img src="http://img03.taobaocdn.com/imgextra/i3/128680804/T2YC_FXbJaXXXXXXXX_!!128680804.jpg" usemap="#dianzhao" />
   
2. 
   
3.          <map name="dianzhao">
   
4. 
   
5.                        <area coords="0,110,102,150" href="#" shape="rect" />
   
6. 
   
7.                       <area coords="102,110,215,150" href="#" shape="rect" />
   
8. 
   
9.                       <area coords="102,110,328,150" href="#" shape="rect" />
   
10. 
    
11.                       <area coords="102,110,440,150" href="#" shape="rect" />
    
12. 
    
13.                        <area coords="102,110,554,150" href="#" shape="rect" />
    
14. 
    
15.                        <area coords="102,110,666,150" href="#" shape="rect" />
    
16. 
    
17.                        <area coords="102,110,780,150" href="#" shape="rect" />
    
18. 
    
19.                        <area coords="102,110,950,150" href="#" shape="rect" />
    
20. 
    
21.          </map>
    

复制代码

请把图片地址改成自己的地址，这里我采用的是MAP标签制作店招导航区链接，如果不会使用MAP标签，请看此教程：如何在图片上添加热点超链接

第二步、点击“装修”菜单下的“样式编辑”，再点击“背景设置”，选择你的页头背景图，横向平铺，居中对齐，最后保存即可。

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！