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

# Builder V2: visão geral

> O novo editor visual do HidePages — mais rápido, com recursos nativos como o delay de oferta. Onde fica cada parte e como publicar.

O **Builder V2** é o **novo editor** do HidePages — uma **evolução do V1**. Continua sendo um editor visual de arrastar-e-soltar, mas com um canvas ao vivo, painel de camadas e **recursos nativos** que antes exigiam código na mão (como o **delay de oferta**).

<Info>
  As páginas continuam funcionando igual: você monta White, Black e Gray, publica e usa nas campanhas. O que muda é a **experiência de edição** — mais direta e visual.
</Info>

## Como você chega no Builder V2

O menu **Páginas** já abre o Builder V2. Não há um botão pra "ligar" — ele é o padrão.

* **Páginas novas** são sempre criadas no V2.
* **Páginas antigas** (feitas no V1) abrem automaticamente no **editor V1** quando você as edita. As duas convivem na mesma lista de Páginas.

## Criar uma página

Em **Páginas → Criar Página**, você tem quatro caminhos:

<CardGroup cols={2}>
  <Card title="Página em Branco" icon="file">
    Começa do zero, com o canvas vazio.
  </Card>

  <Card title="Templates" icon="table-cells">
    Começa a partir de um modelo pronto.
  </Card>

  <Card title="Clonar Site" icon="clone">
    Importa um site externo pela URL, já convertido em página editável.
  </Card>

  <Card title="Importar" icon="file-import">
    Traz uma página via **código de compartilhamento** (inclui as sub-páginas).
  </Card>
</CardGroup>

Você também pode **duplicar** uma página existente na lista.

## O editor — onde fica cada parte

<Steps>
  <Step title="Barra superior">
    À esquerda, o **nome da página** (clicável para renomear). No **centro**, as abas do painel. À direita: **Desfazer/Refazer**, **Preview**, **Salvar Rascunho**, **Publicar** e o tema (claro/escuro).
  </Step>

  <Step title="Painel esquerdo — as 5 abas">
    * **Widgets** — os blocos que você arrasta para o canvas.
    * **Configurações** — abre ao **selecionar um elemento**; traz **Estilo / Configurações / Página**.
    * **Camadas** — a árvore de todos os elementos da página (selecionar e reordenar).
    * **Subpáginas** — o funil interno da página (pré-venda, upsell, redirecionamento…).
    * **Scripts** — os campos **Head / Body / Footer** por página.

    Na base do painel ficam os botões de **dispositivo** (Desktop / Tablet / Mobile) para editar responsivo.
  </Step>

  <Step title="Canvas (área central)">
    Onde a página é montada. Componentes especiais mostram um **selo (badge)** clicável — por exemplo **Vídeo**, **Atraso**, **DTC** — que leva direto às configurações daquele elemento.
  </Step>
</Steps>

<Tip>
  Regra prática: **selecione o elemento no canvas** (ou pela aba **Camadas**) e a aba **Configurações** mostra tudo o que dá pra ajustar nele.
</Tip>

## Salvar, publicar e visualizar

<Steps>
  <Step title="Rascunho (automático)">
    O editor **salva o rascunho sozinho** enquanto você trabalha. **Salvar Rascunho** força um salvamento na hora.
  </Step>

  <Step title="Preview">
    O botão **Preview** abre a página numa nova aba, exatamente como o visitante vai ver.
  </Step>

  <Step title="Publicar">
    **Publicar** promove o rascunho para a versão ao vivo — a que as campanhas realmente servem. (A página precisa de um **nome**.)
  </Step>
</Steps>

## Próximos passos

<CardGroup cols={2}>
  <Card title="Blocos e componentes" icon="shapes" href="/builder-v2/blocos">
    Tudo que você pode arrastar para a página.
  </Card>

  <Card title="Vídeo e delay de oferta" icon="stopwatch" href="/builder-v2/video-e-delay">
    Delay nativo, sem HTML na mão.
  </Card>

  <Card title="Estilo e configurações" icon="sliders" href="/builder-v2/estilo-e-configuracoes">
    Como editar cores, espaçamento e cada componente.
  </Card>

  <Card title="Sub-páginas e navegação" icon="diagram-project" href="/builder-v2/sub-paginas-e-navegacao">
    Ligar uma página na outra.
  </Card>
</CardGroup>