10
2014
12

如何去除模块间的缝隙(三)

 

在淘宝店铺装修过程中,会遇到各种模块缝隙的问题。根据缝隙的位置不同,处理的方法也不同。

有的缝隙是无法去除的,有的缝隙是可以去除的。

下面我们以旺铺专业版自带的第一套模板为例,详细讲解不同位置的缝隙分别如何处理。


如何去除模块间的缝隙(三)——去除950自定义模块上方的缝隙


除了全屏模块之外,我们用到比较多的一类模块是950模块,通常称为”通栏模块“;

全屏模块:通常指的是铺满整个电脑显示屏的模块,模块的宽度大于950px,一般为1440、1680、1920px;

不严格的来说,只要宽度大于950px,一律称为全屏模块;

通栏模块:宽度等于950px的模块一律称为通栏模块;

淘宝美工助理软件里,950px的轮播特效、格子代码均属于通栏模块;

(京东后台把全屏模块称为“100%通栏模块”;)


本文讨论如何使用淘美助理的模块缝隙消除器去除通栏模块上方的缝隙;


1、打开并登陆淘宝美工助理软件;

找到旺铺特效——格子代码——双图触控换图工具;

 

2、记住这里图片的高度;


 

3、点击“生成并复制”按钮,在弹出的信息框中点击“取消”;

 

4、登陆淘宝卖家中心,进入店铺装修后台,点击“添加模块”;


 

5、在弹出的窗口中找到自定义内容区,点击“添加”;

 

6、在刚才添加的模块上点击“编辑”;


 

7、选择“不显示标题”,点击《..》按钮切换到源码输入模式;


 

8、将在软件中复制的代码粘贴到自定义内容区;


 

9、点击“确定”按钮;

 

10、这时我们可以看到,生成的双图触控换图模块,与上一个模块之间存在20px的缝隙;


 

11、下面我们学习去除这个模块上部缝隙的方法:

在淘宝美工助理软件中,选择常用工具——模块缝隙消除器;

 

12、切换到帮助说明界面,阅读帮助内容;

 

13、切换到代码生成界面,输入模块的高度为470;

这个模块高度,指的是要去除缝隙的当前模块高度。有的模块高度需要自己计算,或者用截图工具粗略测量;

 

14、在自定义代码区粘贴刚才生成的双图触控换图代码;

注意这里不能粘贴任何全屏代码,否则会出错;

粘贴进去的代码不能包含“footer-more-trigger”、“sn-simple-logo”、“body”等字符;

 

15、点击“生成并复制”按钮,在弹出的信息框中点击“取消”;

 

16、进入装修后台,在刚才的双图触控换图模块里清除之前的源码,粘贴新生成的源码;


 

17、点击“发布”按钮,可以看到,双图触控换图模块上部的20px缝隙已经消除了;

104839y9kq8xokzkxekl24.png (652.09 KB, 下载次数: 0)

下载附件

2014-9-19 02:57 上传


---------------------------------------------------附加说明---------------------------------------------------

1、图例中的软件界面仅供参考,因版本更新或功能调整,界面可能会有所变动,请以最新版本工具界面为准;

2、由于水平有限和时间仓促,编写过程中难免出现纰漏,如果有相关问题,欢迎在论坛发帖提出;

3、本文由淘美科技(www.taomeikeji.com)原创,转载请注明出处;

« 上一篇 下一篇 »