编辑器玩很大，Elementor 功能多多

今天本来预计要撰写 WordPress 後台左手边功能栏位的其他套件，还有 Elementor, Monsterinsights 跟 optionMonster 这三个要写，但是一玩 Elementor 就发现时间过得飞快，也是一个拖拉的方便编辑器

今天主要是纪录试用 Elementor 笔记

大家好，我是 Jade Chang
Statistic Information 毕业，入职场後於外商从事软件技术行销，长期规划各种线上线下活动像是直播节目/带状线上教学，後期负责学生实习计画与大专院校 Talent Cultivation 与技术社群行销 Program 为主，过去一年转任於台湾本土软件开发商 PM，周旋於客户、工程师与设计师之间并短期投身新创事业，近期转换於新竹半导体产业，还在体验适应中。

首先，简单介绍 Elementor

Elementor 是 WordPress 热门编辑器之一，可以从众多建置 WordPress 网站的教学文当中不断看到 Elementor 的出现，从官网的 demo 影片当中就可以知道他是一款用拖拉式加入各种功能的编辑方式，同时，Elementor 也有很多模板可以汇入

论版本来看有分成个人版与企业版，比较表如下图，最大的差别应该是 support跟依照手上有的网站个数比较需要考量，如像我仅有一个网站的就个人版就可以使用了

然而这次会使用到 Elementor 主要是在购买 Soledad 的时候连同主题与编辑器都包成一包购买了，所以自带 Elementor 页面编辑器，不需另外购买，是於是不是专业版等後续尝试後再与大家分享，不过对於初阶使用来说应该都算够用且非常方便了

再来，如何在 WordPress 网站中使用

先登入到 jadechang.blog 当中，Elementor 这个套件就落在左手边功能其中一栏，前面提到 Elementor 自己也有提供很多模板可以插入页面，所以在设定上可以去勾选要不要将 Elementor 主题汇入到 WordPress，因为可能会有主题与字型上的冲突，所以设定中可以调整

接着点选 Page，到想要编辑的画面，会先进到 WordPress 编辑画面，可以看到左上角有一个 edit with Elementor

点选後会看到很明显的 Elementor logo 跟 loading，接下来的画面就会是左手边出现 Elementor 的编辑功能，是按照不同类型的效果过程一格一格的功能，选择想要加入的类型用滑鼠拖曳到画面上想要安插的地方即可，他也有像是使用 photoshop 的图层概念，A 要在 B 之上或是复制 A 层等设定，可以先用眼睛把不需要的栏位遮起来比较 before and after

还有一个很酷的功能，就是在 Soledad 的布景主题中再插入主题，在主画面上按下+ 新增的符号，他会显示询问要加上

• 新增哪类型的编辑样式 （两栏、三栏、栏位平均宽度吗？）
• 新增常用模组，假设有固定使用两栏位＋图＋轮播，可以设定为常用，这样在不同页面编辑时都能汇入此编辑模组
• 新增 Pencidesign 提供的模组

点下 Pencidesign 的 icon，就会出现当初在选 Simple blog 这个样式一样的所有布景，可以在主题中汇入主题，也可以按 block 选择某一个喜欢的区域，按下 insert 就可以罗

我先会汇入一个主打包包的区块，旁边还有主题与说明文字，由於我有勾选 disable Elementor font and color，所以这款编辑区域的色系与字型都是跟着 simple blog (就是当初我选择的样式) 进行，避免视觉使颜色上的冲突

最後，常听到的 Gutenberg 编辑器

简单查询，是 WordPress 在 2018 的版本提供的新版编辑器，主要的大概念是采用了「区块」的概念，将所有网页上的空间都区块化，也是我们现在常看到可以被拖拉编辑的地方，让使用者可以一个区域一个区域进行编辑与摆放像要安插的文字栏位、图片栏位、表格或影片等各种资料型态

好像缘由是原本 Classic Editor 在使用选择上大家会优先挑选 Elementor、Divi 这种所见即所得且拖拉式的编辑器，WordPress 才进阶更新成新版编辑器，详情可见Gutenberg 古腾堡编辑器终极懒人包 有清楚说明唷！

One more thing..

铁人赛文章会 Delay 1-2 天同步放在 Medium
欢迎订阅或是透过 Facebook 一起来交流 (求指导）

• https://medium.com/@stfk1105
• https://www.facebook.com/Jadechang1105