如何使用快速导航组件?

浏览数量: 0     作者: 小七     发布时间: 2015-09-28      来源: 本站

快速导航组件:
 
【简介】 快速导航组件是将多个具有同一页面性质的导航页面串联起来,导航之间没有层级是并列关系,方便用户快速在多个页面之间跳转。
 
【应用场景】一般添加到网站的页脚、左侧栏、右侧栏等区域,支持横向快捷导航和纵向快捷导航,根据实际的应用场景选择合适的风格。快速导航组件的设置项中支持单个或批量添加站内页面、外部链接、页面锚点、产品分类、文章分类多种类型的页面作为导航,可以拖动调整导航的顺序。网站导航组件的风格中支持选择多种横向导航风格和纵向导航风格。

【应用案例】
案例1: http://en.anli018.ldyjz.com/这个案例页脚位置的“Quick Links”是使用快速导航组件来做的;

快速导航的应用1

案例2: http://en.anli011.ldyjz.com/,页脚位置有一处内容是使用快速导航组件来做的,如下图所示:

快速导航的应用2


【使用方法】

1、添加组件

第一步:找到添加组件入口。把鼠标放到要添加快速导航的区域,出现小水滴(即添加组件按钮),单击小水滴,弹出“添加组件”弹出框;

找到添加组件按钮

第二步:添加“快速导航”组件。在基础组件中,找到“快速导航”组件,单击“快速导航”,弹出“设置快速导航”窗口;

单击快速导航

2、设置组件

在弹出的设置快速导航窗口,可以设置内容、风格;

内容:若需要可以输入组件标题,若不输入,组件标题也不显示。单击“批量添加导航”按钮,弹出“添加导航内容”窗口,在此窗口可以选择站内页面、外部链接、页面锚点、产品分类、文章分类做为内容显示在导航上。

输入组件标题 批量添加导航



添加导航内容

把要显示在此组件的内容添加进来以后,可以单击每个导航修改导航名称,也可以删除这个导航。也可以把鼠标放到某个导航上,鼠标单击拖动这个导航到要放置的位置。

修改导航名称、调整导航顺序

风格:单击“风格”切换到风格标签,在这里可以选择导航展示的风格,有横向展示风格也有纵向展示风格,根据需要来选择就可以了。

选择展示风格

3、编辑样式
把鼠标放到网站导航内容区域,组件左上角出现组件名称“快速导航”,把鼠标放到这四个字眼上,右侧出现一排小按钮,单击第2个即编辑样式按钮,弹出”样式编辑器“窗口。
编辑样式


在样式编辑器中,可以对这个组件的全局、标题栏、内容区分别进行设置,如下图所示:

样式编辑器

组件全局--组件尺寸:可以设置组件的高度,一般清情况下都使用自适应的高度,若固定高度可能会导致不同终端下出现模块被遮挡、留白等情况,此功能请谨慎使用(手机端或PAD端出现模块被遮挡或留白情况,请首先检查是否是设置了高度所致);
组件全局--组件尺寸

组件全局--组件背景:可以这个这个组件添加颜色背景或图片背景,也可以选择背景图片的平铺模式、平铺位置、背景尺寸,不同的选择可以有不同的展示效果,可以分别点一下试一下哦。

组件全局--组件背景

组件全局--组件边框:在这里可以设置组件边框的颜色、样式(实线、虚线、双实线、点)、边框的粗细、边框的圆角。

网站导航--组件边框

组件全局--组件边距:在这里可以设置组件的内边距和外边距,内边距和外边距是如何定义的,请看下图(以文章分类组件为例介绍):

设置边距后的效果图



组件--标题栏设置:可以单独对标题栏进行设置,可以选择显示或隐藏标题栏、可以设置标题栏的高度、背景、文字、边框、边距。如下图所示(以文章分类组件为例介绍):

文章分类组件--标题栏设置

组件--内容区设置:可以给组件内容区添加颜色背景或图片背景、可以设置内容区非链接文字或带链接文字的字体/大小/间距/行高/对齐方式/字体样式等、可以设置内容区的边框和内容区的边距(以文章分类组件为例介绍)。

文章分类组件--内容区设置

4、复制组件
页头或页脚区域的组件每个页面都是共用的,所以,若复制网站导航组件,复制的组件将会在当前组件下方展示出来,可拖动调整位置或继续修改组件!复制过来的组件与原组件是两个独立的个体,修改其中一个,另外一个不受影响;


复制组件                快速导航-复制组件

5、删除组件
 
单击删除组件按钮,可以删除这个组件。
删除组件
 
 
6、恢复组件
 
被删除的组件默认被放到了组件回收站里。单击”设置“--》”组件回收站“,找到这个组件,单击后面的”还原“按钮,即可把这个组件还原到原页面。
组件回收站     还原组件

          微信公众号

阿里巴巴国际站

网站建设

知识圈

联系我们
  客服QQ:693557443
   服务顾问:18988788608  ( 微信 )
  邮箱:info@7datong.com
  地址 : 深圳市龙华区恒和国际大厦903室
Copyright © 深圳市七达通科技有限公司 All Rights Reserved 版权      互联网服务粤ICP备16005814号
   - 网站地图