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

# Blocos e componentes

> Os widgets que você arrasta para a página no Builder V2 — dos blocos básicos aos componentes prontos (DTC, cabeçalho, comentários).

Na aba **Widgets**, você arrasta blocos para o canvas. Os conceitos são os mesmos do V1 — o que muda é que aqui você **arrasta e solta** direto na página.

## Blocos básicos

<CardGroup cols={2}>
  <Card title="Texto" icon="font">
    Um bloco de texto editável (título, parágrafo, etc.).
  </Card>

  <Card title="Imagem" icon="image">
    Uma imagem — você faz upload e define o texto alternativo.
  </Card>

  <Card title="Vídeo" icon="play">
    O player de vídeo (VTurb). Veja [Vídeo e delay](/builder-v2/video-e-delay).
  </Card>

  <Card title="Botão" icon="hand-pointer">
    Um botão de CTA. O destino se configura em **Navegação**.
  </Card>

  <Card title="Contêiner" icon="square-dashed">
    Um bloco que agrupa outros elementos (para montar seções e colunas).
  </Card>

  <Card title="HTML" icon="code">
    Um bloco de **HTML personalizado**, para quando você precisa colar código próprio.
  </Card>
</CardGroup>

## Componentes prontos (seções)

Estes vêm com **modelos/aparências predefinidas**. Você arrasta, escolhe um modelo e, ao clicar em **Aplicar**, cada elemento do componente fica **editável individualmente**.

<AccordionGroup>
  <Accordion title="DTC — cards de oferta/preço" icon="table-cells">
    A tabela de **cards de preço** (aquela de 1/3/6 unidades). Na aba **Estilo**, o painel **Estilo DTC** tem um **Preset** de cores para escolher (Ouro clássico, Meia-noite, Roxo real, Azul profundo, Esmeralda, Carmesim, Azul-marinho e ouro…). Clique em **Aplicar** para editar preços, textos e botões de cada card.
  </Accordion>

  <Accordion title="Cabeçalho — topo estilo portal" icon="window-maximize">
    Um cabeçalho no estilo de grandes portais/mídia. Em **Estilo de cabeçalho**, escolha o **Modelo** (Fox News, YouTube, G1, Facebook, CBS News, CBS + 60 Minutes, CNN World, Today, NBC News) e clique em **Aplicar** para editar cada parte.
  </Accordion>

  <Accordion title="Comentários — prova social" icon="comments">
    Uma seção de **comentários/depoimentos**. Em **Estilo de comentários**, escolha o **Modelo** (Clássico, YouTube, Facebook) e clique em **Aplicar** para editar os comentários.
  </Accordion>

  <Accordion title="Acordeão — FAQ" icon="list">
    Um bloco de perguntas e respostas retráteis, pronto para você editar o conteúdo.
  </Accordion>

  <Accordion title="Garantia — selo de garantia" icon="shield-check">
    Um bloco de garantia (selo + texto + botão), pronto para personalizar.
  </Accordion>
</AccordionGroup>

<Tip>
  Depois de **Aplicar** um componente pronto, cada texto, preço e botão vira um elemento comum — é só clicar e editar como qualquer outro.
</Tip>

## Organização: Camadas

A aba **Camadas** mostra a **árvore** de todos os elementos da página. Use-a para **selecionar** um elemento que está difícil de clicar no canvas, **reordenar** (arrastando) e enxergar a estrutura da página.

<Card title="Agora: estilo e configurações" icon="sliders" href="/builder-v2/estilo-e-configuracoes" horizontal>
  Como ajustar cores, espaçamento e as opções de cada componente.
</Card>