如何使用高级导航组件?

浏览数量:0     作者:小七     发布时间: 2016-01-18      来源:本站

高级导航
 
【组件简 介】 高级导航组件是网站导航的升级版,通过分别编辑PC端和手机端的导航风格实 现千变万化的导航展示效果。
 
【应用场 景】一般添加到网站的页头区域,作为整个网站的导航,为多个页面的串联起着关键的作用。高级导航组件的设置项中支持单个或批量添加站内页 面、外部链接、页面锚点、产品分类、文章分类多种类型的页面作为导航,可以拖动调整导航的层级以及调整导航的顺序。高级导航组件的风格中 支持选择多种主导航风格、下拉菜单风格,每一种风格都可以灵活调整每一个设置项。

 
【使用方法】

1、如何添加高级导航组件?
1)     打开浏览器输入www.7datong.com 到达七达通科技云营销平台首页,点击右上角登录按钮。

七达通科技建站05
 
2)     在白色框内输入账号和密码,点击登录。
七达通科技建站06
 3)     点击编辑网站,进入网站后台。
七达通科技建站07
 
 
第四步:找到添加组件入口。把鼠标放到要添加高级导航组件的区域,出现小水滴(即添加组件按钮),单击小水滴,弹出“添加组件”弹出框;
添加组件 
 
第五步:添加“高级导航”组件。在基础组件中,找到“高级导航”组件,单击“高级导航”,弹出“设置导航栏”窗口;

高级导航

2、如何设置高级导航组件?

情况1:接着上面的操作,在弹出的设置导航栏窗口,可以设置导航栏的内容和风格。
 
情况2:高级导航组件已经添加好了,可以通过以下步骤进入此组件的设置项中:把鼠标放到高级导航组件区域,左上角出现组件名称,把鼠标移到“高级导航”四个字右侧的第一个按钮处即“设置”,单击它即可进入设置项中:

在弹出的设置导航栏窗口,可以设置导航栏的内容和风格

内容:

导航管理:默认的导航为Home、ProductsNewsAbout UsContact Us,您可根据需要添加导航、编辑导航、删除导航、添加子导航、更改风格等;

设置高级导航1设置高级导航2 
 
我要增加几个导航,如何增加?
添加一级导航:
方法一:在内容与风格的右边有个添加导航的加号符,单击即可进入添加导航界面。
选择导航类型: 根据需要您可以选择站内页面、外部链接、页面锚点、产品分类、文章分类
站内页面:
您可以在“选择一个站内页面”选择一个站内页面,导航名称会根据您选择的站内页面自动更改,如果您需要在点击这个导航时令其在新窗口打开,您可以在“新窗口打开链接”前的方框上打钩,反之无需打钩。您可以在“导航图片”内添加图片,首次添加这张图片,需要通过“本地上传按钮传上来;若之前传过的图片,默认是保存在资料库里的,这种情况也可以通过从资料库选择按钮到资料库选择这张图片;如果误操作或不再需要导航图片点击“清除”即可;
设置高级导航3设置高级导航4设置高级导航5设置高级导航6设置高级导航7 
 
外部链接:
点击选择外部链接的URL后蓝色的“新增链接”,即在URL栏中出现http://,根据需要,您可以填完整URL栏及导航名称,如果您需要在点击这个导航时令其在新窗口打开,您可以在“新窗口打开链接”前的方框上打钩,反之无需打钩。根据需要,您可以点击“选择图标”选择合适的导航图标;也可以在“导航图片”内添加图片,首次添加这张图片,需要通过“本地上传”按钮传上来;若之前传过的图片,默认是保存在资料库里的,这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片;如果误操作或不再需要导航图片点击“清除”即可;
设置高级导航8设置高级导航9 
 
