Skip to main content
O editor te dá controle total sobre a página — do arrastar-e-soltar ao HTML na mão. Com algumas boas práticas, suas páginas ficam sólidas, rápidas e idênticas do editor ao ar.

​
Tour rápido do editor

  • Elementos (painel esquerdo): Título, Texto, Imagem, Vídeo, Botão, HTML, DTC, Acordeão, Comentários, Cabeçalho, Garantia. Seções e colunas vêm por estruturas prontas.
  • Conteúdo / Estilo / Configurações: as três abas de cada elemento selecionado.
  • Camadas: a árvore de elementos (selecionar, arrastar para reordenar).
  • Configurações da Página: fundo, nome e ajustes gerais.
  • Scripts: os slots Head/Body/Footer (veja HTML e scripts).
  • Desfazer/Refazer, Preview, Salvar Rascunho, Publicar (no topo).
O editor salva rascunho automaticamente (autosave) alguns segundos após cada alteração. Publicar promove o rascunho para a versão ao vivo.

​
Boas práticas para páginas impecáveis

O Preview mostra a página exatamente como o público vai ver. Como o editor renderiza cada bloco HTML de forma isolada, o Preview é a melhor forma de confirmar o resultado final — especialmente depois de adicionar HTML ou scripts.Prática: ao terminar um bloco HTML, clique em Preview (abre ?mode=draft em nova aba) e dê uma conferida antes de publicar.
Ao publicar, o <style> de um bloco HTML passa a valer para a página toda. Para o seu estilo ficar isolado e previsível, encapsule o HTML num wrapper e prefixe cada seletor com a classe dele. Assim seu CSS afeta só o seu bloco.
<div id="hp-minha-pagina-root" class="hp-minha-pagina">
  <style>
    /* ✅ com escopo — afeta só este bloco */
    .hp-minha-pagina .titulo { font-size: 32px; }
    .hp-minha-pagina .btn { background: #008912; }
    /* Prefira sempre o prefixo em vez de seletores globais
       (body, *, html, resets), que valeriam para a página inteira. */
  </style>
  <!-- seu conteúdo aqui -->
</div>

Passo a passo do wrapper com escopo

O padrão completo para colar HTML com segurança.
Imagens e links com o endereço https://... completo funcionam igual no editor e no ar. Caminhos relativos (/img/foto.png) podem não resolver depois de publicar — então prefira sempre o link absoluto.
Ao trazer de outro site, troque os caminhos relativos por absolutos. Em imagens com lazy-load, use a URL real de data-lazy-src ou do <noscript> (não o placeholder).
Páginas enxutas carregam mais rápido e salvam na hora. Para o melhor desempenho, mantenha o conteúdo em uma faixa saudável:
  • até ~1 MB de dados por página;
  • até 500 elementos.
Em vez de trazer um site externo inteiro, prefira fragmentos enxutos — o resultado fica mais rápido para o seu visitante.
O fluxo Criar Página → Clonar site já faz uma limpeza do HTML e costuma dar o melhor resultado. O atalho Clonar página dentro do editor traz o HTML do site como está e substitui a página atual — use quando quiser justamente o código bruto.
Em blocos HTML, os scripts rodam encapsulados. Para um comportamento consistente, prefira manipular o DOM (querySelector, appendChild, addEventListener) em vez de document.write.
O histórico de Desfazer/Refazer é por etapa — ao mudar de sub-página, ele reinicia. Vale conferir suas alterações antes de trocar de step.

​
Checklist antes de publicar

Confira

  • Abri o Preview e está igual ao editor
  • O CSS colado está com escopo no wrapper
  • Imagens e links são https absolutos
  • A página tem nome
  • Pixels estão nos Scripts (Head)
  • A página está leve (salvando na hora)
Publicar promove o rascunho e recalcula o status das campanhas ligadas — uma campanha “Pendente” por causa de página em rascunho pode virar Ativa sozinha.