淘宝店铺装修:全屏海报,全屏轮播,店招通栏

2024-10-17 01:30:41

1、第一点:全屏海报(代码如下)【<div style="height:550px;"> <d足毂忍珩iv 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>】首先得将我们的海报做好之后,并上传到我们自己的图片空间里面,再复制海报图片的链接,替换掉上面代码中的“图片链接”,再用“希望顾客查看的自定义模块的链接”替换掉“图片地址”。(去装修后台,在店招下面部分添加一个自定义模块(相信这个应该都会吧))

淘宝店铺装修:全屏海报,全屏轮播,店招通栏

3、第二点:全屏轮播一张图片可能不够刺激,想要全屏弄几张图片,让图片轮播,可以多展示几个宝贝,其实这个代码也不麻烦,代码如下:【 <di即枢潋雳v 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改成自己的图片的高度就行,这个轮播,我用的三张海报的,把海报传到自己的图片空间,三张海报地址与海报对应的跳转链接分别按照顺序替换代码中的图片一地址、图片一链接,一地址对应一个地址,“图片二地址、图片二链接,图片三地址、图片三链接”,图片链接就是点击海报我们想要跳转的页面链接。这些完成之后保存代码,同样在店招导航下面添加自定义模块,与第一点讲的一样,把改好的代码复制粘贴进去,确定,发布,再看吧,成功了。

淘宝店铺装修:全屏海报,全屏轮播,店招通栏

5、编辑导航,显示设置下面的文本框,代码放进去,就ok了。简单吧,快试一试。(图片中代码替换成你的)

淘宝店铺装修:全屏海报,全屏轮播,店招通栏

7、选择我们的配色,根据自己的喜欢,点击保存,左边点击背景设置:页头背景,下面有个选择图片上传,就把我们保存在电脑上面的1920*150的图片上传(注意,保存图片的时候一定注意图片大小不能超过200kb),然后右边选项:页头下边距10像素(导航栏与下面模块的距离),选择关闭,背景设置,选择不平铺,背景对其:选择居中,页头背景,不选择。

淘宝店铺装修:全屏海报,全屏轮播,店招通栏淘宝店铺装修:全屏海报,全屏轮播,店招通栏

8、最后发布来看看整体效果

淘宝店铺装修:全屏海报,全屏轮播,店招通栏
猜你喜欢