注意：本操作和复制编辑代码有关，若在操作时不小心删除多了少了，会影响该部分所有元素的显示，所以务必在操作前进行备份

注意：本操作和复制编辑代码有关，若在操作时不小心删除多了少了，会影响该部分所有元素的显示，所以务必在操作前进行备份

注意：本操作和复制编辑代码有关，若在操作时不小心删除多了少了，会影响该部分所有元素的显示，所以务必在操作前进行备份

点击备份按钮

进行创建备份

输入备份名后，右下角橙色按钮创建

以下为操作步骤：

 增加组件内的图片需要组件内的模块为可编辑的，具体的参考标准为以下：

在确定一个布局符合条件后就可以开始试着进行添加操作，我们首先需要选中中间自定义内容设置内，再翻到该部分的底部打开该部分的代码表，操作步骤如下：

在这个页面内就可以进行不同模块的复制了，可以发现有类似的框架结构：

在我们看不清楚结构时，可以将所有代码复制询问AI，帮助我们知道需要复制的模块，如图：

以下是AI的回答内容：

{

好的 ✅ 我帮你分析一下。

你给的代码中，其实就是由多个 **`.item` 模块**组成的，每个模块都包含两部分：

* **左边的文字部分 (`.text`)** → 图标、标题、描述文字

* **右边的图片部分 (`.img`)** → 链接和展示图片

每个模块的结构完全相同，只是图片、标题、描述文字不同。

### 一个模块的模版代码（你可以复制复用）

```html

<div class="item">

  <div class="text">

    <span>

      <img src="替换为你的图标URL" alt="">

    </span>

    <h3>这里是标题</h3>

    <p>这里是描述文字</p>

  </div>

  <div class="img">

    <a href="#" title="">

      <img src="替换为你的展示图URL" alt="">

    </a>

  </div>

</div>

```

### 你需要做的修改

1. **替换图标地址** → `<span><img src="..." alt=""></span>`

2. **修改标题** → `<h3>这里是标题</h3>`

3. **修改描述文字** → `<p>这里是描述文字</p>`

4. **替换展示图片地址** → `<div class="img"><a href="#"><img src="..." alt=""></a></div>`

### 添加位置

你要把新模块代码，放在现有代码里的 **`<div class="item">...</div>` 同级位置**，也就是说：

* 想要它显示在第二个模块之后 → 把模版复制粘贴在第二个 `<div class="item">...</div>` 后面。

* 想要它显示在最后 → 粘贴在最后一个 `<div class="item">...</div>` 后面即可。

要不要我帮你直接在你的代码里 **插入一个新的第5个模块的示例**，让你能清楚看到插入的位置？

}

在上面的内容中就可以得到我们需要复制的内容，现在我们尝试将他提供的模版进行复制，如下：

复制后先不进行修改，而是先应用，如图：

现在就可以进行对应的编辑图片和文字了，如图：

除了使用AI进行帮助，同时也可以通过自己分析一个模块的代码段，不过容易在复制的时候出现没有复制完整代码等问题导致整体错乱，所以需要根据实际的代码量，如果直观明了就比较方便自行进行复制，否则需要借助AI，不过不论是哪种方式，都建议优先进行备份或发送错误时直接刷新页面不保存，回到修改前

复制后的组件可能会因为原来的样式显示，出现一些排版上的错误，因为原样式是按照原来的组件个数设置，新加组件后数量变化可能和原样式存在差异