如何从 WPBakery 改用 Elementor：逐步指南

简而言之：WPBakery 布局无法直接整洁地转换成 Elementor 小工具。可靠的迁移方式是在预发布环境重建设计和模板，保留内容与 URL 结构，并在 Elementor 版本通过功能和响应式测试后才移除 WPBakery shortcode。

重点摘要

• 备份整个网站，并在预发布环境制作替代版本。
• 先重建全站模板，再迁移单页。
• 上线前检查重定向、元数据、表格和残留 shortcode。

你还在用 WPBakery，也就是以前称为 Visual Composer 的页面构建器吗？它的后台操作可能显得笨拙，网站速度和灵活度也未必符合目前需要。如果你在考虑 Elementor 的视觉编辑体验，应先判断迁移是否适合你的网站。

为什么从 WPBakery（Visual Composer）改用 Elementor？

原文把这项更改视为网站建设和内容管理方式的策略升级，让整个流程更现代、更有效率。

WPBakery 与 Elementor 简要比较

功能	原文对 WPBakery（Visual Composer）的描述	原文对 Elementor 的描述
编辑界面	后台 shortcode 编辑器	前台实时视觉编辑器
性能	shortcode 过多时可能变慢	通常较快，输出代码较精简
Theme Builder	标准版本没有提供	Elementor Pro 内含
易用性	操作可能繁琐、不够直观	原文称直观，采用所见即所得方式
第三方扩展	有限制，取决于模板	原文称市场上的扩展选择最完整
预制模板	有限制，取决于模板	第三方提供大量预制模板

主要优点：速度、界面和功能

**改善使用体验：**即时显示更改的实时编辑、拖放操作、手机响应式控制、可复用的全局小工具，以及更灵活的文字样式。

**原文所称的性能优势：**输出较精简的 HTML/CSS、改善素材载入与缓存、通过较快的网站提升 SEO 潜力，以及支援较新的 CSS 和 JavaScript 功能。

**进阶功能：**Theme Builder 可制作自定义页首、页尾和模板；Popup Builder 可设计弹窗；动态内容可连接自定义字段和数据库；另有 WooCommerce 页面制作和用于咨询及潜在客户的表格功能。

开始前：迁移准备清单

充分准备有助于避免迁移破坏现有网站或业务流程。

1. 备份完整网站文件和数据库

没有完整备份，不要开始迁移。备份应包括所有 WordPress 文件、主题、插件和上传媒体；含所有数据表的 MySQL/MariaDB 数据库导出；.htaccess、wp-config.php 和自定义设置；与托管电邮有关的邮件数据；以及现有 SSL 安全设置资料。

在另一台服务器测试还原，验证备份完整性，在本地与云端等多个地点保存副本，记录备份日期和 WordPress 版本，并在迁移后至少保留 30 天。

2. 建立预发布环境

不要直接在正式网站迁移。预发布环境能让你完整测试，又不影响正在营运的网站。原文列出托管商或 RunCloud、GridPane、xCloud 等主机面板的一键预发布功能；WP Staging 或 Duplicator Pro 等插件；staging.yourdomain.com 子域名；以及 XAMPP 或 Local 等本地开发环境。

预发布环境应与正式网站一致，包括 PHP/MySQL 版本、相同的插件与主题、真实的测试数据，以及已配置的 SSL 证书；测试时也可使用自签证书。

3. 审查现有内容和设计

列出所有以 WPBakery 制作的页面和文章、使用的元素与小工具、自定义 CSS/JavaScript、页首/页尾/归档模板，以及表格、地图、图库、slider 等第三方整合。也要记录自定义字段和程序生成的内容。

复杂布局应截图留档，并记录品牌颜色、字体、样式、手机响应行为、动画和互动元素。为重要页面绘制用户流程。

4. 熟悉 Elementor 界面

先了解 Section 和 Column 的基础结构、小工具、全站颜色和字体、手机/平板/桌面响应式编辑，以及可复用的模板系统。迁移前，可以制作包含常用元素的测试页面、尝试响应式设置和全局小工具、浏览模板库并练习 Theme Builder。

从 Visual Composer 改用 Elementor 的完整步骤

第 1 步：安装 Elementor、Elementor Pro 和轻量主题

先建立干净的基础。可从 WordPress 仓库安装免费 Elementor；需要时购买许可证并安装 Pro。原文列出 Hello Elementor、Blocksy、GeneratePress 和 Kadence。Hello Elementor 是官方且精简的主题；Blocksy 是作者喜欢的轻量主题；原文称 GeneratePress 轻巧，Kadence 则内置 Elementor 支援。

