手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

美工教程:无智能版淘宝天猫店怎么设置淘宝轮播

时间:2024-10-12 08:59:10

1、首先在PS里制作出海报,我这里是1920X850像素的全屏三图海报。

美工教程:无智能版淘宝天猫店怎么设置淘宝轮播

2、将制作好的海报图片上传到图片空间,最好是建文件夹,方便查找使用。

美工教程:无智能版淘宝天猫店怎么设置淘宝轮播

3、在首页装修页面,点击左侧装修模板中的【自定义】模板,拖动到右侧适当位置。大家可以看到没有升级到智能版,所以全屏大图和全屏轮播用不了。

美工教程:无智能版淘宝天猫店怎么设置淘宝轮播

4、这时,我们将鼠标放置到模块上,点击模块右上角的【编辑】,在出现在自定义内容区内标题选择【不显示】,点击编辑源代码,输入编辑好的轮播沪枭诽纾代码。附送上轮播代码,可以直接复制使用,需要更换图片对应货品链接和图片上传到图片空间的链接、图片尺寸大小都需要更改:<div class="MaGong" data-title="dianshang.gaoding.com" data-time="1571027717" style="height:850px;"> <div class="sn-simple-logo" style="left:auto;right:auto;width:990px;height:850px;top:auto;padding:0;border:none;z-index:1;background:none;"> <div class="sn-simple-logo" style="left:-465px;top:0px;height:850px;width:1920px;border:none;padding:0;background:none;"> <div data-widget-config="{&quot;viewSize&quot;:[1920],&quot;nextBtnCls&quot;:&quot;Mnext&quot;,&quot;navCls&quot;:&quot;ma_na&quot;,&quot;prevBtnCls&quot;:&quot;Mprev&quot;,&quot;activeTriggerCls&quot;:&quot;hidden&quot;,&quot;circular&quot;:true,&quot;easing&quot;:&quot;easeOutStrong&quot;,&quot;autoplay&quot;:true,&quot;duration&quot;:1,&quot;contentCls&quot;:&quot;macontent&quot;,&quot;effect&quot;:&quot;scrollx&quot;,&quot;interval&quot;:4,&quot;triggerType&quot;:&quot;mouse&quot;}" data-widget-type="Carousel" class="J_TWidget"> <div class="J_TWidget Mprev" data-widget-config="{&quot;trigger&quot;:&quot;.SD&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.SD&quot;,&quot;offset&quot;:[-510,0],&quot;points&quot;:[&quot;cc&quot;,&quot;cc&quot;]}}" data-widget-type="Popup" style="display:none;"> <div class="Mprev" style="font-size:100px;cursor:pointer;"> <img src="//gdp.alicdn.com/imgextra/i4/126112166/TB2EaKBaXXXXXXxXXXXXXXXXXXX-126112166.png" /> </div> </div> <div class="J_TWidget Mnext" data-widget-config="{&quot;trigger&quot;:&quot;.SD&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.SD&quot;,&quot;offset&quot;:[510,0],&quot;points&quot;:[&quot;cc&quot;,&quot;cc&quot;]}}" data-widget-type="Popup" style="display:none;"> <div class="Mnext" style="font-size:100px;cursor:pointer;"> <img src="//gdp.alicdn.com/imgextra/i2/126112166/TB2s_WAaXXXXXXQXXXXXXXXXXXX-126112166.png" /> </div> </div> <div class="SD" style="height:850px;width:1920px;overflow:hidden;padding:0px;margin:0px;border:0;background:none;"> <ul class="macontent" style="height:850px;width:1920px;padding:0px;margin:0px;"> <li class="item"> <a target="_blank" href="图片1对应商品链接"><img src="上传到图片空间的图片链接1" /></a> </li> <li class="item"> <a target="_blank" href="图片2对应商品链接"><img src="上传到图片空间的图片链接2" /></a> </li> <li class="item"> <a target="_blank" href="图片3对应商品链接"><img src="上传到图片空间的图片链接3" /></a> </li> </ul> </div> <div class="sn-simple-logo" style="width:1920px;height:76px;left:auto;top:auto;bottom:0;padding:0px;border:none;background:none;display:block;"> <div class="sn-simple-logo" style="z-index:99;width:1920px;height:76px;padding:0px;border:none;left:auto;top:auto;background:none;"> <ul class="ma_na" style="width:1920px;height:45px;margin:0 auto;text-align:center;border:none;color:#FFF;"> <li class="hidden" style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:66px;"> <img src="上传到图片空间的图片链接1" width="150px" height="66px" /> </li> <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:66px;"> <img src="上传到图片空间的图片链接2" width="150px" height="66px" /> </li> <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:66px;"> <img src="上传到图片空间的图片链接3" width="150px" height="66px" /> </li> </ul> </div> <div class="sn-simple-logo" style="z-index:98;width:1920px;height:76px;padding:0px;border:none;left:auto;top:auto;background:none;background:none;"> <ul class="ma_nb" style="width:1920px;height:76px;margin:0 auto;text-align:center;border:none;color:#333333;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);opacity:0.7;background:none;"> <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:66px;"> <img src="上传到图片空间的图片链接1" width="150px" height="66px" /> </li> <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:66px;"> <img src="上传到图片空间的图片链接2" width="150px" height="66px" /> </li> <li style="display:inline;background:none;margin:0 5px;cursor:pointer;padding-top:10px;line-height:66px;"> <img src="上传到图片空间的图片链接3" width="150px" height="66px" /> </li> </ul> </div> </div> </div> </div> </div></div>

美工教程:无智能版淘宝天猫店怎么设置淘宝轮播

5、点击确定后,可以看到自定义海报里面已经显示出了三屏轮播海报,可以点击上面预览查看一下。

美工教程:无智能版淘宝天猫店怎么设置淘宝轮播

6、预览时,可以看到下面还有三图的缩略图,三图会自动轮播。这时就设置成功啦!

美工教程:无智能版淘宝天猫店怎么设置淘宝轮播
© 手抄报圈