淘宝页面装修教程

合集下载

淘宝店铺装修首页会员模块设置教程

淘宝店铺装修首页会员模块设置教程为提升消费者在店铺首页的会员体验，助力商家实现店铺访问流量的快速承接，淘宝在2019年8月正式上线店铺首页会员模块的全新版本。

新版本结合新版会员中心的升级，进一步实现用户访店后的会员关系沉淀及会员用户的快速激活。

操作教程1、登录旺铺装修后台，找到需要装修该模块的首页页面，点击装修页面进入页面装修后台进入左侧模块，选中营销互动类找到店铺会员模块，并将该模块拖至当前待装修页面内，并调整在页面的排布位置。

建议：为了更好的承接店铺的用户流量，提升新会员入会率及老会员的权益互动参与率，建议可将该模块置顶排序！营销互动模块中目前存在两种店铺首页会员模块，请选中如下新版模块选中页面模块设置展现模式，目前该模块支持两种设定模块：1）智能设定模式：文本内容：选择文本内容为智能文本，将针对满足入会门槛的用户展示商家配置新会员礼包内的相关权益并快速引导入会；针对会员用户默认展示当前用户的会员等级及积分信息，后续将增加互动内容及权益推荐内容；背景图片：可快速选择平台提供的标准图片素材自定义设定模式：文本内容：可编辑最多13个字的引导文案，该文案仅面向非会员引导入会展示，针对会员用户默认展示当前用户的会员等级及积分信息，后续将增加互动内容及权益推荐内容；自定义文案建议商家突出核心的入会权益引导，以增强入会转化率！背景图片：可选择自定义的背景图片，实现与店铺首页更好的视觉融合，图片尺寸为：702*110保存模块内容、保存并发布页面，即完成会员模块的装修。

注意：发布并选中该页面作为店铺首页页面后，用户访问时将进行实时判断，非会员满足入会门槛，且商家有配置入会权益（新会员礼包）时会进行展示。

如用户不满足入会门槛，或无可享受的新会员权益则不进行展示；会员将默认展示模块！。

淘宝导航装修css全解超赞超详细

