了解 Elementor 工作原理
Elementor：依附在 WordPress 开发系统的一套可视化的页面编辑器插件。网站页面和内容想要做成什么样子全部由自己决定，就像搭积木一样先搭框架再填充内容。拖拽式可视化制作模式，将左侧功能组件：标题、按钮、图片轮播、留言表单、地图模块等功能模块直接拖到右侧展示区即可。
不过，对与初学者来说。给你一个空白页面，你真的知道要怎么做吗？不用担心，后面会一点点展开说明。
同类型页面编辑器，为什么选择 Elementor
Elementor优点：和 Divi、WPBakery、Beaver、古腾堡比起来，Elementor 就是上手最简单、设计最自由、生态最丰富。不管是新手做站，还是专业团队做外贸 / 营销落地页，都更省心、效果更高。
| 对比维度 | Elementor | Beaver Builder | WPBakery | Divi | Gutenberg |
|---|---|---|---|---|---|
| 活跃安装量 | 1000万+ | 100万+ | 100万+ | 未知 | 内置编辑器 |
| 市场占有率 | 9.6% 全球网站 | 约0.4% | 偏低 | 较高 | 每个站自带 |
| 核心优势 | 功能多生态全 | 代码极简稳定性强 | 捆绑主题多 | 设计自由度大 | 原生轻量化 |
| 主要缺点 | 页面偏重 | 功能偏少 | 界面老旧 | 学习曲线较陡 | 视觉设计能力弱 |
| 适合人群 | 各类用户 | 追求性能与稳定的用户 | 老用户 | 专业设计师 | 内容型网站 |
Elementor 有什么缺点
Elementor缺点： 会生成大量代码，导致网页文件变大。需要安装缓存和优化插件，例如：WP Rocket、LiteSpeed Cache 这类插件，合并文件、延迟加载图片。优化后页面大小的工具。
Elementor 与 Elementor Pro 的区别
免费版和付费版差异还是很大的，许多高级主题都需要用到 Elementor Pro 主题自定义的功能。例如 ThemeForest 上许多主题都需要安装了 Elementor Pro 才能导入主题模版。
| 功能 | Elementor | Elementor Pro |
|---|---|---|
| 页面构建器 | 拖放式页面编辑器 | 拖放式页面编辑器，功能更强大 |
| 模板 | 提供基础模板 | 提供更多高级模板和全站模板 |
| 主题构建器 | 无 | 支持自定义网站头部、脚部、单页面、存档页面等 |
| 弹出窗口构建器 | 无 | 支持创建和设计弹出窗口 |
| WooCommerce 集成 | 基本支持 | 完全支持，允许设计和自定义 WooCommerce 商店页面 |
| 自定义字体和排版 | 基本排版和字体样式 | 更多字体选项、动态字体样式和排版控制 |
| 高级设计功能 | 背景样式、色彩和间距 | 更多背景选项（渐变、视频背景）、动效、交互式元素 |
| Global Widget | 无 | 允许创建和复用全局小工具 |
| 表单功能 | 基本表单功能 | 高级表单 |
| 动态内容 | 无 | 支持动态内容 |
| 自定义CSS | 无 | 支持自定义CSS编辑 |
| 支持与更新 | 基本支持 | 优先支持、定期更新、访问最新功能 |
Elementor Pro 高级功能介绍
Elementor Pro：主题生成器、高级功能组件、弹出提示框、动态内容、全局组件与全局样式、自定义 CSS、高级动效与交互、专业模板与区块库。
主题生成器：支持自定义网站的页眉、页脚、单篇文章、文章归档页、分类页、404 页面、搜索结果页等。许多主题模版商基于此功能，设计出了大量精致的预制网站模板。用户一键导入后，既省去了从零设计的麻烦，又保留了灵活修改的自由度。
高级组件：免费版只有 32 个基础组件，Pro 版新增了 86 个组件，大幅拓展网站构建能力。新增组件包括：表单构建器、弹窗构建器、价格表、作品集轮播、倒计时、评价轮播、产品轮播、动态内容等。
提示框：在页面上临时跳出来的一个窗口，例如促销提示框。我们可以控制触发某个条件时出现弹框：下滑页面、首次访问、设定 3 秒后自动弹出。Elementor Pro 预制了几款弹框的样式，点击即用。
模版库：前面我们提到，当创建新页面展示的区域是空白的，对于新手是不知道页面中要放什么东西的。此时，可以借助模块库的预制样式，然后插入到页面中。可以选择模块中某一个块区域样式，也可以选择网页一整个页面。高级付费的主题会提供许多模版供大家选择。借助这些模版模块，让页面制作事半功倍。
Elementor安装与更新
如图，左侧插件功能栏点击安装插件 -> 右侧展示区输入框中搜索 Elementor 关键词 -> 安装并启用。安装成功后，左侧功能栏中多了 Elementor 功能选项。
如图，左侧插件功能栏点击仪表盘 -> 更新 -> 全选 -> 升级插件，所有免费版的插件可直接更新。从正规渠道购买的付费插件也可通过此界面直接更新，盗版插件无法再此处更新。
Elementor基本设置
- 文章类型：勾选，创建文章时，顶部出现使用 Elementor 编辑的按钮
- 文章类型：勾选，创建页面时，顶部出现使用 Elementor 编辑的按钮
- 禁用颜色：勾选，使用主题模版颜色，覆盖掉 Elementor 定义的颜色
- 禁用字体：勾选，使用主题模版字体，覆盖掉 Elementor 定义的字体
- 数据共享：不选
- reCAPTCHA 和 reCAPTCHA V3：填入 key 后将会加载谷歌验证代码
- 其他：不设置
- 开关编辑器加载程序方法：建议开启，可以排除与服务器冲突的故障
- 启用未过滤的文件上传：关闭，杜绝隐患，防止上传恶意程序
- Google 字体：禁用。引用谷歌外部的字体，对网站的速度有影响
- Form Submissions：关闭，似乎用不到
- 加载 Font Awesome 4 支持：建议关闭，可以大幅度提升网站速度
- 生成器标签：关闭，用不到
- CSS 打印方法：选择外部文件，对速度的提升有帮助
- 优化图像加载：开启，对图片进行优化处理
- 优化古腾堡加载：禁用。页面编辑器一种就够了，已经使用了 Elementor 就不需要古腾堡了
- 延迟加载背景图像：如果你使用了其他的缓存插件带延迟加载图片的功能，这里就禁用否则开启
- 在本地加载 Google 字体：建议关闭
- 元素缓存：1 ～ 2 周，主要看网站的更新频率
- 内联字体图标：开启后用SVG代码直接显示图标，省去请求文件环节，能提升网站加载速度
- 更多自定义断点：建议有自适应需求时开启，开启后可让你在笔记本、宽屏等更多设备上单独调样式
- 容器：建议开启，开启后能用更灵活先进的新布局方式，取代旧的区块+列
- 优化标记：建议开启，开启后能简化网页代码量，让网站速度变快、SEO更好
- Default to New Theme Builder：不开启
- 嵌套元素：建议开启，开启后你就能在容器里无限添加子容器，设计布局时更自由
Elementor使用教程
使用Elementor创建新内容
在编辑文章内容前养成好习惯，把文章的标题、描述信息、封面图、网页链接、文章类型都先设置好。然后再去编辑正文内容。
- 标题：页面/内容的标题，长度 20 ～ 30 个字符最佳，出现焦点关键词
- 封面特色图：如果封面图有特色会出现在谷歌搜索媒体区域
- 简介描述：是文章内容主题介绍，文字字数控制在 120 ～ 150 个字符
- 网站内容页面的链接：关键词相关、产品名及型号、控制好长度、容易好记
文章基本信息设置完后，点击右上角保存草稿，等正文内容都设置完后再发布。点击使用Elementor编辑按钮，去添加正文内容。
Elementor编辑区功能介绍
Elementor工作区分成三大块：工具区、功能模块区和内容展示区。
工具区
- 主题生成器：可视化设计网站的页眉、页脚、文章模板、产品页等全站模板
- 历史操作记录：自动记录所有编辑步骤，随时撤销、重做或恢复到之前的版本
- 站点设置：统一管理全站的全局颜色、字体、Logo、背景、布局宽度等，一次设置全站生效
- 页面结构：显示页面所有元素的层级目录，方便快速选中、移动或删除组件
- 多平台适配：分别调整桌面、平板、手机端的布局、字体、间距，让网站在所有设备都兼容
- 内容预览：在发布前，查看页面真实效果，确认无误后再上线
- 内容发布：把做好的页面保存并正式发布到网站，让访客能看到
功能模块区
- 布局：提供容器、网格、列等结构组件，用于搭建页面整体排版框架
- 基本：包含文本、图片、按钮、图标等常用基础元素，满足简单内容展示
- 专业版：Pro 专属高级组件（如弹窗、表单、动态内容、WooCommerce 模块），实现复杂功能
- 常规：汇总通用常用小工具，适配多数基础场景
- 站点：提供站点级组件，用于全站公共区域
- 更多组件：给 Elementor 新增大量自定义组件。例如，ElementsKit、Essential Addons
容器组件使用方式
容器：容器是 Elementor 最常用的功能。单个容器划分独立章节，内容较多时，可使用嵌套容器来拆分。
单个容器：创建单容器。如图，点击布局 -> 容器 -> 按住拖动到展示区的特定位置中。
嵌套容器：再次点击容器并拖动到展示区红框 
号位置就能创建容器里套着另外个容器，可以是一层二层三层。想要创建平级的容器？把容器拖到展示区紫色横线的位置。 右上角的页面结构，可以看出四层的嵌套容器，第四层有两个平级的容器。
网格的应用
网格：把一个容器按照固定的宽度和高度进行拆分，可以设置横排和竖排的个数。
在页面中插入一行两列的网格，分别放了2张图片。这便是网格的作用。
Posts列表
Posts：将同类型的内容以列表的方式呈现出来，这个功能模块是经常被使用的。
想要测试 Posts 功能必须先创建多条测试的内容文章。
Posts展示效果：找到 Posts 组件并拖到容器中，我们可以看到多条测试文章都会展示出来。如果添加封面图和描述信息展示的效果会更好。
内容展示区
由功能模块的组件组合而成。单击展示区的内容时，左侧功能区会立即切换到设置模式。
总结
通过这篇教程，相信你已经对 Elementor 也有了初步了解。自主建站是个持续学习和优化的过程，全靠别人教肯定是不行的，需要自己动手实践才能真正理解 Elementor 的使用方法。选择一款精美的主题，套完模版直接修改是最省力的。
