Guia de Personalização
Aprenda como editar, estilizar e estender seu site Draftly sem tocar no código.
Como a Personalização Funciona
O Draftly oferece três maneiras de personalizar seu site após a geração:
1. Clique para Editar (Edição Inline) — Alterne Editar na barra de ferramentas de pré-visualização e clique em qualquer texto ou elemento. O inspetor mostra controles de tipografia, espaçamento, cores e animação. As alterações são aplicadas ao vivo.
2. Chat para Modificar — Digite uma instrução focada por mensagem (ex: "mudar o fundo do hero para azul marinho escuro", "adicionar uma seção de preços"). O Draftly corrige apenas as partes relevantes — tipicamente 0,5 créditos por edição.
3. Regenerar UI do Site — Clique em ↺ Regenerar Site para executar uma nova passagem de design de IA enquanto mantém seu vídeo, imagens e scroll frames.
Opcional: mude para um modelo predefinido no seletor de modelos para uma troca de layout mais rápida.
Fluxo de Trabalho de Personalização Recomendado
Para a experiência mais fluida, siga esta ordem:
Evite: pedidos vagos como "melhore isso" — especifique o que mudar. Use Guia (cabeçalho) ou pergunte no chat: "Como personalizo o texto?"
Editando Texto e Cores
Para editar qualquer elemento inline:
Você também pode clicar em Reescrever com IA para permitir que o Draftly reescreva o texto selecionado em um tom melhor, ou Substituir Imagem para trocar uma imagem de fundo ou de produto.
Usando Predefinições de Design
As Predefinições de Design permitem que você altere todo o estilo visual do seu site com um clique.
As predefinições combinam com seu conteúdo — seu texto, seções e nome da marca permanecem os mesmos; apenas o sistema visual muda.
Chat para Modificar
Chat-to-modify é a maneira mais rápida de fazer alterações estruturais sem uma regeneração completa.
Como funciona: Digite qualquer instrução na barra de chat enquanto seu site está carregado. Exemplos: - *"Mude o título principal para algo mais empolgante"* - *"Adicione uma seção de FAQ entre preços e contato"* - *"Deixe o esquema de cores mais escuro e profissional"* - *"Reescreva a seção 'Sobre' para ser mais pessoal"* - *"Substitua o texto do botão CTA principal por 'Obtenha um Orçamento Grátis'"*
O Draftly envia apenas a seção relevante do HTML do seu site para a IA — não a página inteira — então as edições são rápidas e custam 0.5 créditos em vez do custo total de regeneração.
Dicas: - Seja específico: "mudar o fundo da navegação para preto" funciona melhor do que "deixar mais escuro" - Referencie seções pelo nome: "a seção de serviços", "o rodapé" - Você pode encadear edições — cada mensagem de chat é um novo patch direcionado
Adicionando Analytics e Rastreamento
Conecte Google Analytics, Google Tag Manager, Facebook Pixel ou qualquer script de rastreamento personalizado ao seu site — sem necessidade de código.
G-XXXXXXXXXX). Encontre-o em GA4 → Administrador → Fluxos de Dados.GTM-XXXXXXX). Encontre-o em GTM → Administrador → ID do Contêiner.<script> para injetar no <head> (somente fontes HTTPS).Todos os scripts são injetados no <head> do HTML do seu site publicado. O GTM também recebe o iframe <noscript> necessário injetado após <body>.
Adicionando um Formulário de Contato
Todo site Draftly pode incluir um formulário de contato funcional que envia as submissões diretamente para sua caixa de entrada do Draftly e envia uma notificação por e-mail.
Como funciona:
- Se o seu site gerado já possui um elemento <form> (comum em sites com uma seção de Contato), o Draftly o ajusta para enviar ao backend do Draftly.
- Se nenhum formulário existir, o Draftly injeta uma seção de formulário estilizada antes do rodapé.
- As submissões são armazenadas na sua conta Draftly na aba Submissões do site.
- Você recebe uma notificação por e-mail para cada nova submissão com o nome, e-mail e mensagem do visitante.
Todos os dados permanecem dentro do Draftly — sem necessidade de serviços de formulário de terceiros.