---
title: Editar contenido, páginas y medios
description: Navega a una página de la tienda, actualiza el contenido o imágenes visibles y guarda el resultado.
---

**Ruta de entrada:** Espacio de trabajo → selecciona una tienda → **Escaparate** → abre la página de la tienda de destino → **Modo Diseño** → selecciona un elemento

![Vista previa y controles de la tienda Runner](https://ixft9x6szo.ufs.sh/f/Cc8uxBgAYTzgzyPnD9dvQbMAZ2hlg7w6ye8S5vnLIHkGPOqr)

## Qué cubre esta guía

Abre la página exacta de la tienda que deseas cambiar, edita un elemento de texto, diseño o medios compatible, y verifica el resultado guardado antes de publicar.

## Por qué y cuándo usar este flujo de trabajo

Usa este flujo de trabajo para pulir a nivel de página: corrige el texto, cambia la tipografía, ajusta el espaciado, reemplaza una foto, genera una imagen alternativa o elimina un elemento innecesario. Mantiene clara la página de destino y el elemento seleccionado.

Para cambios en el comportamiento de navegación, datos de productos, checkout o varias páginas a la vez, envía una solicitud regular a Runner en lugar de depender solo de los controles visuales.

## Disponibilidad y requisitos previos

- [Usa modo de diseño](./design-mode) explica cómo abrir el editor, el requisito de diseño de escritorio y cuándo el control no está disponible.
- Algunos elementos generados o dinámicos no se pueden editar en línea. Runner muestra menos controles para esos elementos.
- La generación de imágenes con IA puede usar créditos. Runner muestra el aviso aplicable en el panel de imágenes antes de ejecutarla.

## Abre la página y el editor

1. Abre tu proyecto y selecciona **Escaparate**.
2. En la vista previa normal, selecciona enlaces de la tienda para llegar a la página que deseas.
3. Si conoces la ruta, selecciona el campo de ruta, ingresa una ruta del mismo sitio como `/about` y presiona **Enter**.
4. Confirma que la página correcta es visible.
5. Selecciona **Modo Diseño** y luego selecciona el elemento de destino.

## Controles de medios

[Usa modo de diseño](./design-mode) documenta los controles compartidos **Pregúntale a Runner AI**, **Espaciado**, **Texto**, **Eliminar elemento**, **Deshacer**, **Rehacer** y **Guardar**. Los controles siguientes aparecen solo cuando el elemento seleccionado admite medios.

| Control | Qué cambia | Qué sucede cuando lo usas |
| --- | --- | --- |
| **Imagen → Subir** | Una imagen seleccionada o una imagen de fondo compatible. | Selecciona **Subir imagen**, elige un archivo de imagen y Runner reemplaza el medio seleccionado después de que la carga sea exitosa. El límite actual mostrado por el producto es 5 MB por imagen. |
| **Imagen → Generado por IA** | Una imagen de reemplazo generada. | Ingresa un prompt y selecciona **Ejecutar**. Después del primer resultado, **Ejecutar de nuevo** solicita otro resultado e **Historial** abre los resultados de esta sesión de edición. |
| **Historial** | Imágenes generadas de la sesión actual de edición de imágenes. | Selecciona un elemento para inspeccionarlo. **Restaurar esta versión** aplica esa imagen y su prompt; el icono de descarga descarga un resultado individual. |

## Edita una página de forma segura

1. Registra la ruta de página actual para poder volver a ella.
2. Selecciona el elemento y verifica qué controles aparecen. Los controles varían según el elemento.
3. Realiza un cambio a la vez, luego usa **Deshacer**, **Rehacer** o **Historial** de imagen para comparar el resultado antes de seleccionar **Guardar**.
4. Espera a que se complete la acción de guardado o solicitud de Runner elegida.
5. Cierra el Modo Diseño, reabre la página y revísala en diseños **PC**, **Tablet** y **Teléfono**.
6. Repite para la siguiente página solo después de que la primera página sea correcta.

## Estados, límites y solución de problemas

| Qué ves | Significado | Qué hacer |
| --- | --- | --- |
| Un elemento seleccionado tiene solo algunos controles | Runner expone los controles compatibles con ese elemento. | Usa el control disponible o pide a Runner en el chat un cambio más amplio. |
| Carga rechazada | El archivo falta, no es una imagen, excede el límite mostrado o la carga falló. | Elige otra imagen e intenta de nuevo. |
| **Generando…** | Runner está creando la imagen solicitada. | Mantén el panel abierto hasta que termine o reporte un fallo. |
| **Historial** está ausente | No existe ninguna imagen generada por IA en esta sesión de edición. | Genera la primera imagen o carga la tuya propia en su lugar. |
| La ruta no se abre | La ruta es inválida, externa o no forma parte de la vista previa. | Vuelve a `/`, usa un enlace visible de la tienda o pide a Runner que cree o repare la página. |
| La página guardada difiere en móvil | La edición afectó un diseño responsivo. | Reabre el Modo Diseño o pide a Runner una corrección específica del dispositivo antes de publicar. |

## Guías relacionadas

- [Usa modo de diseño](./design-mode)
- [Vista previa de tu tienda](./preview-your-store)
- [Publicar y republicar](./publish-and-republish)