全屏海报、轮播、店招、固定背景制作方法集合

淘宝店铺装修对于每个新手卖家来说都是首要做的工作，一个装修好的店铺时间能更好吸引买家、提升顾客信赖感、甚至对宝贝转化率都会有所影响，对我们做销量是很大帮助的。

不知道是大家看到那些大店铺里面的装修是不是都特别羡慕那些到“高大上”的装修，其实这些装修样式我们都是可以做到的，只是图片的创意设计，没有美工基础的话就不是我们能够设计好的，但是网上提供这大把素材我们只需要去下载好，来制作好就行，关于网店的各种“高大上风格”装修方法我们举出四个；

全屏海报

全屏轮播

全屏店招

固定背景

这四个都是我们在做好淘宝店铺装修最经常遇到的问题：

1）全屏海报制作方法：

<div style="height:550px;">
    <div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">
        <div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;">
      <a href="图片链接" target="_blank" style="width:1920px;height:550px;display:block;">
              <img src="图片地址" border="0" alt="全屏海报" /></a>
        </div>
    </div>
</div>

前提我们把我们的海报做好之后，上传到我们自己的图片空间里面，然后可以复制海报图片的链接，放到上面代码把红色的图片链接替换掉，然后我们点击海报跳转的页面链接把下面红色的图片地址替换掉，接下来去装修后台，在店招下面部分添加一个自定义模块（相信这个应该都会吧）。

添加之后最上面一排显示标题后面选中“不显示”，第二排选中那个两个小箭头的按钮，下面文本框里面，把我们改动之后的代码复制粘贴进去，然后点击确定，发布一下就完成了。图片根据自己需要的图片比例去做好了。

2）全屏轮播制作方法：

有的人感觉全屏海报还不给力，想要全屏弄几张图片，让图片轮播，可以多展示几个宝贝，其实这个代码也不麻烦，代码如下：

      <div class="footer-more-trigger" style="width:1920px;height:550px;padding:0px;border:none;left:-960px;">
                <div data-widget-config="{'contentCls': 'taobaoux-com','navCls': 'bbs-taobaoux-com','effect': 'scrollx','easing':

'easeOutStrong','prevBtnCls':'prev1920','nextBtnCls':'next1920','autoplay': true,'viewSize':[1920],'circular': true}" data-widget-type="Carousel" class="J_TWidget">
                    <div class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[-500,0],'points':['cc','cc']}}" data-widget-
 
type="Popup" style="display:none;">
                       
                    </div>
          <div class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[500,0],'points':['cc','cc']}}" data-widget-type="Popup"
 
style="display:none;">
 
                    </div>
                    <div style="height:550px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="ux1920">
                        <ul class="taobaoux-com" style="height:550px;width:1920px;padding:0px;margin:0px;">
                          <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                            <a target="_blank"  href="图片一链接" style="padding:0px;margin:0px;">
                                <img src="图片一地址" width="1920px" height="550px" border="0px"></a></li>
                          <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                            <a target="_blank"  href="图片二链接" style="padding:0px;margin:0px;">
                                <img src="图片二地址" width="1920px" height="550px" border="0px"></a></li>
                          <li style="width:1920px;height:550px;padding:0px;margin:0px;">
                            <a target="_blank"  href="图片三链接" style="padding:0px;margin:0px;">
                                <img src="图片三地址" width="1920px" height="550px" border="0px"></a></li>
 
                        </ul>
                    </div>
                    <div class="footer-more-trigger" style="padding:0px;border:none;left:50%;">
                        <div class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background: url() repeat;top:500px;">
                            <ul class="bbs-taobaoux-com" style="width:950px;height:50px;margin:0 auto;text-align: center;">
                                <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                                    <img src="图片一地址" width="137px" height="46px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
                                <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                                    <img src="图片二地址" width="137px" height="46px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
                                <li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">
                                    <img src="图片三地址" width="137px" height="46px" border="0px" style="vertical-align:middle;margin:5px 0;" /></li>
 
                            </ul>  
                        </div>   
                    </div> 
        </div>
          </div>
        </div>   
  </div>
    <ul class="ks-switchable-nav" style="display:none;"></ul>
</div>

注意：代码的任何一个标点不能漏。

代码使用方法与我们上面说的全屏海报的方法差不多的，首先高度我就不强调了，与第一点的一样，把hight后面的550改成自己的图片的高度就行，这个轮播，我用的三张海报的，把海报传到自己的图片空间，三张海报地址与海报对应的跳转链接分别按照顺序替换代码中的图片一地址、图片一链接，图片二地址、图片二链接，图片三地址、图片三链接，图片链接就是点击海报我们想要跳转的页面链接。这些完成之后保存代码，同样在店招导航下面添加自定义模块，与第一点讲的一样，把改好的代码复制粘贴进去，确定，发布，再看吧，成功了。来看看效果吧

3）固定背景如何设置：

我们去一些大店看的时候，他们的背景不会随着我们的页面拉动而改变，两边有着我们不论怎么拉动页面都可以看到的一些促销文案，二维码图片等等，其实这个也不难，我们只需要做一张宽1920，高一般700左右的就可以图片，然后，两边均匀加上我们想要加的东西，例如：微淘，二维码，促销信息。这点就需要大家用一下ps了，我们加的具体位置呢，是保证我们页面中间950两边，不然会被中间的模块遮挡住。图片做好之后，依然是上传到图片空间，代码如下：

body{background-image:url(图片地址);background-repeat:no-repeat;background-position:center;background-attachment:fixed;}

就这一句，复制图片链接，替换这句代码中的图片地址，然后放在

编辑导航，显示设置下面的文本框，代码放进去，确定，然后发布一下就好了。（图片中代码是我自己的，不要照抄）

4）全屏店招制作方法：

其实这个就不用代码了，想要达到全屏的效果，首先我们得把图片做成1920*150的，然后存为jpg格式的图片，然后我们把中间1920*120的店铺招牌裁剪下来，上传到图片空间，放进店招里面，

点击保存，下一步

选择我们的配色，根据自己的喜欢，点击保存，左边点击背景设置：

页头背景，下面有个选择图片上传，就把我们保存在电脑上面的1920*150的图片上传（注意，保存图片的时候一定注意图片大小不能超过200kb），然后右边选项：页头下边距10像素，选择关闭，背景设置，选择不平铺，背景对其：选择居中，页头背景，不选择。

然后点击保存，最后保存发布就完成了。