按钮组件- 我们常用按钮组件来和我们的访客做交互,比如点击跳转页面,点击弹出图片或视频,或者是点击按钮跳转到客服页面或给我们网站留言。它是站点与访客之间很重要的沟通桥梁
1,如何插入设计组件
只需从左侧的组件控制面板 【基础组件】中,选中组件后点击鼠标左键拽住并拖放到编辑面板处即可,如下图所示
2,内容选项卡
内容选项卡设置如下图,您可以看到有多个设置选项来控制图标组件的显示属性。
2.1,视频– 设置模块,如下图, 点击选项卡后进入设置界面。
(1)文本:设置按钮标题
(2)跳转链接: 点击按钮后跳转到您设定的页面/文章/案例/或自定义链接,可通过友上角的“设置”按钮,开启“从新的窗口打开链接”,点击刷新会清理链接缓存信息,会获取最新的页面或文章链接数据。
(3)对齐:设置按钮对齐方向
(4)按钮宽度: 你可以通过“px”像素或“%”百分比来设置按钮的宽度
(5)选择图标:选择按钮的图标
(6)设置按钮ID:此处预留给技术人员使用,普通用户可以忽略此选项。
3,样式选项卡
3.1,按钮-样式设置模块 在此处完成按钮样式基本设置, 可以看到有两个选项卡 “标准”与”鼠标悬停” ,默认情况下我们只编辑“标准”状态下的按钮样式设置即可。
(1)字体设置:这里可以对按钮标题设置对应的字体大小,如果你在“内容选项卡”(3)字体大小,处也设置了字体大小,它将被“字体设置”的设置属性所覆盖,另外字体设置支持“响应式字体设置”,你可以设置站点在“IPAD”,‘手机’端上需要适配的标题字体大小,来给访客更好的视觉体验
(2)文本颜色:按钮文本颜色
(3)背景颜色:按钮背景色
(4)边框类型:开启按钮边框,可以设置边框颜色及粗细度
(5)边框圆角:默认按钮是方型的,可以通过此选项给按钮设置圆角
(6)周边阴影:开启按钮的阴影状态,还可以设置阴影的颜色,距离
(7)内边距:这个属性很重要,它可以控制按钮文本与边框的之间的距离,你可以设置上下左右间距来创建出,更适合你页面大小的按钮。
设置按钮悬停“效果” , 可以设置鼠标悬停状态时候触发的的“文本颜色”,背景颜色“,”悬停动画“。
具体鼠标悬停设置属性请参考下图或查看视频操作教程
恭喜你已完成当前组件的学习,感谢阅读。
评论