本站专注于数据化运营,涉及阿里巴巴国际站运营,Google SEO,独立站建设等内容,欢迎各位发文投稿
博主:为主的祥助 提供阿里巴巴国际站运营诊断服务 QQ:2067552955

修改代码隐藏阿里巴巴国际站导航栏

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

隐藏阿里国际站导航栏,同时保持跳转效果

阿里巴巴国际站产品编辑页面有导航跳转功能,通过设置不同的导航,可以让客户点击导航栏快速跳转到对应的模块内容进行浏览。不过系统自己预设的导航栏的显示效果差强人意,而供应商选择设计的独立的导航条图片来作为展示效果的话,容易产生重复效果的问题。


阿里国际站导航栏代码

如上图,Products Description导航模块文本和图片的导航文字重复,看起来有些影响视觉。那么如何隐藏国际站默认的导航,同时又保持点击跳转的快捷效果呢?思路来源:包装-皮皮爹  感谢提供

方法如下

  •  点击源代码按钮,切换到HTML源代码模式
  • Ctrl+F,输入要隐藏的导航模块的文本内容,定位到代码如:

<div id=”ali-anchor-AliPostDhMb-8r11o” class=”mceSectionContainer” style=”padding-top: 8px;” data-section=”AliPostDhMb-8r11o” data-section-title=”Product Description”>
<div id=”ali-title-AliPostDhMb-8r11o” style=”padding: 8px 0; border-bottom: 1px solid #ddd;“><span style=”background-color: #ddd; color: #333; font-weight: bold; padding: 8px 10px; line-height: 12px;”>Product Description</span></div>

第一段DIV是导航模块跳转的控制,和编辑框右侧预先设置的导航模块信息对应,若删除,在详情页则无可点击的跳转导航

第二段DIV是导航模块在内页的显示效果,我们这里要修改的也就是第二段,不修改第一段(保持快捷导航的跳转效果)

  • 将第二段div的红色部分删除,修改为:style=”width: 0; height: 0 ; overflow: hidden  之后切换回正常编辑模式
  • style=”width: 0; height: 0 ; overflow: hidden的作用是将这个div容器的宽度高度设置为0,同时overflow:hidden是溢出该容器范围的内容全部隐藏
  • 点击产品预览,就可以看见导航模块在内页消失了,但是依旧有导航栏并且点击可以跳转到对应的模块内容
作者:为主的祥助??  转载请保留页面地址: https://www.losvincent.com/hide-navigation-bar.html ‎
更多跨境平台运营技术干货,请关注公众号:跨境一站(GlobalSEO)    
一个有灵魂的公众号,专注更新外贸领域跨境电商平台的运营操盘和数据优化,独立站搭建,Google SEO和SEM Marketing等优质内容

微信公众号:跨境E站(GlobalSEO) ,一个有灵魂的公众号,专注更新外贸领域跨境电商平台的运营操盘和数据优化,独立站搭建,Google SEO和SEM Marketing等优质内容
联系QQ:2067552955
店铺诊断:150/次 全面分析店铺数据,提出改进方案

视频剪辑:简单剪辑50/次,稍复杂视工程量商议

企业运营顾问:1980/月(5月优惠400活动中) 提供国际站一对一运营分析和指导,带公司新人运营入门和进阶
Google SEO在线课堂:https://ke.qq.com/course/276546?saleToken=42119   报名联系我可获取100优惠券

转载请注明:跨境E站 » 修改代码隐藏阿里巴巴国际站导航栏

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

表情

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

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

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

联系我
切换注册

登录

忘记密码 ?

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

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

注册