要把现有 HTML 页面转为 Elementor,常见的两种做法都不太理想:要么把它贴进一个几乎无法编辑的 HTML 小组件,要么手动逐一重建每个区块。本指南介绍第三条路——将 HTML 转换为原生、可编辑的 Elementor 组件。
1. 粘贴或拖入你的 HTML
打开转换工具,将 .html 文件拖到放置区域,或把源代码粘贴到代码框中。支持内联 CSS 和 Base64 图片。整个转换过程均在你的浏览器中完成——不会上传任何内容。
2. 选择原生组件模式
在选项面板中,选择原生组件模式。该模式会将标题映射为“标题”小组件,段落映射为“文本编辑器”,带按钮样式的链接映射为“按钮”小组件,而包裹的 <div> 则映射为“容器”——同时自动计算并保留内边距、颜色、字体和响应式行为。
3. 查看结构映射
导出前,请打开结构映射标签页。将鼠标悬停在任意行上可在预览中高亮对应元素,查看置信度标记(绿色 = 直接转换,红色 = 保留为 HTML),并使用目标图标仅复制你真正需要的区块。在这里,你可以发现所有未能清晰映射的内容。
4. 复制或下载
点击复制 Elementor 数据,然后在编辑器中右键 → “从其他站点粘贴”;或下载 JSON 模板,再通过 Elementor 模板库导入。HTML 与 Elementor 的渲染效果不会完全一致,因此请在编辑器中快速检查一次结果。
让转换效果更清晰的建议
- 使用语义化标签(
<h2>、<p>、<button>),以便转换工具能将其映射为原生组件。 - 避免使用不含样式的深层嵌套包裹
<div>——它们会增加多余的容器层级。 - 如果你的 HTML 中没有
<style>代码块,请关闭“保留内联样式”。