# 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="https://1879311494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2F7KePmGfybX6XU1VCmshp%2Funknown.png?alt=media&#x26;token=d9ec388a-8eb8-4203-8146-bdd4eb01c8a2" 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="https://1879311494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2Fcwo5gsB40v7P4r50k4E4%2Funknown.png?alt=media&#x26;token=9643d627-eae8-4521-8ca4-10684471a866" 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="https://1879311494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2F8hjuro0b4Bur3fPX3Ssq%2Funknown.png?alt=media&#x26;token=7dc520d4-56cc-4c45-9a5a-abef9a5d19ae" 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="https://1879311494-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmxWrIrMauHcIrsuqfGq%2Fuploads%2FXzTVA7VbLe2FgPMfcbV4%2Funknown.png?alt=media&#x26;token=a62f3df0-dccc-448d-b457-4f01c9d94c9f" 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>