除了基本的转换之外，还有三项设置决定了你的 Elementor 页面最终有多整洁、多好编辑：图标、图片和结构分别怎么处理。导出前把这几项设好，你得到的就是一个可以放心交付的页面，而不是一个还得花一小时清理的页面。
这三项有一个共同点：转换器只能处理源码里实际存在的东西。每一项设置说到底，都是为了给它能够干净映射的素材——以及在它映射不了时知道该怎么办。
1. 进入 Elementor 图标库的图标
如果你的 HTML 使用 Font Awesome 类名（例如 <i class="fas fa-check"></i>），把图标选项设为匹配 Elementor 图标库，每个图标就会变成一个真正可编辑的图标，可以在 Elementor 的图标选择器里替换——而不是一个锁死的 SVG。
更好的是：由图标 + 标题 + 短文本组成的卡片，会被转换成单个图标框（Icon Box）小部件。转换器会按名称匹配图标（依据图标的 class 和卡片标题，例如“Reusable”→ recycle），并带过来图标大小、间距和字体排版。如果找不到匹配项，它会把图标留空，让你自己挑选。
提示：自定义的手绘 SVG 进不了 Elementor 的图标控件，所以如果你想要图标库里的图标，请在源码中优先使用 Font Awesome 类名。
2. 图片：在 Elementor 里补上
AI 没法把真实的图片文件嵌进 HTML 文本，所以图片是最棘手的部分。最简单的做法：把图片设为空图片占位。每张图片都会变成一个空占位框，每个占位框都把它的 alt 文本保留为说明文字——这样你在 Elementor 里上传图片时，就知道哪张图该放在哪里。
- 最佳做法：先把图片上传到媒体库，然后在 HTML 里使用这些
https://URL——导入时无需任何手动步骤。 - 避免：Base64 内嵌图片和本地文件路径——转换器默认会把这些替换为空占位。
3. 结构映射：导出前先审一遍
打开结构映射标签页，可以看到精确的 Elementor 结构树，旁边就是实时预览。鼠标悬停在任意一行上，两侧对应的部分都会高亮。
- 行上的目标图标用于设置复制根节点——只导出这个区块，丢掉外层的包裹元素。
- ✕ 图标把某个部分从复制中排除（适合处理一个你不想要的零散元素）。
- 总览会显示组件数量、嵌套深度，以及匹配置信度的分布（精确 / 部分 / 保留为 HTML）。
在这里快速过一遍，就能在任何内容进入你的线上站点之前，发现那些没有干净映射的地方。
三者结合起来
这几项设置的效果是叠加的。一排卡片如果用的是 Font Awesome 图标、真实的图片 URL 和层级很浅的标记，转换后就是一个装着干净的图标框或图片框（Image Box）小部件的网格——和你亲手搭出来的一样让人满意。同样一排卡片，如果用的是内联 SVG、Base64 图片和五层包裹元素，转换后就是一棵层层嵌套的容器树，里面还都是锁死的图形。同一个工具，同一个页面，你的下午却会过得截然不同。
快速决策指南
- 要把一个区块放进已有品牌风格的网站？图标匹配图标库，颜色和字体都继承目标站。这个区块会自动采用你的品牌风格。
- 要忠实复刻一个设计？图标匹配图标库，保留原始颜色和原始字体排版。然后先在 Elementor 里注册好所有自定义字体，再评判效果。
- 图片还没上传？使用空图片占位，并且先确认源码中每张图片都有有意义的 alt 文本。
- 页面很长？设置复制根节点，一次搬一个区块。
值得养成的习惯
每一次导出前都打开结构映射看一看——而不是只在看起来不对劲时才打开。读一下组件数量、嵌套深度和置信度分布只要十五秒，而这三个数字会告诉你是现在就导出，还是回去先修源码。修正输入再重新转换，始终比在 Elementor 里修补输出更快；正是这个习惯，决定了你的工作流是顺畅还是令人抓狂。