如何编辑组件的样式(编辑样式)?

如何编辑组件的样式(编辑样式)?如何设置某一块内容的背景、边框、边距、文字样式?

编辑样式为组件通用功能,即几乎每个组件都是有“编辑样式”这个功能的。


一.如何进入组件的“编辑样式”功能?

把鼠标移到这块内容(这个组件)所在的区域上,在这个区域的左上角或右上角或左下角或右下角即四角区域,出现组件名称及一排操作按钮,找到“编辑样式”图标 ,单击该图片即可进入组件的“编辑样式”功能。

编辑样式入口.png


二.什么是组件全局、标题栏、内容区?

点击“编辑样式”图标弹出编辑样式的弹出层,可分别对组件全局、标题栏、内容区进行样式编辑,当组件标题为空时,则不显示组件标题,样式编辑器中就没有“标题栏”这个页签,同理如果组件内容区为空,则样式编辑器中没有“内容区”这个页签。点击该图标弹出编辑样式的弹出层,可分别对组件全局、标题栏、内容区进行样式编辑,当组件标题为空时,则不显示组件标题,这里就没有“标题栏”这个页签,同理如果组件内容区为空,则没有“内容区”这个页签。以文章分类组件为例做介绍:


编辑文章分类组件样式

1、组件全局
      
组件全局页签下包含组件尺寸、组件背景、组件边框、组件边距。


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

组件全局--组件尺寸

如何给一块内容添加背景?如何给组件加背景?如何修改背景?
组件背景:可以给这个组件添加颜色背景或图片背景,也可以选择背景图片的平铺模式、平铺位置、背景尺寸,不同的选择可以有不同的展示效果,可以分别点一下试一下哦。

组件全局--组件背景


如何给一块内容添加边框?如何给组件加边框?

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

组件全局--组件边框


什么是组件内边距?什么是组件外边距?如何设置组件边距?

组件边距:在这里可以设置组件的内边距和外边距,内边距和外边距是如何定义的,请看下图。

设置边距时请考虑对手机端或pad端的影响,建议左右边距设置同样的距离最好不超过50px,上下也设置同样的距离,这个距离到pad或手机是不会等比缩小的,如果边距设置的比较大,到手机上有效内容占的空间比较小,很不美观。

设置边距后的效果图

2、标题栏

如何设置组件的标题栏?如何设置组件标题栏文字的大小?

标题栏设置:可以单独对标题栏进行设置,可以选择显示或隐藏标题栏、可以设置标题栏的高度、背景、文字、边框、边距。如下图所示:

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


3、内容区

如何设置组件内容区的背景/文字/边框/边距?

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

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

设置好以上内容以后,若要同步到网站前台,需要点页面上的“发布”按钮才可以。

单击发布按钮.jpg




三.功能更新



1.样式编辑器中组件全局新增阴影效果;  (2017-9-30优化)

(1)新增功能应用场景:组件的样式编辑器中增加“阴影效果”设置,支持对阴影方向、颜色、偏移、拓展、虚化等方面进行设置;

(2)新增功能操作方法:

QQ图片20180514151943


(3)新增功能应用效果:

QQ图片20180514152731




找不到你的答案?
合作流程
建站流程
热搜标签
 产品与服务

立即行动,通过领动建站获取更多海外客户

留下您的联系方式,专属顾问会尽快联系您,并提供网站分析报告

表单名称
B2B外贸营销型网站建设
外贸网站精准营销
帮助中心
行业资讯

电话 :400-6130-885

邮箱 :cooperation@leadong.com

地址 :南京市江北新区丽景路7号焦点科技大厦

    

版权所有 ©️ 2024 南京焦点领动云计算技术有限公司  《中华人民共和国增值电信业务经营许可证》   备案证书号:  苏ICP备17012459号-2  
| 用户协议 |  隐私政策 |  法律声明