Landing Page
Hablla — Landing Page
Para que serve: construir e publicar uma landing page simples, usando blocos visuais ou código (HTML/CSS).
Importante: antes de editar, tenha um HTML e um CSS prontos (pode pedir a uma IA para gerar).
1) Acesso e criação do projeto
Vá em Marketing → Landing Page.
Clique em Adicionar projeto (modelo em branco) e dê um nome.
Resultado: você entra no Editor do projeto.
2) Entendendo a tela do Editor
Topo (direita):
Criar modelo → salva o layout atual como um template para reutilizar depois.
Editor de Código → abre modal com duas abas para colar HTML e CSS.
Salvar e Publicar → publica a página (o link ficará disponível na lista de projetos).
Topo (centro): seletor Desktop/Mobile (para conferir o responsivo).
Esquerda: Páginas e Layers (árvore dos elementos para facilitar a seleção).
Centro: Canvas (onde você vê e monta a página).
Direita: Styles e Properties (ajustes visuais e atributos do item selecionado).
3) Opção A — Montar com blocos (drag & drop)
No painel de Blocks (paleta), você tem os componentes:
Section (cria uma seção); 1 Column / 2 Columns / 3 Columns (estrutura de colunas)
Heading (título), Text (texto)
Image (imagem), Link / Link Box (links), Video, Map
Como usar (exemplo rápido):
Arraste uma Section para o Canvas.
Dentro dela, arraste 2 Columns.
Na esquerda: Heading + Text. Na direita: Image (faça upload).
Selecione cada item e ajuste em Styles (tipografia, cor, espaçamento, fundo).
4) Opção B — Montar com código (HTML/CSS)
Clique em Editor de Código.
Na aba HTML, cole o HTML da sua landing.
Na aba CSS, cole os estilos.
Clique em Salvar para aplicar no Canvas.
Observação: se quiser usar formulário nativo da plataforma depois (para lead/tag/webhook), não insira <form> no HTML — monte a estrutura visual e, quando houver o bloco de formulário, use-o no editor.
5) Publicar e obter o link
Clique em Salvar e Publicar.
Volte para a lista de projetos; o projeto publicado exibe Link ativo.
Copie o link para divulgação.
Checklist rápido
HTML e CSS colados (ou blocos adicionados) e salvos
Ajustes visuais em Styles/Properties
Desktop/Mobile conferido
Salvar e Publicar feito
Link com Link ativo copiado
(Opcional) Criar modelo para reutilizar
Dica final (pré-requisito)
Se não tiver código, peça a uma IA: “Gerar HTML (sem frameworks) e CSS mobile-first para uma landing com hero (título, subtítulo, CTA), 3 benefícios em cards e CTA final.” Depois, cole no Editor de Código (HTML/CSS) e ajuste no Styles.
Atualizado
Isto foi útil?