初学者怎么动手给自己旺铺做装修（分享）

铜币发给大家的！！！鼓励新人，做外贸不容易，但做下来了大家都会觉得自己变得很强大！！！

尺寸定格局
1.首先我们来学习的第一步是整个旺铺首页究竟是什么尺寸比较合适，背景和每个板块之间能够和谐融合，不会出现错位。
2.首页整个屏幕的宽度为1920像素，比这个像素小的设计，在某些高分辨率的显示器两边会出现不完全不协调现象，首页高度随自己做的旺铺而定。

图片：01.png

3.标题栏宽度为990像素，高度在100-200像素自由设计
4.导航栏宽度为990像素，高度为33像素，请不要加大减小像素导致版面不协调。
5.导航下面可以插入自定义内容，宽度仍然为990像素，在这个自定义内容板块就是我们发挥设计思维的地方了，这里可以放入代码和gif图像使旺铺效果更佳。
设计定效果
1.打开photoshop，使用一个1920宽像素的文件进行设计排版，群共享有已经拉好参考线尺寸的模版可下载。

2.制作顶部标题，标题尽可能简洁整齐，无需放置太多素材，因为顶部标题是第一视觉，太多东西会把下面的主体部分抢占视觉，一般放置logo、标题、联系方式均可。

图片：02.png

3.接下来制作导航条，发挥想象、参考国外网站、结合色调，搭配背景，醒目的导航设置是买家喜欢的。

4.下面制作第一屏主体大图，

这里务必突出公司优势，让客户第一眼充分了解你，你做什么产品，其实一般客户进入旺铺首页前是在产品页浏览然后进入，既然对产品有兴趣，他只有两个目的，第一查看更多产品，第二了解公司实力，我们在首页一定要把公司的优势展示出来。

如大图放置产品图片，背景则不要太花色、太抢眼，可以用实色适当遮盖一下或者模糊背景，我们要定格的目光是产品，底部背景只是起到衬托视觉的作用，潜意识会告诉客人我的第一眼是看到产品和文字。如背景直接是效果图，我们可以适当模糊产品外的地方，把突出的产品抢占目光。

5.下面是一个公司的优势展示，

这里的板块已经是第二屏了，这里我们可以用几个点来放置内容，清晰、明了。无需太多图片素材，尽量以文字和图标元素为主，当客人看完第一屏产品后，看到第二屏需要适当的歇一下，转移下思维，先来了解下公司。

图片：03.png

6.下面是第三屏，这里我们可以放置产品的分类，产品分类尽可能展示我们的所有产品分类，让客人一目了然。

图片：04.png

7.当客人再看完产品分类后，我们再做一个Why choose us?直接告诉客人为什么要选我，我有什么不同之处。

图片：05.png

8.接下来做一个公司的展示

当客人看完产品分类，以及你公司的优势，想必客人已经对你有50%的了解，我们这里开始可以加强客人的信任感，让客人有再往下看的动作。公司场地，车间，办公室都可以展示出来，客人看完上面只是文字与产品的图片，一定会想看下工厂究竟长什么样的，这里直接加分！

图片：06.png

9.公司介绍下面再放置一些客人的合照、展会照片、以表示真实性，让信任感再度提升。

图片：07.png

10.到这里，客人了解的已经比较多了，下面放置一个多语言国旗和联系方式

（旺旺、邮箱直接点击联系）让客人可以变换自己的语言和马上联系你，促进营销，多语言国旗的代码以及旺旺在线联系的代码在群共享可下载。

图片：08.png

11.这里放置一个滚动的产品展示，

让简洁的网站马上可以生动起来，滚动的产品，每个图片都有独自的超链接，避免全部产品点击到一个链接，需要代码实现功能的到群共享下载左右来回滚动代码。

图片：09.png

12. 再下面是产品的展示，结合每个产品单独配一张banner海报，把产品效果图和产品图结合展示。

图片：10.png

13.网站底部，我们需要做一个网站导航以及联系方式，增加整个首页的统一感，更加专业。

而且这里的加的产品图片可以变动的，大家都知道装修后台限制了很多格式和代码，gif是不能上传的，我们怎样做上去呢，有两个方法的，第一做好gif图片，把后缀改成.jpg在装修后台上传；第二是在阿里外贸圈论坛里发贴的时候上传gif图片，复制图片网址，然后在旺铺里面使用。

图片：11.png

图片：12.png

谢谢楼主的分享，好细致

对大家很有帮助滴

很好，这个是妥妥的技术贴啊，支持，要是有更多这样的帖子就更好了，支持。辛苦楼主了

cn1510125454：很好，这个是妥妥的技术贴啊，支持，要是有更多这样的帖子就更好了，支持。辛苦楼主了回到原帖

谢谢地瓜姐姐，能对大家有帮助就好

代码实现功能怎么找？

学习学习

6666666

xuexi

cn1511246327：学习学习回到原帖

欢迎宝妈哈

cn1511656399：对大家很有帮助滴回到原帖

对大家有帮助就好

旺铺装修是主账号才能操作的吧，新学到的不能实践呢！

学习学习

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

谢谢楼主分享

妥妥的技术贴，谢谢楼主。

好厉害呀

学习啦

有些复杂的样子

超赞

Lucy广州

铜币发给大家的！！！鼓励新人，做外贸不容易，但做下来了大家都会觉得自己变得很强大！！！

