转换的质量主要取决于你提供给它的 HTML。在将任何内容粘贴到转换器之前，这份清单值得先过一遍。
1. 使用语义化标签
标题使用 <h1>–<h6>，正文使用 <p>，号召性按钮使用 <button> 或 <a class="button">，列表使用 <ul>。原生标签会映射到原生小部件。用带样式的 <div> 伪造的标题虽然也能被检测到，但真正的标签永远不会产生歧义。
2. 保持 DOM 层级浅
每个区块只使用一个包装容器。每多一层嵌套，在编辑器中就会多一个需要点击进入的容器。没有样式的纯装饰性包装会被自动折叠，但带有内边距或背景的包装会被保留，因为移除它们会改变布局。
3. 让 CSS 自包含
内联样式或单个 <style> 块转换效果最好，因为转换器读取的是浏览器实际计算出的样式。外部框架样式表如果没有加载，页面就会以无样式的状态渲染——而被转换的正是这个无样式的版本。
4. 先处理好图片
理想情况：上传到媒体库并使用真实的 https:// URL。否则请把“图片”选项切换为空图片占位，之后再补上图片——每个占位框都会保留其 alt 作为说明文字。Base64 图片和本地文件路径会被有意替换为占位图，因为它们无法可靠地导入 WordPress。
5. 优先使用 Font Awesome 类而不是内联 SVG
只有基于类的图标才能作为可编辑图标进入 Elementor 的图标库。内联 SVG 无法进入图标控件，并且会丢失原本存在于页面 CSS 中的任何尺寸和描边颜色。
6. 使用 gap，而不是逐个设置子元素外边距
在 flex 或 grid 父元素上设置的 gap 会映射到 Elementor 的单个间距控件。对每个子元素分别设置的外边距会逐个小部件地带过来，之后调整起来要繁琐得多。
7. 使用 max-width 加自动外边距实现居中
max-width 加 margin:0 auto 的模式会被识别并转换为盒式（Boxed）容器，它在所有屏幕尺寸下都能原生居中。
8. 去掉你不想保留的内容
脚本、跟踪标签、Cookie 横幅和第三方嵌入内容会被移除或出于安全考虑而失效。表单会丢失其提交动作——Elementor 表单需要重新连接到站点上的真实提交目标。导航菜单必须指向一个真实的 WordPress 菜单。
9. 逐区块进行转换
对于大型页面，请使用可视化选择器，或在结构映射中设置复制根节点，一次只导入一个区块。较小的单元更容易验证，也能避免意外导入网站页眉和页脚。
10. 在导出前检查结构映射
检查组件数量、最大嵌套层级和置信度分布。绿色行表示已直接转换；红色行则保留为 HTML，值得再检查一遍。通常修复源文件并重新转换比在 Elementor 内修复结果更快。
11. 先在各个断点宽度下查看源页面
这是本清单中价值最高、也最常被跳过的一项。布局会在每个断点宽度下重新测量，浏览器计算出的结果就是最终存储的内容——没有额外的解释层来整理这些内容。
因此，在转换之前，请在浏览器中把源页面的宽度分别调到大约 820px 和 390px。一个在 390px 下已经损坏的布局会被忠实地转换成损坏的移动端布局，你很容易花上一个小时责怪转换过程，而问题其实一直存在于源文件中。花两分钟调整一下窗口宽度，就能知道你要转换的东西本身是否正常。
12. 检查那些悄悄转换不过来的细节
有四样东西在源文件中看起来没问题，但转换后却会直接消失。提前检查它们，能把每个问题从意外变成预期中的任务：
- 伪元素装饰。 任何用
::before或::after绘制的内容——引号、强调条、渐变叠加、下划线装饰——都不是 DOM 节点，无法变成小部件。如果某个设计细节消失了，这是首先要怀疑的对象。 - 不是 inline-block 链接的方角按钮。 真正的
<button>元素，以及 inline-block 或带有btn/button类的链接，始终会转换。其他所有情况——flex 样式的锚点、可点击的 div——都必须通过一项几何测试，其中要求圆角半径至少为 3px，因此尖角的元素会保留为带样式文本。在链接上添加一个btn类可以一次性修复所有此类问题。 - 你没有的字体。 字体族名称会迁移，但字体文件不会。在转换前将字体安装到你的 WordPress 站点上，否则你看到的将是回退字体下的效果，还会去追查那些其实并不存在的差异。
- 悬停和焦点状态。 计算样式只能读取静止状态。每种悬停颜色都是导入后的任务，因此值得在开始前记下页面上有多少交互元素。
好的源文件是什么样的
以上所有内容可以浓缩成一段话。转换效果最好的 HTML 是语义化、层级浅且自包含的：使用真正的标题和段落标签，每个区块只有一个包装容器，使用 flex 或 grid 以及 gap 完成布局，图标使用 Font Awesome 类，图片使用真实托管的 URL，所有 CSS 放在单个样式块中，并且没有脚本。
这也并非巧合——写得好的 HTML 本来就是这个样子。如果源码是你自己生成的，而不是从别处接手的，只需在提示词里加一句话提出这些要求，就能省掉这份清单中的大部分检查。
导入之后
重新链接按钮，重新连接表单和菜单，逐一检查三种设备视图，并重新上传任何占位图片。然后它就是一个普通的 Elementor 页面——完全可编辑，你和内容之间不再隔着任何 HTML 小部件。