公告:唯艺客户端火爆上线,模板自动安装,国际安全认证~
马上注册,领取百套精美模板(永久免费) 个人中心 | 下载客户端 | 客户服务 | 登录 | 注册
您所在的位置:淘宝装修教程 > 淘宝网店装修教程

淘宝店铺装修教程之宝贝开关灯设置

2015-03-24 01:57:18

网店的页面,就像是附着了店主灵魂的销售员,他的好坏,直接影响到店内的销售情况。所以,我们必须要注重淘宝店的装修。下面,小编就来介绍一个淘宝店装修详细教程之宝贝开关灯的制作。

首先,我们来了解下什么是宝贝开关灯。简单的说,就是当鼠标移动到该宝贝的模块时,其他的模块就会显示关灯状态,只有点击的宝贝是亮着的。这种功能的好处是,能让顾客的注意力更能集中在所选择的商品上面。


第一、 生成开灯效果的代码。

<div style="width:950px; float:left; text-align:center;">
<div id="a0" class="tanchuceng89771078" style="width:948px; text-align:left; margin:0 auto;">
<div style="width:948px; float:left;">
<div style="float:left; width:229px; height:229px; margin:4px;">
<img style="display:bolck; vertical-align:top; width:229px; height:229px'" src="宝贝图片地址_310x310.jpg">
</div>
<div style="float:left; width:229px; height:229px; margin:4px;">
<img style="display:bolck; vertical-align:top; width:229px; height:229px'" src="宝贝图片地址
_310x310.jpg">
</div>
<div style="float:left; width:229px; height:229px; margin:4px;">
<img style="display:bolck; vertical-align:top; width:229px; height:229px'" src="宝贝图片地址
_310x310.jpg">
</div>
<div style="float:left; width:229px; height:229px; margin:4px;">
<img style="display:bolck; vertical-align:top; width:229px; height:229px'" src="宝贝图片地址
_310x310.jpg">
</div>
<div style="float:left; width:229px; height:229px; margin:4px;">
<img style="display:bolck; vertical-align:top; width:229px; height:229px'" src="宝贝图片地址
_310x310.jpg">
</div>
<div style="float:left; width:229px; height:229px; margin:4px;">
<img style="display:bolck; vertical-align:top; width:229px; height:229px'" src="宝贝图片地址
_310x310.jpg">
</div>
<div style="float:left; width:229px; height:229px; margin:4px;">
<img style="display:bolck; vertical-align:top; width:229px; height:229px'" src="宝贝图片地址
_310x310.jpg">
</div>
<div style="float:left; width:229px; height:229px; margin:4px;">
<img style="display:bolck; vertical-align:top; width:229px; height:229px'" src="宝贝图片地址
_310x310.jpg">
</div>
</div>
<div data-widget-config="{'trigger':'.tanchuceng89771078','align':{'node':'.tanchuceng89771078','offset':[0,0],'points':['tl','tl']}}" data-widget-type="Popup" class="J_TWidget" style="visibility: hidden; display: none;">
<div class="J_TWidget" style="width:948px; float:left; background:url('http://img02.taobaocdn.com/tfscom/T1iEVlFcFaXXcUawbX');" data-widget-type="Compatible" data-widget-config="{'png':true,'png_bg':true}">
<div id="a1" class="tanchuceng11223102 J_TWidget" style="float:left; width:229px; height:229px; margin:4px; background:url('http://img02.taobaocdn.com/tfscom/T1iEVlFcFaXXcUawbX');" data-widget-type="Compatible" data-widget-config="{'png':true,'png_bg':true}">
<div style="width:229px; height:229px;"></div>
<div data-widget-config="{'trigger':'.tanchuceng11223102','align':{'node':'.tanchuceng11223102','offset':[0,0],'points':['cc','cc']}}" data-widget-type="Popup" class="J_TWidget" style="visibility: hidden; display: none;">
<div style="width:229px; height:229px; overflow:hidden; position:relative;">
<a target="_blank" href="http://item.taobao.com/item.htm?id=37729058709"><img style="display:bolck; vertical-align:top;" src="http://img04.taobaocdn.com/imgextra/i4/1927022064/T2m4qLXq4XXXXXXXXX_!!1927022064.jpg_310x310.jpg" width="229" height="229" border="0"></a>
<div style="width:65px; height:20px; line-height:20px; padding-left:5px; position:relative; top:-25px; left:5px; background:#000000; color:#ffffff;">
<strong>价格</strong>
</div>


第二、 然后把宝贝的链接和图片输入。


第三、 输入后点击完成,就可以在线预览效果,把生成的代码复制到自己的店铺中去。



第四、回到自己店中,登陆账户,于模板管理中的基础版块里,选择新建自定义内容区,把在线生成的代码复制上去。



第五、唯艺温馨提示:选择标题不显示和切换到代码状态下复制代码进去。


最后保存好发布就可以了。就这样,有特色的淘宝店装修详细教程之宝贝开关灯制作就完成了。希望对大家有帮助,更多精彩的淘宝装修,


      本文出自唯艺网店装修平台(www.weiyi5.cc),转载请注明出处

0

相关教程

懒人专区:淘宝模板-免费安装查看更多>

  • 活力欧美 帅气男装 服装配件淘宝模板

    活力欧美 帅气男装 服装配件淘宝模板

    人气:40233
  • 多彩数码 科技蓝调 手机数码网店模板

    多彩数码 科技蓝调 手机数码网店模板

    人气:46577
  • 春天衣橱 精品酷黑 潮流男装淘宝模板

    春天衣橱 精品酷黑 潮流男装淘宝模板

    人气:59832
  • 时尚简约 鞋帽箱包 珠宝配饰淘宝模板

    时尚简约 鞋帽箱包 珠宝配饰淘宝模板

    人气:56789
  • 春季、夏季清爽 化妆美容、健美店铺模板 全屏轮播

    春季、夏季清爽 化妆美容、健美店铺模板 全屏轮播

    人气:1
  • 淡雅浅黄 简约风尚 女装女鞋淘宝模板

    淡雅浅黄 简约风尚 女装女鞋淘宝模板

    人气:48805
  • 时尚女鞋 米色暖黄 女鞋精品淘宝模板

    时尚女鞋 米色暖黄 女鞋精品淘宝模板

    人气:31597
  • 复古欧美 胶片暗青 创意灯饰淘宝模板

    复古欧美 胶片暗青 创意灯饰淘宝模板

    人气:1