一、三种导入方式有什么区别？

这三种方式不是简单地把同一份网页改成不同的文件扩展名，而是三种不同的交付结构。尤其需要注意：普通 HTML 文件压缩成 ZIP，并不会自动成为 Elementor Website Kit。

二、方法一：通过 HTML 小工具导入网页

这是最容易理解的方式。让 AI 生成一个带 CSS 和必要 JavaScript 的网页模块，然后将代码粘贴到 Elementor 的 HTML 小工具中。适合产品展示、活动专题、品牌介绍和特殊交互模块。

1. 给 AI 的提示词

请你担任资深网页设计师和前端开发工程师。为我制作一个可以直接粘贴到 WordPress Elementor「HTML」小工具里的完整响应式网页模块。\n品牌名称：【填写品牌】\n行业/主营产品：【填写行业和产品】\n参考网站或设计风格：【填写网址或描述】\n页面内容：导航、首屏 Banner、产品/服务卡片、品牌优势、行动按钮。\n设计要求：专业、高级、有图片、有合理留白，桌面和手机均适配。\n技术要求：输出一整段可复制的 HTML 片段，CSS 放在同一个代码块内的 <style> 标签中；必要的 JavaScript 放在 <script> 标签中；不要输出完整的 <!doctype html>、<html>、<head>、<body> 标签；CSS 选择器全部添加唯一前缀，避免影响 WordPress 主题；图片使用可替换的 HTTPS 地址；不要依赖构建工具。\n请只输出可直接粘贴到 Elementor HTML 小工具的代码，并注明图片地址如何替换。

2. WordPress 后台导入步骤

1. 登录 WordPress 后台，进入页面 → 新建页面。
2. 点击使用 Elementor 编辑，添加一个容器。
3. 在左侧小工具搜索框中输入 HTML，将 HTML 小工具拖入容器。
4. 将 AI 生成的 HTML 片段完整粘贴进去，包含作用域内的 CSS 和必要脚本。
5. 点击预览 / 发布，检查电脑和手机端效果。

3. HTML 代码应该长什么样？

以下是一个最小示例。实际网页可以继续增加图片卡片、按钮、动画等模块：

<div class="ai-demo-card">
  <h2>Explore Our Collection</h2>
  <p>Discover our latest products.</p>
  <a href="/contact/">Contact Us</a>
</div>
<style>
  .ai-demo-card {
    padding: 48px; background: #15382a;
    color: white; border-radius: 16px;
  }
  .ai-demo-card h2 { color: white; }
</style>

三、方法二：生成 Elementor JSON 可编辑页面模板

如果你希望导入后仍然能在 Elementor 左侧面板里修改标题、图片、按钮和布局，就应该让 AI 生成真正使用 Elementor 原生组件的数据结构，而不是把 HTML 塞进 JSON 文件。

1. 给 AI 的提示词

请你担任熟悉 Elementor 4.3.4 和 Elementor Pro 4.3.1 的 WordPress 页面开发工程师。为我制作一个可导入 Elementor「已保存的模板」的单页 JSON 模板。\n品牌名称：【填写品牌】\n页面类型：【首页/关于我们/产品页】\n主营产品：【填写产品】\n参考设计：【填写网址或设计描述】\n要求：优先使用 Elementor 原生 Container、Heading、Text Editor、Image、Button 等组件；不要把整页 HTML 放进一个 HTML 小工具；所有标题、文字、图片和按钮应能在 Elementor 左侧设置面板编辑；布局有首屏、图文双栏、三列卡片和 CTA，兼顾手机端。\n请先说明你是否有目标 Elementor 版本的真实 JSON 导出样本；如果没有，请先向我索取一个从该网站导出的 JSON 样本，不要宣称未经验证的文件可以直接导入。拿到样本后按真实结构制作 JSON 文件，并列出图片替换及兼容性检查步骤。

2. WordPress 后台导入步骤

1. 进入 WordPress 后台的模板 → 已保存的模板。
2. 选择导入模板，上传 Elementor JSON 文件。
3. 新建页面并点击使用 Elementor 编辑。
4. 打开 Elementor 模板库，在我的模板中找到刚才导入的模板并插入。
5. 点击页面中的标题、图片或按钮组件，修改内容并保存。

3. 哪些内容可以编辑？

如果模板使用原生 Container、Heading、Text Editor、Image 和 Button 组件，就可以在 Elementor 编辑器中修改布局、文字、图片和样式。但如果使用自定义 3D 插件或 HTML 小工具，相关动画仍需由代码或插件控制。

四、方法三：通过 Elementor Website Kit ZIP 导入整站

当网站需要首页、关于我们、案例、应用场景、联系我们等多个页面，并希望统一页眉、页脚和全局样式时，可以考虑 Elementor 的整站导入功能。

1. 给 AI 的提示词

请你担任 WordPress Elementor Website Kit 开发工程师。我要制作一个可导入 Elementor 的完整多页面网站。\n品牌名称：【填写品牌】\n主营业务：【填写产品/服务】\n页面：Home、About Us、Cases、Applications、Contact Us。\n参考网站：【填写网址】\nWordPress 环境：Elementor 4.3.4 + Elementor Pro 4.3.1。\n要求：统一设计风格、全站响应式；包含五个页面、Header、Footer、基础全局颜色与字体；优先使用 Elementor 原生可视化组件；图片资源单独整理并尽可能正确关联；明确导航菜单、表单、显示条件需要哪些安装后配置。\n关键要求：不要把普通 HTML 文件压缩后冒充 Website Kit。请先让我提供当前网站通过 Elementor「导出此网站」得到的原生 ZIP 样本，分析 manifest.json、site-settings.json、templates 和 content 等真实结构，再生成兼容的 Website Kit ZIP。制作完成后检查 ZIP 内部文件与 JSON 格式，并说明未经真实后台验证的限制。

2. 为什么需要先导出一个原生 ZIP 样本？

Website Kit 不是普通压缩包，它包含 Elementor 识别所需的清单、站点设置、页面数据和模板数据。不同版本的导出结构可能有所差异，因此更可靠的做法是先从目标网站的 Elementor 后台执行一次“导出此网站”，让 AI 参照实际结构制作新工具包。

3. WordPress 后台导入步骤

1. 进入Elementor → 编辑 → 工具（不同版本的菜单名称可能略有不同）。
2. 找到应用网站模板或网站模板导入功能。
3. 点击上传 .zip 文件，选择符合当前 Elementor 版本的 Website Kit。
4. 根据向导选择页面、模板及站点设置，执行导入。
5. 进入页面列表，检查各页面是否成功创建。
6. 在主题构建器（Theme Builder）中检查 Header 和 Footer，按需设置 Include → Entire Site。
7. 检查导航菜单、图片、首页设置、表单收件邮箱和移动端布局。

五、HTML、JSON、ZIP 应该怎么选？

简单选择：想快速展示效果，选 HTML；想在 Elementor 里修改单个页面，选 JSON；想部署一套完整的企业官网，选 Website Kit ZIP。

六、常见问题 FAQ

本文以 WordPress + Elementor 的常见工作流程为例，后台菜单和功能会因 Elementor 版本、主题及插件配置而有所不同。