Elementor教程 ：WordPress 最棒的页面编辑器（完整指南）

Elementor 是 WordPress 最热门的页面编辑器之一，它不同于 WordPress 默认的区块编辑器（Gutenberg），是近几年快速崛起的优质软件。 更多 Elementor Pro 进阶教程。

你可以用 Elementor 客制化网页设计，不论是套用内建的美观模板，或是使用内建多种元素功能，它都能轻而易举的帮助你：）

另外，Divi 软件 是一款优质的页面编辑器（或称为主题也可），同样有很多爱用者，你可依照自己需求挑选。

回来这篇文章，我整理了多个“ Elementor教程 ”内容，从插件介绍 / 安装、面板介绍、页面设计、其他功能 .. 。

内容很丰富而且适合新手，只要跟着流程学习就搞定啰。

如何打造品牌形象网站，影片学习（内有 Elementor 实战教程）

---

1. Elementor 是什么？

---

2. 如何安装+设定 Elementor？

这章节，来学习安装+设定 Elementor 插件，把基础工程搞定就能顺利使用了。

安装 Elementor

前往 WordPress 后台 > 插件 > 安装插件，搜索 Elementor 然后安装+启用（下图的 Logo 才是官方正版插件唷）。

如果不知道怎么安装，也可以参考 WordPress 插件安装。

打开编辑权限禁止默认颜色 / 字体

Elementor 安装后左侧边栏会看到操作区块，点击 Elementor 就能前往设定项，参考下面设定，完成后储存。

• 内容类型：是允许 Elementor 能在哪些页面类型使用，这里全部都先勾选。 （可能你的选项会跟我不同，是因为我是使用 Astra 进阶主题，有 Custom Layouts 这个客制化布局功能，有兴趣可参考 Astra 进阶教程）。
• 禁用默认颜色&字体： Elementor 和 WordPress 主题都各自有一套样式，把禁止样式勾选起来，就会以 WordPress 主题的样式为主，可预防不一致的状况。

角色管理员

如果管理网站的成员不只一个，也可以对不同角色分派权限，这个有需求再设定就好。 （有关于不同的角色可操控的范围，可参考 WordPress 后台）。

---

3. Elementor 页面编辑器，面板一览

前面的基础设定完成后，这章节看一下 Elementor 要从哪里开始编辑，还有内部的操作面板介绍。

前往 页面 > 新增页面，点击上方的“ 使用 Elementor 编辑 ”按钮。

进入后，Elementor 的主要编辑面板就出现啦！ 主要分为两大块，左边是元素功能区块，右边是视觉编辑区（下图）。

简单来说，就是把想要的功能，直接拖曳到右边就行了，但可能你会想说，那我想要 2 栏式、3 栏式的布局要怎么办？ 没关系，这我们下一章节都会教程。

这章节还是先了解 Elementor 其他的主要接口，可照下图点左上角的 Icon，继续下面的教程。

Site Settings 全站设定

接着会看到一些 Elementor 的可设定项目。

首先，前往 Site Settings，这里面的配置会影响全部使用 Elementor 编辑的页面，故又称为全站设定，我会挑选几个项目来介绍。

Global Colors 全站颜色

前往 Global Colors，可设置全站常用颜色，之后在使用 Elementor 设计页面时，就能直接选用这些颜色，维持网站色调的一致性。

全局字体

设定网站文字的相关内容，字型不知道设什么比较好的话，可以用Noto Sans TC思源黑体，适合人也满好看的。

备注：这里的文字设定是全站预设值，如果在单一 Elementor 元素上，有调整字体样式，就会覆盖掉这里的预设值。

排版设定

这里可调整页面版面，也能调整网页宽度，还有内文的颜色、字型等 ..。

User Preferences 使用接口

前往 User Preferences，可调整 Elementor 操作面板颜色，有雪亮白、暗黑色可以选，也能调整面板宽度。

其他操作

如果有安装其他 WordPress SEO 插件，像是 Yoast、Rank Math ..，只要有特别标明支持 Elementor，有机会在这里找到相关功能。

像是下图就是有安装 Yoast 所以有出现，就能使用它进行页面的 SEO 优化。 更多教程，可参考 WordPress SEO 插件推荐、Rank Math 教程。

也有按钮可回到 WordPress 仪表板。

功能元素区块

这是 Elementor 的重点区块，就是实现页面设计的组成要素，会看到有标题、图片、按钮等 ..，因为我有加购 Elementor Pro 进阶方案，所以功能会比较多一点。

简单来说，只要把想使用的功能，拖曳到编辑窗口就能完成设计了，是不是很方便呀！

