> ## 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 > Como alterar design, textos e layout diretamente na página Não tens de descrever cada pequena alteração ao agente: podes trabalhar diretamente na pré-visualização do teu projeto. Clica num elemento para lhe mudares o aspeto, reescreve o texto no próprio sítio ou desenha uma marca sobre a página para mostrares ao agente do que estás a falar. As edições visuais trabalham sempre com um elemento concreto. Escolhes um elemento na página, vês as definições disponíveis para ele e alteras tudo ali mesmo. As alterações de design e de texto são escritas no projeto quando guardas, sem passarem pelo agente e sem gastarem créditos. Disponível em todos os planos As edições visuais só funcionam no computador. A barra de ferramentas não aparece no telemóvel nem em janelas de navegador estreitas. ## A barra de ferramentas A barra de ferramentas sobre a pré-visualização, com Editar design, Editar texto e Anotação Sobre a pré-visualização em direto do teu projeto flutua uma barra com três ferramentas: * **Editar design**: Clica em qualquer elemento para mudares o aspeto, a imagem ou o layout. * **Editar texto**: O texto editável fica contornado, basta clicares nele e reescrevê-lo. * **Anotação**: Desenha na página para mostrares do que estás a falar. Com **Esc** voltas a qualquer momento à navegação normal da pré-visualização. Se a barra de ferramentas tapar um elemento que queres editar, clica em **Ocultar barra de ferramentas**. A ferramenta continua ativa e as alterações por guardar mantêm-se. ### Editar design Quando ativas **Editar design**, o painel abre com **Estilos do site**, onde defines os tipos de letra, o arredondamento dos cantos e as cores de todo o site. Clica num elemento da página para abrires as definições dele. Em textos, imagens e secções vês primeiro as opções básicas. Alinhamento, contornos, sombra, espaçamento e disposição estão em **Avançado**. Um título selecionado na pré-visualização, com as definições abertas no painel da esquerda Com o seletor de tema no cabeçalho do painel verificas o resultado em modo claro e escuro antes de guardares. #### Reordenar e ajustar o espaçamento Para mover um elemento, seleciona-o e arrasta a pega por baixo dele para outro sítio, por exemplo para trocar dois cartões de lugar. Também podes usar as teclas de seta. Para alterar o espaçamento, arrasta as pegas na parte inferior do elemento selecionado. Ambas as alterações são guardadas ou descartadas com o resto das tuas edições. Os elementos só se movem dentro do seu próprio grupo. Os itens gerados a partir de uma lista, como produtos ou artigos de blog, não podem ser arrastados. Pede ao agente para os reordenar. ### Editar texto O texto que podes reescrever fica contornado diretamente na pré-visualização. Clica lá dentro e escreve. É a forma mais rápida de corrigir um título ou um parágrafo, porque vês o resultado no sítio enquanto escreves. ### Anotação Às vezes é mais rápido mostrar ao agente o que queres dizer do que descrevê-lo. Com a **Anotação** ligada, desenha sobre a parte da página de que estás a falar. O Macaly percebe que elementos ficam por baixo da tua marca e junta-os à tua mensagem seguinte. Desenha as marcas que precisares, escreve depois a mensagem e envia-a como de costume. Enquanto desenhas, tens **Desfazer marca**, **Refazer marca** e **Limpar** à mão na própria barra. Uma marca desenhada à volta do título e do parágrafo, com a etiqueta Anotação por cima da mensagem As anotações servem para apontar, não para deixar comentários. Não ficam guardadas com o projeto e não custam nada além da mensagem que envias. Guarda ou descarta as alterações de design antes de começares a anotar e não mudes o tamanho da pré-visualização enquanto desenhas. Ao mudares o tamanho, as marcas desaparecem, porque estão ancoradas ao sítio onde o conteúdo estava. ## Navegação entre elementos Clicar exatamente naquilo que queres nem sempre é possível, sobretudo quando os elementos se sobrepõem ou um elemento aninhado tapa aquele que o contém. Por cima da tua seleção aparece uma pequena barra que te deixa subir um nível ou passar com as setas para os elementos vizinhos. Aí encontras também o ícone de código, que abre o código-fonte do elemento no separador **Código**, e a opção de remover o elemento por completo. ## Editar com IA Em textos e imagens, o painel também te permite descrever uma alteração em vez de a configurares. **Reescrever com IA** reescreve o texto conforme pedires. **Gerar com IA** edita a imagem atual ou cria uma nova, e vês o resultado antes de o usares. Com um elemento selecionado, também o campo de mensagem do chat passa a editar esse elemento. Tudo o que escreveres ali aplica-se apenas à tua seleção atual. Os botões de IA no painel e as mensagens enviadas pelo chat gastam créditos como qualquer outro pedido à IA, e o painel mostra o preço antes de os executares. Tudo o que definires à mão no painel é gratuito. ## Guardar as alterações Enquanto tiveres alterações por guardar, a barra mostra quantas são e podes guardá-las todas de uma vez com **Guardar** ou anulá-las com **Descartar**. A barra com cinco alterações por guardar, com Descartar e Guardar Guardar não passa pelo agente, por isso é imediato e não custa créditos. Se a alteração for mais exigente, o Macaly passa-a ao agente no chat, onde se comporta como qualquer outra mensagem. ## Quando a barra de ferramentas não está disponível A barra esconde-se, ou fica cinzenta, quando a edição direta não funcionaria: * **Espera que o Macaly termine**: O agente ainda está a trabalhar no teu projeto. * **À espera que a pré-visualização esteja pronta**: A pré-visualização ainda está a arrancar. * **Fecha o plano para editar a página**: Tens um plano aberto no chat. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.