Editor Visual

O que é o Editor Visual?

O Editor Visual é uma ferramenta integrada ao painel que permite criar e editar páginas web de forma totalmente visual. Baseado no GrapesJS, ele oferece:

Arrastar e soltar — adicione blocos de conteúdo como textos, imagens, seções, formulários e muito mais
Edição inline — clique em qualquer texto para editar diretamente na página
Responsivo — alterne entre visualizações Desktop, Tablet e Mobile
SEO integrado — defina título, descrição e imagem de compartilhamento
Importação de sites — importe sites existentes e edite visualmente
Auto-save — suas alterações são salvas automaticamente a cada 30 segundos

Acessando o Editor

1

Abra o Editor Visual no menu

No painel, clique em Editor Visual na navegação lateral. Você verá a lista de todos os seus sites.

2

Selecione um site

Clique no card do site que deseja editar. Você será levado à lista de páginas desse site.

3

Escolha ou crie uma página

Clique em uma página existente para editá-la, ou clique em Nova Página para criar uma do zero.

Importando um Site Existente

Se o seu site já está no ar (mesmo hospedado em outro lugar), você pode importá-lo automaticamente para o editor.

1

Clique em "Importar Site"

Na lista de páginas do site, clique no botão Importar Site. O sistema usará o Puppeteer para capturar uma snapshot fiel do site ao vivo.

2

Aguarde a captura

O processo leva alguns segundos. O sistema renderiza a página com um navegador real (Chromium), capturando HTML, CSS, cores e fontes exatamente como aparecem.

3

Importe páginas adicionais

Se o site tiver múltiplas rotas (ex: /galeria, /contato), elas serão detectadas automaticamente. Um banner aparecerá com as rotas encontradas para você importar cada uma individualmente.

Sites SPA (React, Vue, Next.js) são detectados automaticamente. Os links internos são convertidos para .html para funcionar como páginas estáticas no servidor.

Usando o Editor

Barra de Ferramentas

A barra superior do editor contém todas as ações principais:

Ação	Descrição	Atalho
Salvar	Salva o rascunho atual (não publica)	`Ctrl+S`
Publicar	Gera o HTML final e publica no site ao vivo	—
Desfazer / Refazer	Navegar no histórico de alterações	`Ctrl+Z` / `Ctrl+Shift+Z`
Preview	Abre uma pré-visualização em nova aba	—
Código	Visualizar e editar o HTML/CSS diretamente	—
SEO	Configurar título, descrição e imagem OG	—
Restaurar	Voltar para a versão anterior (antes do último publish)	—
Excluir elemento	Remove o elemento selecionado	`Delete`

Dispositivos responsivos

Use os botões de dispositivo na barra central para alternar entre:

Desktop — visualização em tela cheia (1280px)
Tablet — visualização em tablet (768px)
Mobile — visualização em smartphone (360px)

Blocos disponíveis

O painel lateral direito oferece blocos prontos para arrastar na página:

Básicos — textos, imagens, vídeos, links, colunas
Seções — hero, depoimentos, equipe, preços, FAQ, rodapé
Formulários — inputs, selects, botões, textarea

Estilos e fontes

Ao selecionar qualquer elemento, o painel de estilos permite ajustar:

Tipografia (fonte, tamanho, peso, cor, alinhamento)
Espaçamento (margin, padding)
Fundo (cor, imagem, gradiente)
Bordas e sombras
Layout (display, flexbox, grid)

Fontes Google disponíveis incluem: Inter, Poppins, Roboto, Open Sans, Montserrat, Playfair Display, Lato e Raleway.

SEO e Meta Tags

Clique no ícone de lupa na barra de ferramentas para abrir o modal de SEO. Você pode configurar:

Título SEO — aparece no Google e na aba do navegador (até 60 caracteres)
Meta Description — aparece nos resultados de busca (até 155 caracteres)
Imagem OG — imagem que aparece ao compartilhar no Facebook, WhatsApp, etc. (ideal: 1200x630px)

As meta tags OG (Open Graph) são incluídas automaticamente no HTML ao publicar, melhorando o compartilhamento em redes sociais.

Publicar e Restaurar

Publicando uma página

Ao clicar em Publicar, o editor:

Cria um backup automático da versão anterior
Gera o HTML final com CSS inline, Google Fonts e meta tags SEO
Publica o arquivo no diretório do site (ex: index.html, contato.html)

Restaurando uma versão anterior

Clique no ícone de relógio na barra de ferramentas para restaurar a versão anterior ao último publish. Isso é útil caso uma publicação tenha dado errado.

O backup guarda apenas uma versão anterior (a última antes do publish). Se precisar voltar mais, entre em contato com o suporte.

Gerenciando Páginas

Criar nova página

Na lista de páginas, clique em Nova Página. Defina o nome (slug), título e escolha um template inicial:

Página em branco — começar do zero
Hero + Seções — estrutura com hero, colunas e rodapé
Galeria de Imagens — grid de imagens pronto
Página de Contato — formulário de contato

Duplicar página

Na lista de páginas, clique no botão Duplicar para criar uma cópia de qualquer página existente.

Excluir página

Clique em Excluir na lista de páginas para remover uma página. A página index não pode ser excluída.

A exclusão de uma página remove tanto o rascunho no editor quanto o arquivo HTML publicado. Esta ação não pode ser desfeita.

Upload de Imagens

Ao adicionar um bloco de imagem, você pode fazer upload diretamente pelo editor. As imagens são salvas na pasta /its-uploads/ do seu site e ficam acessíveis publicamente.

Formatos aceitos: JPEG, PNG, GIF, WebP, SVG
Tamanho máximo: 10MB por arquivo

Auto-Save

O editor salva automaticamente seu trabalho a cada 30 segundos quando há alterações não salvas. O indicador na barra de ferramentas mostra o status:

Salvo — todas as alterações estão salvas
Alterações não salvas — há modificações pendentes
Salvando... — salvamento em andamento

Se você tentar sair do editor com alterações não salvas, uma confirmação será exibida para evitar perda de trabalho.