一、首先我们进入到店铺的装修页面，将鼠标放在导航上面会出现“编辑”字样，单击，如图选择“显示设置”选项卡1.修改导航分类下面的背景色，代码如下：.skin-box-bd .link{background:#000000;}效果如下--------------------------------默认是黑色的，如果你要别的颜色，只要修改#000000就可以了，颜色对照表地址/other/rgb.htm--------------------------------------------------------------------------如果你想要更加个性，而不想只要简单的纯色块的话，可以自己做图片，然后连接上去，代码如下：.skin-box-bd .link{background:url(图片链接);}效果如下--------------------------------将“图片连接”换成你的图片的连接就可以了，一般都是自己做好然后上传到淘宝图片空间，然后链接就可以了！在图片空间点击对应图片下方的“链接”按钮可以直接复制图片链接，替换到代码里就可以了！2.修改整个导航的背景色【其实只修改了有分类之外的部分（前面我们已经修改好了分类背景），还有最右边那部分没改到，后面会有修改那里的代码，一步步跟着来就没错了！】代码如下：.skin-box-bd .menu-list{background:#000000;}效果如下--------------------------------修改颜色的方法同上--------------------------------------------------------------------------修改成图片的代码如下：.skin-box-bd .menu-list{background:url(图片链接);}3.修改最右边留下的一小块，2里提到的，代码如下：.skin-box-bd{background:#000000;}效果如下--------------------------------修改颜色的方法同上--------------------------------------------------------------------------修改成图片的代码如下：.skin-box-bd{background:url(图片链接);}这样做你的导航完成的差不多了，但是发布之后你会发现字体的背景色块有问题，只有文字下方才有色块，比如“首页”，只有“首页”两个字下面有颜色，其它有些四个字的就四个字有，这样很影响美观！所以我们还要加上两条代码4.字外：.skin-box-bd .menu-list .menu-selected .link{background:#000000;}5.字里：.skin-box-bd .menu-list .menu-selected .link .title{background:#00000 0;}字外+字里=全部！这样就完整了好了，以上就是我的淘宝店里的导航里用的所有代码，下面再给大家一些别的代码！！二、下面红色部分为可以修改的，颜色代码大家很熟悉了，字号就是字体的大小，在网页中，字体大小一般是14到20左右，根据自己的需要设定吧，直接填写数字就OK了！1.导航背景色代码（除去“所有分类”）如下：.menu-list .link{background:#000000;}2.导航栏文字（除去“所有分类”）如下：.menu-list .menu .title{color:#颜色代码;font-size:字号px;}3.“所有分类”的背景色代码如下：.all-cats .link{background:#000000;}4.“所有分类”的文字代码如下：.all-cats .link .title{color:#颜色代码;font-size:字号px;}最新代码，解决字体改大后导航右侧消失的情况！代码如下：.all-cats .link .title{font-size:字号px;}.all-cats .link {background:#3BAFFF;margin:0;padding:0px 3px;}字号最大为21，继续变大右侧导航将消失！该代码还不是很完善，我们会继续研究！5.二级分类文字代码如下：.popup-content .cats-tree .fst-cat .cat-name{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}原来效果修改后效果6.二级分类背景代码如下：.popup-content{background:#000000;}7.三级分类文字代码（除去“所有宝贝”分类）如下.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}原来效果修改后效果8.三级分类文字代码（包括“所有宝贝”分类字体大小）这样就无法改变字体颜色，我们会继续完善该代码！如下.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色;}9.三级分类背景代码：.popup-content .cats-tree .snd-pop-inner{background:#000000;}10.一级导航分类（除去“所有宝贝”分类）分隔线颜色代码如下：.menu-list .menu{border-color:#000000;}11.一级导航“所有宝贝”分类分隔线颜色代码如下：.all-cats .link{border-color:#000000;}12.一级导航分类的宽度修改代码如下：.menu-list .menu{background:#颜色;margin:0;padding:0px 增加的宽度px;}13.鼠标滑过一级分类导航文字变换背景色代码如下：.menu-list .menu-hover .link{background:#000000;}14.鼠标滑过一级分类导航文字变换颜色代码如下：.menu-list .menu-hover .link .title{color:#FFFFFF;}15.鼠标滑过二级分类导航文字变换背景色代码如下：.popup-content .cats-tree .cat-hd-hover{background:#000000;}16.鼠标滑过二级分类导航文字变换颜色代码如下：.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color: #ff0000;}17.鼠标滑过三级分类导航文字变换背景色代码如下：.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}18.二级分类上加空间代码如下：.popup-content .cats-tree{margin:0 0 50px 0;}19.修改“所有宝贝”右边小图标代码如下：.all-cats .link .popup-icon{background:url(图片连接);}20.修改二级分类右侧图标代码如下（有三级分类才会显示）：.popup-content .cats-tree .fst-cat-icon{background:url(图片连接);}22.在三级分类前加上小块白色代码如下：.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;widt h:3px;}好了，我简单的导航修改技巧就到这里了，以上效果都是用白色或黑色做给大家看，是为了大家能更好的看清楚效果，如果上面有些看到是全白的，那是因为字体颜色和背景颜色一样才变成全白的，修改了背景大家再修改字体颜色就可以了！希望大家都可以做出自己喜欢的导航！三、关于店招和导航两侧的修改！这里修改好，跟导航和店招结合在一起会更加完美！修改方式如下：在店铺装修页面的左上方有个“装修”，将鼠标放在上面会出现下拉菜单，选择“样式菜单”单击左侧的“背景设置”这里有两个选项卡，分别是“页头设置”和“页面设置”。

淘宝店铺扶植版装修教程

扶持版装修教程①：点击旺旺上的淘，然后点击店铺管理出来这个页面点击自定义模板的编辑点击编辑之后出来一个框扶持版不支持一键安装，只能按照代码去安装啦。

命苦啊点击框框上的菜单源代码点击之后我们就需要找代码放进去了②：找代码下载这个之后，解压出来一个文件夹，我们点击浏览下自己需要模板几比如我看上了模板01打开之后我们找到代码这个文件夹然后直接点击打开这里的文档就是代码来的了。

我们刚才点击编辑装修的是右边的一个自定义，那么我们就要复制相应的代码进去。

扶持版的模板只能支持一个自定义，不可以超过20K。

所以我们装修的时候，复制的代码不能超过20K哦。

我们选择1-3个文档复制进去就可以了。

太多了就会超过20K不能保存哦！③：复制粘贴代码到自定义版块我们打开右边01，出来很多英文，这些就是代码来的哈我们全选，复制，然后粘贴到装修版块粘贴进去之后继续同样的操作，复制右边02打开，之前复制01进去了，现在直接在01的代码后面粘贴02. 我们现在假设只复制01,02就可以了。

全部复制粘贴完成之后。

看看编辑的框到了这里，我们要预览下装修的效果点击下源代码就可以看到编辑的效果了点击保存就可以看看店铺装修的第一步效果我们装修好右边的自定义，现在我们还可以装修左边的自定义，也就是分类这些模板的④：装修左边的分类自定义点击这个添加一个自定义模板然后变成这样点击编辑之定义内容区出来这个框框是不是很眼熟呢。

亲们看到的就是自定义编辑的版块了。

和我们刚才上面说到的方法是一样的咯点击编辑源代码然后复制粘贴左边的链接预览之后保存保存之后，我们看到的就是简单装修之后的店铺了⑤：店招点击编辑确定之后保存点击右上角的发布，我们的装修就完成了。

2013最新淘宝店铺装修教程第五课

4
‹#›
基础版装修全攻略教程
‹#›
店铺自定义招牌
‹#›
做好店铺招牌的几点步骤
• • • • • • • • • 1招牌尺寸页头高度为：150px（已包含导航）建议招牌尺寸：950*120 px（即加上导航高度，刚好是150px，可避免发布后导航被挤掉不显示的问题） 2店招模块误删后怎么找回来方法一：在页面管理-页面编辑-首页-“+添加模块”选择添加店铺招牌方法二：在页面管理-布局管理-首页-店铺页头 -“+”添加店铺招牌 3招牌中的收藏按钮制作收藏按钮需要自行设计制作。 4招牌代码来源招牌代码是html代码，可自行编写后直接复制到自定义招牌内容区。如果需要查看店铺招牌代码，在编辑框中选择“查看代码”按钮即可 5店招左侧的方块块（写着我们的店铺名的）能去掉吗？可以。用自定义招牌覆盖即可 6页头背景与店招的区别（基础版无背景功能）页头高150px，店铺招牌宽950 px。店铺招牌两次超出950px之外的部分为页头背景区域，页头背景需单独装修设置，页头背景设置路径：装修-样式编辑-背景-页头背景
‹#›
• • • • •
店招基本操作
• 登陆：卖家中心——店铺管理——店铺装修
‹#›
‹#›
‹#›
‹#›
店招基本操作完成
‹#›
旺铺导航教程
‹#›
‹#›
‹#›
‹#›
• CSS导航在线生成工具网址：/tool/dhcss/
‹#›
宝贝分类
‹#›
图片空间
卖家中心——店铺管理——图片空间
鼠标滑过图片可执行操作
宝贝推荐
‹#›
‹#›
‹#›
‹#›
‹#›

淘宝装修模板代码教程大全(完整版)

淘宝装修模板代码教程大全(完整版)1)公告栏的装修图片代码,帖到公告栏就行了. 不过还是有好多人来问我公告栏的位置-----点我的淘宝-----管理我的店铺------基本设置，下面写着公告的位置。

