淘宝PC端的全屏设计方法
我们在做淘宝店铺的PC电脑端设计的时候,想要用全屏的海报页面来做装修,这时,我们可以用到智能版的1920全屏宽图模块来操作,不过呢,这个功能模块只能一张图,添加一个热点链接,如果我想要一张图,多个热点应该怎么操作呢,或是店铺不是智能版的,基础版的要怎么操作呢。
这时以一个新手的角度,从零为大家提供操作教程
1:先设计一张全屏图片
设计的图片如下,图片尺寸大小如下图,全屏宽是1920px,高度不限,正常我们可以设置在680-1200左右的高度
如下图,我在做全屏图设计的时候,会先框出两个尺寸来,就是下图中的蓝色线条,中间的线条定位的尺寸是950宽,这是淘宝店铺PC端的固定尺寸,跟店招是一个宽度,外面两条线定位的宽度是1200,这个大小是天猫店铺或是正常的一台电脑,能够在合理范围内的展示尺寸,超过1200就有可能会有些地方无法展示出来。(大概是这个意思吧,大家自行理解)
2:做完图上传
完成后,把图上传到图片空间
3:打开店铺装修
直接就是图片空间里面打开,或是下面的链接打开
大家可以收藏这个地址,方便今后店铺装修的时候,找页面,因为淘宝的很多页面呀,真的是很难找到入口
4:打开PC端的装修入口
进入店铺装修后,默认是手机端的,我们要点左侧的电脑小图标,然后根据情况,自己选自定义或是基础页来装修页面
5:新建页面
我们新建一个自定义页面,做为设计装修参考
页面链接:https://shop66717198.taobao.com/p/rd229554.htm
大家可以复制点开查看最终的效果
6:被拦截了😂
我用的是QQ浏览器,有时候,我们在点开新建页面的时候,会发现,浏览器没有任何反应,这时我们可以看到路径栏后面有一个,已拦截的提醒,我们要点开这个然后双击链接,就能重新打开了,我们可以去掉始终拦截当前网站的勾,这样下次就不会出现 这种情况
7:打开自定义装修
进到页面后,默认会有一个如下图的自定义内容区,如果没有,自己在左边的模块中,添加一个750的自定义内容区就行了
8:使用工具生成代码
到这里后,我们要借用一个生成全屏设计代码的工具,来实现1920的全屏功能
复制打开下面的链接:
找到下面的工具
点开工具后,输入刚才我们上传的1920全屏图片地址,选择平台为淘宝,勾选全屏,然后确定。有多张图的话,就输入多张就行了。
确定后, 我们可以使用添加热点的功能,如下图,随意的在图片任何地方来添加热点锚点,这样就不用担心1920模块只能加一个热点的限制了
加完热点后,我们点右上角生成代码
在弹出的窗口中,复制代码
9:粘贴代码到后台
回到第7个步骤中,在打开的自定义内容区,按下图,选择代码编辑
输入刚才复制的代码后确定,就可以看到图片被装修到页面中了,我们发布一下
发布后,我们会发现,页面的左侧有一些白色空的位置
10:回到代码修改
这种情况,是代码中的位置有偏差,我们回到后台装修页面,打开自定义内容区,找到下图的代码
这样一来,图片就达到居中的效果了,具体的可以复制下方链接查看最终效果
https://shop66717198.taobao.com/p/rd229554.htm
原文链接:https://www.huangsiyong.cn/taobaoquanpingshejidaima.html,原创文章及教程/设计,未经许可,严禁转载或摘编!
请先
!