淘宝店铺装修首页怎么设计?_生活广记

如果是基础版，产品宝贝；专业版则能提供较大的自由装修空间，主体部分的宽度根据店铺性质的不同而有着差异
接下来是全屏店招制作，可以将首页划分为店招在装修之前，全屏海报制作，海报，基本就可以完成一个自定义的首页
灵猫电商提醒你在装修的过程中一定要有足够的耐心；
首先，宝贝的切片和页尾的制作，店铺变化受到限制，页尾
整个首页可分为主体部分和背景，要布局划分筹备工作，可修改的内容与权限不大，首先要看你的店铺属于哪个版本的
每一个店铺标配的4个页面都可以分别进行装修，在没有装修之前系统在每个页面默认了一些常规内容，对于这些内容你可以删除、和修改。
每个页面的装修操作完全一样，这里我们以“店铺首页”的装修为例进行讲解。
页面装修要遵循的原则：
先添加布局-然后在布局里添加模块-然后设置模块的内容-最后发布共5个环节。
1、布局介绍名词解释
布局：是指将页面划分为不同结构的条格，页面的所有装修内容必须放置到布局内;每一个页面可以有多个布局。
目前系统提供了12个布局供选择和组合使用。
特别说明：
每一个页面的最顶部会有一个通栏布局(没有删除、移动操作)该布局里面放置的模块会自动强制显示在店铺所有页面。
建议在该布局内仅放置店铺招牌、店内导航和主推活动的banner等内容;如果只想将内容显示在当前页面，请手动添加新的布局后再添加模块，请勿使用该默认布局。
2、添加布局
2.1可用的布局列表在装修页面点击顶部左上角的添加布局按钮，打开如下选择器：
一共有12个布局供选择。
2.2使用说明
点击添加后，该布局将显示在页面的最底部，如果必要需手动向上移动。
添加后的可视化页面显示“通栏布局(990)”：
当鼠标移动到布局区域内的时候会出现布局的名字、尺寸和操作，如上图：
名词解释
通栏(990)：是该布局名称，同时指出该布局为宽度990px的通栏布局
红叉：表示删除该布局的操作，布局被删除时它所包含的内容也会一并被删除且无法恢复，操作需谨慎。
绿色箭头：表示布局可用的上下移动操作
重复以上操作我们可以根据设计目的向当前网页添加多个不同版式的布局，比如在某个页面添加了7个布局，显示如下：
注意事项：
布局添加后显示为一个虚线框，每一行虚线框都是一个独立的布局。上图中选中的是左右布局，常用来左侧放置分类，右侧放置推荐商品。
你可以根据自己的设计思路，选择使用1个或者多个布局;布局的使用数量建议不要超过10个。
3、模板介绍
选择了布局就等于是为装修设定好了大纲和框架，接下来我们就要往框架里放置内容。
名词解释
功能模块：提供某些特效内容的系统功能称为功能模块。
目前系统已有5个目录分类共15个功能模块。
可用的“模块”列表
在任意一个布局的左下角有一个为名为添加模块的操作按钮，点击会弹出如下：
由上图可以看出模块的所属目录和名称。
上图为“店铺基础模块”，该目录下共有4个功能模块：
分页显示商品：如果您有M个商品，设置每页显示20个，那么就会有M/20个分页，直接点击页码即可查看对应页面的商品列表;每一个页面上的商品可以按照销量价格好评数进行排序。
默认是按照SKU的上架时间从晚到早排序的，您可以通过更换模版来调整默认排序。
商品类目：该模块用来显示店铺内的商品分类。
店内搜索：该模块是店铺内搜索框，您可以根据设计要求将该模块放置在合适的位置。
店内搜索结果：顾名思义用来显示搜索结果的，该模块默认在“店铺内搜索结果页面”预置了，如无特殊要求请不要删除。
第二个目录显示如下：
由上图可见该目录下有2个模块：
销售排行：用来显示店铺内商品的销售榜单，默认是前10个。
商品推荐：这个模块使用的频率最高，诸如“热卖”“店长推荐”“重点推荐”等等均可以使用这个模块来实现。
品牌团：仅适用于第三方卖家。商家可在该模块的“设置”里通过SKU ID录入参加了品牌团购的商品。
第三个目录为“店铺营销”模块，显示如下：
由上图可看到该目录共有4个模块：
自定义内容区：大家又称为“HTML编辑器”，也是装修店铺使用频率最高的模块之一，目前自定义内容可以上传、写代码等。如果您懂一些dreamweaver、html、CSS DIV的话，使用这个模块可以让您装修出更炫的效果。
导航：比较好理解，即为输入一个关键词并配置一个链接网址即可。
雷宁轮播图：通过编辑需要轮播的html片段以及背景颜色，实现html片段的轮播效果!
接下来看第四个目录“公司相关”，截图如下：
由上图可以看出该目录包含3个模块：
店铺简介：即显示品牌介绍内容的模块。
店铺公告：即显示店铺内公告信息的模块。
店招模块：即显示店铺招牌内容的模块。
接下来看第五个目录“公司相关”，截图如下：
由上图可以看出该目录包含1个模块
搭配详情：展示用户在搭配购里面的商品搭配，在“设置”里输入搭配id可置入搭配信息。
在装修的时候根据设计可以添加以上15个模块中的任意一个或者多个，同一个模块在一个页面上是可以多次被使用的。
4、添加模块
4.1、添加“分页显示商品”模块4.1.1添加的操作流程
选中要添加模块的布局，比如：
点击添加模块按钮，依次找到目标模块后点击置入，
模块置入完毕后，可对模块进行修饰和内容完善，操作如下：
4.1.2设置
点击模块的设置，会弹出如下操作面板：
如上图，默认选中的是皮肤操作。
4.1.3皮肤
名词解释
皮肤：用来美化该模块的边框和周边，详细功能
说明：
皮肤选择：系统预置了2套皮肤，可以快速选择使用
标题栏：用来设置模块标题区域范围内皮肤的操作
内容区：用来设置模块内容区域范围内皮肤的操作
底部栏：用来设置模块最底下区域范围内皮肤的操作
4.1.4模板
每一个模块系统都预置了1个或多个模版，通过更换模版可以使模块显示样子瞬间变化：
说明：
模版共分为“最近使用”“我的创建”和“系统模版”，分别含义如下：
最近使用：里面放置的是你最近使用过的模版，可以快速选择无须寻找
我的创建：里面放置的是你自己创建的模版
系统模版：官方或第三方开发者提供模版
4.1.5选项卡
名词解释
选项卡：是指和模块标题并列显示的可添加超链接的功能。选项卡的使用如下：
使用说明：
输入“超链接文本” 和“网址”如上图中的，然后点击增加，可以添加多个，最后点击批量更新，最后记得点击保存哦，待页面发布后可看到效果，点击刷新可即可看到效果哦。
4.2添加“商品类目”模块
4.2.1添加的操作流程
选中要添加该模块的布局，点击添加模块按钮：
选中“商品类目”模块，点击置入：
置入后显示如下：
点击模块名称后面的设置可进行该模块的内容完善和显示效果更换等。
4.2.2设置
点击设置后显示如下：
默认选中的是皮肤。
4.2.3皮肤
同4.1.3操作
4.2.4模板
同4.1.4
4.2.5选项卡
同4.1.5
4.3添加“店内搜索”模块
4.3.1 添加的操作流程
选中要添加该模块的布局，然后点击左下角的添加模块，举例如下：
点击添加模块后，弹出的操作面板中找到“店内搜索”模块，并点击置入：
置入后默认显示如下：
如上图可见，该模块位于“分页显示商品”的下面。
名词解释
模版的拖拉移动：鼠标移动到模块上，并按下左键，不松开左键同时移动鼠标可将模块移动到一个新的位置，比如上下交换位置等。
这时，用鼠标选中“店内搜索模块”，按下左键向上拖拉鼠标，待移动到目标位置时松开鼠标左键，即可将该模版移动到上面(同理也可以往下移动、跨布局移动等)，如下：
松开鼠标：
即可完成模块的上下移动，当然模块的移动不局限于布局内，也可以在布局间来回移动哦。
点击该模块名称后面的设置，可进行内容修改。
4.3.2设置
如上图所示默认选中皮肤。
4.3.3 配置
名词解释
配置默认关键词：你可以设定一个搜索词，设定后该词会搜索框里默认显示出来。
配置热荐词：你可以设定3个推荐词，方便用户直接搜索而无须手动输入。
价格筛?。嚎?艉罂梢匀糜没О凑誑元只M元之间来搜索你的店内商品。
4.3.4 皮肤
操作同4.1.3
4.3.5 模版
操作同4.1.4
目前系统预置有2个模版，截图如下：
4.3.6选项卡
操作同4.1.5
4.4添加“店内搜索结果”模块
4.4.1添加的操作流程
“店内搜索结果”模块默认预置在“店内搜索结果”页面里，如无特殊需求请勿删除。
系统预置该模块的显示位置截图如下：
点击页面装修显示如下：
当用户点击搜索按钮后，用该模块显示搜索结果的，如果删除了该模块，将无法显示搜索结果，请慎重操作，在没有把握的前提下请勿删除和移动该模块。
当然该模块也可以设置，如在上图中点击模块名称后面的设置。
4.4.2设置
默认显示如下：
如上图，默认选中了“皮肤” 。
4.4.3皮肤
操作同4.1.3
4.4.4模板
操作同4.1.4
4.4.5选项卡
操作同4.1.5
4.5添加“销售排行”模块
4.5.1添加的操作流程
选中将要添加销售排行模块的布局，比如：
点击添加模块，在打开的操作面板中找到“销售排行”模块，并点击置入，
置入该模块后默认显示效果如下：
点击设置可进行模块内容配置。
4.5.2设置
点击设置打开操作面板默认是“皮肤” 。
4.5.3皮肤
操作同4.1.3
4.5.4模板
操作同4.1.4
4.5.5选项卡
操作同4.1.5
4.6添加“商品推荐”模块
4.6.1添加的操作流程
选中要添加该模块的布局，比如：
然后点击添加模块，在弹出的操作面板中找到“商品推荐”模块并点击置入：
置入该模块后默认显示效果如下：
点击模块名称后面的设置可以补充内容。
4.6.2设置
点击设置后默认打开的是配置。
4.6.3配置
点击设置后会打开如下操作面板：
名词解释
ID录入：是指通过录入一批商品的SKU，来实现推荐商品的操作。
筛选录入：是指通过1、2、3级分类来批量录入商品SKU，实现推荐商品的操作。
1) ID录入：
如何查看商品的SKU?请参考附件一：商品SKU的查看方式。
2) 筛选录入商品：
商品录入后点击保存，则商品推荐就操作完毕了。商品显示如下：
这个时候我们可以点击，该模块名称后面的设置来更换皮肤哦。
4.6.4皮肤
依次点击模块名称后面的设置，在打开的操作面板中选择皮肤，即可进行皮肤设置。
操作同4.1.3
4.6.5模板
依次点击模块名称后面的设置，在打开的操作面板中选择模版，即可进行模版设置。
操作同4.1.4
该模块是装修店铺时用到最多的模块之一，模版数量目前也比较多，截图如下：
4.6.6选项卡
依次点击模块名称后面的设置，在打开的操作面板中选择选项卡，即可进行皮肤设置。
操作同4.1.5
4.7添加“导航”模块
4.7.1添加的操作流程
选中将要添加导航模块的布局，比如选择一个通栏来做导航模块：
点击添加模版按钮，打开添加模块操作面板，找到“导航”模块并点击置入：
置入完毕后默认显示如下图，可点击名称后面的设置来完善导航模块内容：
4.7.2设置
点击设置按钮后会弹出如下操作面板：
默认打开配置操作。
4.7.3配置
名词解释
导航名称：是指待超链接的文字
链接地址：是指点击文字后打开的网址
添加完毕后点击保存即可看到效果。
4.7.4皮肤
操作同4.1.3
4.7.5模板
操作同4.1.4
4.7.6选项卡
操作同4.1.5
4.8添加“自定义内容区”模块
4.8.1添加的操作流程
选中将要用来添加该模块的布局，并点击该布局左下角的添加模版按钮，在打开的模块选择面板中找到“自定义内容区”并点击置入，
置入完毕后显示如下，可点击设置来完善内容：
4.8.2设置
点击设置默认打开配置内容区域，通俗称呼为“HTML编辑器” 。
4.8.3配置
自定义内容区功能简述，自定义内容支持使用：
1) HTML代码(仅支持body标签内的代码，不含body)
2) 部分CSS代码：常用效果的CSS代码也可以
3) script代码：常见的javaccript代码
4) 系统内置的js库js代码
如果你写入了CSS代码，那么为了避免和系统css冲突请在你的CSS代码前面添加.user等标识，以避免和系统默认样式冲突。
4.8.4皮肤
操作同4.1.3
4.8.5模板
操作同4.1.4
因为轮播图模块可以用来做banner、导航、活动入口、重点推荐等诸多功能，所以该模块的模版按照用途去向分为几个小类，截图如下：
你可根据具体的使用目的灵活组合使用。
4.8.6选项卡
操作同4.1.5
4.9添加“轮播图”模块
4.9.1添加的操作流程
选中要添加轮播图模版的布局，通常用轮播图来做banner、首图等所以一般选择位于页面中上位置的布局：
点击添加模块按钮，找到轮播图模块并点击置入：
模块置入后默认显示效果如下图，可点击设置进行修改内容：
4.9.2设置
点击设置按钮，打开操作面板，默认会选中配置操作。
4.9.3配置
说明：
1) 点击选择上传轮播显示图。
2) 标题：输入每一张的标题。
3) 链接：输入每一张的链接到的网址，注意必须是京东网址。
操作完毕后点击保存，你最多可以设置8张轮播图哦。
4.9.4皮肤
操作同4.1.3
4.9.5模板
操作同4.1.4
4.9.6选项卡
操作同4.1.5
4.10添加“店铺简介”模块
4.10.1添加的操作流程
选中要添加店铺渐渐诶(改)模块的布局，然后点击左下角的添加模块按钮，该模块默认预置在“店铺简介页”里。如果没有特殊需要，请勿删除和移动。
点击设置可对该模块进行管理和美化。
4.10.2设置
说明：该模块的简介内容在供应商后台--我的店铺-店铺装修设置-品牌简介：
4.10.3皮肤
操作同4.1.3
4.10.4模板
操作同4.1.4
4.10.5选项卡
操作同4.1.5
4.11添加“店铺公告”模块
4.11.1添加的操作流程
店铺公告模块默认预置在店铺首页左下角的位置，如无特殊需要请勿删除。
4.11.2设置
该模块的内容维护在“供应商后台”-我的店铺-公告海报管理-公告管理。
点击该模块的设置直接定位到皮肤操作
4.11.3皮肤
操作同4.1.3
4.11.4模板
操作同4.1.4
4.11.5选项卡
操作同4.1.5
4.12添加“店铺招牌”模块
4.12.1添加的操作流程
店招模块默认在每一个页面的顶部，如果无特殊要求请勿删除该模块。该模块的内容维护在“供应商后台”-我的店铺-店铺管理-店铺基本信息。
4.12.2设置
点击可以进行修饰操作。
4.12.3皮肤
操作同4.1.3
4.12.4模板
操作同4.1.4
4.12.5选项卡
操作同4.1.5
5、页面设置
页面设置包含背景设置和分享设置。
5.1背景设置
在每一个页面装修的时候，浏览器窗口的左上角都有一个按钮叫页面设置点击它可以看到背景设置
说明：
背景颜色：可以选择或者输入背景色颜色值。
背景宽度：用来限定背景色、背景图的宽度;数值单位是像素，留空则表示全屏。
背景：请上传一张，大小限制300K 。
采用“背景”结合“自定义内容区”模块可以制作出诸如“全屏banner”之类的效果。
5.2分享设置
为店铺增加分享浮动条，可以选择显示在页面的左侧还是右侧，同时可以设定默认分享词;支持分享店铺到新浪微博，腾讯微博，人人网，开心，豆瓣等其他第三方网站。
分享词，留空则程序自动读取一段文字，建议手动撰写文案后保存。
说明：
分享词：建议输入140字符内，因为要分享到微博等网站，超出部分将被对方网站自动截断。
【淘宝店铺装修首页怎么设计?】
可能会影响微博内容的完整性。