Skip to main content
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.
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.