<img src="图片的所在的地址"><img border="0" src="图片地址" />2).公告悬浮装饰图片代码，COPY到公告的最下面就好了哦，<IMG style="right: 5px; BOTTOM: 0px; POSITION: relative" src="你图片的地址">3)加背景音乐的代码。

进“我的淘宝”点击“管理我的店铺”进入“基本设置” 先贴代码，再写你的公告文字<bgsound src="你的背景音乐地址" loop=-1>4)浮动的图片的代码：</td></tr></table>;<img height="150" src="图片地址"5)滚动字幕代码：这个用处可就多了，放到哪里那些字都是会动的，有很多朋友在好评里都会用到哦！<marquee>输入你想说的话</marquee>6)自定义颜色代码<font color=blue>输入你想要说的话</font>注意:等于号"="后就是颜色的英文：不喜欢这个颜色还可以换成其他颜色的，如：red(红)、blue(蓝)、green(绿)等；不过注意代码的总长度不要超过40哦。

7)增加链接链接内容<a href="链接地址">链接内容</a>8)店铺分类的代码<img src=" 图片的地址" /> 代码就放在：我的淘简单介绍一下我的操作方法：1、选好喜欢的宝贝分类模板，复制保存之后，填上适当的文字，然后上传到网上相册；2、复制代码<img src=" 图片的地址" /> 到宝贝分类中；3、打开网上相册，选中相应的模板，右击属性，复制属性中的图片地址；4、由于网上的图片地址过长，因此要在/上进行网址缩短工作：即把复制的图片地址到这个网站中进行缩短，然后会出现一个较短的图片地址5、再用短地址放入<img src=" 图片的地址" /> 的""中就ok了9)如何在店铺公告添加个性的鼠标指针：马上copy这个代码，它可以让您的店铺公告更有吸引力呀<table style="CURSOR: url('上传后的鼠标指针的网址')"><tr><td><table border="0" style="TABLE-LAYOUT: fixed">10)宝贝描述加上个性的鼠标指针自己喜欢的鼠标指针选好了吗？那就马上复制这个代码在宝贝描述里就可以了，当然还要先选“编辑源文件”<table width="100%" style="CURSOR: url('这里是已上传的鼠标指针网址')"><tr><td width="100%">另外，还要在源文件底部输入代码：</td></tr></table>宝贝描述中都带有“店铺收藏”字样，但是最新的淘宝收藏夹变化了，导致了以前的方法不灵了，如何解决这个问题呢？把以前的代码换成如下即可解决这个问题：/popup/add_collection.htm?id=62323209&itemid=62323209&itemtype=0&ownerid=115d86206eeba2e9d827ef69ac80a71c&scjjc=2（欢迎大家点击这个链接看看我说的方法灵不灵啊，点击确定之后，到您自己的收藏夹里面看一眼，是不是我的店铺已经被您收藏了？^-^^-^ 呵呵^-^）别忘了把62323209&itemid=62323209&itemtype=0&ownerid=115d86206eeba2e9d827ef69ac80a71c&scjjc=2这个数字修改成您自己的店铺ID哦（不修改的，我热烈的欢迎啊，哈哈）如何获得自己的店铺ID呢？进入“我的淘宝”/“查看我的店铺”，会看到浏览器的地址栏中有类似下面的字样：/shop/view_shop.htm?nekot=c21pbGVfNWNt1281414248539&user_number_id=321589306 user_id=后面的那串数字就是您自己店铺的ID了，把这个ID COPY下了，替换上面的那个代码就可以在宝贝描述模板里面添加收藏店铺了！！12)添加音乐代码：百度音乐/搜索你想要的歌曲，记得要选连接速度快的。

