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

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

时间: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>】首先得将我们的海报做好之后,并上传到我们自己的图片空间里面,再复制海报图片的链接,替换掉上面代码中的“图片链接”,再用“希望顾客查看的自定义模块的链接”替换掉“图片地址”。(去装修后台,在店招下面部分添加一个自定义模块(相信这个应该都会吧))

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

2、看图片,最上面一排显示标题后面选中“不显示”,第二排选中那个两个小箭头的按钮(<>这是切换为源代码编辑模式),下面文本框里面,把我们改动之后的代码复制粘贴进去,就完成了,我们的全屏海报,!可以看到案例中的heighth:550px,这个我的图片用的1920*550的,作图的时候高度根据你们自己的需要去定,如果你用的600px的,就把代码中的550改为600就行了;left:-960px,因为我的图片宽1920,960是我的图片宽度的一半,这个可以设置成你的图片的一半就可以了。

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

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改成自己的图片的高度就行,这个轮播,我用的三张海报的,把海报传到自己的图片空间,三张海报地址与海报对应的跳转链接分别按照顺序替换代码中的图片一地址、图片一链接,一地址对应一个地址,“图片二地址、图片二链接,图片三地址、图片三链接”,图片链接就是点击海报我们想要跳转的页面链接。这些完成之后保存代码,同样在店招导航下面添加自定义模块,与第一点讲的一样,把改好的代码复制粘贴进去,确定,发布,再看吧,成功了。

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

4、第三点:固定背景我们去一些大店看的时候,他们的背景不会随着我们的页面拉动而改变,两边有着我尺攵跋赈们不论怎么拉动页面都可以看到的一些促销文案,二维码图片等等,其实这个也不难,我们只需要做一张宽1刻八圄俏920,高一般700左右的就可以图片,然后,两边均匀加上我们想要加的东西,例如:微淘,二维码,促销信息。这点就需要大家用一下ps了,我们加的具体位置呢,是保证我们页面中间950两边,不然会被中间的模块遮挡住。图片做好之后,依然是上传到图片空间,代码如下:【body{background-image:url(图片地址);background-repeat:no-repeat;background-position:center;background-attachment:fixed;}】就这一句,简单吧,复制图片链接,替换这句代码中的图片地址。

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

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

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

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

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

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

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

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

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