Elementor 是WordPress 必备的可视化页面构建器插件，他是拖放式的功能降低了建站难度，即便你不会代码，也能制作出精美的网站，使用 Elementor 就像搭积木一样搭建属于你的网站。
Elementor 和 Elementor PRO 的区别
| 功能 | Elementor（免费版） | Elementor Pro（付费版） |
| 页面构建器 | 拖放式页面编辑器 | 拖放式页面编辑器，功能更强大 |
| 模板 | 提供基础模板 | 提供更多高级模板和全站模板 |
| 主题构建器 | 无 | 支持自定义网站头部、脚部、单页面、存档页面等 |
| 弹出窗口构建器 | 无 | 支持创建和设计弹出窗口（Pop-up Builder） |
| WooCommerce 集成 | 基本支持（需要额外插件） | 完全支持，允许设计和自定义 WooCommerce 商店页面 |
| 自定义字体和排版 | 基本排版和字体样式 | 更多字体选项、动态字体样式和排版控制 |
| 高级设计功能 | 基本背景样式、色彩和间距 | 更多背景选项（渐变、视频背景）、动效、交互式元素（如悬停效果） |
| Global Widget（全局小工具） | 无 | 允许创建和复用全局小工具 |
| 表单功能 | 基本表单功能（仅限字段和样式） | 高级表单（多个字段、提交操作、与第三方工具集成等） |
| 动态内容 | 无 | 支持动态内容（例如来自数据库、博客文章、用户数据等） |
| 自定义CSS | 无 | 支持自定义CSS编辑 |
| 支持与更新 | 基本支持 | 优先支持、定期更新、访问最新功能 |
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 建站》方面的技术可以关注我们。
