Editando Seu Site

Draftly oferece três modos de edição distintos:

Para mudanças de design, use edições via chat. Para ajustes de texto, use a edição inline. Para mudanças estruturais que o chat não consegue lidar, use o editor de código.

Edições via chat são a principal ferramenta de iteração. Quando você digita no chat após a geração, a IA: 1. Analisa sua solicitação 2. Gera um conjunto mínimo de patches HTML/CSS (0–8 operações) 3. Aplica-os ao vivo na pré-visualização 4. Deduz 0,5 créditos

O que as edições via chat podem fazer: - Mudar qualquer cor, gradiente ou variável CSS - Reescrever qualquer texto — títulos, corpo do texto, rótulos de botões - Reestruturar seções — colunas de grade, lista vs. cartões - Adicionar ou remover elementos dentro das seções - Mudar fontes, espaçamento, preenchimento, estilos de borda - Inserir uma nova seção no final da página

O que aciona uma regeneração completa: - Redesign estrutural completo (muda a arquitetura do layout) - Solicitações que exigem a reexecução do pipeline de imagem ou vídeo - Mudanças muito difusas para serem expressas como patches direcionados

Um aviso claro aparece antes de qualquer regeneração completa. Você verá o custo em créditos e poderá cancelar.

Clique em qualquer texto visível na pré-visualização do site para editá-lo. Uma sobreposição editável aparece — digite seu novo texto e pressione Enter ou clique em outro lugar para confirmar.

O que você pode editar inline: - Título principal e subtítulo - Rótulos de links de navegação - Títulos de seção e corpo do texto - Rótulos de botões - Slogan do rodapé e informações de contato

Edições inline são salvas automaticamente no seu projeto. Republicar as aplica ao site ativo.

A edição inline é completamente grátis — zero créditos.

Predefinições de Design são transformações de estilo com um clique que mudam todo o caráter visual do seu site sem tocar no conteúdo.

Abra o painel de predefinições através do ícone de pincel no painel esquerdo do construtor.

Categorias de predefinições: - Indústria — Restaurante, SaaS, Portfólio, Agência, Saúde, Fitness, Imobiliário, Beleza - Paletas de cores — Escuro, Claro, Sombrio, Vibrante, Minimalista, Luxo, Brasa, Oceano, Floresta - Conjuntos de tipografia — Sans Moderna, Serif Clássica, Geométrica, Monoespaçada, Editorial - Densidade do layout — Arejado (espaço em branco generoso), Padrão, Compacto

Aplicando uma predefinição: Clique em qualquer predefinição — a pré-visualização é atualizada ao vivo. Clique em outra para comparar. Aplique para confirmar.

Predefinições modificam variáveis CSS e escolhas de fonte — não a estrutura HTML. Elas são completamente grátis, sem consumo de créditos.

As cores do seu site são armazenadas como variáveis CSS no bloco <style>:

Três maneiras de mudar cores: - Chat: "Mude o destaque principal para #FF6B35" ou "Deixe o fundo azul-marinho escuro" - Predefinições de Design: Escolha uma paleta de cores coordenada — muda todas as variáveis de uma vez - Editor de código: Edite variáveis CSS :root diretamente na aba Código

Mudanças de cor via chat custam 0,5 créditos. Mudanças via predefinições e código são grátis.

Cada regeneração completa e edição importante cria um ponto de verificação de versão salvo na sua aba Histórico.

Para reverter: 1. Abra a aba Histórico no construtor 2. Clique em qualquer versão anterior para pré-visualizá-la no painel direito 3. Clique em Restaurar para torná-la sua versão atual

Reverter é grátis — restaura o HTML salvo sem consumir créditos.

Pontos de verificação do histórico são armazenados no Firestore e sobrevivem a atualizações do navegador, trocas de dispositivo e saídas de sessão.