50. 如果你曾搜索如何在不编写代码的情况下设计 WordPress 网站，最常找到的答案会有一个专属名称。但是，Elementor 到底是什么，为什么它安装在超过一千万个网站上？它是一个 WordPress 的可视化构建器（页面构建器）：一个插件，它用一个画布取代了标准编辑器，你可以在上面拖放元素（标题、图像、按钮、表单），并实时看到精确的结果，就像你的访问者看到的那样。它的成功可以用一个难以匹敌的组合来解释：一个功能强大的免费版本，平缓的学习曲线，以及一个庞大的模板和附加组件生态系统。在本指南中，我们将了解它的编辑器如何工作，Elementor 免费版和专业版之间的实际区别，如何一步步设计你的第一个页面，以及它的缺点（它确实有，从性能开始），以便你能够明智地决定它是否适合你的项目。
49. Elementor 是什么以及它如何融入 WordPress
48. WordPress 自带块编辑器（古腾堡），它允许通过堆叠块来布局内容。Elementor 更进一步：它是一个完整的页面编辑器，运行在你的主题之上，让你对几乎所有内容进行视觉控制：边距、字体、颜色、背景、动画和响应式设计，无需触碰一行 CSS 代码。
Técnicamente es un plugin más: se instala desde el repositorio oficial (Plugins → Añadir nuevo → “Elementor”), y a partir de ahí cualquier página o entrada muestra el botón “Editar con Elementor”. Al pulsarlo se abre su editor propio: la página a la derecha, y un panel de widgets y ajustes a la izquierda.
46. Elementor 中所有设计的结构都是一个三层级的层次结构，从第一天起就应该理解：
- 45. 部分（或容器）44. ：将页面分隔开的水平条带。自2023年起，Elementor 使用基于 Flexbox 的容器，比经典部分更灵活、更轻量。
- 列43. ：每个部分的内部划分，用于以网格形式组织内容。
- 42. 小部件41. ：访问者最终看到的元素：标题、文本、图像、按钮、视频、地图、表单……
40. 每个层级都有三个设置选项卡：“内容”（显示什么）、“样式”（颜色、排版、边框）和“高级”（边距、动画、按设备可见性）。当你掌握了这个模式，你就掌握了 Elementor 90% 的用法。
39. Elementor 免费版 vs Elementor 专业版：各包含什么
38. 这个是不可避免的问题。免费版不是演示版：它包含完整的编辑器、40多个小部件和响应式工具。专业版（一个网站每年约59美元起）解锁了使 Elementor 成为专业工具的功能：
| 99. 功能 | 37. 免费版 | 36. 专业版 |
|---|---|---|
| 35. 完整可视化编辑器 | 34. 是 | 34. 是 |
| 33. 基本小部件（标题、图像、按钮、视频…） | 32. 是（40+） | 31. 是（90+） |
| 30. 预设模板 | 29. 有限 | 28. 完整库 |
| 27. 主题构建器（页眉、页脚、博客模板） | 26. 否 | 34. 是 |
| 25. 原生表单 | 26. 否 | 34. 是 |
| 24. WooCommerce 构建器（产品卡片、商店） | 26. 否 | 34. 是 |
| 23. 弹窗构建器 | 26. 否 | 34. 是 |
| 22. 动态内容和自定义字段 | 26. 否 | 34. 是 |
21. 实际界限很清楚：免费版可以设计出色的独立页面（着陆页、服务页面），但页眉、页脚和博客模板仍然依赖于你的主题。而专业版，Elementor 通过主题构建器（Theme Builder）控制整个网站：你可以可视化地设计页眉、页脚、文章模板，甚至 WooCommerce 的产品卡片。
20. 需要专业版吗？如果这是你的第一个网站或一个临时的着陆页，请从免费版开始；你随时可以升级。如果你以制作网站为生，或者想要完全控制设计而不依赖主题，那么专业版在第一个项目中就能收回成本。中间替代方案：保留免费版，并通过一个好的主题来弥补不足（例如，表单可以通过免费的表单插件解决）。
19. 如何使用 Elementor：你的第一个页面分步指南
18. 让我们开始实操。Elementor 安装并激活后：
- 17. 创建页面: Páginas → Añadir nueva, ponle título y pulsa “Editar con Elementor”.
- 15. 选择页面模板: en Ajustes (icono de engranaje, abajo a la izquierda), selecciona “Elementor Canvas” si quieres un lienzo en blanco sin cabecera ni pie (ideal para landings), o “Ancho completo” para conservar el header y footer de tu tema.
- 13. 添加第一个容器: pulsa el “+” del lienzo y elige la estructura de columnas (una sola, dos al 50%, tres…). Este contenedor será tu sección de portada (hero).
- 11. 拖动小部件10. ：从左侧面板拖动一个“标题”小部件到容器中，并输入你的主要信息。下方是一个带有副标题的“文本”小部件和一个带有号召性用语的“按钮”小部件。
- 9. 添加样式8. ：选择容器，然后在“样式”选项卡中添加背景（颜色、渐变或图像）。选择每个小部件，并在其各自的“样式”选项卡中调整字体和颜色。更改会即时显示。
- 7. 复制以创建后续部分6. ：右键点击容器 → 复制，然后修改内容。复制和编辑比从头创建快得多，同时还能保持视觉一致性。
- 5. 检查移动版本4. ：在底部工具栏中，激活响应式模式，并在平板电脑和手机上检查页面。你可以调整字体大小、边距，甚至按设备隐藏元素（“高级”选项卡 → “响应式”）。不要跳过此步骤：超过一半的访问量将来自移动设备。
- 3. 发布: botón verde “Publicar”. Para seguir editando después, entra en la página y pulsa de nuevo “Editar con Elementor”.
1. 模板快捷方式
如果空白画布让你无从下手，请使用模板库：画布上的文件夹图标会打开数十个
五个能带来显著差异的良好实践
- 设计前定义全局设置：在编辑器菜单 (☰) → 网站设置中，配置全局颜色和全局字体。如果你之后更改了品牌颜色，整个网站会一次性更新。跳过这一步将导致你不得不逐页编辑。
- 更少更简洁的区块：专业的网站不会有十五种动画。充足的留白、最多两种字体和简洁的配色方案总是更胜一筹。如果你需要关于Elementor搭配哪个基础主题的灵感，请查看我们的指南： 为你的WordPress网站选择完美主题 （对于Elementor，主题越轻量越好：Hello Elementor、Astra或GeneratePress）。
- 上传前优化每张图片：Elementor的设计对图片要求很高，速度的关键就在于此。使用我们的免费工具将图片调整到实际使用尺寸并转换为WebP格式，然后再上传到媒体库。 图片转WebP转换器 免费工具，在上传到媒体库之前进行处理。
- 使用flexbox容器，而不是旧版区块：如果你的安装仍然提供两者，请在Elementor → 设置 → 功能中激活它们。它们生成更少的代码并提供更多控制。
- 不要混用页面构建器：为设计页面选择Elementor或Gutenberg，但不要在同一页面上交替使用两者。对于博客文章，普通的块编辑器已经足够（而且更快）。
Elementor的缺点（是的，它们确实存在）
Elementor在性能方面并非免费，坦白说：
- 额外负担：可视化页面构建器会在每个页面加载额外的CSS和JavaScript。用Elementor制作的页面总是比纯Gutenberg页面更重。这可以通过轻量级主题、优化图片和像WP Rocket这样的优秀缓存插件来缓解。 WP Rocket，但额外开销是存在的。
- 依赖性（锁定）：如果有一天你停用Elementor，你的页面不会消失，但会失去所有设计，内容会保留一些布局残余。更换页面构建器意味着需要重新制作页面。
- 专业版年费：许可证是订阅制的；如果你停止付费，专业版小部件将停止接收更新（已创建的设计会保留）。
- 过度自由：在缺乏经验的人手中，过多的设计选项会导致网站过于花哨和不连贯。全局设置和克制是解药。
在决定之前需要考虑的替代方案：WordPress的块编辑器已经大大改进，配合现代块主题，可以以更好的性能实现简单的设计。当你需要精细的视觉控制、复杂模板或无限制地构建整个网站时，Elementor更胜一筹。要深入了解原生编辑器，请查阅WordPress官方文档： 85. es.wordpress.org 是一个很好的起点。
Elementor与速度：优化清单
由于性能是首要的批评点，这里有一个具体列表，让你的Elementor网站快速加载：
- 为Elementor设计的轻量级主题（Hello Elementor是官方主题）。
- 启用flexbox容器，并尽量减少嵌套部分。
- WebP格式图片，已调整大小并启用延迟加载（WordPress中默认启用）。
- 配置缓存插件（页面缓存 + CSS/JS压缩）。
- 字体：最多两种字体家族，如果可能，请本地托管（Elementor → 设置允许禁用外部Google字体）。
- Desactiva los widgets Pro que no uses y evita apilar addons de terceros (cada paquete de “200 widgets extra” es peso que cargan todas tus páginas).
- 使用PageSpeed Insights进行前后测量； PHP设置以加速WordPress 如果你的主机性能不足，它们也会有所帮助。
应用此列表后，使用Elementor的网站可以在核心网页指标（Core Web Vitals）中获得完美的绿色分数。如果没有，很容易导致4-6秒的加载时间，从而吓跑访客。
常见问题
Elementor是免费的吗？
是的，基础版本是免费的，没有页面或时间限制：提供完整的编辑器、40多个小部件和响应式设计。专业版每年约59美元起，增加了主题构建器、表单、弹窗、WooCommerce构建器和高级小部件。许多网站仅使用免费版本即可运行。
Elementor会让网站变慢吗？
它确实会增加网站负担，但缓慢并非不可避免：使用轻量级主题、WebP图片、flexbox容器和配置良好的缓存插件，一个使用Elementor的网站可以在两秒内加载完成，毫无问题。使用Elementor的慢速网站通常是由于主题笨重、大量附加组件和未优化的图片造成的。
我可以使用Elementor与任何WordPress主题吗？
几乎所有主题都可以，但并非所有主题表现都一样。那些旨在与Elementor共存的主题（Hello Elementor、Astra、GeneratePress、Blocksy、Kadence）是轻量级的，不会干扰设计。老旧且笨重的多用途主题可能会重复样式并拖慢速度。如果你从零开始，请选择一个轻量级主题。
如果我卸载Elementor会发生什么？
内容（文本和图片）不会丢失：它们仍然存储在WordPress中。丢失的是所有的页面布局：页面将以主题的设计显示为纯文本。因此，最好在项目开始时就决定使用哪个页面构建器，而不是在项目进行到一半时才进行尝试。
结论
你已经知道Elementor是什么了：它是一个可视化页面构建器，让任何会拖放操作的人都能进行专业的网页设计。其免费版足以从第一天起就创建吸引人的页面；专业版则将WordPress变成一个完整的专业设计工作室，提供自定义页眉、模板和弹窗。作为交换，它需要付出两个代价：一是技术上的额外负担，这可以通过良好实践（轻量主题、WebP、缓存）来控制；二是需要有意识地接受的依赖性。如果你的首要任务是无需代码的创作自由，那么它是最好的入门选择；如果你的网站很简单，并且性能至关重要，那么请优先考虑原生块编辑器。无论你选择哪种方式，方法都是一样的：首先进行全局设置，然后设计内容，并在发布前始终检查移动端效果。
