> ## Documentation Index > Fetch the complete documentation index at: https://vibewax.be/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. 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. ### Editar design Ao selecionares um elemento, as definições dele abrem no painel da esquerda. O que encontras lá depende do tipo de elemento: uma secção oferece tamanho, espaçamento, fundo, contornos e a disposição dos elementos que contém, um elemento de texto oferece tipografia e numa imagem podes trocar o ficheiro. Um título selecionado na pré-visualização, com as definições abertas no painel da esquerda O cabeçalho do painel mostra onde estás, desde o nível **Global** até ao elemento selecionado, e com o seletor de tema verificas o resultado em modo claro e escuro antes de guardares. ### 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 Vibewax 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. ## Perguntar à IA Em textos e imagens tens no painel o botão **Perguntar à IA**, para as alturas em que é mais simples descrever uma alteração do que configurá-la. Num texto, reescreve o conteúdo conforme pedires. Numa imagem, pode editar a que já tens ou gerar 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. **Perguntar à IA** e as mensagens enviadas pelo chat gastam créditos como qualquer outro pedido à IA, e o preço de **Perguntar à IA** aparece antes de a 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 Vibewax 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 Vibewax 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 page is part of the [Vibewax documentation](https://vibewax.be/docs/pt/welcome/overview).