最新旺铺自定义全屏通栏海报制作教程

彩虹网

相信大家都很清楚,如今淘宝店铺装修中的全屏海报一般都是被卖家作为促销工具来使用,就是通过全屏海报来给活动做站内的推广。

因此开店对于全屏海报的制作是非常有必要的。可是我们不会做怎么办呢?更不要说怎么使用代码什么的。

如今淘宝装修虽然要求比较高了,以前不能通栏现在也可以制作出自定义全屏通栏的海报了,其实制作全屏海报并不像有些人想的那么复杂。相反,方法还很简单。

我们只要根据装修教程步骤来,你也可以实现自定义全屏通栏海报的:

1、首先准备好全屏海报(一般全屏海报尺寸宽度为1920像素whatsapp网页版,高度在500-600像素左右)

2、再把海报上传到淘宝图片空间,并复制上传好的图片连接(双击图片右侧有复制原图的按钮)

最新旺铺自定义全屏通栏海报制作教程

3、打开在线生成淘宝全屏海报代码工具地址(/tbzx/qphb)复制到浏览器中打开替换图片地址和宝贝连接,注意修改高度及宽度跟海报一致,生成代码。

最新旺铺自定义全屏通栏海报制作教程

4、自定义全屏海报装修方法:

1)进入店铺装修

最新旺铺自定义全屏通栏海报制作教程

2)布局管理中添加自定义代码模版

最新旺铺自定义全屏通栏海报制作教程

3)切换至代码状态,把代码复制进来

最新旺铺自定义全屏通栏海报制作教程

4)保存发布,自定义区域全屏海报就大功告成了。

摘要:淘宝的宽屏海报如何实现的?很多新手卖家对此都是疑问比较多的,找不到宽屏海报的代码,找到了不会使用代码?今天我们就来把代码以及安装教程分享出来...

淘宝的宽屏海报如何实现的?

很多新手卖家对此都是疑问比较多的,找不到宽屏海报的代码,找到了不会使用代码?

今天我们就来把代码以及安装教程分享出来:

1、1920宽屏效果(代码)

'contentCls': 'slide-ziyoou712634383content',

'triggerCls': 'slide-ziyoou712634383triggers',

'navCls': 'slide-ziyoou712634383triggers',

'triggerType': 'mouse',

'effect': 'scrollx',

'prevBtnCls':'prev',

'nextBtnCls':'next',

'steps': 1,

'autoplay': true,

'viewSize':,

'circular': true

}" style="z-index: 9; padding: 0px; margin: 0px; width: 1920px; top: 0px; left: -485px; display: block; opacity: 1; position: absolute;" role="tabpanel" aria-hidden="false" aria-labelledby="ks-switchable555">

2、1920宽屏自定义(代码)

'contentCls': 'slide-ziyoou712634383content',

'triggerCls': 'slide-ziyoou712634383triggers',

'navCls': 'slide-ziyoou712634383triggers',

'triggerType': 'mouse',

'effect': 'scrollx',

'prevBtnCls':'prev',

'nextBtnCls':'next',

'steps': 1,

'autoplay': true,

'viewSize':,

'circular': true

}" style="z-index: 9; padding: 0px; margin: 0px; width: 1920px; top: 0px; left: -485px; display: block; opacity: 1; position: absolute;" role="tabpanel" aria-hidden="false" aria-labelledby="ks-switchable555">

【把你的内容放到这里面替换这些汉字,模块的宽度一定是1920的宽,海报/表格/图片热区都可以,高度可以自定,但是高度改变也要跟着改变两个参数的高度值,只限C店首页使用】

3、测试图

最新旺铺自定义全屏通栏海报制作教程

以上是我们今天制作首页宽屏海报要用到的代码以及图片:

第一个可以把代码全选复制到你的淘宝首页自定义里面,然后预览发布看下效果。【最好使用火狐/谷歌浏览器。还有最好关掉杀毒软件】

最新旺铺自定义全屏通栏海报制作教程

第二个代码其实是一样的whatsapp网页版,只是这里面写了文字说明,就是把你的海报或者表格代码或者图片热区复制到这里面。

我默认发你的图片尺寸大小为:1920*500PX的全屏海报图片,如果你按这个尺寸做图,就直接可以使用了,如果你的高度改变就看下面的解说:

最新旺铺自定义全屏通栏海报制作教程

a.第一个490红色下划线,这个490就是模块的总高度减去10PX像素whatsapp官网,可以改成减去15或减去20也就是485或480看下效果。这里主要是控制空白间距。

b.第二个500PX是你整个模块的高度,如我下面的海报是500所以改成500。

c.第三块绿色区就是你的内容,如海报,表格代码,图片热区,宽度记得是1920PX,高度是500的海报,如果高度改变那上面两个高度参数也跟着改一下。

如果宽度也要改变的话请看下面的图解说明:

最新旺铺自定义全屏通栏海报制作教程

a.三个1920下划线改成你的海报或格子模块的宽度。

b.蓝色地方请注意:蓝色的地方数字等于=(模块宽度-950)/2

如:(上面我的海报是1920宽,减去C店默认通栏宽度950)除以2等于485px,最后就是:(1920-950)/2=485。

1、页头通栏装修准备:

首先需要准备页头通栏1920*150的尺寸,

方法:在PS里面新建两条垂直参考线,第一条485PX,第二条1435PX;再建立一条水平参考线120PX,如图:

最新旺铺自定义全屏通栏海报制作教程

然后把整个页头背景存储为WEB所用格式,注意文件小于200K,尺寸为1920*150像素

在把店招部分给裁剪保存下来,尺寸为950*120像素,如下图:

最新旺铺自定义全屏通栏海报制作教程

2、页头通栏装修步骤:

1. 店招安装(尺寸为:950*120像素)

进入店铺装修后台,店招部分,编辑,选择自定义店铺招牌,然后插入准备好的店招(如果需要加多个链接,可以采用切片或者热点来加店招链接)

最新旺铺自定义全屏通栏海报制作教程

2. 页头背景安装(尺寸为:1920*150像素,文件小于200K)

左侧-->页头,然后更换页头背景图,背景显示:不平铺;背景对齐:居中;应用到所有页面;页头下边距10像素:关闭。

最新旺铺自定义全屏通栏海报制作教程

注意必须是旺铺专业版才能更换页头背景图片,如果不是专业版,新旺铺可以免费升级专业版。

3.导航栏CSS代码改导航条颜色

最新旺铺自定义全屏通栏海报制作教程

在PS里面将导航条中的颜色CMYK值查出来,如下图,值为:9c6218

打开免费在线生成导航栏CSS代码网页:/tbzx/navigationBar_css/navigationBar_css.html

替换下面红框几个部分,注意保留#号,其他地方也可以根据自己实际需要修改,可以在线预览先看效果

最新旺铺自定义全屏通栏海报制作教程

生成代码并复制

最新旺铺自定义全屏通栏海报制作教程

到店铺装修后台,导航栏位置,点击编辑按钮

最新旺铺自定义全屏通栏海报制作教程

点击显示设置,将生成的导航栏CSS代码复制到这里

最新旺铺自定义全屏通栏海报制作教程

最后发布,完整的页头通栏就OK了。

免责声明:由于无法甄别是否为投稿用户创作以及文章的准确性,本站尊重并保护知识产权,根据《信息网络传播权保护条例》,如我们转载的作品侵犯了您的权利,请您通知我们,请将本侵权页面网址发送邮件到qingge@88.com,深感抱歉,我们会做删除处理。