# Page Builder

O Page Builder e um editor visual onde voce projeta as paginas da sua loja. Ele funciona como um canvas de arrastar e soltar — voce adiciona blocos de conteudo (chamados de **secoes**), personaliza a aparencia da barra de navegacao e as cores do tema, e visualiza uma previa ao vivo do resultado antes de publicar.

Toda loja comeca com uma pagina **Home**. Voce tambem pode criar paginas personalizadas (ex.: Sobre Nos, Contato, Promocoes) que recebem sua propria URL na vitrine.

## Gerenciando paginas

Abra **Pages** na barra lateral do admin para ver todas as paginas da sua loja. A pagina Home e sempre listada primeiro.

![Lista de paginas](/features/page-builder/pages-list.png)

| Coluna     | Descricao                                    |
| ---------- | -------------------------------------------- |
| Name       | O titulo da pagina exibido no admin          |
| Slug       | O caminho da URL na sua loja (ex.: `/about`) |
| Status     | **Active** (visivel na loja) ou **Inactive** |
| Created At | Data em que a pagina foi criada              |

Nesta tela voce pode:

- **Criar uma pagina** — clique em **New Page** no canto superior direito. Isso abre o builder com uma pagina em branco.
- **Editar uma pagina** — clique no nome da pagina ou escolha **Edit** no menu de acoes. Isso abre o builder com aquela pagina carregada.
- **Ativar / Desativar** — alterne a visibilidade pelo menu de acoes ou use as caixas de selecao em massa.
- **Excluir** — remova uma pagina pelo menu de acoes ou em massa.

> **Importante:** A pagina Home nao pode ser excluida ou renomeada nesta tela. Seus metadados sao gerenciados nas configuracoes da loja.

## Abrindo o builder

Quando voce clica em **New Page** ou **Edit**, o Page Builder abre em layout de tela cheia:

![Visao geral do builder](/features/page-builder/builder-overview.png)

O builder tem tres areas principais:

| Area                     | Descricao                                                                                                                            |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
| Barra lateral primaria   | Uma barra estreita de icones na extrema esquerda com quatro botoes de painel (de cima para baixo): Metadata, Sections, Navbar, Theme |
| Barra lateral secundaria | Os controles do painel ativo — onde voce edita conteudo, configuracoes ou estilos                                                    |
| Previa ao vivo           | Um iframe mostrando sua pagina exatamente como os clientes a verao. Atualiza em tempo real conforme voce faz alteracoes              |

A **barra superior** contem:

| Controle               | Descricao                                                          |
| ---------------------- | ------------------------------------------------------------------ |
| Back                   | Retorna a lista de paginas (avisa se houver alteracoes nao salvas) |
| Seletor de pagina      | Dropdown para alternar entre paginas sem sair do builder           |
| Alternador de viewport | Alterne entre previsualizacao Desktop, Tablet e Mobile             |
| Discard                | Reverte todas as alteracoes nao salvas instantaneamente            |
| Save                   | Abre um dialogo de confirmacao e salva tudo no banco de dados      |

## Metadados da pagina

Clique no **icone de documento** (primeiro icone na barra lateral primaria) para abrir o painel de metadados. Para paginas novas, este painel abre automaticamente.

![Painel de metadados](/features/page-builder/metadata-panel.png)

| Campo       | Descricao                                                                                                                            |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| Name        | O titulo da pagina (obrigatorio). Ao criar uma nova pagina, alterar o nome gera automaticamente um slug                              |
| Slug        | O caminho da URL para a pagina (obrigatorio). Apenas letras minusculas, numeros e hifens sao permitidos                              |
| Description | Uma descricao opcional para fins de SEO. Voce tambem pode usar o botao **AI Generate** se as integracoes de IA estiverem habilitadas |
| Published   | Alterne para tornar a pagina visivel na loja                                                                                         |

> **Dica:** A previa do slug abaixo do campo mostra o caminho completo da URL (ex.: `/about-us`). Depois que voce edita o slug manualmente, ele para de ser gerado automaticamente a partir do nome.

Para a **pagina Home**, o painel de metadados exibe um aviso somente leitura — o nome e a descricao da pagina Home sao gerenciados nas configuracoes gerais da loja.

## Trabalhando com secoes

Clique no **icone de camadas** (segundo icone na barra lateral primaria) para abrir o painel de secoes. E aqui que voce adiciona e organiza blocos de conteudo.

![Painel de secoes](/features/page-builder/sections-panel.png)

Cada secao na lista exibe seu icone de tipo e rotulo. Voce pode:

- **Adicionar uma secao** — clique em **Add Section** e escolha no menu dropdown
- **Reordenar** — arraste secoes para cima ou para baixo usando a alca de arrasto a esquerda
- **Expandir / Recolher** — clique no nome de uma secao para revelar suas configuracoes
- **Alternar visibilidade** — use o switch para mostrar ou ocultar uma secao sem exclui-la
- **Remover** — clique no icone de lixeira (requer confirmacao)

