你有一个用纯 HTML、CSS 和 JavaScript 构建的页面，希望继续在 Elementor 中编辑它——既不想从头重建，也不想让它被困在代码小部件里。这正是转换器的工作，但这三个部分（HTML、CSS、JS）各自行为不同，所以最好逐个处理。
目标：可编辑，而不是嵌入
将现有 HTML 放进 Elementor 有两种不太算数的办法。把它粘贴到 HTML 小部件中，会将其嵌入为一个你无法以可视化方式编辑的块。手工重建虽然可行，但会丢弃你已有的标记。你真正想要的是：标题变成“标题”小部件，文本变成“文本编辑器”小部件，按钮变成“按钮”小部件，布局变成真正的“容器”——这样之后你就能在 Elementor 面板中编辑每个部分。
HTML 变成原生小部件
将你的 HTML 粘贴到转换器中，并选择“原生组件”模式。每个元素都会映射到适合它的 Elementor 小部件：标题映射到“标题”，段落和列表映射到“文本编辑器”，图片映射到“图片”，样式化为按钮的链接映射到“按钮”，包裹元素映射到“容器”。将结果粘贴到 Elementor 后，中间不会有代码小部件——它就是一个普通页面。
你的 CSS 会被读取，而不是被丢弃
这是人们最担心的部分，也是效果最好的部分。转换器不会丢弃你的样式——它会读取浏览器实际计算出的样式，并将其写入匹配的小部件控件中。内边距、外边距、颜色、边框、圆角、阴影、背景、字体族、字号、字重、行高和字母间距都会转移到原生 Elementor 字段中，因此它们保持可编辑，而不是存在于样式表中。
要实现这一点，转换时 CSS 必须存在。内联样式或单个 <style> 块会被完美读取。外部样式表如果没有包含在你粘贴的文件中，就不会被读取——页面会以无样式方式渲染，而转换的就是无样式状态。所以请内联 CSS，或先将样式表粘贴到 <style> 块中。还有一个可视化选择器，当你抓取单个块时，会带上页面样式表，因此基于类的样式仍然能正确转换。
JavaScript 是坦诚的例外
JavaScript 不会转换，这是有意为之。出于安全考虑，脚本会被剥离——通过粘贴操作导入任意 JS 会很危险，而且它在编辑器中本来也无法可靠运行。因此，你的 JS 生成的任何内容（滑块、标签页、折叠面板、计数器、滚动动画）都会以静态标记的形式出现。
正确的做法不是把脚本粘贴回去，而是用匹配的 Elementor 小部件重建那个交互。Elementor 自带原生标签页、折叠面板、轮播、计数器和进度条小部件，以及用于动画的动态效果。它们比导入的脚本更易于维护，并且已经包含在你站点加载的资源包中。实际使用中，你只需几秒钟转换整个页面，然后花几分钟以原生方式重新创建少数几个交互部分。
一个真实的操作流程
- 将你的 HTML 和 CSS 合并到一个文件中——标记加上单个样式块。如果图片通过本地路径引用，要么将它们上传到媒体库并使用这些 URL，要么接受占位符。
- 粘贴到转换器中，选择“原生组件”模式，并选择图标是否匹配 Elementor 库，以及颜色和字体使用站点值还是原始值。
- 检查结构图：组件数量、嵌套深度，以及哪些行保留为 HTML。
- 复制 Elementor 数据并粘贴到你的页面中，或下载 JSON 模板并导入。
- 用匹配的原生小部件重建任何由 JS 驱动的交互，设置按钮悬停状态，并逐一查看三个设备视图。
你最终得到什么
一个普通的 Elementor 页面。你原始的 HTML 结构完整地保留为小部件和容器，你的 CSS 存在于可编辑的控件中，你唯一手工重建的是那些本来就不属于标记的交互行为。从那时起，你和你的客户可以像编辑 Elementor 中的任何其他内容一样编辑它——没有代码小部件、没有独立样式表、没有构建步骤。