> ## 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 > 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. 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. ### Editar design Ao selecionar um elemento, as configurações dele abrem no painel à esquerda. O que aparece depende do tipo de elemento escolhido: uma seção oferece tamanho, espaçamento, fundo, bordas e a forma como os elementos internos são organizados, um elemento de texto oferece tipografia, e uma imagem permite trocar por um novo arquivo. Um título selecionado na prévia, com as configurações dele abertas no painel à esquerda O cabeçalho do painel acompanha onde você está, do nível **Global** até o elemento selecionado, e o seletor de tema permite conferir o resultado nos modos claro e escuro antes de salvar. ### 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 Vibewax 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. ## Perguntar à IA **Perguntar à IA** fica ao lado do texto e das imagens no painel, para quando você prefere descrever uma alteração em vez de configurá-la. No texto, ele reescreve o conteúdo a partir do seu pedido. Em uma imagem, ele pode editar a que você tem ou gerar 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. O Perguntar à IA e os pedidos enviados pelo campo de mensagem usam créditos como qualquer outro pedido de IA, e o preço do Perguntar à IA aparece antes de você executá-lo. 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 Vibewax 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 Vibewax 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 page is part of the [Vibewax documentation](https://vibewax.be/docs/pt-BR/welcome/overview).