页面锚点:
根据需要您可以在已有的锚点中选择,导航名称自动生成也可根据需要修改;如果您需要在点击这个导航时令其在新窗口打开,您可以在“新窗口打开链接”前的方框上打钩,反之无需打钩。根据需要,您可以点击“选择图标”选择合适的导航图标;也可以在“导航图片”内添加图片,首次添加这张图片,需要通过“本地上传”按钮传上来;若之前传过的图片,默认是保存在资料库里的,这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片;如果误操作或不再需要导航图片点击“清除”即可;
 
设置高级导航10设置高级导航11 
 
产品分类
根据需要您可以在已有的产品分类中选择,导航名称自动生成也可根据需要修改;如果您需要在点击这个导航时令其在新窗口打开,您可以在“新窗口打开链接”前的方框上打钩,反之无需打钩。根据需要,您可以点击“选择图标”选择合适的导航图标;也可以在“导航图片”内添加图片,首次添加这张图片,需要通过“本地上传”按钮传上来;若之前传过的图片,默认是保存在资料库里的,这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片;如果误操作或不再需要导航图片点击“清除”即可;
设置高级导航12设置高级导航13 
 
文章分类
根据需要您可以在已有的文章分类中选择,导航名称自动生成也可根据需要修改;如果您需要在点击这个导航时令其在新窗口打开,您可以在“新窗口打开链接”前的方框上打钩,反之无需打钩。根据需要,您可以点击“选择图标”选择合适的导航图标;也可以在“导航图片”内添加图片,首次添加这张图片,需要通过“本地上传”按钮传上来;若之前传过的图片,默认是保存在资料库里的,这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片;如果误操作或不再需要导航图片点击“清除”即可;
设置高级导航14设置高级导航15 
 
 
方法二及添加自定义导航:在内容与风格的右边有个闪电符号,单击即可进入添加导航界面。
可以在站内页面、外部链接、页面锚点、产品分类、文章分类单独选择,如在此都没有所需导航,可点击右边“添加自定义页面”,即出现页面设置界面,可根据所需填写页面名称,具体可点击蓝色字条“设置页面名称时需要注意什么”了解设置页面名称注意点与方法,页面URL自行生成,同时根据需要可以设置访问权限;
设置高级导航16设置高级导航17设置高级导航18 
 
添加二级导航:
在导航管理下,点击导航项右边第一个加号符即可添加子导航。之后添加导航方法与添加一级导航方法一相同;
设置高级导航19设置高级导航20 
 
如何添加三级导航:
点击二级导航右边第一个加号符可添加二级导航的子导航即三级导航。之后添加三级导航方法与添加二级导航方法相同;
 
设置高级导航21设置高级导航22设置高级导航23 
 
如何给导航排序?
排序方法遵循导航管理后面“拖动以调整导航”。将鼠标放至需要挪动的导航条处,导航条显示黄色,鼠标左键长按需要挪动的导航条上下移动导航条的位置,当移动时虚线框显示在所要放置位置上下两个导航项之间时松开鼠标即可完成导航项的调整;但当导航条移动的虚线框显示在一个导航项内部时松开鼠标,则移动的导航项成为该导航的子导航;
设置高级导航24设置高级导航25设置高级导航26设置高级导航27          设置高级导航28
 
如何查看导航上的导航类型?
点击导航右边扳手图样的编辑按钮即可在编辑导航第一项中看到导航的类型;
设置高级导航29设置高级导航30 
 
可以修改导航名称吗?分两类介绍:1、修改页面名称,导航上也会变,2、直接修改导航名称。
点击导航右边扳手图样的编辑按钮,在导航名称栏中即可修改导航名称;
设置高级导航31设置高级导航32 
 
风格:
选择主导航风格:
您可以根据需要选择主导航不同的风格,点击每个风格下方的“编辑”按钮即可对该主导航风格进行编辑。如果对于新设置的风格不满意可点击“还原”变回默认初始风格;
编辑导航风格下可进行“导航设置”、“编辑样式”:
“导航设置”下根据需要您可设置主导航位置是居左还是居右;也可自定义导航项宽度,将“定宽”前的方框鼠标单击打钩即可自定义导航项的宽度;
“编辑样式”下可以对编辑样式、文字设置、导航条设置、导航项设置、下拉箭头设置、阴影效果、动作样式进行设置;
设置高级导航33设置高级导航34 
 
