Elementor – 最好的WordPress页面编辑器
Elementor是一款强大的 WordPress 可视化页面编辑器，用于构建从简单页面到复杂电商站的各种网站。通过拖拽元素块搭建页面，或导入页面模板快速搭建网站，就像搭积木一样方便，所见即所得，做网站再也不用写代码。Elementor已经为超过 2100万 个网站提供支持，占据全球13%的网站份额。
我的站以及我的客户站便是用Elementor做的，它是我最爱的编辑器，没有之一。
Elementor的主要功能
主题构建器：自由设计每个页面
它让你能像搭积木一样，自由地设计网站的每个部分。无论是页头、页脚，还是单独的文章、页面，你都可以拖拽调整，不再受固定模板的限制。使用全局样式设计，还能统一全站的视觉风格，操作起来比较直观。
WooCommerce 功能支持
如果你打算在网站上使用WooCommerce销售产品，Elementor Pro提供了一些使用功能，让你可以自定义产品详情页模板、产品列表页模板、结账页面、购物车页面等等。
表单构建器：平稳地收集客户线索
收集询盘或订阅用户是很多网站的需求。表单构建器的好处在于它提供了现成的模板，你只需要：
- 选择一个合适的模板
- 拖拽调整需要的字段
- 配置SMTP收表单的邮件通知
- 还可以连接到你的邮件营销工具（比如Mailchimp）
智能弹窗：在对的时机与访客互动
弹窗用不好容易打扰用户。智能弹窗的关键在于，它能根据用户行为（比如停留时间、浏览页面）来决定是否弹出以及弹出什么内容。我建议你先设置一两个简单的触发规则测试一下，观察效果后再调整。
为什么选Elementor
在挑选建站工具时，我会从几个实际角度来考虑。下面和你分享一下我的看法，或许能给你一些参考。
设计自由度高：能实现我想要的效果
它提供了比较细致的设计控制，这让我能更自由地调整页面。具体来说：
- 像素级精准设计：可以微调每个元素的间距和大小，我常用这个功能来对齐页面上的各种组件。
- 全局样式控制：修改一次颜色或字体，全站相关元素会自动更新，节省了很多重复操作的时间。
- 响应式设计调整：可以分别设置电脑、平板和手机上的显示效果，确保在不同设备上都能正常浏览。
- 自定义代码/CSS支持：当遇到一些特殊的设计需求时，可以直接添加自己的代码来实现。这是我偶尔会用的方法，能解决一些比较个性化的需求。
功能集成全面：一个工具满足多种需要
我不太喜欢安装太多独立的插件，因为管理起来比较麻烦。这个工具集成了不少实用功能：
- 内置了营销工具（比如表单和弹窗），基本上开箱就能用。
- 对WooCommerce（电商功能）有不错的支持，可以直接设计产品相关的页面。
- 可以调用动态内容，比如自动显示最新的文章列表。
这样一来，你就能减少对额外插件的依赖，网站的稳定性也相对更好一些。根据我的经验，插件装得越少，后期维护起来就越简单。
未来导向：架构更现代
它的新版本（编辑器V4）采用了一种称为“原子化”的架构。简单理解，这种设计思路有这些特点：
- 以CSS为优先，这让生成的网站代码更简洁、加载速度可能更快。
- 整个设计体验更一致、更高效。
我通常会留意工具的更新方向，这关系到它能否长期稳定地使用下去。
口碑与认可：很多人在用
它拥有超过6500个五星好评，并且得到了不少资深用户和代理商的推荐。我通常会把社区评价作为一个稳定的参考——当有这么多人都给出好评时，说明它在实际使用中确实能解决不少问题。
总结一下，对我来说，它在设计灵活性、功能完整性和长期可用性这几个方面，做得比较均衡。你不妨也从自己的实际需求出发，看看它是否适合你。
下载Elementor
Elementor提供免费版本，虽然功能有限，但能让你了解Elementor的常规操作。
如果你仅需要购买Elementor Pro编辑器，那可以联系我购买，如果你要向官方购买，目前由于官方于2026年1月20日调整了价格套餐，更名为Elementor ONE，它的构成部分是：主产品页面编辑器Elementor Pro、新产品AI生成功能（譬如生成代码、文案、图像、布局），图片优化，无障碍功能修复，网站邮件发送服务等等，我们一般用到的就是主产品，新产品一方面是次要的，另一方面也有成熟的替代品。
One的价格目前分个人建站套餐和为客户建站套餐，区别在于建站数量和涵盖的内容。
- 为个人建站的套餐价格从5美元每月到14美元每月
- 5美元/月/1个网站——功能少，不推荐购买，
- 7美元/月/1个网站——只有Elementor Pro插件，没有新研发的插件及AI，
- 9美元/月/3个网站——只有Elementor Pro插件，没有新研发的插件及AI，
- 现在折扣价14美元/月/1个网站（续费按19美元/月）——有Elementor Pro插件+新研发的插件及AI。
- 为客户建站的套餐适合建站服务商：
- 17美元/月/25个网站——只有Elementor Pro插件，没有新研发的插件及AI；
- 现在折扣价37美元/月/无限网站（续费按45美元/月）——有Elementor Pro插件+新研发的插件及AI。
Elementor教程
本文将介绍Elementor网页编辑器中如何修改文本的字体、大小、颜色和样式。 许多Elementor元素都提供了编辑文本的字体、大小、颜色和样式的功能。这些设计选项位于元素的“ 样式”/style选项卡中。 视频教程 图文教程 通常，见下方图片，当你编辑一个元素时，在它的样式栏中能找到文本的排版设置，点击笔状图标，就可以打开对应文本的设计编辑器，当笔图标为蓝色时，说明当前有自定义的样式，若想恢复 […]
本教程详细介绍Elementor网页编辑器中元素或容器的Advanced高级设置功能，包括：布局、动画效果、变换效果、背景、边框、遮罩面具、响应式、属性、自定义CSS进行设置等等，合理使用下文所述的高级功能，能提升网页设计效果。 提示：某些功能只对特定元素或容器有效，下面我们开始逐一讲解。 Layout 布局 Motion effect 动作效果 Scrolling effects 滚动动效 (P […]
本篇教程将介绍Elementor网页编辑器的全局样式与设置的常用功能，譬如设置全局的字体、颜色、页面内容宽度、元素默认间距等等。 功能入口：在用Elementor编辑页面时，如下图所示，点击site setting按钮 然后你便能看到如下的配置选项了 Design System/设计系统 对全局颜色和全局字体进行设置。 Global colors/全局颜色 全局颜色可以让我们配置常用颜色，以便在制 […]
本文介绍两种隐藏Elementor页面默认标题的方法，一种是单个页面隐藏，一种是全局页面隐藏（适用于hello elementor主题）。 下图是隐藏标题前后的区别，所用的主题是Hello elementor。 如何单个隐藏页面标题 下面介绍禁用Elementor页面标题的操作步骤 如果隐藏标题不起作用，那么应该跟你用的主题有关，你需要去Elementor全局设置中修改页面标题选择器。 首先，打开 […]
在Elementor的页面设置功能中，你可以设置当前页面/文章/产品的标题、发布状态、页面布局、页面背景、自定义CSS等等，按下图所示，我们打开页面设置面板，你将能看到三个标签页：设置、样式、高级设置，接下来我们逐一讲解。 常规设置 在常规设置中，对于页面、文章，有不同的设置项，文章比页面的设置项多了：摘要、特色图像、评论开关。 样式设置 高级设置
Elementor的theme style主题样式可设置各种元素的默认样式，例如背景，标题，按钮，图像和表单字段。这些设置将覆盖主题自带的样式设置，从而使您可以使用Elementor为非Elementor构建的元素设置样式。 默认情况下，这里的样式只会应用于非Elementor元素， 例如WooCommerce结帐字段，Contact Form 7标签等等。你也可以强制将主题样式设置应用于Elem […]
本文是B2B外贸建站教程的内容之一，我将逐步介绍如何使用Elementor Pro制作woocommerce产品列表模板，下面进入正题。 视频教程 2021/4/12更新视频教程 注意：视频中用于产品搜索的插件，现在已经更名叫做：FiboSearch – Ajax Search for WooCommerce 相关教程：如何用Elementor Pro设计WooCommerce产品分类和产品标签侧 […]
本文将逐步介绍如何使用Elementor pro制作woocommerce产品详情页模板，下面进入正题。 2021/5更新详细的视频教程 下方是2021年写的简单版图文教程 导入后，系统会自动选择一个产品数据嵌入，以便我们直观看到效果，但依然有一些看不到内容的元素，譬如价格、加入购物车，那是因为我们上传产品时没有填写对应内容 对不需要的元素可以使用右键删除功能。 如果你想更换一个产品以预览效果，那 […]
使用ACF（advanced custom fields）插件可以为woocommerce的产品分类、产品增加自定义字段，譬如视频、QA等等，叠加运用Elementor Pro的模板功能，就可以制作进阶的产品列表页、产品详情页了。 给产品详情页增加自定义字段 首先，请安装ACF（advanced custom fields）插件，并启用，按照下述步骤添加字段。 依次输入字段标签，譬如QA；字段名称 […]
使用Elementor pro可以创作出多种多样的页头导航，可以不再局限于主题自带的导航了。并且Elmentor Pro的模板库里提供了几十款导航模板，一键导入就可以直接用起来了，还可安装Envota elements插件，里头还有十几款页头。 2021年4月更新视频教程 操作步骤如下： 鼠标放在在“模板”菜单 点击theme builder 点击添加新模板 选择模板类型为header 输入模板名 […]
使用Elementor pro可以创作出多种多样的页脚，可以不再局限于主题自带的页脚了。并且Elmentor Pro的模板库里提供了多款页脚模板，一键导入就可以直接用起来了，还可安装Envota elements插件，里头还有页脚模板供选用。 2021/4/6更新详细的视频教程 下方为简要的图文教程 操作步骤如下： 点击 模板>theme builder 点击添加新模板 选择模板类 […]
你是否想定制博客文章的列表页，但主题又不支持修改？有了Elementor Pro插件，我们便可以突破主题的限制。让我们一步步演示给你看~ 用Elementor Pro插件，还能省付费主题的钱，譬如我直接用Hello Elementor免费主题，直接用Elementor Pro导入模板库的文章列表模板页(下方有视频），或者自己制作文章列表页模板。 如果你购买了付费主题，又习惯用Elementor编辑 […]
你是否想摆脱主题的限制，自己制作文章详情页的模板？本文将教你使用Elementor Pro制作文章详情页的Single Post模板，我会介绍两种模板库及其使用方式，让新手可以快速制作一个还不错的模板，还会讲到模板中常见的问题哦~ 制作文章详情页模板 1.点击左侧菜单template> add new，选择模板类型为single post，点击“create template/创建模板”按钮 […]
要设置Elementor的小部件/元素块为圆角，请左键点击小部件后，在左侧找到Style/样式标签，其中，如果你能找到border radius/边框半径属性，便可以用于设置圆角。如果找不到，说明当前元素不支持圆角设置，但是你也可以在Advanced/高级标签中，找到border并设置整个元素的border radius属性进行设置。 给图片设置边框半径 如下图所示，我们可以直接在图像小部件中设置 […]
本文将介绍官方推荐的最适合Elementor的9款免费主题，随着Elementor Theme Builder（主题构建器）的发布，您可以使用任何主题并用Elementor Pro设计网站的页眉、页脚、文章详情页模板和文章列表页模板,但如果你没有Elementor Pro，你可能希望找到这样的主题：具有用于控制布局和设计功能的主题。 Hello Elementor 如果您是开发人员或营销人员，并且 […]
可以的。如果您已经购买Elementor Pro，并且想要将许可证（授权）从一个网站转移到另一个网站，有如下两种方法，请按照如下方法操作。 方法1、访问Elementor官网，登录你的账号，找到你的订阅并管理：Subscription > Manage the Subscription 然后，搜索需要删除授权的网站，点击断链按钮即可，被断开授权的网站中即便装了Elementor Pro，也会 […]
LOYSEO使用的主题不提供网站的返回顶部按钮，而免费的Elementor页面编辑器就能解决这个问题，只需要3分钟，跟着教程试一下吧。 前提说明： 本教程只适合使用Elementor搭建的WordPress网站。 本教程中的演示站是使用Elementor – Header, Footer & Blocks插件制作的页头（Header）， 如果你的网站使用Elementor Pr […]
拥有Elementor Pro让建站就跟拼图一样方便了，那如何省钱的购买Elementor Pro呢？如何避开坑呢？下面分享自己的实践经验。（还不了解Elementor的点这里） 避坑：不要用Elementor Pro破解版 破解版的主要风险在于：安全风险。 一方面，作为不懂代码的我们，不知道破解的人在安装包里植入了什么，我亲身经历过黑链植入（是的，我曾经也想着用用免费的）； 另一方面是，插件不能 […]
思路：用Elementor Pro制作产品详情页模板（single product）和询盘表单弹出层（popup），在产品详情页模板上添加一个询盘按钮，将按钮链接设置为dynamic调用popup即可。 注意，不要将Ninjaform、Wpforms、contact form7制作的表单放到Elementor的Popup中，会出错：无法显示表单或无法提交表单。 2021/5/12更新，最新的ele […]
你是否想要尝试外贸独立站，而寻找建站服务商时发现价格千差万别，担心被坑，若是自学建站又发现没有系统全面的教程？在本文，我会用自己十余年建站领域的经验帮助你，我将使用完全免费的WordPress建站系统，并结合Elementor插件，教你一步步地构建你自己的B2B询盘型外贸独立站。 本教程超过20000字，它是我花费一个月写的WordPress建站实例教程，上线6年有余，得到了众多读者的实践反馈。只 […]
本视频介绍如何用Elementor Pro付费版制作联系表单，如果你没打算购买Elementor Pro，可以考虑用Ninja Forms或者Fluent Forms插件来制作联系表单。 下方是视频教程，如果分辨率不佳，请在视频的设置中选择清晰度。
WooCommerce产品分类和产品标签侧边栏的样式是跟随主题设计的，通常没有设计样式功能。如下图所示，它是我用Hello Elementor主题+ Elementor Pro制作的产品列表模板，在左侧的侧边栏里包含了产品分类和产品标签。接下来，我们就讲如何用Elementor Pro来将样式设置为下图所示的模样。 首先，我们用视频讲解如何设计产品分类的样式 然后，针对产品分类的custom cs […]
在使用ELementor制作询盘表单/联系表单时，为了避免频繁收到垃圾询盘/邮件，我们可以给表单添加Google reCAPTCHA V3进行反垃圾验证，这样以来，当网页里包含表单时，会自动加载reCAPTCHA进行无感知验证，能大幅度减少垃圾询盘邮件，也不会给用户添加负担：譬如点击验证码或验证图片等等。 按照这篇教程添加谷歌反垃圾验证后，在表单所在页面的左下角/右下角/表单提交按钮上方，就能看到 […]
Elementor自定义代码（Custom Code）功能是Elementor Pro付费版本功能，它允许你添加代码片段，如Google Analytics代码或Facebook Pixel代码，你可以设定代码在网站里的展示位置和覆盖页面范围，还能设定的代码的加载优先级，这样你就不需要编辑你的主题文件来实现代码的插入了。 备注：如果你没有Elementor Pro，先看看你的主题是否支持插入自定义 […]
点赞
