你是否觉得很奇怪，为什么你做出来的WordPress页面，跟平时看到的那些精美的网页有那么一点差距呢？明明用的都是WordPress，为什么别人的网页会那么酷炫？
也许你会觉得那些精美的网页只有专业的网页设计师才能制作出来，但其实不然，要做出好看、高大上的网站，并不真的需要一个网页设计师，你需要的只是一个好用的页面编辑器（Page Builder）。
事实上，你看到的那些精美的网页，99%都能用Elementor这个功能强大的页面编辑器制作出来，关键，它还是免费的。
如果你想要跟专业网站设计师一样，做出各种功能强大，看起来高大上的网页的话，那你就不能错过Elementor这款强大的超过5百万个已启用安装数的免费WordPress页面编辑器插件。接下来，就跟着这篇Elementor教程学习如何使用Elementor吧。
关于Elementor
首先，让我们来了解一下Elementor。
Elementor是什么？
Elementor是一款功能强大的WordPress页面编辑器插件（Page Builder），由以色列公司Elementor Ltd.于2016年创立，并持续开发运营维护至今。
距离Elementor上线（2016年）到现在（2022年）不过短短6年，Elementor已经在整个WordPress生态圈里面产生了几乎不可取代的作用——超过500万已启用安装数，近乎全五星的好评，是目前最受欢迎的WordPress页面编辑器插件。
Elementor最大的优点是，它可以让我们通过鼠标拖曳区块的方式，无需会写任何代码也能制作出好看而且功能强大的专业网站。
Elementor的操作十分简单而且容易上手，它有很多预设区块功能，例如标题，文本，图片，图标，列表，表格等等，我们可以直接把这些区块通过鼠标拖曳到想要的地方，然后轻松地就能制作出精美的网页。
Elementor是免费的吗？
Elementor分成免费版与付费版的Elementor Pro，免费版的Elementor直接在WordPress后台插件搜索 Elementor Page Builder 即可安装启用。
免费版的Elementor提供了一些基础的区块功能，例如标题、图片、文字、视频、按钮、分隔线、图标等，其实已经挺够用的了，目前NYPanda.com使用的就是免费版的Elementor。
因为如果我们仔细地去拆解网页上的元素，就会发现其实大部分网页都是由以上这些基本元素通过排列组合和变化组成的，所以如果是刚入门的小伙伴，我们建议可以先从Elementor免费版开始入手。
付费版的Elementor Pro则额外提供了更多的区块功能，例如文章列表、价格表、幻灯片、表单等等，主要是添加了动态的网页元素，能让网页看上去更加酷炫，动态效果更多。
如果要开启Elementor Pro的功能，需要前往Elementor官网购买授权，最便宜的方案是一个网站一年$49美元，不算贵但也不便宜，如果你想要做出一个极度酷炫的WordPress网站的话，那这笔投资还是值得的。
Elementor Pro也有提供30天无条件全额退款，如果在买了之后觉得用起来不习惯、或者性价比不高的话，也可以直接跟客服申请退款，不会浪费到任何钱。
另外，如果是网页设计师或者是想用Elementor专门为别人建网站的小伙伴，建议可以直接买一年$999美金可用于1000个网站的方案，多个网站分摊下来的话就会比较便宜（类似团购）。
购买Elementor Pro
用Elementor来做页面编辑器插件有什么好处？
- 容易上手：Elementor的操作界面十分简单易懂，可以轻易地用【所见即所得】的方式来制作网站。就算不会写代码或者没有任何设计基础，也能轻松地通过拖曳区块（Drag & Drop）的方式，将心目中想要的网站制作出来。
- 快速高效：通过Elementor，在设计网页的同时，还可以给网页添加上各种强大的功能，从而同时省下了请设计师和网页工程师的费用，而且无需跟他们进行来回反复的沟通，因为在网页设计中，沟通是最大的时间成本。
- 适用性高：Elementor几乎可以做出任何类型的网站，无论是企业形象网站、在线电商网站、或者是线上课程网站，都能用Elementor制作出来。
- 支持响应式网页设计：我们可以通过Elementor调整网页在不同设备上所展现的外观，并进行预览，从而确保我们的网站在电脑、手机、平板上都能给访客提供良好的用户体验。
- 最多人用：Elementor目前（2022年）在WordPress后台插件中显示的已启用安装数已经超过500万了，并获得了5000多个将近满分的评价，是现在市面上最多人使用的WordPress页面编辑器插件，这代表着如果在使用过程中如果遇到任何问题，几乎都能在网上找到答案。
- 完整的生态圈：由于使用Elementor的人实在太多了，以至于市面上有许多的独立开发者或者公司也自行研发了Elementor的相关扩展插件，这使得Elementor逐渐拥有了一个完整的生态圈，这也意味着几乎所有类型的网站功能，Elementor都有相关方案。
如何使用Elementor页面编辑器？
接下来，我们将会和小伙伴们分享Elementor页面编辑器的使用概念和简单操作方法。
在示范中，我们用的是Astra主题+Elementor页面编辑器，这个也是目前比较喜欢的WordPress制作页面的方案。
安装 Elementor
首先要我们要做的是安装Elementor插件，前往WordPress后台插件区域，搜索 Elementor，搜索结果可能会出来很多Elementor相关的插件，但其中只有一个是官方的。
认准上图，然后我们就安装并启用这个超过500万次已启用安装数，接近满星好评的WordPress页面编辑器 Elementor Page Builder。
禁用Elementor的默认颜色和字体
因为我们要确保用Elementor做出来页面的风格，跟我们使用的主题是一致的。
所以我们要先前往 WordPress后台 -> Elementor -> 设置，
将 禁用Elementor的默认颜色 以及 禁用Elementor的默认字体 都勾选起来，
完成之后记得点击一下 保存更改。
使用 Elementor 创建页面
设置完之后，我们新建一个WordPress页面，接着点击 使用Elementor编辑 按钮，就可以进入Elementor的编辑模式中。
Elementor页面编辑器的使用逻辑
接下来，就来到了这篇文章最重要的部分，Elementor的使用逻辑。
很久之前，如果要做一个网页，需要写HTML和CSS，如果需要动态效果的话，那还需要写JavaScript，十分麻烦。而Elementor的存在就是为了取代这些繁琐的过程，让我们无需编写代码就能创建出好看而且功能强大的网站。
有一部分刚开始接触Elementor的小伙伴，可能会觉得Elementor怎么那么复杂，想要改个颜色或者字体都不知道去哪改，也太难上手了吧。
其实这正是Elementor功能强大的体现，因为Elementor是为了取代网页前端设计三大语言HTML，CSS，JavaScript而设计出来的，所以如果在你对网页三大元素，HTML，CSS，JavaScript有了基本认识之后，就可以在接触Elementor的五分钟内抓到Elementor的使用逻辑。
但对于完全不懂这三大语言概念的小伙伴们，可能在用了Elementor好几个月之后还是会似懂非懂，使用起来不太自信，必须依赖网上的攻略和影片才能做出想要的网页。
所以，如果我们想要学习如何操作Elementor的话，还是要先对HTML，CSS，JavaScript这三大语言有基本的了解会比较好，但不用想得太复杂。
适合配搭Elementor使用的主题
有哪些主题特别适合配搭Elementor使用呢？根据官方给出来的答案，Elementor适用于所有的主题，虽然官方是这么说，但根据我们的测试，有些主题其实并不是那么适合Elementor。
例如我之前用过的Avada, Flatsome等主题，这些主题都有自带的页面编辑器，主题官方也建议配搭它们自带页面编辑器使用，所以它们并没有特别支持Elementor（不过要用还是可以用的，只是效果没有那么好而已)。
所以，当我们在挑选WordPress主题的时候，记得要先查清楚这个主题是否支持Elementor再购买哦。但不用特别担心，因为Elementor的用户群很庞大，所以通常主题官方都会特别写出来是否支持Elementor。
接下来，我会介绍三个我使用过的，并认为是目前最适合搭配Elementor使用的主题，分别适合用来搭建形象网站、电商网站和博客网站。
Astra主题
Astra主题是一个在2017年由知名开发公司Brainstorm Force所开发的WordPress主题，在短短的几年内，Astra在WordPress官方主题中，已经超过了一百万的安装次数，并获得使用者将近全五星的好评。
Astra最大的特点就是它非常的轻巧快速，与其它动不动就好几MB的主题相比，Astra主题仅有50KB。除此之外，Astra还可以高度定制，可以让你在做出一个美观且功能强大的网站之余，也能维持高速的网页载入速度。
正因为Astra的简洁以及快速，使它成为了最适合搭配Elementor页面编辑器的主题之一。
不仅如此，Astra官方也极度推荐用户使用Elementor来制作页面，并推出以Astra为基础所制作的Elementor扩展插件 Ultimate Addons for Elementor，宣示了其加入Elementor生态圈的决心。
除此之外，Astra主题搭配Elementor页面编辑器，也是全球许多WordPress大神、Youtuber、网页设计公司的主流搭配，包括小伙伴们现在正在浏览的nypanda.com，也是用Astra+Elementor制作出来的。
适合用Astra主题制作的网站：形象网站、博客网站、电商网站（几乎所有类型的网站）。
WoodMart主题
WoodMart主题是一款在2017年8月推出的一款WordPress电子商务主题，算是比较新的电商主题，相较于其它只兼容旧款页面编辑器的老牌电商主题， WoodMart主题可以搭配Elementor制作整个电商网站。
Elementor在制作电商网站上，一直都不算是特别有优势，因为电商网站的核心是网站背后的功能与商业逻辑，例如相关商品、商品组合、库存管理这些消费者不一定看得到的东西，并不只是在于网站是否美观。
但WoodMart在这点上很好地弥补了Elementor的不足，因为Woodmart主题有特别为这些电商功能做了开发，可以直接搭配Elementor的区块拖曳式界面，轻松地将想要的网站外观给做出来，并且电商网站该有的功能也一样完整而且强大。
适合用WoodMart主题制作的网站：电商网站。
启用Woodmart主题
有哪些好用的Elementor扩展插件
如果你感觉Elementor官方提供的区块功能不够用的话，或是有一些想要的区块功能官方版并没有提供的话，你可以另外安装一些其它公司自行开发的Elementor扩展插件，里面新增了不少官方没有提供的热门功能。
不过这类型插件也别安装太多了哦，我建议Elementor扩展插件安装2到3个就好，因为Elementor本来就属于挺占主机资源的大型插件了，如果加装太多扩展插件上去的话，容易令网站打开速度变慢。
Essential Addons for Elementor
Essential Addons for Elementor（EA）是一款由知名WordPress开发公司WPDeveloper推出的Elementor扩展插件，有免费版与付费版的Pro。
免费版的Essential Addons for Elementor在WordPress后台的插件中显示已经有超过100万次安装启用，并获得将近满星的好评，因此如果你想要有更多的Elementor区块功能的话，可以先安装免费版来使用。
EA新增了大约77 种不同的Elementor扩展功能，比如说Elementor最缺乏的表格（Table）功能，如果你想要制作出美观又易懂的资料图表，那么EA提供的进阶图表功能，相信会符合你的需求。
如果小伙伴们有兴趣的话，可以参考EA的官方网站，里面有许多功能的Demo可以让小伙伴们一一查看。
启用Essential Addons for Elementor插件
Ultimate Addons for Elementor
Ultimate Addons for Elementor（UAE） 是由前面提到的Astra主题的开发公司Brainstorm Force所制作，因此在功能与整体设计上，也是针对Astra与Elementor Pro两者不足的功能所新增与开发的。
不过跟上面提到的EA插件不同的是，UAE仅只有付费版，并没有提供免费版试用，不过如果你有打算使用Astra主题的话，UAE可以跟Astra主题一起以优惠价格购买，可以帮你省下不少钱。
UAE新增了大约54 种有趣的Elementor扩展功能，比如说能够切换价格表的【Content Toggle】，非常的实用，可以帮助你的用户更加清楚地了解更种不同方案的区别，也是UAE中最受欢迎的功能之一。
更多额外的功能，由于篇幅关系无法在此详述的描述，如果你有兴趣的话，可以参考UAE的官方网站，里面有许多功能的Demo可以让你在购买之前查看一番。
启用Ultimate Addons for Elementor插件
Elementor Custom Skin
Elementor Custom Skin是一款受到全球网友大力推崇的Elementor插件，它可以让我们对Elementor Pro中的文章区块的外观进行定制，通过制作出不同的文章皮肤外观（Skin），来改变你的文章区块外表。
举例来说，如果你觉得原先Elementor Pro提供的文章区块外观不是你喜欢的，你就可以用Custom Skin这个插件另外制作一个模板，并且将它改成了你想要的样子。
Elementor Custom Skin算是Elementor整个生态系中，数一数二重要的必装扩展插件了。它可以帮助你制作各种不同外观的动态内容，比如说文章、作品集等通过WordPress动态产生的内容。
如果你想学习怎么使用Elementor Custom Skin的话，可以参考下面这个10分钟的简单教学：
Elementor 常见问题
Elementor是什么？
Elementor是一款功能强大的WordPress页面编辑器插件（Page Builder），由以色列公司Elementor Ltd.于2016年创立，并持续开发运营维护至今。
距离Elementor上线（2016年）到现在（2022年）不过短短6年，Elementor已经在整个WordPress生态圈里面已经产生了几乎不可取代的作用——超过500万次启用，近乎全五星的好评，是目前最受欢迎的WordPress页面编辑器插件。
Elementor最大的优点是，它可以让我们通过鼠标拖曳区块的方式，无需会写任何代码也能制作出好看而且功能强大的专业网站。
而且，Elementor的操作十分简单而且容易上手，它有很多预设区块功能，例如标题，文本，图片，图标，列表，表格等等，我们可以直接把这些区块通过鼠标拖曳到想要的地方，然后轻松地就能制作出精美的网页。
Elementor是免费的吗？
Elementor分成免费版与付费版的Elementor Pro，免费版的Elementor直接在WordPress后台插件搜索【Elementor】即可安装启用。
免费版的Elementor提供了一些基础的区块功能，例如标题、图片、文字、影片、按钮、分隔线、图标等，其实已经挺够用的了，目前NYPanda.com使用的就是免费版的Elementor。
Elementor Pro 值得花钱买吗？
付费版的Elementor Pro相较于免费版，额外提供了更多的区块功能，例如文章列表、价格表、幻灯片、表单等等，主要是添加了动态的网页元素，能让网页看上去更加酷炫，动态效果更多。
Elementor Pro需要前往Elementor官网购买授权，最便宜的方案是一个网站一年$49美元，不算贵但也不便宜，如果你想要做出一个极度酷炫的WordPress网站的话，那这笔投资还是值得的。
Elementor Pro也有提供30天无条件全额退款，如果在买了之后觉得用起来不习惯、或者性价比不高的话，也可以直接跟客服申请退款，不会浪费到任何钱。
另外，如果是网页设计师或者是想用Elementor专门为别人建网站的小伙伴，建议可以直接买一年$999美金可用于1000个网站的方案，多个网站分摊下来的话就会比较便宜（类似团购）。
Elementor可以在任何主题上使用吗？
Elementor可以在任何主题上面使用，可以通过开启Elementor提供的画布功能，将主题的设置以及Header, Footer去除掉，并重新以Elementor进行网页设计。
有哪些适合配搭Elementor使用的主题
适合搭配Elementor的主题有三款，分别对照三种不同的功能：
1.形象网站 – Astra
2.电商网站 – WoodMart
我可以用Elementor来写文章（Post）吗？
可以，但是一般不建议这么做，因为用Elementor所制作出来的区块在HTML的结构上包含着大量的 <div> 标签，使用过多的Elementor区块在文章之中，将会影响到网站的速度（除非你的文章很少、或是使用到Elementor区块的部分很少）可以参考这篇 WordPress 谷腾堡编辑器教程或者使用经典编辑器插件。
因此，在使用 Elementor 上，建议小伙伴们遵循官方的建议，将其用在【页面】上就好了。
Elementor会降低网站速度吗？
会的，因为Elementor其实包含了大量函数库，才会令它的功能如此强大。
所以当我们在使用Elementor的同时，也导入了许多我们可能表面上、或暂时没有用到的代码，这些都会降低一点网站的速度。
如果想要网站维持高速的加载速度的话，建议使用Astra主题和Cloudways主机。
WordPress 和 Elementor 有什么区别？
Elementor 是一个流行的 WordPress 网站和网页构建器插件，它为 WordPress 世界带来了自己的工具。也许最简单的看待它的方式是 WordPress 提供了一个建筑框架，而 Elementor 可以让你在这个基础设施上建造美丽的豪宅。
允许您构建“豪宅”的关键工具之一是 Elementor Editor。这种可视化拖放编辑器允许 Web 创作者无缝构建具有复杂动态功能的网页。通过使用编辑器将小部件拖放到您的页面上，您可以节省创建杰作的时间。这意味着工作更直观，无需编写代码即可创建专业网站。
