这篇Elementor教程是体系化的教程，覆盖了：Elementor购买避坑、入门基础、进阶操作、案例实操、常见问题，让你一文学个通透。我已经用Elementor 7年以上了，我认为它是市面上最好的WordPress页面编辑器。
Elementor不仅能让我们在制作网页时所见即所得，相较于其他页面编辑器，它更加易用，第三方提供的扩展插件也更加丰富。
如果你想流畅的一文熟悉Elementor建站过程，请查看：如何用Elementor制作一个外贸独立站。
如果你想快速了解一下Elementor是如何建站的，请查看本文中的视频。
Elementor是基于WordPress而存在的，你首先必须有一个WordPress网站才能使用它，如果你对WordPress完全不了解，那么请查看WordPress教程哦。
购买Elementor授权
Elementor的官方价格最低59美元/站/年，我曾经在学习阶段下载过网络上的免费破解版本，然后过了半年，在我学习SEO时，才发现中招了，网站被植入了很多隐藏的外链。因此，我总结了下面两篇教程，第一篇教你如何避坑与选购什么官方套餐，第二篇教你通过更换绑定域名的方式，将官方授权的价值最大化。
Q1. 激活Elementor Pro授权时，界面提示reconnect按钮，并且点击按钮后无法激活
当你激活Elementor Pro的授权时，看到提示：We’ve noticed that you are trying to connect: 你的域名. Please make sure this is the correct URL and click ‘Reconnect’. 同时提供了一个Reconnect按钮。即便你点击了这个按钮，也依旧无法激活授权。
出现这个问题的原因是：你的网站后台的setting > general页面中的wordpress address和site address是不相同的，Elementor Pro需要你统一它们，请修改一致后，再去激活授权即可。
参考资料：https://elementor.com/help/activate-your-license-key/
安装Elementor
首先，你得有一个WordPress网站，建议使用专门的WordPress主机，我给建站客户用的是Cloudways，它能节省你的运维学习时间以及管理实践，在主机中安装WordPress，登录网站后台之后，你便可以按下方的教程安装Elementor。
基础操作
进阶操作
制作页面（视频）
我的专业领域是建外贸网站，所以，我以为外贸网站的常见页面为例，使用Elementor逐一制作它们，并录制完整的教学视频，我想付费的教程视频也大抵如此。
Bilibili视频
Youtube视频
制作页头页脚（Pro）
也许你还在用Astra主题或者其他主题提供的页头页脚配置功能，而Elementor直接打破规则，它虽不是一个主题，但它可以替代主题去灵活的制作网站的页头和页脚。
制作文章模板（Pro）
又是一个打破规则的功能，过去，主题们对于博客文章的列表页、详情页，只是提供一些配置功能，或者提供几套模板供你选择，如果你想对它们进行DIY调整，那是不可能的，包括我常用的B2C独立站常用主题Woodmart也一样，你可以观察很多博主的文章列表或详情，基本都是千篇一律。
而有了Elementor Pro，你可以自己DIY文章列表、文章详情页的模板，甚至可以为不同分类、或者具体某些文章制作模板，不再束手束脚。
制作产品模板（Pro）
继续打破规则，不再受限于主题本身提供的产品列表或详情页的模板，你可以用Elementor Pro DIY产品列表、文章详情页的模板，就跟上面的文章模板一样灵活。目前，我注意到Woodmart主题也增加了Layout功能来实现DIY产品的模板。
Elementor所提供的产品模板定制功能，也并不是完美无缺的，如果你的定制需求复杂，你还是会用到一些第三方的扩展插件，譬如Crocoblock的jetplugins。
制作询盘表单（Pro）
你是否还在用contact form 7或者是wpforms插件呢？我过去就用过它们，前者功能不全，后者免费版功能不全。直到我用上Elementor Pro的form元素，我就再也不用其他表单插件了，少装一个插件，少一点网站的重量，还能剩下一些成本。
适合Elementor的主题
如果你问我用什么主题搭配Elementor。我会说，如果做非B2C站点，我用Hello Elementor主题，它是官方原配。如果是B2C站点，我用Woodmart主题。如果你做博客站，我便推荐你用Astra或Generatepress主题。
问题答疑
可以用Elementor编辑WooCommerce产品吗？
可以，请看下图，在Elementor设置的文章类型中，勾选产品并保存。然后你在编辑产品时，就能看到使用Elementor编辑按钮了。
Elementor能编辑产品的哪一部分内容？
可以用Elementor编辑产品的详细介绍，也可以认为是产品的正文而产品的简介（short description）是无法使用Elementor编辑的。
如何使用Elementor编辑Custom Post Type Ui定义的文章
与上文同理，请在下图的Elementor设置中勾选你添加的文章类型并保存
使用Custom Post Type Ui添加的新文章类型可以用Elementor Pro制作列表页和详情页模板吗？
可以，譬如你可以用Custom post type ui（CPT UI）添加名叫case的文章，便于管理公司的案例，如果你想以类似博客的形式展示case，那么你在用CPT UI添加case时，需要注意下图中的配置：将has archive选择为true，这样以来，才能用Elementor Pro制作针对case的文章列表模板（Archive），然后发布模板时设置display condition为case archive即可。
用Elementor编辑商店页面/产品首页报错
原因是：这个页面在woocommerce的设置中已被设为商店页面，所以不可以用Elementor直接编辑。但你可以使用Elementor Pro制作Product archive模板，并在保存发布时，设置展示条件为shop page。
用Elementor Pro制作产品列表模板时，设置展示条件为shop page
如何用Elementor制作图文等比缩放的首页Banner？
有读者反馈希望banner不因设备尺寸的改变而改变布局，譬如：不希望文字把背景图片挡住，又希望图片在不同设备上都能完整显示….emm，你只有把文案做到图片里直接作为banner了。
目前有几种方法：现在我比较推荐的是使用Eelementor的Image carousel元素来实现。
下面是我以前用的旧方法。
以Elementor Pro为例，你需要使用slider元素，将图片上传到背景中，同时设置size：contain，然后点击height（高度）旁边的设备图标，切换到不同设备上，分别设置图片的高度，以便图片宽度能完整显示。
接下来，切换到这个banner的content标签页，将内容、按钮都清空，设置link（链接），将链接方式（apply link on）设置为whole slider。
如果你使用的是免费的Elementor，那么你需要使用 Premium Addons For Elementor 高级元素扩展中的Premium Carousel / 轮播来制作banner。
为什么不能用Elementor编辑blog/news页面。
因为在网站后台的设置>阅读中将这个页面设置为了文章页，一旦如此设置，便不能直接用Elementor编辑它
如果你想编辑它，要么，你取消这个设置，要么，用Elementor的template功能，制作archive类型的文章列表模板，并将condition设置为Post archive/文章Archive
