HTML to Elementor
返回教程

让转换后的页面达到可上线状态的 15 分钟检查

转换后的页面在结构上是正确的,但还没有完工。每次都按相同顺序跑一遍同一份简短清单,就不用在每个项目里重新发现同样的问题。

结构图:一棵 Elementor 组件树,带有绿色、琥珀色和红色置信度圆点,提供用于设置复制根节点或排除某行的控件,旁边还有实时预览。
导出前请检查三项内容:红色行、嵌套深度和组件数量。目标图标会设置复制根节点,因此您可以一次导出一个部分。

0. 阅读安全报告(30 秒)

在粘贴任何内容之前做这一步,而不是之后。结果页面会列出转换过程中被移除或改写的所有内容——被剥离的脚本、被清理的表单 action、被丢弃的嵌入内容、从 fixed 降级为 absolute 的定位,以及变成空占位框的 Base64 图片。

在这里花三十秒,就能知道接下来这一轮要做哪些事。一个报告没有移除任何内容的页面,所需的检查要比一个报告了四个脚本和两个表单的页面短得多。它还能避免一种最浪费时间的情况:花十分钟寻找某个元素为什么看起来不对,而报告里早有一行写明了它被改写过以及原因。

1. 先看断点(4 分钟)

在动任何单个小部件之前,先依次查看桌面端、平板端和移动端。布局问题在容器层面修复成本最低,先修好它们,可以避免之后返工小部件样式。检查多列网格是否会折叠、首屏(Hero)区块高度是否合理、长标题是否换行难看。

顺序比看上去更重要。小部件样式处于布局的下游——先给一张卡片重新设置样式,然后才发现网格在平板端需要两列,你就得再设置一遍。每次都先容器、后小部件。

2. 链接和按钮(3 分钟)

点一遍每个行动号召按钮。提取出的区块有时会丢失外层包裹的锚点,所以按钮可能到手时没有链接。顺便设置悬停颜色——悬停状态无法从源码中读取,而没有样式的悬停是导入页面最明显的痕迹。

3. 图片(3 分钟)

补齐每个占位图。每个占位框上的说明文字会告诉你那里原本是什么。如果不想显示这些说明文字,放好图片后就把它们删掉,并检查全出血的卡片图片是否仍按设计意图裁切。

4. 图标(1 分钟)

扫一遍有没有空的图标控件。无法按名称匹配的图标会被刻意留空,这就是提示你从图标选择器中挑出正确的那个,而不是将就一个猜错的图标。

5. 集成(2 分钟)

把每个导航菜单(Nav Menu)小部件指向一个真实的 WordPress 菜单。配置每个表单(Form)小部件的提交后动作——原来的提交端点是有意不带过来的。

6. 标题和 SEO(1 分钟)

确认页面上恰好只有一个 H1,并且标题层级合理地逐级递减。如果你把一个独立页面导入到一个已有 H1 的页面中,要重新调整导入标题的层级。

7. 字体(1 分钟)

排版数值会被转换——字体系列、字号、字重、行高——但字体文件不会。如果源页面使用了你的网站没有的自托管或授权字体,小部件会带着正确的字体名称,而浏览器会悄悄回退到别的字体。通常看起来足够接近,匆匆一瞥很容易漏掉。

打开一个标题和一个段落,检查字体是否真正生效。如果没有,先在你的网站上安装该字体——Elementor 的自定义字体、选用一款 Google Fonts,或者通过你的主题——排版就会对齐,无需改动任何一个小部件。

8. 重新关联全局设置(2 分钟)

除非你是用“继承目标站颜色”模式转换的,否则每种颜色到手时都是写死的。页面今天看起来没问题,但品牌色第一次变更时就会成为负担,因为没有一个统一的地方可以修改。

现在就把主要颜色和文字样式重新指定到你的 Elementor 全局颜色和全局字体上,趁页面还小、你还记得哪个是哪个。在一个新页面上这只需点几下,而在一个被三个人编辑过的页面上则要花一个下午。

9. 清理残留(1 分钟)

如果你转换时保留了内联样式,页面顶部可能有一个存放原始样式表的 CSS 区块。一旦你确认各个小部件都带有自己的设置,通常就可以删掉它——删完后检查一下布局。另外,把那些因为不再需要的包裹层而留下的空容器也删掉。

当某处看起来不对、却看不出原因时

不要开始在结构树里一路点下去碰运气。回到转换器,打开结构映射,把鼠标悬停在预览中出问题的地方——Elementor 结构树中对应的行会高亮,反过来也一样。这样一步就能回答“这个元素到底变成了什么”。

大多数情况可以归为两种答案。红色的 HTML 小部件行表示没有原生对应项,所以它被保留为原始标记——通常是自定义的内联 SVG 或不常见的嵌入内容。完全没有任何高亮,则说明你看到的东西从来就不是 DOM 元素:伪元素、生成的引号、渐变叠加层。这两种情况都无法通过在 Elementor 里翻找来修复,这正是值得先检查它们的原因。

然后把它保存为模板

如果这个页面或其中任何一个区块会被复用,现在就趁它还干净时把它保存到模板库。以后的你会感谢现在的自己——而一个在全局设置那一轮之前保存的区块,你将不得不清理两次。

作者:Leo

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