> ## Documentation Index > Fetch the complete documentation index at: https://www.macaly.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Edições visuais > Aprenda a alterar design, texto e layout direto na página Em vez de descrever cada pequena alteração ao agente, você pode trabalhar direto na prévia do projeto. Clique em um elemento para mudar a aparência dele, reescreva o texto no próprio lugar ou desenhe uma marca sobre a página para mostrar ao agente o que você quer dizer. A edição visual funciona por elemento. Você escolhe um elemento na página, vê as configurações disponíveis para ele e aplica a alteração ali mesmo. As alterações de design e de texto são gravadas no projeto quando você salva, sem passar por uma rodada do agente e sem usar créditos. Disponível em todos os planos As edições visuais funcionam somente no desktop. A barra de ferramentas não aparece em celulares nem em janelas de navegador estreitas. ## A barra de ferramentas A barra de ferramentas flutuando sobre a prévia, com Editar design, Editar texto e Anotação Uma barra de ferramentas flutua sobre a prévia ao vivo do projeto, com três ferramentas: * **Editar design**: clique em qualquer elemento para mudar a aparência, a imagem ou o layout dele. * **Editar texto**: o texto editável fica contornado, então você pode clicar nele e reescrevê-lo. * **Anotação**: desenhe na página para mostrar o que você quer dizer. Pressione **Esc** a qualquer momento para voltar a navegar pela prévia. Se a barra de ferramentas cobrir um elemento que você quer editar, clique em **Ocultar barra de ferramentas**. A ferramenta continua ativa e as alterações não salvas são mantidas. ### Editar design Ao ativar **Editar design**, o painel abre com **Estilos do site**, onde você define fontes, arredondamento dos cantos e cores para o site inteiro. Clique em um elemento da página para abrir as configurações dele. Textos, imagens e seções mostram primeiro as opções básicas. Alinhamento, bordas, sombra, espaçamento e layout ficam em **Avançado**. Um título selecionado na prévia, com as configurações dele abertas no painel à esquerda O seletor de tema no cabeçalho do painel permite conferir o resultado nos modos claro e escuro antes de salvar. #### Reordenar e ajustar o espaçamento Para mover um elemento, selecione-o e arraste a alça abaixo dele até um novo lugar, por exemplo para trocar dois cards de posição. Você também pode usar as setas do teclado. Para mudar o espaçamento, arraste as alças na parte inferior do elemento selecionado. As duas alterações são salvas ou descartadas junto com o resto das suas edições. Os elementos só se movem dentro do próprio grupo. Itens gerados a partir de uma lista, como produtos ou posts do blog, não podem ser arrastados. Peça ao agente para reordená-los. ### Editar texto O texto que você pode reescrever fica contornado direto na prévia. Clique nele e digite. É a forma mais rápida de corrigir um título ou um parágrafo, porque você vê o resultado no lugar enquanto escreve. ### Anotação Às vezes é mais rápido mostrar ao agente o que você quer dizer do que descrever. Com a **Anotação** ativada, desenhe sobre a parte da página a que você se refere. O Macaly identifica quais elementos estão sob a sua marca e os anexa à sua próxima mensagem. Desenhe quantas marcas precisar, depois escreva a mensagem e envie normalmente. Enquanto você desenha, **Desfazer marca**, **Refazer marca** e **Limpar** ficam à mão na barra de ferramentas. Uma marca desenhada ao redor do título e do parágrafo, com o chip de Anotação acima da mensagem As anotações servem para apontar, não para deixar comentários. Elas não são salvas com o projeto e não custam nada além da mensagem que você envia. Salve ou descarte as alterações de design antes de começar a anotar e mantenha a prévia no mesmo tamanho enquanto desenha. Redimensioná-la apaga as suas marcas, porque elas estão ancoradas à posição em que o conteúdo estava. ## Navegando entre elementos Nem sempre dá para clicar exatamente no que você quer, geralmente quando os elementos se sobrepõem ou quando um elemento interno cobre o elemento pai. Uma pequena barra acima da seleção permite subir um nível ou passar para os elementos vizinhos. É nela também que ficam o ícone de código, que abre o código-fonte do elemento na aba **Código**, e a opção de remover o elemento por completo. ## Editar com IA Para textos e imagens, o painel também permite descrever uma alteração em vez de configurá-la. **Reescrever com IA** reescreve o texto a partir do seu pedido. **Gerar com IA** edita a imagem atual ou cria uma nova, e você vê uma prévia do resultado antes de decidir se fica com ela. Com um elemento selecionado, o campo de mensagem do chat também passa a editar esse elemento. Tudo o que você escrever ali vale apenas para a seleção atual. Os botões de IA no painel e os pedidos enviados pelo campo de mensagem usam créditos como qualquer outro pedido de IA, e o painel mostra o preço antes de você executá-los. Tudo o que você define manualmente no painel é grátis. ## Salvando suas alterações Enquanto houver alterações não salvas, a barra de ferramentas mostra quantas você fez, e você pode salvá-las ou descartá-las todas de uma vez. A barra de ferramentas mostrando cinco alterações não salvas, com Descartar e Salvar Salvar não passa pelo agente, então é imediato e não custa créditos. Se uma alteração for mais complexa, o Macaly a entrega ao agente no seu chat, onde ela se comporta como qualquer outra mensagem. ## Quando a barra de ferramentas não está disponível A barra de ferramentas se esconde, ou fica esmaecida, quando a edição direta não funcionaria: * **Aguarde o Macaly terminar**: o agente ainda está trabalhando no seu projeto. * **Aguardando a prévia ficar pronta**: a prévia ainda está iniciando. * **Feche o plano para editar a página**: há um plano aberto no chat. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.