> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brainchat.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor Visual

> Guia completo das seções do editor visual de Landing Pages: Hero, Colunas, FAQ, Depoimentos e mais.

# Editor Visual de Landing Pages

O editor é dividido em três painéis:

* **Esquerda** — lista de seções adicionadas
* **Centro** — pré-visualização em tempo real (desktop e mobile)
* **Direita** — propriedades da seção selecionada

***

## Trabalhando com Seções

### Adicionar uma seção

Clique em **+ Adicionar seção** no painel esquerdo e escolha o tipo. A nova seção aparece no final da página.

### Reordenar seções

Arraste as seções no painel esquerdo para mudar a ordem de exibição.

### Configurar uma seção

Clique na seção na pré-visualização ou no painel esquerdo para selecionar. As propriedades aparecem no painel direito.

***

## Seção: Header

A barra de navegação fixa no topo da página.

| Propriedade        | Descrição                                           |
| ------------------ | --------------------------------------------------- |
| **Logo**           | Imagem ou texto da marca                            |
| **Links de menu**  | Links de navegação (podem rolar para seções âncora) |
| **Botão CTA**      | Texto e URL do botão de destaque                    |
| **Cor de fundo**   | Cor da barra de navegação                           |
| **Fixo no scroll** | Se o header permanece visível ao rolar a página     |

***

## Seção: Hero

A seção principal da landing page — geralmente a primeira que o visitante vê.

| Propriedade          | Descrição                                    |
| -------------------- | -------------------------------------------- |
| **Título**           | Título principal com rich text               |
| **Subtítulo**        | Texto de apoio                               |
| **Imagem**           | Imagem ou vídeo de destaque                  |
| **Layout**           | Imagem à direita, esquerda, abaixo, ou fundo |
| **Botão primário**   | Texto e URL do CTA principal                 |
| **Botão secundário** | Texto e URL do CTA secundário (opcional)     |
| **Cor de fundo**     | Cor ou gradiente de fundo da seção           |

***

## Seção: Colunas

Grade de itens para apresentar benefícios, features ou planos.

| Propriedade           | Descrição                                     |
| --------------------- | --------------------------------------------- |
| **Título da seção**   | Título acima das colunas                      |
| **Número de colunas** | 2, 3 ou 4                                     |
| **Ícone**             | Ícone para cada item                          |
| **Título do item**    | Título de cada coluna                         |
| **Descrição**         | Texto de cada coluna                          |
| **Estilo**            | Card com borda, card sólido, ou lista simples |

***

## Seção: Texto

Bloco de conteúdo com rich text editor completo.

* Formatação (negrito, itálico, sublinhado)
* Listas ordenadas e não ordenadas
* Links
* Alinhamento (esquerda, centro, direita)
* Tamanhos de cabeçalho (H1 a H4)

***

## Seção: Imagem + Texto

Layout lado a lado com imagem e bloco de texto.

| Propriedade           | Descrição                                   |
| --------------------- | ------------------------------------------- |
| **Posição da imagem** | Esquerda ou Direita                         |
| **Imagem**            | Upload ou URL                               |
| **Proporção**         | 1:1, 4:3, 16:9 ou livre                     |
| **Conteúdo**          | Rich text com título, subtítulo e parágrafo |
| **Botão**             | CTA opcional                                |

***

## Seção: Formulário Embed

Incorpora um formulário do Brainchat diretamente na landing page.

1. Selecione o formulário da lista de formulários criados
2. O formulário aparece inline — sem pop-up, sem redirecionamento
3. As submissões são registradas como se o visitante tivesse acessado o formulário diretamente

***

## Seção: FAQ

Accordion de perguntas e respostas para esclarecer dúvidas.

* Adicione quantas perguntas quiser
* Cada pergunta tem um título e uma resposta em rich text
* Por padrão, todas as respostas começam fechadas

***

## Seção: Depoimentos

Cards de avaliações de clientes para construir credibilidade.

| Propriedade       | Descrição                   |
| ----------------- | --------------------------- |
| **Nome**          | Nome do cliente             |
| **Cargo/Empresa** | Cargo e empresa do depoente |
| **Foto**          | Avatar do cliente           |
| **Depoimento**    | Texto do depoimento         |
| **Avaliação**     | Estrelas (1 a 5)            |

***

## Seção: HTML

Insira código HTML customizado para:

* Embeds de terceiros (formulários, mapas, vídeos)
* Widgets externos
* Conteúdo avançado não suportado pelo editor visual

<Warning>
  Scripts injetados via HTML personalizado são executados na página. Use apenas código confiável de fontes verificadas.
</Warning>

***

## Seção: Footer

Rodapé da página.

| Propriedade            | Descrição                                             |
| ---------------------- | ----------------------------------------------------- |
| **Logo**               | Imagem ou texto da marca                              |
| **Texto de copyright** | Ex: "© 2026 Brainchat. Todos os direitos reservados." |
| **Links**              | Links de navegação, política de privacidade, etc.     |
| **Redes sociais**      | Ícones com links para perfis sociais                  |
| **Cor de fundo**       | Cor do rodapé                                         |

***

## Pré-visualização

Alterne entre **Desktop** e **Mobile** no topo do editor para ver como a página fica em cada dispositivo. As alterações são refletidas em tempo real.

<Tip>
  Mais de 70% das conversões em landing pages ocorrem via mobile. Sempre valide a visualização mobile antes de publicar.
</Tip>