选择主题时尽量减少主题样式，让 Elementor 控制设计。只安装确实需要的附加插件。设置符合品牌的全局颜色、字体、默认小工具、响应式断点，并从模板库导入适用模板。

第 2 步：用 Theme Builder 重建页首与页尾

先迁移全站模板，建立统一的设计基础。分析目前的 Logo、导航结构和联系资料，再通过 Theme Builder 制作新页首，加入网站 Logo、导航、搜索和联系按钮等必要元素。设置手机菜单及可收合元素，然后测试每个链接和互动功能。

原文建议使用 Site Logo 小工具、Nav Menu、文字或自定义 HTML 联系资料、Social Icons 社交媒体图标、Search Form 搜索表格，以及多语言网站的自定义语言切换器。

页尾可以用区段和栏重建，并放入联系资料、链接、社交媒体、订阅表格、含动态年份的版权文字、页尾导航，以及格式正确的地址、电话和电子邮件。

第 3 步：手动重建核心页面

先处理最重要的页面，并确认功能仍可使用。原文建议的优先顺序是：首页、关于、服务/产品、联系页面和营销落地页。

可以用 Text Editor 小工具重建文字区块；用附带灯箱功能的图库小工具放图片；以 Elementor 表格功能或 Contact Form 7 重建联系表格；用 Button 小工具制作带悬停效果和分析追踪的按钮；用 Testimonial 显示客户反馈；用 Image Box 建立带社交链接的团队介绍。

也可借机统一间距，改进字体和层级，优化图片呈现，让行动按钮更清晰，并改善手机响应式表现。

第 4 步：重建博客和自定义内容类型模板

使用 Elementor 模板系统建立内容模板。单篇文章模板可包含页首、正文、侧栏和作者简介；归档模板可包含文章网格、分页和筛选；分类页面可使用不同布局；搜索结果也可以重新设计。

如果网站有作品集、团队介绍、客户评价、服务详情或电商产品，也要纳入迁移范围。动态内容可以连接 ACF 或 Meta Box 自定义字段、特色图片、日期/作者/分类/标签等文章资料、相关文章和社交分享按钮。

第 5 步：处理并清理 WPBakery 遗留 shortcode

移除插件后，WPBakery shortcode 可能无法编辑。先用搜索替换工具、数据库查询和逐页内容审查找出 shortcode，并保存原始 shortcode 内容作参考。

可手动将 shortcode 换成 Elementor 小工具，也可谨慎使用 Better Search Replace 批量查找与替换。确保没有内容遗失，每次清理后逐页测试。常见格式包括用于布局的 vc_row 和 vc_column、文字区块 vc_column_text、图片 vc_single_image、按钮 vc_btn、图库 vc_gallery，以及主题专用的自定义 shortcode。

第 6 步：安全停用并删除 WPBakery Page Builder

确认新的 Elementor 网站正常运行后，才移除 WPBakery。检查每个页面、载入速度、互动功能、链接、内容和 SEO。删除前先做一次新备份，然后停用插件并暂时保留文件。观察网站 24 至 48 小时，确认没有问题后，再删除插件文件和数据库记录。

同时检查是否仍需要 WPBakery 专用主题或子主题、shortcode 插件、自定义 CSS、WPBakery 扩展，以及代码中对 WPBakery 元素的固定引用。

迁移后：最后检查和优化

测试响应式表现和浏览器兼容性

检查手机触控时按钮、链接和表格能否运作；移动网络下的载入速度；手机导航与用户流程；字体、间距和对比度；以及图片尺寸。原文建议用 Chrome、Safari、Firefox 和 Edge 测试。

SEO 检查：URL、元数据与网站地图

彻底审查 URL 结构，避免迁移时不必要地改变网址。确认每页的 SEO 标题和描述、H1/H2/H3 层级、图片替代文字、内链，以及网站地图是否需要重新生成和提交。

技术 SEO 检查还应涵盖相较 WPBakery 的速度、Core Web Vitals、结构化数据、canonical URL 和手机体验。原文将这些指标与 SEO 改善联系起来，但搜索结果无法保证。

清理数据库残留