如果元素太多要查找麻烦，也可以善用搜寻框找到想要的元素。 至于如何用元素编辑页面，下面章节会有教程，这里就不多说。

全局工具

当开始编辑页面，可能有些区块已经设计好，想重复使用不想再重新设计。

就可以把指定区块储存为全局工具，之后就能直接拖来用啦！

底部字段介绍

接着来介绍 Elementor 底部字段有哪些功能，分别来认识一下。

一般设定

点击底端齿轮 Icon，可设定当前页面的基本信息，像是页面编辑、发布状态、封面图片等 …。

Navigator 结构解析

点击底端栏的 Navigator 图标，会出现当前页面的分层结构，有助于了解整个页面的编排。

点击 Navigator 上的字段，也可以直接把指定区块挑出来，方便我们编辑。

响应模式

点击底端栏的 响应模式，可切换不同装置浏览，就能针对不同设备设备做优化啰！ 是很方便的功能。

预览页面

点 预览变更，就能浏览目前的页面。

储存&发布选项

这里可保存目前的编辑页面，跟 Excel 的存档功能一样（储存草稿）。

还有可把页面存储成可重复使用的版型，之后就能直接叫出来使用（存储成版型）。

如果都设计完成后，就可点 发布 按钮，页面就正式制作完成啰。

页面制作完成，接下来要做的就是把页面放入网站上任一地方，常见的就是放入到菜单中，请参考 WordPress 菜单，有相关教程。

以上就是 Elementor 编辑器的大致介绍啰，看完是不是更上手了一点呢：）

---

4. 如何用 Elementor 设计页面？

这章节是重头戏啰，会教如何使用 Elementor 设计一个页面。 在此之前，有个 Elementor 编辑概念可先脑补一下。

Elementor 设计逻辑

Elementor 主要分为 Section 区块、Column 栏、Widget 元素，是由这 3 大项组成。

一个页面通常由多个Section区块组成。

如下图所见，Section 区块能包含多个 Column 栏，而每个 Column 又能包含多个 Widget 元素。

当然还有更进阶的排版作法，就是用Inner Section元素，在Column中又嵌入一个内部Section区块，而内部Section又包含多个Column &Widget。

但怕大家搞混，这里先提个概念就好。

新增区块内容

接下来，我示范如何开始用 Elementor 设计一个区块，点编辑区的加号 Icon。

会看到很多用 Column 搭配的架构，选择两栏式的。

然后会看到画面显示一个两栏式的区块，点击其中一个字段，并把图片元素拖曳至里面（或是直接拖曳到该字段内也可）。

接着左边设定区，会自动显示图片可编辑的功能。

可以上传图片、设置图片尺寸、对齐方式、图片链接等 .. ，就自行发挥啰

重复此步骤，在另一个 Column 字段新增标题&文本编辑器元素，然后做相关设定。

这样就建立一个完整的 Section 区块了，是不是很简单呢：）

样式&区块设定

如果想要更改标题颜色呢？ 也很容易，点击指定右侧的标题元素，然后切换到 样式 标签，就可以啰！

备注：任何 Elementor 的 Section 区块 / Column 栏位 / Widget 元素想设定样式，一样可切换到 样式 标签，进行相关修改唷。

高级设置

最后就是进阶设定啦！ 有关 Elementor 的任一个内容（区块 / 字段 / 元素），都可以做进阶设定。

那进阶设定里面有什么呢？

• 调整边界、内距离。
• 指定 CSS。
• 动画设定。
• 不同设备设备是否反转字段 or 显示或隐藏。
• 不同的元素，有更多设定。

页面预览&发布上线

当一个区块设计完成后，接着可再设计第二个、第三个区块 .. ，就会变成一个完整的页面啦！

等页面都设计完成，就可点预览看一下成果。

我们可以把 Elementor 面板缩起来，或是点底端的预览按钮都可以。

完成后点 发布，页面就正式上线啰，接下来可参考 WordPress 菜单教程，把页面放入网站菜单中，让访客能点击就搞定啦！

以上是使用 Elementor 設計頁面的簡單教程，你也學會了嗎？

---

5. Elementor 編輯小技巧

剛剛我們學習了，如何使用 Elementor 自己設計一個頁面區塊。

這章節學習一下更多的編輯技巧。

切換指定區塊內的不同類型

我們已經知道 Elementor 的頁面，主要是由 Section 區塊、Column 欄位、Widget 元素，這 3 個所組成的。

既然如此，如果想要針對指定類型設定，有沒有什麼方法能快速選取呢？

參考下圖，點擊圖示就能自由切換，想要編輯的區塊類型囉！

或是点击底端栏的 Navigator，也能显示页面的组成结构，只要点击字段就能前往啰！

操作 Elementor 区块

