导航栏下拉箭头设置教程

一、使用场景

通过设置导航栏下拉箭头,展示子栏目,提高网站用户访问体验。

二、功能说明

【版本】无版本限制

【适用】适用于电脑网站/自适应网站导航栏样式设置

三、设置教程

1. 设置入口(二选一即可)

点击网站导航栏“设置样式”按钮,选择“高级”,在“下拉箭头”处选择开启,可挑选线条下拉和实心三角下拉这两种样式。

(以电脑网站为例,自适应同理)

点击工具栏中“新手进阶”按钮,点击弹窗【开启下拉箭头-前往设置】。

2. 使用条件

开启下拉箭头后,满足以下任一条件,导航栏才会出现下拉箭头:

▪ 竖式排版的栏目下存在子栏目

▪ 自由排版下添加模块

2.1 竖式排版的栏目下存在子栏目

如果您尚未设置子栏目,可点击此处查看《如何新增及管理导航栏目》教程,进行设置。

2.2 自由排版下添加模块

① 开启自由排版子级栏目并保存修改。

② 在一级栏目下方点击“编辑模块”按钮。

 

③ 选择模块添加,添加模块后即可看到导航栏的下拉箭头。

 

横向排版

效果:

列表排版

效果:

如何新增及管理导航栏目

一、功能效果

网站都会有导航栏目,方便指引用户浏览网站。例如一个企业网站,可将导航分为【首页】、【服务中心】、【咨询中心】、【案例展示】、【关于我们】等内容,便于用户更加清晰有条理地浏览网站。

二、功能说明

【版本】任意版本均支持添加及管理导航。

【数量】初级版20个,中级版500个,高级版1000个,至尊版1万个自定义导航栏目

三、设置教程

1. 如何新增导航栏目

进入电脑版网站设计页面后,将鼠标移动到导航栏上,点击【+】新增栏目按钮。

在弹窗中输入新增栏目的栏目名称,上级栏目选择“无”,然后点击保存,新增栏目将会显示在网站导航栏上,并且页面会跳转至新增栏目设计页面,此时点击页面左侧网站设计导航的【模块】按钮,即可拖动模块至页面中,自由设计页面内容。

如果想在网站导航栏的某个一级栏目下新增子栏目,则新增栏目时,在弹窗内选择该一级栏目作为新增栏目的上级栏目,即可在该一级栏目下创建子栏目,即二级栏目。

新增二级栏目后的效果图如下图,鼠标移动至一级栏目“案例欣赏”上,会显示二级栏目“图片案例”。

如果想在某个二级栏目下创建子栏目,则新增栏目时,在弹窗内选择该二级栏目作为新增栏目的上级栏目,即可在该二级栏目下创建子栏目,即三级栏目,如下图。至多支持创建三级栏目。

新增三级栏目后的效果图如下图,鼠标移动至二级栏目“图片案例”上,会显示三级栏目“案例1”。

如不喜欢栏目显示样式,可以将鼠标移动到导航栏,点击【设置样式】按钮。

进入自定义设置导航栏样式。

2. 管理栏目

鼠标移动至导航上,点击【管理栏目】按钮。

 

在管理栏目中支持隐藏栏目、自定义栏目排序以及栏目相关操作。

 

3. 如何实现双语导航效果?

进入电脑版网站设计页面后,将鼠标移动到导航栏上,点击【设置样式】按钮。

在弹窗内选择【高级-支持双语-开启】,即可开启双语导航,并有3种双语导航样式可供选择。

 

将鼠标移动到导航栏上,点击【管理栏目】按钮。

在弹窗内的副栏目位置,可编辑一级栏目对应的双语名称,如下图。(注:子级栏目暂不支持双语效果)

效果如下图:

4. 如何为导航栏增加下拉箭头

进入电脑版设计页面后,将鼠标移动到导航栏上,点击【设置样式】按钮。

 

在弹窗内选择【高级-下拉箭头-开启】,即可增加下拉箭头,并有2种箭头样式可供选择。

注意在竖式排版中必须有二级栏目或者自由排版中有其他模块才会显示下拉箭头噢~

 

效果:

滚动视差设置教程

一、使用场景

电脑网站通栏及横幅背景。滚动网页时,背景与模块以不同的滚动速度展示,利用滚动视差效果,打造高端设计网站。

二、功能说明

【版本】初级版及以上版本

三、设置教程

1. 横幅滚动视差设置

鼠标悬停在横幅上,点击“编辑横幅”。

在弹窗中选择“高级”,在图片效果栏中选择“固定,不跟随页面滚动”,即可形成网页滚动时,横幅的背景图片固定不动,直到被下一模块覆盖才消失的效果。

2. 其他通栏滚动视差设置

点击“编辑通栏模块”按钮。

