HTML to Elementor
返回教程

复制粘贴还是 JSON 导入:把 HTML 带进 Elementor 的两种方式

转换器提供两种导出方式。它们生成的组件完全相同——区别全在于工作流程、可携带性,以及你之后打算怎么使用这份结果。

一个转换后的元素树通向两条导出路径:将 Elementor 粘贴数据复制到剪贴板,或下载可移植的 JSON 模板文件。
两种方式生成的组件完全相同。对于已经打开的页面,使用剪贴板最快;JSON 文件则可重复使用、便于分享,并适合纳入版本控制。

方式 A——粘贴 Elementor 数据

点击复制 Elementor 数据,在 Elementor 中打开目标页面,在画布的空白处右键,选择“从其他站点粘贴”。组件会直接落到你布局中右键点击的位置。

在幕后,这一步会把一段 JSON 数据放到你的剪贴板上,格式与 Elementor 自带的复制粘贴功能所用的格式相同。这就是为什么你需要的是“从其他站点”这个版本:普通的粘贴只接受在同一个站点内复制的内容,而这个选项接受来自别处的数据。

  • 最适合:快速地就地插入——把一个转换好的区块加到你正在编辑的页面里。
  • 需要:在目标站点上打开 Elementor 编辑器,并且浏览器允许访问剪贴板。
  • 注意:剪贴板权限。有些浏览器和一些隐私扩展会阻止网页以程序方式写入剪贴板;如果复制悄无声息地失败了,请改走 JSON 这条路。

方式 B——下载 JSON 模板

点击下载 .json 模板,然后在 Elementor 中打开模板 → 已保存的模板,选择导入模板。导入后得到的是一个模板,在任何导入了这个文件的站点上,都可以把它插入任意页面。

  • 最适合:整页迁移、在多个站点间复用、把工作交给同事,或在你自己的文件存储里保留各个版本。
  • 需要:能访问目标站点的模板库。
  • 额外好处:文件是纯 JSON。你可以把它纳入版本管理、对比两次导出的差异,或把某个日期的设计原样存档。

该用哪一种?

一条简单的规则:一次性插入就粘贴,凡是要用不止一次的就下载。

只是要拿一张卡片、一个首屏区块或一行价格方案,放进你此刻正在搭建的页面?粘贴——点两下就完事。要迁移一个完整的落地页,或者开始积累一个以后的项目都能取用的可复用区块库?下载 JSON,给文件起个像样的名字,放到你以后找得到的地方。

如果你要和客户或团队成员协作,还有第三个考虑:JSON 文件是可以发给别人的,剪贴板里的数据却不行。

先划定导出范围

无论走哪条路,导出前都要先设定范围。在结构映射中,点击行上的目标图标,就会把这一行设为复制根节点,只导出这棵子树——这样就不会在拿到你真正想要的区块的同时,把页面外层的包裹元素、页眉和页脚也一起拖进来。叉号图标可以排除单独的行。

这一步对粘贴方式更重要,因为粘贴的数据会落在你右键点击的位置,选取范围过大的话,事后拆解起来很烦人。

粘贴不起作用时

“粘贴了却什么都没发生”的原因不多,大致按可能性从高到低排列:

  • 选错了菜单项。普通的粘贴只接受在同一个站点内复制的内容。转换出来的数据需要用从其他站点粘贴——在同一个右键菜单里,往下一项就是。这个原因出现的次数,比其他所有原因加起来还多。
  • 写入剪贴板被阻止了。有些浏览器和隐私扩展会拒绝网页以程序方式访问剪贴板。出现这种情况时,转换器会明确告诉你,而不是悄无声息地失败——而且下载 JSON 的方式完全不需要剪贴板,所以它是可靠的备选方案。
  • 中途有别的东西覆盖了剪贴板。在点击“复制”和粘贴之间,如果你复制了任何别的东西——一个网址、一张截图——数据就会被替换掉。重新复制,然后马上粘贴。
  • 剪贴板里是源代码,而不是页面。从 Lovable、v0 或 Bolt 这类 AI 应用构建器过来的人常在这里栽跟头:这些工具产出的是 React 和 JSX 项目,而 JSX 组件源码并不是 HTML——把它粘贴到这里,转换不出任何有用的东西。转换器读取的是渲染后的页面。在浏览器里打开该工具的预览,从那里拿到页面的 HTML,它就能像其他任何页面一样转换。

导入之后

两种方式都需要同样一小段收尾工作:

  • 重新给按钮加链接。如果你导出的是一个内层区块,外面包着的链接可能被留在了外面,所以按钮进来时可能没有链接。
  • 给按钮和链接设置悬停状态——这些无法从静态页面中读取,也是一次导入没有收尾完成最明显的迹象。
  • 把导航菜单和表单小部件接到真实的 WordPress 数据源。菜单需要选用你站点上的某个菜单;表单需要在你的站点上配置提交后的动作。这两者都无法带过来。
  • 补上占位图片,借助每个占位框上的说明文字,就知道哪张图该放在哪里。
  • 在认定页面完成之前,检查三种设备视图。

关于 Elementor 版本的说明

粘贴和导入的内容,是由目标站点上的 Elementor 版本来解析的。如果你从一个站点导出,再导入到另一个运行旧版本的站点,一些较新的容器或网格设置可能无法被识别。让目标站点上的 Elementor 保持最新,可以避免一类令人困惑的“我导出的时候明明是好的”问题。

作者:Leo

九年 WordPress 与 Elementor 经验,迁移过 189 个站点。这个转换器里的每条规则都来自真实项目。 关于这个工具