---
title: Use Modo de Design
description: Selecione elementos da loja e use os controles de edição visual do Runner com segurança.
---

**Caminho de entrada:** Espaço de Trabalho → selecione uma loja → **Loja** → **Modo de Design**

![Prévia e controles da loja Runner](https://ixft9x6szo.ufs.sh/f/Cc8uxBgAYTzgzyPnD9dvQbMAZ2hlg7w6ye8S5vnLIHkGPOqr)

## O que este guia cobre

Abra Modo de Design na versão mais recente da loja, selecione um elemento visível, faça uma alteração controlada e salve-a como parte do projeto atual.

## Por que e quando usar Modo de Design

Use Modo de Design para alterações visuais focadas que são mais fáceis de apontar do que descrever do zero: reescreva um título, substitua uma imagem, ajuste espaçamento, altere tipografia ou remova um elemento visível.

Use o chat do Runner para trabalho mais amplo que abrange várias páginas, altera o comportamento da loja ou requer nova funcionalidade.

## Disponibilidade e pré-requisitos

Modo de Design é condicional. Está disponível quando:

- você está usando um layout de desktop;
- a versão mais recente da loja está pronta e selecionada;
- você não está visualizando uma versão mais antiga;
- o Runner não está processando outra solicitação no momento; e
- a funcionalidade Modo de Design está ativada para o espaço de trabalho.

Se a visualização ainda está sendo preparada, uma versão histórica está selecionada ou o Runner está trabalhando, o botão pode estar oculto ou desativado.

## Abra Modo de Design

1. Abra seu projeto.
2. Selecione **Loja**.
3. Certifique-se de que o rótulo de versão diz **Atual** e a visualização está pronta.
4. Selecione **Modo de Design** na barra de ferramentas da loja.
5. Se uma barra de edição inferior aparecer com outro controle **Modo de Design**, selecione-o para ativar a seleção de elemento.
6. Mova sobre a loja e selecione o elemento que deseja alterar.

## Controles do Modo de Design

| Controle | Por que você o usa | O que acontece quando você o seleciona |
| --- | --- | --- |
| **Modo de Design** na barra de ferramentas da loja | Entre na visualização de edição dedicada. | O Runner abre a loja atual no painel de design. |
| **Modo de Design** na barra inferior | Ative ou desative a inspeção de elemento. | Quando ativado, elementos selecionáveis são contornados e selecionar um abre sua barra de edição. Desativá-lo limpa a sessão de edição atual. |
| Campo **Pergunte ao Runner AI** e seta de envio | Descreva uma alteração para o elemento selecionado. | O Runner recebe a instrução com o elemento selecionado. Quando o Runner inicia, limpa a seleção e redefine edições diretas não salvas e seu histórico de desfazer/refazer, então salve quaisquer edições diretas pendentes antes de enviar. |
| **Espaçamento** | Altere o espaço dentro ou ao redor do elemento. | Um painel abre para margem e preenchimento horizontal e vertical. |
| **Imagem** | Substitua uma imagem selecionada ou imagem de fundo. | Um painel abre com opções **Carregar** e **Gerado por IA** quando esse elemento suporta edição de mídia. |
| **Texto** | Altere o estilo de tipo. | Um painel abre para tamanho de fonte, peso, família, cor, opacidade e alinhamento quando suportado. |
| **Deletar Elemento** | Remova o elemento selecionado da edição atual. | O elemento desaparece imediatamente no editor. Use **Desfazer** se isso foi acidental e revise antes de salvar. |
| **Desfazer** | Reverta a edição visual não salva mais recente. | O Runner volta pelo histórico de edição do Modo de Design atual. |
| **Refazer** | Reaplique uma edição que você acabou de desfazer. | O Runner avança pelo histórico de edição do Modo de Design atual. |
| **Salvar** | Mantenha as edições visuais atuais. | O Runner escreve as alterações pendentes, registra um novo instantâneo de versão quando possível, limpa o histórico de desfazer/refazer desta sessão e recarrega a visualização. O botão está desativado quando não há nada para salvar. |
| **Fechar** | Saia do painel de design dedicado. | O Runner retorna à visualização normal da loja e limpa edições não salvas e histórico de comando. Salve primeiro se quiser manter as alterações. |

## Faça uma alteração visual segura

1. Navegue até a página de destino em Visualização normal antes de abrir Modo de Design.
2. Entre em Modo de Design e selecione um elemento.
3. Escolha um caminho para esta alteração:
   - Para uma edição direta, use **Espaçamento**, **Imagem**, **Texto** ou **Deletar Elemento**, depois revise com **Desfazer** ou **Refazer** e selecione **Salvar**.
   - Para uma solicitação de IA, salve quaisquer edições diretas pendentes primeiro, reselecione o elemento se necessário, digite a instrução em **Pergunte ao Runner AI** e envie. Quando o Runner inicia, a seleção e o histórico de edição direta não salvo são limpos.
4. Aguarde a conclusão da economia ou solicitação do Runner escolhida, depois revise a página em Visualização normal.
5. Verifique a página novamente em layouts **PC**, **Tablet** e **Telefone**.
6. Publique apenas após a visualização salva passar em sua revisão.

## Estados, limites e solução de problemas

| O que você vê | Significado | O que fazer |
| --- | --- | --- |
| **Iniciando modo de design…** | O Runner está preparando a visualização editável. | Mantenha a versão mais recente selecionada. |
| **Modo de design não iniciou** | A visualização editável não ficou pronta. | Selecione **Tentar Novamente**. Se repetir, retorne à Visualização normal e atualize. |
| **Iframe ainda está carregando** | A inspeção de elemento não está pronta. | Aguarde a conclusão do carregamento da loja. |
| **Editor visual desativado enquanto IA está processando** | O Runner está tratando outra solicitação. | Aguarde a conclusão da solicitação, depois selecione o elemento novamente. |
| O Runner inicia após uma solicitação **Pergunte ao Runner AI** | O editor visual redefine para a nova tarefa. | Quaisquer edições diretas não salvas e seu histórico de desfazer/refazer são descartados. Salve edições diretas antes de enviar a solicitação. |
| **Edição de IA não disponível para conteúdo dinâmico** | O conteúdo selecionado não pode ser alterado através desse controle. | Descreva a página e o resultado desejado no chat regular do Runner. |
| **Nada para desfazer / refazer / salvar** | A sessão atual do Modo de Design não tem ação correspondente. | Selecione um elemento editável e faça uma alteração primeiro. |
| **Alterações salvas em arquivos de origem** | O Runner concluiu o salvamento do Modo de Design. | Aguarde a recarga da visualização, depois revise a página alterada novamente. |
| A edição está salva mas não ativa | Salvar alterações atualiza o projeto, não a loja publicada. | Revise a versão atual, depois selecione **Publicar Alterações**. |

## Guias relacionadas

- [Edite conteúdo, páginas e mídia](./edit-content-pages-and-media)
- [Visualize sua loja](./preview-your-store)
- [Use histórico de versão](./version-history)