不用买模板也能实现淘宝店铺全屏海报效果

来源：互联网 2023-02-21 16:17:08 243

店铺的全屏海报效果能为店铺装修锦上添花,增加店铺的美观感。许多卖家一直苦苦纠结如何不用花钱买模板也能实现全屏海报的效果呢?今天我就将这个简单的方法教给大家。

网络上有很多的全屏海报代码,但并不是都有效。楼主找到了一段经过测试可以试用的代码。天猫商城的(1920*500)尺寸的轮播海报代码。下面分享给大家。

1,进入装修后台的图片空间,将你选择要轮播的海报上传上去。(我做的海报大小是1920*564,所以需要修改找到的那段代码。

2,打开之前在网上下载的那段轮播海报代码。

选择编辑——替换,将原代码中的500全部替换为我们的海报高度(我的是564),然后将这段代码复制下来。

3,进入店铺装修页面,在主屏的第一屏海报位置新建一个自定义页面

点击

切换到代码模式。

4,将之前复制的那段代码黏贴上去。找到代码中的图片链接部分。

5,再次进入图片空间,将大图海报的链接地址复制下来。替换到原来的代码的图片链接位置。

6,代码都改完之后,按

回到图片模式,这时候你会发现什么图都看不到。

不用担心,点击预览或者发布,你就能看到全屏轮播海报效果啦。

附上全屏轮播海报代码：

div data-widget-config="{'effect': 'fade', 'circular': true ,'contentCls':'piao1365065449925fu'}" data-widget-type="Tabs">

div style="height: 500px;">

div data-widget-config="{
 'contentCls': 'slide-kun1365065449925content',
 'triggerCls': 'slide-kun1365065449925triggers',
 'navCls': 'slide-kun1365065449925triggers',
 'triggerType': 'mouse',
 'effect': 'scrollx',
			'prevBtnCls':'prev',
			'nextBtnCls':'next',
 'steps': 1,
 'autoplay': true,
			'viewSize':[1920],
 'circular': true
 }" data-widget-type="Carousel" style="margin: 0px; padding: 0px; left: -180px; top: 0px; width: 1920px; z-index: 10;">

div data-widget-config="{'trigger':'.first1365065449925trigger','align':{'node':'.first1365065449925trigger','offset':[0,0],'points':['cc','cc']}}" data-widget-type="Popup" style="display: none;">

div style="width: 90px; height: 90px; float: left;">

img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/725308504/T23AgjXgNbXXXXXXXX_!!725308504.png" />/div>

div style="width: 90px; height: 90px; margin-left: 950px;">

img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/725308504/T24F7ZXX0aXXXXXXXX_!!725308504.png" />/div>

/div>

div style="margin: 0px; padding: 0px; width: 1920px; height: 500px; overflow: hidden;">

ul style="margin: 0px; padding: 0px; width: 1920px; height: 500px;">

li style="margin: 0px; padding: 0px; width: 1920px; height: 500px; list-style-type: none;">

a href="http://chenruimy.tmall.com/?&&scene=taobao_shop" style="margin: 0px; padding: 0px;" target="_blank">img border="0" data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/725308504/T2MRIYXhVaXXXXXXXX_!!725308504.jpg" height="500" width="1920" />/a>/li>

li style="margin: 0px; padding: 0px; width: 1920px; height: 500px; list-style-type: none;">

a href="http://chenruimy.tmall.com/?&&scene=taobao_shop" style="margin: 0px; padding: 0px;" target="_blank">img border="0" data-ks-lazyload="http://img03.taobaocdn.com/imgextra/i3/725308504/T22tsZXldXXXXXXXXX_!!725308504.jpg" height="500" width="1920" />/a>/li>

li style="margin: 0px; padding: 0px; width: 1920px; height: 500px; list-style-type: none;">

a href="http://chenruimy.tmall.com/?&&scene=taobao_shop" style="margin: 0px; padding: 0px;" target="_blank">img border="0" data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/725308504/T2i0uMXoVbXXXXXXXX_!!725308504.jpg" height="500" width="1920" />/a>/li>

li style="margin: 0px; padding: 0px; width: 1920px; height: 500px; list-style-type: none;">

a href="http://chenruimy.tmall.com/?&&scene=taobao_shop" style="margin: 0px; padding: 0px;" target="_blank">img border="0" data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/725308504/T2RhcZXcVXXXXXXXXX_!!725308504.jpg" height="500" width="1920" />/a>/li>

/ul>

/div>

ul style="margin: 0px; padding: 0px; display: none;">

li>

 /li>

li>

 /li>

li>

 /li>

li>

 /li>

/ul>

/div>

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签：淘宝模板实现店铺海报

上一篇：怎样给淘宝店铺设置个性域名下一篇：淘宝如何取消数字证书

不用买模板也能实现淘宝店铺全屏海报效果

热门文章

标签列表