---
title: 编辑内容、页面和媒体
description: 导航到店铺页面，更新可见内容或图像，并保存结果。
---

**入口路径：** 工作区 → 选择一个店铺 → **店铺前台** → 打开目标店铺页面 → **设计模式** → 选择一个元素

![Runner 商店预览和控件](https://ixft9x6szo.ufs.sh/f/Cc8uxBgAYTzgzyPnD9dvQbMAZ2hlg7w6ye8S5vnLIHkGPOqr)

## 本指南内容

打开要更改的确切店铺页面，编辑一个支持的文本、布局或媒体元素，并在发布前验证保存的结果。

## 为什么以及何时使用此工作流

使用此工作流进行页面级别的优化：更正文案、更改排版、调整间距、替换照片、生成替代图像或删除不必要的元素。它使目标页面和选定元素保持清晰。

对于导航行为、产品数据、结账或多个页面的更改，请向 Runner 发送常规请求，而不是仅依赖视觉控件。

## 可用性和前提条件

- [使用设计模式](./design-mode) 介绍了如何打开编辑器、桌面布局要求以及该控件何时不可用。
- 某些生成或动态元素无法内联编辑。Runner 为这些元素显示较少的控件。
- AI 图像生成可能会使用积分。Runner 在运行前在图像面板中显示适用的通知。

## 打开页面和编辑器

1. 打开您的项目并选择 **店铺前台**。
2. 在普通预览中，选择店铺链接以到达您想要的页面。
3. 如果您知道路由，选择路径字段，输入同一网站路径（如 `/about`），然后按 **Enter**。
4. 确认正确的页面可见。
5. 选择 **设计模式**，然后选择目标元素。

## 媒体控件

[使用设计模式](./design-mode) 记录了共用的 **询问 Runner AI**、**间距**、**文本**、**删除元素**、**撤销**、**重做** 和 **保存** 控件。仅当选定元素支持媒体时，才会显示以下控件。

| 控件 | 它改变什么 | 使用它时会发生什么 |
| --- | --- | --- |
| **图像 → 上传** | 选定的图像或支持的背景图像。 | 选择 **上传图像**，选择图像文件，Runner 在上传成功后替换选定的媒体。产品显示的当前限制为每个图像 5 MB。 |
| **图像 → AI 生成** | 生成的替代图像。 | 输入提示并选择 **运行**。在第一个结果后，**再次运行** 请求另一个结果，**历史** 打开此编辑会话中的结果。 |
| **历史** | 当前图像编辑会话中生成的图像。 | 选择一个项目进行检查。**恢复此版本** 应用该图像及其提示；下载图标下载单个结果。 |

## 安全地编辑一个页面

1. 记录当前页面路径，以便您可以返回到它。
2. 选择元素并检查显示哪些控件。控件因元素而异。
3. 一次进行一项更改，然后使用 **撤销**、**重做** 或图像 **历史** 比较结果，再选择 **保存**。
4. 等待选择的保存或 Runner 请求完成。
5. 关闭设计模式，重新打开页面，并在 **电脑**、**平板** 和 **手机** 布局中查看它。
6. 仅在第一个页面正确后才重复下一个页面。

## 状态、限制和故障排除

| 您看到的 | 含义 | 要做什么 |
| --- | --- | --- |
| 选定的元素只有某些控件 | Runner 公开该元素支持的控件。 | 使用可用的控件或在聊天中询问 Runner 以进行更广泛的更改。 |
| 上传被拒绝 | 文件丢失、不是图像、超过显示的限制或上传失败。 | 选择另一个图像并重试。 |
| **生成中…** | Runner 正在创建请求的图像。 | 保持面板打开直到完成或报告失败。 |
| **历史** 不存在 | 此编辑会话中不存在 AI 生成的图像。 | 生成第一个图像，或改为上传您自己的图像。 |
| 路由不打开 | 路径无效、外部或不是预览的一部分。 | 返回 `/`，使用可见的店铺链接，或要求 Runner 创建或修复页面。 |
| 保存的页面在移动设备上不同 | 编辑影响了响应式布局。 | 重新打开设计模式或在发布前要求 Runner 进行特定于设备的更正。 |

## 相关指南

- [使用设计模式](./design-mode)
- [预览您的店铺](./preview-your-store)
- [发布和重新发布](./publish-and-republish)