鼠标移至区块上方，会出现相关功能，也可以拖曳区块进行排序，可参考下图。

更多操作设定

Elementor 有支持右键功能，在任一个区块点击右键，能唤起相关功能。

像是复制粘贴、删除、重置样式、保存为可重复使用块等 .. ，可以自行玩玩看。

备注：这里的复制/ 粘贴/ 还原，和Excel的快捷键一样。

以上是 Elementor 编辑小技巧分享：）

---

6. 储存重复使用块

使用 Elementor 编辑一段时间，可能自己有设计一些区块，不想再花时间重复制作，就可以储存为重复使用区块！

储存后，之后有其他的 Elementor 页面也需使用，就直接套用就行了！ 是不是很方便？

Elementor 重复使用区块，大概有下面几种类型，体积由小到大。

• 储存小工具
• 储存网站区块
• 储存页面

下面我分别教大家如何设定。

储存小工具

假设下面这一段文本编辑器文字，在其他的 Elementor 页面也想用。

在指定元素点右键按下 Save as a Global，就可保存为「 可重复使用块块 」啰。

如果要把刚存的小工具拿出来用，要怎么做呢？ 点击全局，这里就会列出所有可重复使用的元素啰！

储存网站区块

在指定块点击右键，按下“ 保存成版型 。

帮储存的版型取个名字，点击储存。 这样区块就存入到可重复使用的版型啰！

如果要引用刚储存的区块，要如何做呢？ 其实很简单，点击下图的引用模板 Icon。

切換到「 我的版型 」分頁，點擊「 插入 」，就可以順利插入到網頁裡面了！

是不是很方便呢：）

儲存頁面

一個頁面設計完成了，如果打算重複使用此頁面，也可以直接把頁面版型儲存起來。

點擊底端欄的「 儲存成版型 」，然後命名即可。

之後在 Elementor 版型庫，就可以直接拿來套用啦！

---

7. Templates 範本功能

Elementor 安裝完成後，WordPress 後台側邊欄會多出一個 Templates 範本功能，這是用來幹嘛的呢？下面跟大家分享它的幾個常見功能。

已存版型（Saved Templates）

這是用來存放客製化「 頁面、區塊、全域小工具 」的地方，能進行新增 / 編輯 / 刪除等 .. 操作，如果你有自行新增的全站區塊，就能來這邊做統一編輯。

下面我簡單示範，如何新增一個全站區塊，之後在編輯任一個 Elementor 頁面，隨時都能拿出來用。

首先，前往 Templates > 已存版型（Saved Templates），点击上面的新增。

选择想新增的重复版型类型，取个名字后送出。

之后就能进入 Elementor 编辑区啦，后面就跟用 Elementor 设计页面的流程差不多，就不多做说明啰：）

---

8. Elementor 快速创建页面的方法？

我们都知道，如果要从零开始设计整个网页，实在会花费很多时间。

那有没有方法是能快速套用模板的？ 其实 Elementor 提供多种现成模板，方便你快速使用！

这里简单分成几个方法，如下。

• 套用区块模板
• 套用整个页面
• 套用自订版型
• 套用第三方主题 or 插件的版型

一、套用区块模板

Elementor 有非常多类型的页面，可让你直接套用进去。

首先，使用Elementor编辑页面>点文件夹Icon，就能招唤模板出来用了。

前往区块 标签，就会出现许多一块块的现成布局，只要选取你爱的插入即可。

还可善用分类功能，看是想建立关于我们、行动招唤（CTA）、常见问题、联络我们等 .. ，有很多类型区块可切换选择。

二、套用整个页面

再来切换到 页面 标签，这里有很多整页式的样板可以选择唷！ 看你喜欢哪一种就拿来用吧！

三、套用自订版型

最后一种就是套用自订版型啰！ 前几个章节有提到，如何新增可重复使用的区块。

新增完成的自订版型，都能在这里被招唤出来，就不用重新再设计一次啦。

四、套用第三方主题 or 插件的版型

除此之外，因为 Elementor 这款页面编辑器真的很有名气，所以许多 WordPress 开发公司 / 者，都针对它做相关扩充功能。

举例来说，像是 Astra 一样是很知名的 WordPress 主题，连公司都说自己是 Elementor 的爱好者，而推荐大家去使用 Elementor。 Astra 主题入门，有更多教程。

理所当然的，Astra 主题有针对 Elementor 做一定程度的功能扩充，安装完成后会多了一个 Start Template 起始模板的 Icon，点进去就能使用啰！

接着，会看到又有琳瑯满目的网站页面&区块，可以供我们挑选使用了！

