本站专注于数据化运营,分享优质跨境电商运营,外贸推广,网站建设以及Google SEO优化等内容

阿里国际站全球旺铺如何设置多旺旺展示

阿里巴巴国际站 为主的祥助 826次浏览 0评论

通过Dreamweaver热点地图设置自定义版块多旺旺展示

旺铺装修是阿里巴巴国际站全球旺铺的一个重要内容,大多数时候我们会使用自定义的旺旺客服图片进行装修而非系统默认的样式。使用Photoshop设计好旺旺客服样式图后就可以添加旺旺触发代码进行装修。这篇文章为主的祥助分享一下使用Dreamweaver设置热点地图的方式来设置多旺旺展示的方法。

步骤一:使用Photoshop设计好你的旺旺样式图,一般比较简洁美观的版式可以设计为横排展示5-7个旺旺头像,将图片保存为jpg格式,如下图:


将这张图片上传到阿里巴巴国际站-图片空间,并复制其连接,保存到txt文档内备用

步骤二:    浏览器打开官方多旺旺代码生成器:http://www.alibaba.com/help/atm-url-generator.html,随意选择一种选择在线状态图片风格,再下方分别输入TradeManager用户名,显示昵称和显示欢迎语,点击立即生成代码,可以得到如下示例代码:

<a style=”display:inline-block;font-weight:bold;text-align:center;text-decoration:none;” title=”Hi, how can I help you?” href=”//amos.alicdn.com/msg.aw?v=2&amp;uid=cndepan&amp;site=enaliint&amp;s=24&amp;charset=UTF-8″ target=”_blank” data-uid=”cndepan”><img style=”border:none;vertical-align:middle;margin-right:5px;” src=”//amos.alicdn.com/online.aw?v=2&amp;uid=cndepan&amp;site=enaliint&amp;s=21&amp;charset=UTF-8″ alt=”Hi, how can I help you?”><span style=”font-weight:bold;”>Vincent</span></a>

步骤三:依次为每个旺旺生成代码并将步骤二中标红色部分代码对应提取出来,保存到txt文档内备用

步骤四:打开Dreamweaver CC 2017-菜单栏-文件-新建-html,创建一个html文档;再点击菜单栏-插入-Image(图像),将步骤一的多旺旺图片插入到Dreamweaver,会自动生成一行代码:

<img src=”file:///C|/Users/Vincent/Desktop/设置多旺旺/阿里国际站全球旺铺设置多旺旺展示-01.jpg” width=”750″ height=”272″ alt=””/>

将src=”   “引号内的地址换成步骤一中图片空间该图片的地址

步骤五:点击实时视图下拉框-设计,再点击拆分
步骤六:切换到设计-拆分视图后,右键图片-属性,出来的窗口即热点地图设置窗口

步骤七:点击箭头所指矩形选区工具,依次框选每一个旺旺头像的区域,每框选一个弹出的窗口在链接处输入步骤二中的红色代码

,就会自动将当前框选区域和旺旺触发代码绑定

步骤八:将最后完工的代码复制,在旺旺装修-自定义版块-HMTL模式-粘贴,切换回正常模式发布装修就能看到和测试效果

注:href=标签后为旺旺触发代码

这里详细分解了下显得比较繁琐,其实操作起来比较简单,大家可以一试


注:如果有多张图都做热点,并且打算放在一起,请给每一段map分别命名map的名称,如:

<img src=”XXXXX” width=”990″ height=”867″ usemap=”#Map1″ >
<map name=”Map1″>

<img src=”XXXXX” width=”990″ height=”867″ usemap=”#Map2″ >
<map name=”Map2″>

这样不会出现错乱的引用

本文标题:阿里国际站全球旺铺设置多旺旺展示
作者:为主的祥助    转载请保留页面地址:http://www.losvincent.com/multi-trademanager.html
更多跨境平台运营技术干货,请关注公众号:跨境一站(GlobalSEO)    
一个有灵魂的公众号,专注更新外贸领域跨境电商平台的运营操盘和数据优化,独立站搭建,Google SEO和SEM Marketing等优质内容

转载请注明:跨境E站 » 阿里国际站全球旺铺如何设置多旺旺展示

微信 OR 支付宝 扫描二维码
为本文作者 打个赏
pay_weixinpay_weixin微信公众号
金额随意 亲的支持是我更新的动力!~
喜欢 (6)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

每日一学,人人都是运营总监

联系我
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册