幕思城>电商行情>客服>客服知识>淘宝店铺导航颜色怎么设置？需要注意什么？

淘宝店铺导航颜色怎么设置？需要注意什么？

2022-03-22|01:14|发布在分类 / 客服知识| 阅读：209

相信大家在进入不同的店铺逛的时候，会发现每个店铺的装修风格是不一样的，有一些卖家也想将自己的店铺打造出不一样的风格，那么可以首先从店铺导航颜色上面着手，那么淘宝店铺导航颜色怎么设置?

导航条的“显示设置”是通过一些固定的代码来实现设置的。在此我们设置一个导航条的导航条背景色为绿色，首页/店铺动态背景色为白色，首页/店铺动态右边线为墨绿色，首页/店铺动态文字颜色蓝紫色，所有分类背景色牡丹红，所有分类右边线青铜色，所有分类文字颜色黄色。

当然这个搭配肯定不会美观的，只是举这么个例子。给位可以根据自己的喜好和美观来搭配颜色。规定好颜色之后，就可以把以下代码编辑到“显示设置”的输入框内。点击“确认”即可完成设置。其中/* */内的文字为注释文字，不影响代码内容。

淘宝店铺导航颜色怎么设置

淘宝店铺装修导航条已经修改好颜色了，那其它分栏条怎么自定义颜色?

新建一个淘宝自定义模板自己写代码就可以了，把你2处位置的那块代码复制进自定义内容区，然后换个背景图或者背景颜色就Ok了。导航条可以自己定义颜色的，但是需要使用到CSS代码!

先编辑好代码后，再直接安装到店铺导航条中的“显示设置”中!

下面是导航条的颜色修改的代码，你只需要修改红色部分的代码，红色部分就是显示的颜色：

/* 导航条背景色*/

.skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;}

/*首页/店铺动态背景色*/

.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #00ad08;}

/*首页/店铺动态右边线*/

.skin-box-bd .menu-list .menu{border-right:1px #006205 solid;}

/*首页/店铺动态文字颜色*/

.skin-box-bd .menu-list .menu .title{color:#ff0000}

/*所有分类背景色*/

.all-cats .link{background: none repeat scroll 0 0 #00ad08;}

/*所有分类右边线*/

.all-cats .link{border-right:1px #006205 solid;}

/*所有分类文字颜色*/

.skin-box-bd .all-cats .title{color:#ff0000}

自由导航：跳转桥梁

首先解决一个基础问题——什么是自由导航?顾名思义，自由导航是指能在店铺任意位置摆放的具有导航作用的按钮或图片。自由导航其实有两种形态，一种是指向活动页面或活动分类的大小banner，一种是直接指向某一分类的button。

除了分类button，促销banner也可以算作是自由导航的一种。现在越来越多的店铺选择去掉首页左侧栏，买家在浏览这种店铺的时候下拉一点网页便看不到导航了。点击TOP按钮可能会面临重新浏览一遍刚才浏览过的内容，不点TOP按钮又有无法查看分类的问题，所以这种页面布局的情况下自由导航的作用就不言而喻了。不仅图片能起到展示、推广、传递信息的作用，还能起到页面切换的功效。

自由导航的禁忌

• 不要过于浮夸。导航图片以传达信息为重，其实买家要的是快速理解图片内容，而不是看店铺在炫耀美工技巧。

案例指导：如上图，店主主要表达的是“秋冬马甲”这一内容，而图中视觉权重最高的是两个男模和一堆看起来没有任何用处的英文字母，造成的后果是只会吸引到对图上两款马甲有兴趣的消费者点击，而对这两款不感兴趣的消费者则会认为是宣传海报而已，起不到引导作用。

• 不要有某张图片过于抢眼。根据视线律动研究表明，在一个页面中如果有一区域视觉权重过强(如，通体灰色调，突然有张红色的图片)会导致浏览者的视线不稳定或在权重较高的区域来回浏览，无论是哪一种都不是我们想要的。

• 不要太多类型的促销活动。其实这个不仅和导航有关和营销也有关系，同时出现了太多形式的促销活动往往会造成买家的不解，引起买家的浮躁心理，从导航的角度会造成传达不明确的后果。

大家在等到淘宝店铺导航内容设置完成之后，卖家朋友可以进行一个整体的浏览。换句话说，也就是检查一遍检查，如果有需要调整位置或者删除内容方面的事项的话，那么就可以及时的进行修改淘宝店铺导航颜色的操作。