淘宝店铺装修教程——新旺铺教程之列表页装修

新旺铺教程之列表页装修
先来了解几个列表页的展示第一种是无法装修的--“店内搜索页”，也就是买家在店铺内搜索了宝贝出来的搜索结果页，暂时不支持装修，如下图所示：
第二种是“默认宝贝分类页”【点击某个宝贝分类会出现的页面】，这个页面可以自由装修，可添加通栏或者750宽度的模块，如下图示例通栏布局模块的添加：
该装修区域可重点放置本类目的促销商品信息，可根据自己店铺的需要添加所需的模块，有6个模块可供选择，如下图所示：
第三种就是新旺铺出现的个性列表页--可以完全对某一类目进行个性化的装修，形成子频道点击“+”可以添加新的个性列表页如下：
对于新添加的这个页面必须取名以及关联你想关联的类目，可以几个类目用一个子频道
也可以一个类目一个频道如下：
最后别忘记点击“保存”
保存完成之后就可以对新建的宝贝列表页进行装修了，具体装修操作和店铺首页相同注：个性列表页除了“宝贝列表”模块无法删除，其余所有默认模块均可删除，进行自由装修！
如果想删除的话先在左侧选择你想删除的个性列表页然后点击“页面编辑”的“删除页面”即可。

淘宝天猫网店美工教程项目10 无线店铺装修设计

