有一次帮客户建设好了一个 WordPress 网站之后,他打开后台看了一眼默认的编辑器,然后问我:「编辑器看起来好像很普通这样?这个是怎么做出一个专业的网站呢?」
WordPress 默认的编辑器(Gutenberg)功能是有限的,对于新手来说是很难做出真正有设计感的网站;如果你想要做出一个好看又专业的网站,你就需要另行安装多一个叫做 Elementor 的编辑器 Plugin 了。
今天这篇文章,我会手把手教你怎么安装 Elementor,以及安装完之后是怎么开始建立你的第一个 Elementor 页面。
安装 Elementor 之前,先确认这件事
Elementor 是一个 WordPress Plugin,所以你需要先有一个 WordPress 网站才能安装它。如果你还没有 WordPress 网站,可以先看这篇文章:
👉「Elementor 是什么?WordPress 新手必读的完整介绍(2026)」
怎么安装 Elementor?完整步骤
第 1 步:登录 WordPress 后台
首先我们要打开浏览器,输入你的网站后台网址(通常是 你的域名.com/wp-login.php),输入管理员账号和密码登录进去。


第 2 步:进入 Plugin 安装页面
登录之后,在左边菜单找到「Plugins(插件)」,然后点击「Add New Plugin(安装新插件)」。

第 3 步:搜索并安装 Elementor
在右上角的搜索栏输入「Elementor」,搜索结果出来之后,找到「Elementor Website Builder」,安装前务必要确认插件的作者是显示为「Elementor」,确认这个才是官方的 Plugin,不要装到其他名字相似的插件了。

找到之后点击「Install Now(现在安装)」,等安装完成之后按钮会变成「Activate(启用)」,再点击一次启用就完成了。


💡 小贴士:启用完成之后,左边菜单会出现「Elementor」的选项,这代表安装成功了。
第 4 步:确认 Elementor 已经启用
安装启用完成后,进入 WordPress 后台 → Plugins → Installed Plugins,确认 Elementor 显示为「Active(已启用)」的状态。

安装完之后:建立你的第一个 Elementor 页面
很多人会用 Elementor 来制作部落格文章 (Post),其实它是不适宜用来编辑文章的,因为部落格要每天快速的更新,使用默认的编辑器会更建议、更快完成更新和网页容量更轻量;Elementor 通常是用来设计「Pages(页面)」的:比如首页、关于我们、服务介绍页、联系页面这类的页面,因为页面通常是设计比较复杂而且不需要经常更新。
第 1 步:建立一个新页面
进入 WordPress 后台 → Pages(页面)→ Add New Page(新增页面),给这个页面取一个名字,比如「关于我们」,然后点击右边的「Edit with Elementor(用 Elementor 编辑)」按钮。
第 2 步:了解 Elementor 编辑器的界面
进入 Elementor 编辑器之后,你会看到左边是工具栏,里面有所有可以使用的 Widget(比如是文字、图片和按钮等等的);右边是网站的预览区,你做的每一个改动会实时显示在这里。
基本的操作方式是从左边的工具栏,把你想要的 Widget 拖拽到右边的预览区上,然后在左边的设置面板里修改文字、颜色、大小;也就是说你在左边做设定调整,同时右边会立刻显示效果。
第 3 步:用模板快速开始(新手推荐)
如果你是不知道从哪里开始设计的话,Elementor 有提供了现成的页面模板供你直接套用。进入 Elementor 编辑器之后,点击在预览区显示的文件夹图标(Add Template),然后模板库会在荧幕上弹出,浏览模版库并找到你喜欢的设计,点击「Insert(插入)」,模板内容就会自动的加载到预览区上了,你只需要把里面的文字和图片换成你自己的内容就好了。
💡 小贴士:Elementor 免费版有 30+ 个基本模板可以用,Elementor Pro 版有 300+ 个专业设计模板,选择更多,设计质量也更高。点此了解更多 Elementor Pro
第 4 步:储存并发布
编辑完成之后,点击左下角的「Publish(发布)」按钮,你的页面就正式上线了。以后想要修改这个页面,只需要进入 WordPress 后台 → Pages → 找到这个页面 → 点击「Edit with Elementor」就可以了。
加码建议:搭配什么主题用 Elementor 最顺畅?
虽然 Elementor 几乎可以和所有 WordPress 主题配合使用,但是搭配轻量化、专门为 Elementor 优化的主题,网站速度会更好,排版问题也更少。
| 主题 | 价格 | 特点 |
|---|---|---|
| Hello Elementor | 免费 | Elementor 官方出品,最轻量,速度最快 |
| Astra | 有免费版 | 功能丰富,有大量预设模板 |
| OceanWP | 有免费版 | 适合电商网站,和 WooCommerce 整合好 |
我帮客户做的网站,最常用的是 Hello Elementor:官方自主开发的主题设计,和 Elementor 配合最稳定,而且非常的轻量,不会拖慢网站的加载速度。
💡 小贴士:Elementor 本身对服务器资源有一定的需求,搭配一个性能好的 Hosting 可以让 Elementor 运行更顺畅。我通常会帮客户搭配 Hostinger Cloud Startup 方案 —— 内建的 Cache 和 CDN 可以有效的减少 Elementor 对网站速度的影响。
总结:Elementor 安装步骤速查表
安装 Elementor 只需要几分钟,但它可以帮你做出一个真正好看又专业的 WordPress 网站。
| 步骤 | 要做的事 |
|---|---|
| 1 | WordPress 后台 → Plugins → Add New Plugin → 搜索「Elementor」→ 安装并启用 |
| 2 | Pages → Add New Page → Edit with Elementor |
| 3 | 拖拽 Widget 或套用模板,设计好之后点击 Publish |
如果你在安装或使用 Elementor 的过程中遇到任何问题,欢迎留言告诉我,我来帮你一起看看。
常见问题解答
安装 Elementor 本身对速度影响不大,但是如果你在页面上加了太多 Widget 和动画,速度就会受影响。建议搭配 LiteSpeed Cache Plugin 使用,同时选择一个有 Cache 功能的 Hosting 方案。
可以,但是免费版的模板数量有限(30+)。Elementor Pro 版有 300+ 个专业模板可以使用,选择更多。
不会。Elementor 是一个额外的编辑器,不会直接影响到你现有的页面和文章。你可以选择某些页面使用 Elementor 来编辑,其他页面继续使用 WordPress 默认编辑器也行的。
技术上是可以的,但是我不建议在同一个页面混用两个编辑器,因为这样页面的样式可能会混乱导致设计看起来不一致不专业。我的建议是最好一个页面只用一个编辑器。
是的,Hello Elementor 是完全免费的官方主题,可以在 WordPress 的主题库里直接安装,不需要付费。
