WordPress可视化编辑器King Composer

之前我们介绍过一些可视化编辑器,比如Visual ComposerWPBakery Page BuilderElementor等,这些编辑器都很不错的wordporess编辑器,有各自的特点,今天继续为大家介绍一款的可视化编辑器King Composer

 

支持前后台编辑

King Composer支持前台和后台编辑,因为后台一是操作不方便,功能也没有前端丰富,所以一般情况下使用前台编辑器比较好用,点击左上方绿色的按钮即可切换可视化编辑,当然你可以随时切换

King Composer后台编辑

在前台页面,可以看到一些基础的功能,顶部栏有常用的功能,比如撤销重做、响应式、保存等,这个区域是吸顶的,所以说很轻松就能使用这些功能。

King Composer顶部工具栏

King Composer添加内容

 

添加元素的方式

最下方的就是我们使用的主要功能,添加网页元素,你可以直接添加元素,或者是添加列,最多6列,列里面再填充元素,区别就是直接添加是100%宽度的,适合全宽的布局,而列是有一个最大宽度的

King Composer元素列表

感觉King的元素列表做的还是不错的,图标很整齐容易识别,有分类并且支持搜索,可以很容易找到自己想要的元素。这里还有一个很重要的是右上角的扩展按钮,通过此页面可以添加一些额外功能,比如特效文字、图片Before&After等,以Addon的形式,只有你安装上才会展示。

另外KingComposer支持从库中调用,左侧的蓝色按钮调用之前的做的模板,最右侧的红色按钮是从KC HUB中调用,也就是King Composer提供的模板,这里我们看下KC HUB中的调用

King Composer模板库

通过右上角的青色按钮,可以看到这里有主要有三类。第一个Extensions是带扩展的模板,也就是说只有安装上特定的Addon才能使用这些模板,参考上面元素的扩展;第二个Templates是有一些制作好的网页,我们可以从这些演示页面中提取出部分,插入到自己的设计中;第三个就是上图中展示的,特定需求的模板,这里使用的会更频繁一些。

King Composer插入模板

每种一般都会有几套,觉得哪个比较好,直接使用Install Now导入即可

 

编辑网页元素

工具条

和其他的可视化编辑器一样,King Composer也有自己的工具条,做的可以说比较简单吧,不过都是很实用的功能,从左到右依次是删除、编辑、复制、克隆,最上方的标签则是拖动操作使用。

King Composer工具条

鼠标拖拽操作

拖拽操作就不用说了,可视化编辑器必备功能,此外,它可以像Divi一样拖拽调节Margin和Padding

King Composer鼠标拖拽

 

样式和边距设置

在编辑界面,每个元素的选项都有不同,但是大部分都有颜色和边距的设置,背景图像需要开启Advanced才能看到

King Composer设置背景

另外一个很有用的功能就是Box选项卡,这里可以设置所有的Margin 和 Padding,支持鼠标拖动调节数值,调整是实时生效的,可以快速设置距离

King Composer设置边距

 

右键功能

除了表面上的功能外,在King Composer中,几乎任何区域都是可以使用右键功能的,可以用来复制粘贴、快速编辑、插入行列等

King Composer右键功能

 

CSS编辑模式

King Composer Css模式

在网页的右下角,有一个红色的画笔,这个就是Css模式的开关,点击后画笔闪动,就说明CSS模式开启了,这个时候不能编辑网站的内容,点击任何地方都是调节样式

这个模式我认为还是不错的,当网站模块内容添加完毕后,开启CSS模式,让人专注在网站的样式设计,不被其他的因素干扰,也就能更快的做出漂亮的页面

King Composer调整颜色

 

总体来说King Composer算是一款不错的编辑器,虽然说偶尔会出现一些Bug,但是速度快、功能多,而且它的许多特点比如拖拽操作、实时预览、CSS模式等还是很符合我们的习惯,希望King Composer能够越来越改善。另外King Composer可以在其官网直接体验,有兴趣的朋友看一下

体验King Composer

发表评论