5-淘宝旺铺装修教程

目录背景 (2)列表页 (4)店招 (7)店铺导航 (11)图片轮播 (14)悬浮旺旺 (18)宝贝分类 (20)特价模块 (27)宝贝推荐区 (30)友情链接 (32)宝贝描述模块 (36)布局管理 (39)备份与还原 (42)背景点击”装修“--”样式编辑“--”背景设置“ 便可设置店铺背景点击”背景设置“ --”页头设置“进店招位置的背景设置两种方式设置：选择调色器或者选择本地上传一张图片点击”选择要设置的页面“ -- 可以选择不同页面不同背景“页面设置”同”页头设置“列表页先来了解几个列表页的展示第一种是无法装修的--“默认搜索页”也就是买家在店铺内搜索了宝贝出来的搜索结果页。

第二种就是以前老旺铺的列表页--“默认宝贝分类页”【点击某个宝贝分类会出现的页面】这个页面可以在右侧750位置添加促销区点击“+”可以添加新的个性列表页如下：可以几个类目用一个子频道也可以一个类目一个频道如下：最后别忘记保存：如果想删除的话先在左侧选择你想删除的个性列表页然后点击“页面编辑”的“删除页面”即可具体的个性列表页同首页。

新旺铺的一大特色是：列表页可以删除掉所有默认模块自由装修啦！店招1.如何编辑店招？首先进入店铺后台点击店招“编辑”按钮2.可以使用默认的店铺招牌“店铺名称”虽然是默认店铺基本设置也可以修改3.可以选择图片空间选择图片进行默认店招背景5.如果不喜欢店招默认显示可以选择“自定义招牌”自由装修此处可以插入“banner maker”6.自定义招牌可以自由的输入代码如果店招自定义区内什么都没有是空白店招就会“消失不见”7.可以在右下方恢复历史记录8.最后进行保存即可拉！热门问题答疑：1招牌尺寸页头高度为：150px（已包含导航）建议招牌尺寸：950*120 px（即加上导航高度，刚好是150px，可避免发布后导航被挤掉不显示的问题）2店招模块误删后怎么找回来方法一：在页面管理-页面编辑-首页-“+添加模块”选择添加店铺招牌方法二：在页面管理-布局管理-首页-店铺页头-“+”添加店铺招牌3招牌中的收藏按钮制作收藏按钮需要自行设计制作。

淘宝店铺首页设计资料ppt课件

40
ห้องสมุดไป่ตู้
41
30
四、淘宝店铺首页海报设计技法
5. 展示多种产品：当海报上要放置过多的促销产品，可以采用这种版式。产品平行排版，中间利用半透明的框展现文案。
31
四、淘宝店铺首页海报设计技法
6. 斜切式构图：斜切式构图会让画面显得时尚，动感活跃。但是画面平衡感不是很好控制。一般文案倾斜角度不超过30°，文字往右上方倾斜便于阅读。
– 适合店铺中推成爆款或者想要提高某款产品的转化率
• 新品上市、特价促销
– 适用于新品上市，并且打算全力推广的产品
23
四、淘宝店铺首页海报设计技法
（二）常见海报主题方案
3. 品牌宣传
• 品牌宣传适用达到一定认知度的品牌以及在行业中有一定的知名度。
24
四、淘宝店铺首页海报设计技法
（三）海报设计原则： “3”原则
– 实物照片
• 直观形象的告诉客户自己店铺是卖什么的
– 产品特点
• 直接阐述自己店铺的产品特点，第一时间打动客户，吸引客户
– 店铺（产品）优势和差异化
• 告诉我的店铺和产品的优势以及和其他的店铺的不
同，形成差异化竞争
12
三、淘宝店铺店招设计技法
（四）店招制作规范、流程：
1. 确定风格：视产品而定 2. 布局：店招尺寸、店招构成、区块划分
（一）海报设计思路：
1. 海报要与大色调统一
• 在设计海报时，先观察大环境，海报设计尽量避免与主色调产生强烈对比，必须要用对比色设计海报时，要考虑降低纯度或明度
18
四、淘宝店铺首页海报设计技法
（一）海报设计思路：
2. 观察产品亮点定背景色

