转换质量在很大程度上取决于你提供的 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 中单一的 gap 控件。而加在每个子元素上的外边距则会按小部件逐个带入，以后调整起来要繁琐得多。
7. 使用 max-width 加自动外边距实现居中
max-width + margin:0 auto 这种模式会被识别，并成为一个 Boxed 容器，从而在各种屏幕尺寸下都能原生居中。
8. 去掉你不想带入的内容
脚本、跟踪标签、Cookie 横幅和第三方嵌入会被移除或出于安全目的进行无害化处理。表单会丢失其提交动作——Elementor 表单需要重新连接到站点上的真实目标。导航菜单必须指向真实的 WordPress 菜单。
9. 分区块进行转换
对于大型页面，请使用可视化选择器，或在结构图中设置复制根节点，一次导入一个区块。较小的单元更容易验证，也能避免误导入站点页眉和页脚。
10. 导出前检查结构图
检查组件数量、最大嵌套深度和置信度明细。绿色行会直接转换；红色行会保留为 HTML，这些内容值得再检查一遍。修复源文件后重新转换，通常比在 Elementor 中修复结果更快。
11. 先在各个断点下打开源页面
这是整份清单中价值最高的一项，也是最容易被跳过的一项。布局会在每个断点宽度下重新测量，浏览器在那里计算出的结果就是最终存储的内容——没有任何解释层会帮你整理。
因此，在转换前，请在浏览器中把源页面大致调整到 1024px 和 767px 的宽度。一个在 767px 下已经错乱的布局，会被忠实转换成一个错乱的移动端布局；你很容易花上一个小时去责怪转换过程，但问题其实一直在源头。两分钟的调整就能让你知道，自己转换的是否是一个正常工作的页面。
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 小部件挡在你和内容之间。