如果您对此次主导航导航设置风格满意并希望在以后能够直接使用,可选择另存为新风格,输入新风格名称即可在下次直接引用该风格导航;
设置高级导航35 
 
编辑样式:根据需要您可以对导航条背景进行设置,分为默认、系统图、自定义;默认可更改颜色,系统图可以更改颜色还可从系统图片中选择图片作为导航条的背景,自定义可以更改颜色还可以本地上传图片作为导航条的背景;系统图和自定义图片的显示样式可通过平铺方式(平铺、横向平铺、纵向平铺、不平铺)、平铺位置(垂直居中、底部居中、顶部居中、左居中、右居中、左上方、右上方、左下方、右下方)及背景尺寸(原始尺寸、填充、适应)来调节;与设置导航条背景同样的方法您可以根据需要对导航项进行设置;
设置高级导航36设置高级导航37设置高级导航38 
 
文字设置:在此您可以设置导航的文字大小、文字间距、文字高度、字体、字体颜色、大小写转换(无变化、首字母大写、全大写、全小写)、文字对齐方式(左对齐、居中、右对齐、两端对齐)及文字样式(加粗、斜体、下划线);
设置高级导航39 
 
导航条设置:可以设置导航条上下左右的边框、圆角程度以及导航条上下左右的内边距及外边距;
设置高级导航40设置高级导航41 
 
导航项设置:可以设置导航项上下左右的边框、圆角程度以及导航条上下左右的内边距及外边距,方法与导航条设置一致;
 
下拉箭头设置:根据需要您可以对下拉箭头进行设置,分为默认、自定义、隐藏;默认可更改颜色,自定义可以更改颜色还可以本地上传图片;自定义图片的显示样式可通过平铺方式(平铺、横向平铺、纵向平铺、不平铺)、平铺位置(垂直居中、底部居中、顶部居中、左居中、右居中、左上方、右上方、左下方、右下方)及背景尺寸(原始尺寸、填充、适应)来调节;也可选择隐藏不显示;
设置高级导航42 
 
阴影效果:
根据需要您可以选择阴影的方向、颜色、距离、文字大小、虚化;
设置高级导航43 
 
动作样式:导航的动作样式分为按下、选中、滑过三种,即按下导航、选中时的导航以及滑过导航时显示的导航风格;
设置高级导航44 
 
可对三种动作样式的背景设置、文字设置、导航项设置及下拉箭头进行编辑,编辑方法和主导航风格的设置方法一致;

设置高级导航45 
 
如果您对此次主导航编辑样式风格设置满意并希望在以后能够直接使用,可选择另存为新风格,输入新风格名称即可在下次直接引用该风格导航;
设置高级导航46设置高级导航47 
 
选择下拉菜单风格:
您可以根据需要选择下拉菜单不同的风格,点击每个风格下方的“编辑”按钮即可对该下拉菜单风格进行编辑。您也可以对下拉菜单的宽度进行自定义设置;
设置高级导航48 
 
下拉菜单风格编辑内包括二级菜单与三级菜单,三级菜单相比二级菜单缺少“下拉箭头设置”选项,其他设置项一致且与主导航编辑样式内选项编辑方法一致;
设置高级导航49设置高级导航50

          微信公众号

阿里巴巴国际站

网站建设

知识圈

联系我们
  客服QQ:279415070
   服务顾问:17727578727  ( 微信 )
  邮箱:info@7datong.com
  地址 : 深圳市龙华区华油工业区1栋2层
Copyright © 深圳市七达通科技有限公司 All Rights Reserved 版权      互联网服务粤ICP备16005814号
   - 网站地图