淘宝全屏装修教程

淘宝全屏装修教程淘宝全屏装修是一种能够充分展示产品和品牌形象的装饰方式。

在淘宝店铺中，通过设置全屏装修，可以提升店铺的视觉效果，吸引更多的购买者。

接下来，我将为您介绍淘宝全屏装修的教程。

首先，我们需要进入淘宝店铺的后台管理页面。

在页面左侧导航栏中找到并点击“店铺装修”选项。

然后，选择“全屏装修”模块，点击“开始装修”按钮。

接着，我们进入了全屏装修的编辑页面。

在编辑页面的左侧，有各种不同的装修组件可供选择，比如图片轮播、商品推荐等。

我们只需要按需选择装修组件，然后将其拖拽到合适的位置即可。

在拖拽组件到页面上后，我们可以对其进行进一步的设置和编辑。

例如，可以修改组件的尺寸、样式和内容。

如果需要添加图片，可以点击组件中的“上传图片”按钮，然后选择本地的图片文件进行上传。

同时，我们还可以对页面的整体布局进行调整。

通过选取不同的模板风格和调整页面的背景颜色，可以打造出符合自己店铺风格的全屏装修效果。

在进行装修时，建议保持页面的简洁明了，不要过分拥挤和花哨，以免影响用户体验和加载速度。

同时，也要注意图片的质量和大小，保证在不同屏幕分辨率下的显示效果。

完成装修后，一定要点击页面右上角的“保存”按钮，将装修效果应用到店铺的前台页面上。

此外，还可以在“预览”按钮下查看装修效果，确保页面的显示效果和操作流程符合预期。

总而言之，淘宝全屏装修是提升店铺形象和吸引购买者注意力的重要手段。

通过掌握全屏装修的编辑技巧和注意事项，我们可以打造出独特而专业的店铺页面，提升店铺的竞争力和销售额。

希望以上教程能对您有所帮助！。