尺寸定格局
1.首先我们来学习的第一步是整个旺铺首页究竟是什么尺寸比较合适，背景和每个板块之间能够和谐融合，不会出现错位。
2.首页整个屏幕的宽度为1920像素，比这个像素小的设计，在某些高分辨率的显示器两边会出现不完全不协调现象，首页高度随自己做的旺铺而定。

图片：01.png

3.标题栏宽度为990像素，高度在100-200像素自由设计
4.导航栏宽度为990像素，高度为33像素，请不要加大减小像素导致版面不协调。
5.导航下面可以插入自定义内容，宽度仍然为990像素，在这个自定义内容板块就是我们发挥设计思维的地方了，这里可以放入代码和gif图像使旺铺效果更佳。
设计定效果
1.打开photoshop，使用一个1920宽像素的文件进行设计排版，群共享有已经拉好参考线尺寸的模版可下载。

2.制作顶部标题，标题尽可能简洁整齐，无需放置太多素材，因为顶部标题是第一视觉，太多东西会把下面的主体部分抢占视觉，一般放置logo、标题、联系方式均可。

图片：02.png

3.接下来制作导航条，发挥想象、参考国外网站、结合色调，搭配背景，醒目的导航设置是买家喜欢的。

4.下面制作第一屏主体大图，

这里务必突出公司优势，让客户第一眼充分了解你，你做什么产品，其实一般客户进入旺铺首页前是在产品页浏览然后进入，既然对产品有兴趣，他只有两个目的，第一查看更多产品，第二了解公司实力，我们在首页一定要把公司的优势展示出来。

如大图放置产品图片，背景则不要太花色、太抢眼，可以用实色适当遮盖一下或者模糊背景，我们要定格的目光是产品，底部背景只是起到衬托视觉的作用，潜意识会告诉客人我的第一眼是看到产品和文字。如背景直接是效果图，我们可以适当模糊产品外的地方，把突出的产品抢占目光。

5.下面是一个公司的优势展示，

这里的板块已经是第二屏了，这里我们可以用几个点来放置内容，清晰、明了。无需太多图片素材，尽量以文字和图标元素为主，当客人看完第一屏产品后，看到第二屏需要适当的歇一下，转移下思维，先来了解下公司。

图片：03.png

6.下面是第三屏，这里我们可以放置产品的分类，产品分类尽可能展示我们的所有产品分类，让客人一目了然。

图片：04.png

7.当客人再看完产品分类后，我们再做一个Why choose us?直接告诉客人为什么要选我，我有什么不同之处。

图片：05.png

8.接下来做一个公司的展示

当客人看完产品分类，以及你公司的优势，想必客人已经对你有50%的了解，我们这里开始可以加强客人的信任感，让客人有再往下看的动作。公司场地，车间，办公室都可以展示出来，客人看完上面只是文字与产品的图片，一定会想看下工厂究竟长什么样的，这里直接加分！

图片：06.png

9.公司介绍下面再放置一些客人的合照、展会照片、以表示真实性，让信任感再度提升。

图片：07.png

10.到这里，客人了解的已经比较多了，下面放置一个多语言国旗和联系方式

（旺旺、邮箱直接点击联系）让客人可以变换自己的语言和马上联系你，促进营销，多语言国旗的代码以及旺旺在线联系的代码在群共享可下载。

图片：08.png

11.这里放置一个滚动的产品展示，

让简洁的网站马上可以生动起来，滚动的产品，每个图片都有独自的超链接，避免全部产品点击到一个链接，需要代码实现功能的到群共享下载左右来回滚动代码。

图片：09.png

12. 再下面是产品的展示，结合每个产品单独配一张banner海报，把产品效果图和产品图结合展示。

图片：10.png

13.网站底部，我们需要做一个网站导航以及联系方式，增加整个首页的统一感，更加专业。

而且这里的加的产品图片可以变动的，大家都知道装修后台限制了很多格式和代码，gif是不能上传的，我们怎样做上去呢，有两个方法的，第一做好gif图片，把后缀改成.jpg在装修后台上传；第二是在阿里外贸圈论坛里发贴的时候上传gif图片，复制图片网址，然后在旺铺里面使用。

图片：11.png

图片：12.png

时速鹰眼搜

谢谢楼主的分享，好细致

小苹果

对大家很有帮助滴

cn****454

很好，这个是妥妥的技术贴啊，支持，要是有更多这样的帖子就更好了，支持。辛苦楼主了

Lucy广州

cn1510125454：很好，这个是妥妥的技术贴啊，支持，要是有更多这样的帖子就更好了，支持。辛苦楼主了回到原帖

谢谢地瓜姐姐，能对大家有帮助就好

卓众电缆

代码实现功能怎么找？

莉莉安

学习学习

cn1515377762ophk

6666666

cn1515377762ophk

xuexi

Lucy广州

cn1511246327：学习学习回到原帖

欢迎宝妈哈

Lucy广州

cn1511656399：对大家很有帮助滴回到原帖

对大家有帮助就好

黒崎君

旺铺装修是主账号才能操作的吧，新学到的不能实践呢！

gzxlscan

学习学习

一阵风把我吹走~

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

点石成金-郑方阳佳

谢谢楼主分享

Harrie

妥妥的技术贴，谢谢楼主。

我是小芒果

好厉害呀

蜡笔小新G

学习啦

cn1000509359

有些复杂的样子

yisaikeji

超赞

铜币：	+1 +5 +10 +20 +50 +100	剩余
	* 评分才能提交噢
理由：