淘宝怎么装修设计1920全屏海报页面代码

淘宝-01.png

 

淘宝PC端的全屏设计方法

我们在做淘宝店铺的PC电脑端设计的时候,想要用全屏的海报页面来做装修,这时,我们可以用到智能版的1920全屏宽图模块来操作,不过呢,这个功能模块只能一张图,添加一个热点链接,如果我想要一张图,多个热点应该怎么操作呢,或是店铺不是智能版的,基础版的要怎么操作呢。

这时以一个新手的角度,从零为大家提供操作教程

 

1:先设计一张全屏图片

设计的图片如下,图片尺寸大小如下图,全屏宽是1920px,高度不限,正常我们可以设置在680-1200左右的高度

如下图,我在做全屏图设计的时候,会先框出两个尺寸来,就是下图中的蓝色线条,中间的线条定位的尺寸是950宽,这是淘宝店铺PC端的固定尺寸,跟店招是一个宽度,外面两条线定位的宽度是1200,这个大小是天猫店铺或是正常的一台电脑,能够在合理范围内的展示尺寸,超过1200就有可能会有些地方无法展示出来。(大概是这个意思吧,大家自行理解)

 

淘宝-02.png

 

2:做完图上传

完成后,把图上传到图片空间

taobao-03.jpg

 

3:打开店铺装修

直接就是图片空间里面打开,或是下面的链接打开

内容查看本文隐藏内容查看价格3立即支付    升级VIP后免费

大家可以收藏这个地址,方便今后店铺装修的时候,找页面,因为淘宝的很多页面呀,真的是很难找到入口

taobao-04.jpg

 

4:打开PC端的装修入口

进入店铺装修后,默认是手机端的,我们要点左侧的电脑小图标,然后根据情况,自己选自定义或是基础页来装修页面

taobao-05.jpg

 

5:新建页面

我们新建一个自定义页面,做为设计装修参考

页面链接:https://shop66717198.taobao.com/p/rd229554.htm

大家可以复制点开查看最终的效果

taobao-06.jpg

 

6:被拦截了😂

我用的是QQ浏览器,有时候,我们在点开新建页面的时候,会发现,浏览器没有任何反应,这时我们可以看到路径栏后面有一个,已拦截的提醒,我们要点开这个然后双击链接,就能重新打开了,我们可以去掉始终拦截当前网站的勾,这样下次就不会出现 这种情况

taobao-07.jpg

7:打开自定义装修

进到页面后,默认会有一个如下图的自定义内容区,如果没有,自己在左边的模块中,添加一个750的自定义内容区就行了

taobao-08.jpg

8:使用工具生成代码

到这里后,我们要借用一个生成全屏设计代码的工具,来实现1920的全屏功能

复制打开下面的链接:

内容查看本文隐藏内容查看价格3立即支付    升级VIP后免费

找到下面的工具

内容查看本文隐藏内容查看价格3立即支付    升级VIP后免费

点开工具后,输入刚才我们上传的1920全屏图片地址,选择平台为淘宝,勾选全屏,然后确定。有多张图的话,就输入多张就行了。

taobao-10.jpg

确定后, 我们可以使用添加热点的功能,如下图,随意的在图片任何地方来添加热点锚点,这样就不用担心1920模块只能加一个热点的限制了

taobao-11.jpg

加完热点后,我们点右上角生成代码

taobao-12.jpg

 

在弹出的窗口中,复制代码

内容查看本文隐藏内容查看价格3立即支付    升级VIP后免费

 

9:粘贴代码到后台

回到第7个步骤中,在打开的自定义内容区,按下图,选择代码编辑

内容查看本文隐藏内容查看价格3立即支付    升级VIP后免费

输入刚才复制的代码后确定,就可以看到图片被装修到页面中了,我们发布一下

taobao-15.jpg

发布后,我们会发现,页面的左侧有一些白色空的位置

taobao-16.jpg

 

10:回到代码修改

这种情况,是代码中的位置有偏差,我们回到后台装修页面,打开自定义内容区,找到下图的代码

内容查看本文隐藏内容查看价格3立即支付    升级VIP后免费

这样一来,图片就达到居中的效果了,具体的可以复制下方链接查看最终效果

https://shop66717198.taobao.com/p/rd229554.htm

 

taobao-19.jpg

 

 

原文链接:https://www.huangsiyong.cn/taobaoquanpingshejidaima.html,原创文章及教程/设计,未经许可,严禁转载或摘编!

0

评论0

请先

没有账号? 注册  忘记密码?