在弹窗中选择“固定,不跟随页面滚动”效果即可将模块背景固定,还能调整模块滚动的速度。

悬停视差设置教程

一、功能效果

利用悬停视差效果,可实现容器内模块及背景跟随鼠标做位移特效,让企业网站更酷炫。

二、功能说明

【版本】初级版及以上版本

【适用】电脑网站自由容器、标签模块、通栏排版、顶部广告组件、底部浮层组件、横幅均支持悬停视差效果

三、设置教程

1. 横幅悬停视差设置

鼠标悬浮在横幅上,点击工具栏中“悬停视差”按钮,选择开启悬停视差。

选择启用悬停视差后,可设置悬停背景及其位移方向、强度。悬停背景开启后,背景图会跟随鼠标进行位移。

横幅开启悬停视差后,在横幅中放入模块,可设置模块悬停视差(位移方向和位移强度)。

横幅中放置模块后,鼠标悬停在横幅上,点击“悬停效果演示”,即可在网页设计器内浏览悬停效果,让模块或背景图跟随鼠标做位移。

查看动图教程更清晰哦!

注意:

① 演示过程中无法对横幅内的模块进行修改。

② 需在横幅中放置模块才能进行悬停效果演示。

2. 其他通栏模块悬停视差设置

鼠标悬浮在某一个通栏模块,点击工具栏中的“悬停视差”按钮,选择启用悬停视差,其余操作步骤与上文提到的横幅模块设置悬停视差一致,在此不做重复说明。

注意:非空白内容的通栏才可进行悬停效果演示。

3. 素材工厂-悬停特效素材

可以选用素材工厂中的悬停视差素材进行网站搭建。点击控制面板中的【模块-新增素材-悬停特效】,选中心仪的素材,即可进行修改并运用。

动图演示:

预设动效设置教程

一、使用场景

电脑网站、自适应的网站设计器,通过设定模块入场/强调动画、按钮特效、图片特效等多种预设动画,快速搭建企业个性化设计网站,提高网站用户体验。

二、功能说明

【版本】初级版及以上版本

三、设置教程

1. 模块动画介绍

将鼠标悬停在某个模块上面,点击悬浮菜单栏中的“模块动画”按钮,即可设置入场动画及强调动画。

▲电脑网站“模拟动画”设置入口

▲自适应网站“模拟动画”设置入口

▲电脑网站模块动画设置页面

▲入场动画设置效果

列表多图、轮播多图、图文展示、文章列表等模块仅提供入场动画,但有动画组合可供挑选。电脑网站中,动画组合还可以调整动画的触发方式及方向。

 ▲电脑网站“列表多图”模块动效设置

2. 按钮样式

电脑网站及自适应网站的【按钮】模块除了可以设置入场/强调动画外,还可以设置按钮样式。

按钮支持多种样式设置,包括输入数值调整按钮宽高、设置按钮背景悬停色以及文本悬停色等,以增加用户点击率。在设置面板中,按钮样式还可以即改即显,马上查看修改的效果。

▲电脑网站“按钮”样式设置

 

3. 图片特效

使用范围:电脑网站、自适应网站的列表多图、图册目录、产品展示、图片、图文展示等模块

设置方法:可通过编辑模块来设置,具体操作教程如下:

① 电脑网站:

图片模块:点击工具栏“模块特效”,在弹窗中选择任一特效即可。

▲电脑网站“图片模块”特效设置

其他模块:点击工具栏中的“编辑模块”按钮,选择“图片特效”即可设置。

▲电脑网站“列表多图”图片特效设置

② 自适应网站:点击悬浮工具栏中的“编辑”/“编辑模块”按钮,在弹窗页面中点击【动画设置-图片特效】,选择任意一个特效即可。

▲自适应网站“图片模块”特效设置

▲自适应网站“列表多图”图片特效设置

▲图片特效效果展示

如何利用悬停容器打造高大上网站

一、使用场景

电脑网站新增悬停容器模块,可实现鼠标移入模块后,展示不同样式的特效。

二、功能说明

【版本】初级版及以上版本

三、设置教程

1. 设置悬停容器模块的入口(二选一)

通过电脑网站设计器悬浮面板【模块-新增模块-排版-悬停容器】路径,拖拽悬停容器到指定位置,即可选择添加模块或素材。

也可以使用空白内容的“自由容器”,鼠标悬停在模块右上角,点击工具栏中的“悬停特效”按钮,便可开始设置。

2. 编辑展示效果

选择悬停效果素材后,可编辑其初始与悬停状态下的图文展示效果。鼠标悬停在容器右上方,点击工具栏中“设置悬停容器”,编辑更多的背景特效及容器特效。

3. 操作动图

添加“悬停容器”模块,设置悬停容器。如下图:

悬停效果展示: