# 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).

<br>

<figure><img src="/files/kRMPHPgoglMmpIoJ8JsL" alt=""><figcaption></figcaption></figure>

***

### 1) Acesso e criação do projeto

1. Vá em Marketing → Landing Page.\ <br>
2. Clique em Adicionar projeto (modelo em branco) e dê um nome.\ <br>

Resultado: você entra no Editor do projeto.

<figure><img src="/files/2iYRzTYF6FhHrBJWb2zJ" alt=""><figcaption></figcaption></figure>

***

### 2) Entendendo a tela do Editor

* Topo (direita):\ <br>
* Criar modelo → salva o layout atual como um template para reutilizar depois.\ <br>
* Editor de Código → abre modal com duas abas para colar HTML e CSS.\ <br>
* Salvar e Publicar → publica a página (o link ficará disponível na lista de projetos).\ <br>
* Topo (centro): seletor Desktop/Mobile (para conferir o responsivo).\ <br>
* Esquerda: Páginas e Layers (árvore dos elementos para facilitar a seleção).\ <br>
* Centro: Canvas (onde você vê e monta a página).\ <br>
* Direita: Styles e Properties (ajustes visuais e atributos do item selecionado).

<figure><img src="/files/abv1a0Yq9waaocNw5Sqr" alt=""><figcaption></figcaption></figure>

\ <br>

***

### 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)\ <br>
* Heading (título), Text (texto)\ <br>
* Image (imagem), Link / Link Box (links), Video, Map\ <br>

Como usar (exemplo rápido):

1. Arraste uma Section para o Canvas.\ <br>
2. Dentro dela, arraste 2 Columns.\ <br>
3. Na esquerda: Heading + Text. Na direita: Image (faça upload).\ <br>
4. Selecione cada item e ajuste em Styles (tipografia, cor, espaçamento, fundo).\ <br>

***

<br>

### 4) Opção B — Montar com código (HTML/CSS)

1. Clique em Editor de Código.\ <br>
2. Na aba HTML, cole o HTML da sua landing.\ <br>
3. Na aba CSS, cole os estilos.\ <br>
4. Clique em Salvar para aplicar no Canvas.\ <br>

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.

<figure><img src="/files/vpVMlO0pgiuQaFfAa4Mv" alt=""><figcaption></figcaption></figure>

***

5\) Publicar e obter o link

1. Clique em Salvar e Publicar.\ <br>
2. Volte para a lista de projetos; o projeto publicado exibe Link ativo.\ <br>
3. Copie o link para divulgação.\
   \ <br>

***

\ <br>

### &#x20;Checklist rápido

* HTML e CSS colados (ou blocos adicionados) e salvos\ <br>
* Ajustes visuais em Styles/Properties\ <br>
* Desktop/Mobile conferido\ <br>
* Salvar e Publicar feito\ <br>
* Link com Link ativo copiado\ <br>
* (Opcional) Criar modelo para reutilizar\ <br>

***

#### 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.

<br>

***

###

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hablla.com/hablla/marketing/landing-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.