更多使用 Astra 主题+Elementor 页面编辑器插件，所搭建而成的网站，可参考 建立 Blog、形象网站搭建、购物网站搭建，内有更多的完整教程。

以上就是使用 Elementor 快速打造网站页面的方法分享！

---

9. 适合 Elementor 的主题主题

刚有提到 Elementor 是众多 WordPress 页面编辑器 里，非常热门的其中一款。

所以许多 WordPress 有名的主题，都会要求自家主题支持 Elementor，甚至有些主题还有提供 Elementor 的扩充功能。

如何判断主题是否支持 Elementor？

因为 Elementor 用户很多，所以通常主题商都会在官网或营销文案上，特别标注有支持 Elementor，稍微浏览一下就知道了。

像是 Astra 主题，就有针对 Elementor 打造扩充功能，这篇 Ultimate Addons for Elementor 教程（进阶版才能用）有说明。

或是许多 WordPress 玩家，也会在 Themeforest 主题森林 上购买主题，会看到主题介绍栏有特别标注支持 Elementor。

像是热门的 Soledad 主题，也有针对 Elementor 开发许多元素功能。 更多 Soledad 主题架站 教程。

也能参考下面的 WordPress Blog 架站影片，是使用 Soledad 主题制作的，它对 Elementor 有良好支持，且主题有内建多种 Elementor 工具可使用。

主题自带页面编辑器

比较要注意的是，如果使用的主题有自带自家的页面编辑器，像是 Newspaper 的 TagDiv Composer、Avada 的 Avada Builder、Flatsome 的 UX Builder 等 .. 。

这几款也是很卖座的主题，因为是一次付费享有终身更新。

会建议就使用它们内建的页面编辑器就好，不然买这款就没意义了，而且自家的软件支持度一定最高。

相关教程，欢迎参考 Newspaper 入门主题、Avada 入门教程、Flatsome 入门教程。

能推荐一些对 Elementor 有良好支持的主题吗？

关于有支持 Elementor 页面编辑器的 WordPress 优质主题，我自己是使用 Astra 主题。

当然你不一定要跟我的一样，毕竟每个人喜欢的风格并不同，像是 OceanWP、GeneratePress、Soledad .. ，这几个对 Elementor 一样有良好支持。

下面我会分别列出免费版、进阶版的 WordPress 主题，都是我认为优质且和 Elementor 有良好支持，供给你参考啰！

• 免费版主题（支持 Elementor）： Astra（完整教程）、OceanWP、GeneratePress
• 付费版主题（支持 Elementor）： Soledad（完整教程）、BeTheme、Porto、Shopkeeper（电商专用）、Woodmart（电商专用）

---

10. Elementor 扩充插件有哪些？

如同我上一章节所提到的，因为 Elementor 这个 WordPress 插件十分热门，所以除了主题商有开发扩充功能，那想当然耳，插件商也一定有开发外围的功能啦！

下面我简单挑选几款常见的 Elementor 扩充插件，可帮助你再次强化 Elementor（虽然它原本就很强了XD）。

Essential Addons Elementor

Essential Addons Elementor 提供超过 70 个广告素材元素、网页设计元素，强化 Elementor 页面编辑器。

70 几个广告元素中，有将近 40 个是免费版就能使用，像是文章页面布局、倒数计时、表格支持、行动招唤、进度条、黏性影片显示 .. 。

剩下就是它的进阶版才能用的元素啰，有关于这款插件也能参考影片。

如果你有预算考量，但是又很想使用 Elementor 做更多的事情，使用 Elementor 免费版+Essential Addons Elementor 免费版，其实就能设计出很棒的网站了。

当然，如果有更多的客制化需求，可能还是要采用进阶版，这个就看个人需求啰：）

Ultimate Addons Elementor

Ultimate Addons for Elementor 终极扩充功能，是 Astra 在 Elementor 页面编辑器上，新增了多种区块元素，可强化网页设计能力。

除了 Elementor 编辑器，Astra 也有 Ultimate Addons for Beaver Builder 插件，帮 Beaver Builder 做了功能扩充（这在购买 Astra 方案时，就需选择）。

Ultimate Addons for Elementor 主要功能有，提供 40 多种功能小套件、100+ 网站模板、200+ 区块模板。

这个插件通常适用于 Astra 主题的用户，如果你正使用 Astra 主题，应该会对你有帮助，但这是进阶版才有的功能唷！

相关内容可参考 Ultimate Addons for Elementor 教程。

除此之外，还有许多 Elementor 外围插件，就不个别列举了，如果有兴趣的只要在 WordPress 后台的安装插件，搜索 Elementor 应该就一堆跑出来了！

---

常见问题

原文链接：https://www.itaoda.cn/blog/9305.html，转载请注明出处。