![Menu de adicionar secao](/features/page-builder/add-section-menu.png)

Seis tipos de secao estao disponiveis:

| Tipo            | Ideal para                                    |
| --------------- | --------------------------------------------- |
| Slideshow       | Banners hero, promocoes, conteudo em destaque |
| Product List    | Exibir produtos especificos                   |
| Collection      | Destacar uma colecao de produtos              |
| Image with Text | Storytelling, mensagens da marca, destaques   |
| Text            | Anuncios, descricoes, politicas               |
| Space           | Espaco visual entre secoes                    |

## Personalizando a navbar

Clique no **icone de painel superior** (terceiro icone na barra lateral primaria) para abrir o painel de personalizacao da navbar.

![Painel da navbar](/features/page-builder/navbar-panel.png)

> **Importante:** Alteracoes na navbar se aplicam globalmente a **todas** as paginas, nao apenas a pagina que voce esta editando no momento.

| Configuracao    | Descricao                                                                |
| --------------- | ------------------------------------------------------------------------ |
| Show Logo       | Exibir ou ocultar o logo da loja na barra de navegacao                   |
| Show Store Name | Exibir ou ocultar o nome da loja ao lado do logo                         |
| Logo Size       | Escolha entre sm, md, lg, xl ou 2xl                                      |
| Text Style      | Defina o tamanho da fonte, negrito e italico do nome da loja             |
| Position        | Alinhe o logo e o nome da loja a **esquerda**, **centro** ou **direita** |

## Personalizando o tema

Clique no **icone de paleta** (quarto icone na barra lateral primaria) para abrir o painel de personalizacao do tema.

![Painel do tema](/features/page-builder/theme-panel.png)

> **Importante:** Alteracoes no tema se aplicam globalmente a **todas** as paginas, nao apenas a pagina que voce esta editando no momento.

**Alternadores de modo:**

| Configuracao | Descricao                                          |
| ------------ | -------------------------------------------------- |
| Light Mode   | Habilitar ou desabilitar o esquema de cores claro  |
| Dark Mode    | Habilitar ou desabilitar o esquema de cores escuro |

Pelo menos um modo deve permanecer habilitado o tempo todo.

**Campos de cor (10 por modo):**

| Cor                 | O que controla                        |
| ------------------- | ------------------------------------- |
| Primary Color       | Botoes, links e elementos de destaque |
| Secondary Color     | Elementos secundarios da interface    |
| Tertiary Color      | Cor de destaque adicional             |
| Background Color    | Fundo da pagina                       |
| Menu Bar Color      | Fundo da barra de navegacao           |
| Menu Bar Text Color | Texto da barra de navegacao           |
| Input Background    | Campos de entrada de formularios      |
| Text Color          | Texto principal do corpo              |
| Banner Background   | Fundo da barra de banner promocional  |
| Banner Text Color   | Texto da barra de banner promocional  |

**Fonte:**

| Configuracao | Descricao                                                                      |
| ------------ | ------------------------------------------------------------------------------ |
| Font Family  | Escolha uma fonte global entre as fontes de sistema e Google Fonts disponiveis |

## Salvando e publicando

Quando estiver satisfeito com suas alteracoes, clique em **Save** no canto superior direito. Um dialogo de confirmacao aparece:

![Dialogo de salvamento](/features/page-builder/save-dialog.png)

- Se a pagina estiver **publicada** (ativa), o dialogo confirma que voce esta publicando as alteracoes ao vivo.
- Se a pagina for um **rascunho** (inativa), o dialogo confirma que voce esta salvando sem tornar a pagina publica.

O processo de salvamento faz upload de todas as imagens em espera, cria a pagina (se for nova) e salva secoes, configuracoes da navbar, configuracoes do tema e metadados da pagina de uma so vez.

Clique em **Discard** a qualquer momento para reverter todas as alteracoes nao salvas para o ultimo estado salvo.

## Como as paginas aparecem na loja

### Pagina Home

A pagina Home e a primeira coisa que os visitantes veem. Ela renderiza todas as secoes ativas na ordem que voce definiu no builder.

![Pagina Home da loja](/features/page-builder/storefront-home.png)

### Paginas personalizadas

Paginas personalizadas sao acessiveis pela URL do seu slug (ex.: `sualoja.com/about`). Elas renderizam da mesma forma que a pagina Home — cada secao ativa aparece em ordem.

![Pagina personalizada da loja](/features/page-builder/storefront-custom-page.png)

Apenas paginas **ativas** com o toggle **Published** habilitado sao visiveis na loja. Paginas inativas retornam um erro 404.

Paginas personalizadas tambem aparecem no menu de navegacao mobile e no rodape da loja, facilitando que os clientes as encontrem.