几款编辑器的使用感受

最近这段时间，有花不少精力去做页面上的效果交互，这里展开聊聊几款编辑器的使用感受。

目前 WordPress 新版本默认使用的都是古腾堡编辑器，这款编辑器非常轻便，整体的体积也不大，使用起来算是非常简单了。

一般使用这款编辑器能实现非常基础的图文编辑效果，有点类似于 Office 办公文档的效果。

但如果你想在此基础上实现更高阶一点的页面效果，可能就需要在古腾堡的基础上升级一下了。

网站的动效要求不是很高的话，我会选择使用 Astra 主题出的那款 Spectra 编辑器插件。

准确来说，Spectra 只能算是古腾堡编辑器的功能增强插件，在古腾堡的基础上实现了一些比较高级的功能。

有兴趣的话，可以去分别尝试使用古腾堡编辑器与 Spectra 编辑插件做一个内容相同的区块，然后对比这个区块的源代码。

你会发现 Spectra 只是在古腾堡的基础上套用了一种标记规则，其两种代码规则都比较容易阅读。

而且 Spectra 提供了一些封装插件，很大程度上简化了页面排版操作，所以对于询盘站点这种简单页面需求的网站，安装一个 Spectra 插件基本就够了。

但是 Spectra 的局限也很大，主要就是受限于 WordPress 系统的限制，没办法做到所有区块、所有内容的全部自定义设计。

比如你安装电商插件后，想去设计一版商品详情页或者重构一下商品归档之类的页面，会发现 Spectra 基本基本无能为力。

此时就需要使用更高阶一点的编辑器，像老牌的 Elementor，还有一些新兴的 Oxygen 之类的。

因为我自己一直过去一直使用的是 Elementor，所以对这款编辑器更熟悉一些。

你会发现当你深度使用之后，Elementor 基本能实现全部页面的自定义设计，尤其是配合一些第三方功能增强插件的情况下，基本能实现非常酷炫的动画效果。

有时候我看到一些竞争对手的优秀页面案例，便想应用到我自己的网站上。

此时便可以借助 Elementor 的能力，用编辑器一比一实现出来。

说实话这个过程并不难，主要考验的是对编辑器的熟练能力，先去把这些区块的大框架定义好，并约束好区块之下各个组件的内外边距。

剩下就是一个区块一个区块进行设计了，对照着参考页面，去将图片、文案等等元素的细节写好就行了。

其实并没有什么技术含量，主要考验的还是耐心操作的能力。

当然现在 AI 模型的能力也很强，也可以尝试将截图发送给 AI 然后让其输出相应的代码。

这种做法我尝试过 HTML，直接应用在用代码构建的网站上，其效果还不错的。

但目前还没尝试过让 AI 输出 Elementor 的区块代码，后面有机会可以试试。