淘宝网店铺装修全攻略(八、店铺介绍、个人-萧然的日志-网易博客

淘宝网店铺装修全攻略（八、店铺介绍、个人... - 萧然的日志- 网易博客淘宝网店铺装修全攻略（八、店铺介绍、个人空间、动态签名与网店视觉识别系统设计）(2010-11-03 17:27:40) 1 店铺介绍的设计全流程店铺介绍的设计与网店描述模板的设计是一个道理，通过上一章对网店描述的介绍，相信大家对于将能够更加好的掌握店铺介绍设计方面的知识和技巧。

什么是店铺介绍模板？淘宝网店有一个店铺介绍的网页，店铺介绍的网页大家可以自己编辑，这样，我们就可以制作店铺介绍模板放进去，从而起到美化网店的作用。

如何设计店铺介绍模板？店铺介绍模板的设计和网店描述模板的方法和步骤是一样的，最大的变化就是需要修改一些设计文字。

在这里我只简单的介绍一下店铺描述模板的制作方法。

制作使用的软件主要还是用到Photoshop 或者Dreamwear 、Fireworks等。

为了制作店铺介绍模板先前也要进行模板的素材的收集和构思。

接着就使用制图软件，按照自己的思路来整合各个元素，设计成网店介绍模板，使之成为一个完整平面设计图形。

切片保存成为web 格式文档后，把切片上传到网络相册空间，再使用Dreamwear （或者Frontpage ）重新编辑一下html 文件。

店铺介绍模板如何安装呢？店铺介绍的模板安装并不难，只要关键就是制作店铺介绍模板的安装代码。

下面介绍安装店铺介绍模板的步骤：步骤一、从网上下载一个免费的店铺介绍模板代码，当然能够设计那就更加好了。

步骤二、淘宝网—＞我的淘宝—＞我的店铺管理—＞基本设置，点击网络编辑器中编辑源文件”。

步骤三、复制源代码，粘贴到网络编辑器的源代码编辑形式的文本框中。

步骤四、点击网络编辑器中的“使用编辑器”。

步骤五、添加相应的店铺介绍文字后，预览效果，满意后，点击确定就搞定了。

2、个人空间设计全流程个人空间也是展示和宣传自我的平台，对于网商来说可以充分利用这个平台宣传自己，从而更加有利于促成网络交易的成功。

淘宝店铺装修模板代码使用教程

淘宝旺铺自定义内容区装修模板代码使用教程
淘宝旺铺中，自定义内容区可以显示店铺公告，人气宝贝，店长推荐，新品发布，联系方式等。

如下图：
淘宝店铺自定义内容区要编辑源文件，装修涉及的代码，一般都是放在自定义模块里的。

一般来讲，自定义模块根据位置分左侧模块、右侧促销自定义模块等。

这些代码的使用方法都一样，不同的只是模板的位置不同、大小不同而已。

这里我们以旺铺右侧自定义模块代码的插入为例子，给大家讲讲如何插入模板代码。

在插入代码前，请先添加你需要的自定义模块。

在添加好模块后，按以下步骤插入代码：
第一：进入店铺装修页面。

第二：点击右侧自定义内容区的“编辑”按钮。

第三：点击“编辑HTML源码”按钮。

第四：找到你的模板代码并复制。

第五：当按钮变成灰色时即进入代码编辑状态，粘贴代码。

第六：模板效果显示出来。

第七：点击插入图片按钮，插入空间图片。

插入图片前要把图片上传到博客，或者提供免费相册的网站，QQ相册空间等。

粘贴图片地址后，就可以显示你的宝贝图片了。

第八：
第九：点击发布，查看效果。

可浏览相关网站，下载免费模板使用：
/html/wangpucuxiao/wangpucuxiao_2155.html /
/。

淘宝店铺装修教程之HTML基础代码介绍

淘宝店铺装修教程之HTML基础代码介绍一、HTML基础代码介绍每一个动物、每一个生物都有自己的语言，而计算机也不例外，同样有自己的语言，在计算机繁杂的编程语言中，最简单最容易理解的就属HTML语言，在淘宝店铺里所有的店铺装修无疑都是靠这样一种语言来完成的（当然同样也要靠图片设计工具），虽然现在有很多的辅助工具来帮助我们进行直观的设计，但学习HTML还是对店铺装修有很大帮助的，HTML为超文本连接，他是目前网络上应用最为广泛最为基础的一种描述性语言，目前进行对网页进行编辑的最好的工具为“Macromedia Dreamweaver 8”，利用这款软件我们可以进行非常直观的将网页进行界面式设计，但有些时候在调试代码或者修改一小段代码的时候，我们则必须懂得这些代码的意思，下面我就来讲解一下HTML的一些基础。

“因为是作为店铺装修用所以我只教对店铺装修有用的代码”例1、<html><head><title>淘宝网</title></head><body><p>你好，我是淘宝网的忠实店家</p></body></html>例子解析：以上是一个完整的基础网页代码，所有的编写必须遵守以上规则，网页必须是以<html>开头以</html>结尾<head></head>之间是文本头信息，可以显示在网页的浏览器最顶端的标题栏里，例子中网页标题栏会显示”淘宝网”<body></body>是最主要的部分，绝大部分的编辑都要在这里面进行，是网页的主体。

<p></p>是文本标签，在网页中会显示“你好，我是淘宝网的忠实店家”大部分编辑必须遵循<>开头</>结尾。

二、HTML在淘宝中的应用在淘宝的编辑器里，过滤了很多功能，如”javascripts”的脚本语言，这是因为怕有一些不法店主利用这个语言来编写病毒或进行网页跳转等等，但我们还是可以有很多功能可用，下面我逐一介绍主要功能。

店铺 (店招页头、页面)背景设置教程

店铺(店招页头、页面)背景设置教程1、淘宝店铺背景说明淘宝店铺背景由淘宝店招页头背景和淘宝网店页面背景构成。

由于目前淘宝店铺有专业版旺铺和基础版旺铺两个版本。

旺铺不同，淘宝店铺背景设置稍有不同。

大家仔细看我们下面的介绍说明。

如果你不清楚自己网店的旺铺版本，在你网店首页，底部，淘宝有备注的，仔细看一下就知道了。

如果你是新手网店，可以免费升级到专业版旺铺哦。

具体见教程：《旺铺专业版与基础版的区别，淘宝基础版如何升级专业版?》2、淘宝专业版旺铺背景设置流程专业版旺铺，淘宝店铺背景分页头背景图+页面背景图（1）页头背景图：店铺顶部店铺招牌的位置，高度0-150px区域内。

页头背景图，我们也称淘宝店招背景图。

页头背景图的尺寸，各种各样，有1920x150这样完整的全屏的淘宝店招页头背景图，也有适合横向平铺的小图，还有可以用来直接平铺的小图。

具体，以你的店招设计为准。

页头背景图设置很简单，在淘宝装修后台后台首页，点左侧“页头”，进去设置即可。

如果需要显示设置的背景色，记得在“页头背景色”点颜色正方形小图标，设置背景色。

然后勾选后面的“显示”。

如果背景色设置不成功，或者没显示，要么你没勾选“显示”，要么你在下面上传设置了“店招背景图”。

一般情况下，背景色和背景图片是二选一。

且背景图片优先级最高。

如果页头背景有背景图，单击“页头背景图”，点更换图片，上传图片后，按需要设置好“背景显示”和“背景对齐”提示：如果你在使用鱼摆摆网或者其他网站的淘宝全套背景图，特别含全屏店招的模板，一般需要上传或者更换页头背景图，然后根据需要，将“背景显示”设置为“平铺”或者“横向平铺”或者“不平铺”。

“背景对齐”，一般设置为“居中”提示1：店招导航条与下面的模块，默认有个10px间隔，如果不需要，点关闭。

提示2：页头背景设置后，记得在右下角，点一下“应用到所有页面”。

（2）页面背景：淘宝店铺整体的背景。

目前常见的淘宝店铺页面背景图有淘宝悬浮固定背景图、纵向平铺长图、平铺小图。

淘宝网店页面设计布局配色装修一本通第3版教案第7章-网店色调与配色方案

7
7.2.2
适用橙色系的网店
橙色和很多食物的颜色类似，例如橙子、面包、油炸类食品，是很容易引起食欲的色彩，如果是以这类食物为主的店铺，橙色是最适合的色彩了。
8
7.3
黄色系的配色
黄色是各种色彩中最为娇气的一种颜色，也是有彩色中最明亮的颜色，因此给人留下明亮、辉煌、灿烂、愉快、高贵、柔和的印象，同时又容易引起味觉的条件反射，给人以甜美、香酥感。
14742适用紫色系的网店在商业设计中绿色所传达的是清爽理想希望生长的意象符合服务业卫生保健业教育行业农业的要求1575绿色系的配色绿色是一种让人感到舒适并且亲和力很强的色彩绿色在黄色和蓝色之间偏向自然美宁静生机勃勃宽容可与多种颜色搭配而达到和谐也是页面中使用最为广泛的颜色之一
淘宝网店页面设计、布局、配色、装修第3版
21
7.7.1
白色的网店
白色物理亮度最高，但是给人的感觉却偏冷。作为生活中纸和墙的色彩，白色是最常用的页面图背景色，在白色的衬托下，大多数色彩都能取得良好的表现效果。白色给人的感觉是：洁白、明快、纯粹、客观、真理、纯朴、神圣、正义、光明等。
22
7.7.2
灰色系的网店
灰色居于黑与白之间，属于中等明度，灰色是色彩中最被动的色彩，受有彩色影响极大，靠邻近的色彩获得生命，灰色靠近鲜艳的暖色，就会显出冷静的品格；若靠近冷色，则变为温和的暖灰色。
13
7.4.2
适用紫色系的网店
紫色通常用于以女性为对象或以艺术品为主的网店。另外紫色是高贵华丽的色彩，很适合表现珍贵、奢华的商品。
14
7.5
绿色系的配色
在商业设计中，绿色所传达的是清爽、理想、希望、生长的意象，符合服务业、卫生保健业、教育行业、农业的要求。