Elementor是一款功能强大的WordPress页面构建器插件，专为那些不具备编程技能的用户设计。它通过直观的拖放界面，使得网页编辑变得简单易行。拥有超过 300 个模块、90 多个小部件和丰富的模板库，Elementor 插件大大提升了建站效率，降低了建站难度。作为目前最受欢迎的 WordPress 可视化编辑器插件之一，它的操作简便且功能强大。
Elementor的特色
实时可视化编辑：所见即所得的编辑器，立即查看设计效果。
丰富的模板库：内置大量预设计模板，可快速创建页面。
拖放式构建器：无需编写代码，拖动组件即可构建页面。
响应式设计：轻松为桌面、平板和移动设备设计优化布局。
自定义 CSS 和样式：支持高级样式设置，满足专业设计需求。
多种组件：如图片、文字、按钮、表单、轮播、导航菜单等。
Elementor和Elementor PRO的区别
| 功能 | Elementor（免费版） | Elementor Pro（付费版） |
| 页面构建器 | 拖放式页面编辑器 | 拖放式页面编辑器，功能更强大 |
| 模板 | 提供基础模板 | 提供更多高级模板和全站模板 |
| 主题构建器 | 无 | 支持自定义网站头部、脚部、单页面、存档页面等 |
| 弹出窗口构建器 | 无 | 支持创建和设计弹出窗口（Pop-up Builder） |
| WooCommerce 集成 | 基本支持（需要额外插件） | 完全支持，允许设计和自定义 WooCommerce 商店页面 |
| 自定义字体和排版 | 基本排版和字体样式 | 更多字体选项、动态字体样式和排版控制 |
| 高级设计功能 | 基本背景样式、色彩和间距 | 更多背景选项（渐变、视频背景）、动效、交互式元素（如悬停效果） |
| Global Widget（全局小工具） | 无 | 允许创建和复用全局小工具 |
| 表单功能 | 基本表单功能（仅限字段和样式） | 高级表单（多个字段、提交操作、与第三方工具集成等） |
| 动态内容 | 无 | 支持动态内容（例如来自数据库、博客文章、用户数据等） |
| 自定义CSS | 无 | 支持自定义CSS编辑 |
| 支持与更新 | 基本支持 | 优先支持、定期更新、访问最新功能 |
Elementor Pro提供了更多的模版库
Elementor Pro提供了主题生成器
同类型插件对比
| 插件名称 | 特点 | 优缺点 | 免费/付费 |
| Divi Builder | 全面的设计工具，Divi 主题集成 | 优点：功能强大，易用性强。缺点：对非 Divi 主题的优化稍逊。 | 付费 |
| Beaver Builder | 简单易用，注重性能 | 优点：性能稳定，适合开发者使用。缺点：设计自由度稍低。 | 免费/付费 |
| WPBakery | 丰富的第三方扩展 | 优点：市场成熟，功能全面。缺点：界面稍显复杂，代码输出较多。 | 付费 |
| Brizy | 用户友好，适合初学者 | 优点：简单直观。缺点：功能较少，扩展性一般。 | 免费/付费 |
支持Elementor的扩展插件
| 插件名称 | 功能 | 是否免费 |
| Essential Addons | 提供大量额外小部件 | 免费/付费 |
| Ultimate Addons | 高级设计小部件和模板 | 付费 |
| ElementsKit | 一体化解决方案，包括额外组件和模板 | 免费/付费 |
| PowerPack Addons | 添加高级小部件，扩展设计可能性 | 付费 |
| Dynamic Content for Elementor | 提供动态内容支持 | 付费 |
| WooLentor | 提供 WooCommerce 的高级设计工具 | 免费/付费 |
| Happy Addons | 创意小部件和功能 | 免费/付费 |
| Crocoblock Suite | 全面支持，包含 Jet 系列插件 | 付费 |
安装Elementor插件
Elementor的安装非常简单，只需要在WordPress后台插件库里面搜索 Elementor 插件并安装即可。另外 Elementor还有许多的配套的插件功能来丰富网站的功能。
正版的 Elementor PRO 购买后会提供压缩文件包， 可以通过 WordPress 后台插件 – 上传插件 进行安装。
设置Elementor基本信息
禁用 Google 字体，加快网站访问速度。
全部激活开启 Elementor 特性的功能。
当要套用第三方提供的主题时， 需要同步一下 CSS 样式文件。
当更新了 Elementor 新版本遇到问题时，可以点击版本控制回到上一个版本。
Elementor教程
创建页面并用 Elementor 打开页面的步骤省略了。Elementor 教程从构建页面、基础设置开始讲起。
首次打开 Elementor 时看到界面。从左侧拖拽 “ 容器 ” 到中间 “ + ” 号中。
Elementor页面结构
如图所示，假设当前你要编辑的页面是一篇博客的内容文章，可以遵循这样的结构。
点击左上角的 “ 结构导航 ”。 你接下去在页面中添加的内容都会在结构中显示。 简介和为什么要学结构是两个板块，分别用2个容器来分割。 在段落2中嵌套容器用来补充说明，需要注意 H 标签的使用。
Elementor网格布局
点击选中某个 “ 容器 ”，可以把布局设置成网格，并且还可以控制行数和列数。
如果你现在每个图片下面加上标题和时间，就需要每个网格内再套一层容器。如果先要查看效果先点右上角的 “发布” 按钮，再点一下右侧向下箭头中的 “查看页面”。
Elementor 预设了许多网格的样式，基本上可以满足大部分的需求。
你也可以通过 Elementor 提供的模版库中去挑选你喜欢的样式。Elementor 页面编辑有三种：根据自己喜好随意摆放。第二种：使用模版库的预设模块。第三种：由设计师设计好页面，程序猿按设计要求做页面。你会选择哪种呢？
Elementor 基本组件
基本组件主要由 9 个模块组成： 标题 、 图片、 描述、 视频 、按钮 、 分割线是我最常用的几个小部件。间距 、 谷歌地图、图标很少用。
标题组件
一个页面中只会出现 H1 标题， 其他的型号的 H 标题则根据页面的层次有规则的设置。
图1：可以设置点击标题跳转的外链， 标题的类型。
图2：可以设置对齐的方式、 字体的样式大小颜色等。
图3：可以设置标题的动态的效果、位置、或更高级的自定义方式。
前2种方式使用的比较多，第3种需要你花更多的时间去研究了。
图片组件
WordPress 图片上传很方便，可以直接把图片文件拖拉到网站内容编辑中。 我一般都是在本地优化好图片尺寸和大小后再上传的。图片大小对网页打开速度还是影响很大的，做运维服务的人一定要注意优化图片。《关于本地图片优化方式》本站有教程可以点击查看。
另外图片的 Alt 设置也很重要，也能够影响 SEO 的表现。对于复杂的图片机器也会很难识别， 需要你提供 Alt 描述来告诉他们。
文本编辑器组件
Elementor 内置的文本编辑器把最主要的一些功能都都包含在了里面。想要把段落内容编辑的更好看办法肯定是有的，但是不推荐这样做哦。例如： 字体加粗、 斜体、 列表、 外链、对齐这些基本的功能用好就可以了。
视频组件
视频组件其实用的也很多，尤其是对于外贸企业客户展示自己产品时， 经常会用视频来进行展示。视频组件使用方法也非常简单，只需要把里面的链接进行替换就可以了。强烈推荐不要把视频放在你的服务器上，不仅会占用服务器大量的空间，而且打开的速度会超级慢（因为视频打开是需要加载和流量的），最好的方式就是开通 Youtube 账号把视频放在第三方平台，网站内容只要改下链接就可以了。
按钮组件
添加按钮的目的是为了点击之后跳到另外个页面，一般会在产品页面加上 “联系我们” 的按钮。在内容文章如果要推荐访问其他文章一般用锚文本。 比如像这样： 本站有关于锚文本的介绍，点击查看。
某个章节结束了， 分割线添加一下，让页面看上去更有层次感。
总结
本篇是 Elementor 基础使用教程，希望对你有所帮助。文章内容不定期更新， 如有技术问题可以扫描右下角二维码联系我们。 想要了解更多关于WordPress建站方面的技术可以关注我们。
