阿里巴巴全屏轮播海报的官网怎么设置海报全屏和招牌全屏

如何做全屏海报,全屏轮播,通栏店招
& &当我们看到别人的全屏海报、通栏店招很漂亮大气,是不是想要把自己的店铺设置成这样,今天小编教大家如何设置,一起看看吧!
1.全屏海报设置方法(代码如下)
&&div style=&height:550&&
& & &div class=&footer-more-trigger& style=&left:50%;top:border:padding:0;&&
& & & & &div class=&footer-more-trigger& style=&left:-960top:border:padding:0;&&
& & & &a href=&图片链接& target=&_blank& style=&width:1920height:550display:&&
& & & & & & & &img src=&图片地址& border=&0& alt=&全屏海报& /&&/a&
& & & & &/div&
& & &/div&
首先我们把海报做好,上传到自己的图片空间里面,在店招下面部分添加一个自定义模块,把上面代码复制到代码显示区,然后可以复制海报图片的链接,放到上面代码图片地址替换掉,把要链接的地址写在图片链接处
最上面一排显示标题后面选中&不显示&,第二排选中那个两个小箭头的按钮,然后点击确定,发布一下试试,就完成了,这样全屏海报就做好了,是不是很简单。上面的例子图片的heighth:550px,作图的时候高度根据你们自己的需要去定,如果你用的600px的,就把代码中的550改为600就行了。
2.全屏轮播如何设置
有的人可能认为全屏海报就 一张图片,想要全屏弄几张图片,让图片轮播,可以多展示几个宝贝,其实这个代码也不麻烦,代码如下:
& & & &div class=&footer-more-trigger& style=&width:1920height:550padding:0border:left:-960&&
& & & & & & & & &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:&&
& & & & & & & & & & & &&
& & & & & & & & & & &/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:&&
& & & & & & & & & & &/div&
& & & & & & & & & & &div style=&height:550width:1920overflow:padding:0margin:0& class=&ux1920&&
& & & & & & & & & & & & &ul class=&taobaoux-com& style=&height:550width:1920padding:0margin:0&&
& & & & & & & & & & & & & &li style=&width:1920height:550padding:0margin:0&&
& & & & & & & & & & & & & & &a target=&_blank& &href=&图片一链接& style=&padding:0margin:0&&
& & & & & & & & & & & & & & & & &img src=&图片一地址& width=&1920px& height=&550px& border=&0px&&&/a&&/li&
& & & & & & & & & & & & & &li style=&width:1920height:550padding:0margin:0&&
& & & & & & & & & & & & & & &a target=&_blank& &href=&图片二链接& style=&padding:0margin:0&&
& & & & & & & & & & & & & & & & &img src=&图片二地址& width=&1920px& height=&550px& border=&0px&&&/a&&/li&
& & & & & & & & & & & & & &li style=&width:1920height:550padding:0margin:0&&
& & & & & & & & & & & & & & &a target=&_blank& &href=&图片三链接& style=&padding:0margin:0&&
& & & & & & & & & & & & & & & & &img src=&图片三地址& width=&1920px& height=&550px& border=&0px&&&/a&&/li&
& & & & & & & & & & & & &/ul&
& & & & & & & & & & &/div&
& & & & & & & & & & &div class=&footer-more-trigger& style=&padding:0border:left:50%;&&
& & & & & & & & & & & & &div class=&footer-more-trigger& style=&width:1920height:50padding:0border:left:-960background: url()top:500&&
& & & & & & & & & & & & & & &ul class=&bbs-taobaoux-com& style=&width:950height:50margin:0text-align:&&
& & & & & & & & & & & & & & & & &li style=&display:margin: 0 5cursor:line-height: 50&&
& & & & & & & & & & & & & & & & & & &img src=&图片一地址& width=&137px& height=&46px& border=&0px& style=&vertical-align:margin:5px 0;& /&&/li&
& & & & & & & & & & & & & & & & &li style=&display:margin: 0 5cursor:line-height: 50&&
& & & & & & & & & & & & & & & & & & &img src=&图片二地址& width=&137px& height=&46px& border=&0px& style=&vertical-align:margin:5px 0;& /&&/li&
& & & & & & & & & & & & & & & & &li style=&display:margin: 0 5cursor:line-height: 50&&
& & & & & & & & & & & & & & & & & & &img src=&图片三地址& width=&137px& height=&46px& border=&0px& style=&vertical-align:margin:5px 0;& /&&/li&
& & & & & & & & & & & & & & &/ul& &&
& & & & & & & & & & & & &/div& & &
& & & & & & & & & & &/div& &
& & & & &/div&
& & & & & &/div&
& & & & &/div& & &
& & &ul class=&ks-switchable-nav& style=&display:&&&/ul&
不要看这个代码如此之多,方法与我们上面说的全屏海报的方法差不多的,首先高度与第一点的一样,把height后面的550改成自己的图片的高度就行,这个轮播,我用的三张海报的,把海报传到自己的图片空间,三张海报地址与海报对应的跳转链接分别按照顺序替换代码中的图片一地址、图片一链接,图片二地址、图片二链接,图片三地址、图片三链接,图片链接就是点击海报我们想要跳转的页面链接。这些完成之后保存代码,同样在店招导航下面添加自定义模块,与第一点讲的一样,把改好的代码复制粘贴进去,确定,发布,再看吧,成功了。来看看效果吧
3.固定背景设置
我们去一些大店看的时候,他们的背景不会随着我们的页面拉动而改变,两边有着我们不论怎么拉动页面都可以看到的一些促销文案,二维码图片等等,其实这个也不难,我们只需要做一张宽1920,高一般700左右的就可以图片,然后,两边均匀加上我们想要加的东西,例如:微淘,二维码,促销信息。这点就需要大家用一下ps了,我们加的具体位置呢,是保证我们页面中间950两边,不然会被中间的模块遮挡住。图片做好之后,依然是上传到图片空间,代码如下:
【body{background-image:url(图片地址);background-repeat:no-background-position:background-attachment:}】
就这一句,简单吧,复制图片链接,替换这句代码中的图片地址,然后放在
编辑导航,显示设置下面的文本框,代码放进去,确定,然后发布一下试一试,就ok了。简单吧,赶快试试吧!之前我们也有讲过。
4.店招全屏效果怎么设置
其实这个就不用代码了,想要达到全屏的效果,首先我们得把图片做成的,然后存为jpg格式的图片,然后我们把中间的店铺招牌裁剪下来,上传到图片空间,放进店招里面,如下图
点击保存,下一步
选择我们的配色,根据自己的喜欢,点击保存,左边点击背景设置:
页头背景,下面有个选择图片上传,就把我们保存在电脑上面的的图片上传(注意,保存图片的时候一定注意图片大小不能超过200kb),然后右边选项:页头下边距10像素,选择关闭,背景设置,选择不平铺,背景对其:选择居中,页头背景,不选择。
然后点击保存,点了保存之后,再点击发布哦。看一下效果哦
不要羡慕别人高端大气上档次的店铺首页了,我们也可以,按照烟台淘宝店铺装修小编教给大家的赶快去设置吧!
相关资讯:& &
& & & & & & & & &
Our Partner
业务咨询电话:
地址:山东&烟台电子商务产业园五层
Copyright&2009 XIGEWEB. All Rights Reserved.鲁ICP备号

我要回帖

更多关于 阿里巴巴首页全屏海报 的文章

 

随机推荐