确认资料不再需要并已有可恢复备份后，检查 WPBakery 自定义数据表、文章元数据、设定选项、暂存数据和其他数据库冗余。原文列出 Advanced Database Cleaner、Media Cleaner、Thumbnails reGenerate 和手动 SQL 查询等方法。使用工具或删除资料前都应先测试。

优化 Elementor 速度设置

原文建议关闭未使用的小工具、启用 Optimized DOM Output、优化 CSS 和 Google Fonts 载入，并为图片及视频启用延迟加载。其他建议包括 FlyingPress 或 LiteSpeed Cache 等缓存插件、EWWW 或 ShortPixel 图片优化、Cloudflare 或 FlyingCDN、数据库优化和插件审查。

自动转换工具有效吗？

有些插件声称可以自动化迁移，但结果不一。WPBakery 到 Elementor 转换插件效果有限；导入/导出工具可以搬移基础内容；定制迁移服务则由专业团队处理。

自动工具可能破坏复杂布局、遗失自定义 CSS 和设计、无法正确迁移表格和 slider、不兼容第三方小工具，也很少能保留正确的响应式表现。

**自动转换的优点：**简单布局可以快速完成初步转换、一次处理多页、保留基本内容结构，并减少标准元素的手动工作。

**自动转换的缺点：**布局容易损坏或不完整，之后仍需大量手动清理，可能引入性能与 SEO 问题，对自定义元素的支援也有限。

**手动迁移的优点：**完全控制设计和功能、可趁机改进设计、优化性能、正确实施响应式行为，并在过程中进行质量检查。

**手动迁移的缺点：**耗时较长、需要技术知识、前期投资较高；如果缺少测试，也可能出现人为错误。

原文建议大多数企业采用手动迁移，虽然前期工作较多，但长期成果较佳。

采用更好的页面构建体验

从 WPBakery 改用 Elementor 不只是更换插件。原文将其描述为迈向现代网页设计标准的升级，可能改善网站性能、用户体验及团队管理内容的效率。

如果网站很慢或显得过时、团队需要更好的手机编辑能力、后台操作造成困难、你本来就计划改版，或想使用新模板和小工具，迁移可能值得考虑。

如果网站结构复杂且包含大量自定义元素、内部缺少安全迁移的技术资源、停机可能重创业务、迁移要与设计升级合并，或需要快速专业交付，可以考虑寻求协助。

原文认为，用户体验、性能和现代设计功能的改善，使 Elementor 迁移对大多数网站业主都值得投资。原文也宣传 Ulement 的专业迁移服务，称可改善性能并保留内容与 SEO 排名。可承诺的成果应按实际项目范围确认。

如果网站需要重建并控制迁移风险，可通过 Ulement 的网站改版服务讨论工作范围，或联系团队。

Ulement 相关指南：WPBakery 改用 Gutenberg和同时使用 Elementor 与 WPBakery。

总结

WPBakery 内容无法整齐地转成 Elementor。应把迁移视为受控重建，让现有网站继续运行，并在移除旧构建器前逐一验证模板。交接完整，比提早几天完工更重要。

常见问题

2025 年从 WPBakery 改用 Elementor 值得吗？

原文认为对大多数网站值得，并声称 Elementor 在性能、使用体验和持续开发支援方面较佳。原文还称，迁移带来的速度、手机响应和内容管理改善，通常足以抵消迁移工作。这些属于原文主张，并非保证。

迁移网站需要多久？

时间取决于网站复杂度。简单的五页商业网站可能只需几天；包含多个模板和自定义元素的网站可能需要数周。计划中应预留测试、SEO 核验和修改时间。

网站迁移会影响 SEO 吗？

如果内容遗失、URL 更改或速度下降，迁移不当可能损害排名。保留内容和 URL 并进行充分测试，有助降低 SEO 风险，但不能保证排名改善。

可以保留目前的主题吗？

如果主题兼容 Elementor，可以继续使用。不过，原文称 Hello Elementor 或 Astra 等轻量主题可能有更好的性能和设计弹性。现有主题的 WPBakery 专属功能在迁移后可能无法运作。

原文备注：“可以保留目前的主题吗？”及其回答在英文 FAQ 中重复出现；译文仅保留一次。

如需了解相关交付范围，请参阅平台迁移服务。

关于作者

Julian Song 是 Principal Digital Architect，专注于安全且高性能的 WordPress 系统。自 2008 年以来，他协助机构和政府关联公司以可扩展的开放方案取代受限制的平台。他以神经多样性带来的系统思维，关注设计背后的架构。