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

# Site Builder

> Construtor visual de site público com arrastar e soltar para criar a vitrine da sua plataforma

## Site Builder

**Addon pago** — Crie um site público personalizado para sua plataforma EAD com um editor visual de arrastar e soltar. Ideal para criar páginas de apresentação, vitrines de cursos e landing pages.

## Visão geral

O Site Builder permite que administradores criem e publiquem páginas web sem necessidade de conhecimento técnico. O editor visual oferece componentes prontos que podem ser arrastados, configurados e organizados livremente.

## Como funciona

<Steps>
  <Step title="Crie seu site">
    Acesse **Admin → Site Builder** e crie o site da sua plataforma. Cada plataforma pode ter um site.
  </Step>

  <Step title="Adicione páginas">
    Crie quantas páginas precisar, cada uma com sua URL personalizada (ex: `/`, `/sobre-nos`, `/contato`).
  </Step>

  <Step title="Edite visualmente">
    Use o editor visual para arrastar componentes e montar o layout da página. Visualize como ficará em desktop, tablet e celular.
  </Step>

  <Step title="Publique">
    Publique páginas individuais ou o site inteiro. Páginas publicadas ficam acessíveis ao público.
  </Step>
</Steps>

## Componentes disponíveis

Arraste e solte os seguintes blocos para construir suas páginas:

<CardGroup cols={2}>
  <Card title="Hero" icon="image">
    Banner principal com título, descrição e botões de ação. 4 variações: centralizado, dividido (texto + imagem), imagem de fundo e minimalista.
  </Card>

  <Card title="Estatísticas" icon="chart-bar">
    Exiba números impactantes como quantidade de alunos, cursos e certificados emitidos.
  </Card>

  <Card title="Cards" icon="square">
    Blocos de conteúdo com título e descrição. Útil para listar benefícios, diferenciais ou depoimentos.
  </Card>

  <Card title="Logos" icon="icons">
    Vitrine de logos de parceiros, clientes ou certificações. Exibição em grade com efeito de destaque.
  </Card>

  <Card title="Texto rico" icon="align-left">
    Bloco de texto com formatação completa para descrições detalhadas.
  </Card>

  <Card title="Botão" icon="hand-pointer">
    Botão de ação com link personalizado. Estilos primário e secundário.
  </Card>

  <Card title="Títulos" icon="heading">
    Cabeçalhos e subtítulos para organizar o conteúdo.
  </Card>

  <Card title="Grade e Flex" icon="table-columns">
    Layouts em grade e flexíveis para organizar componentes lado a lado.
  </Card>
</CardGroup>

### Personalização dos componentes

Cada componente pode ser personalizado:

* **Textos** — Títulos, descrições e rótulos dos botões
* **Links** — URLs de destino dos botões e cards
* **Imagens** — Upload de imagens de fundo e ilustrações
* **Espaçamento** — Padding interno configurável (pequeno, médio, grande, extra grande)
* **Estilo** — Variações visuais por componente

## Fluxo de publicação

| Ação                | O que acontece                                                    |
| ------------------- | ----------------------------------------------------------------- |
| **Salvar rascunho** | Página salva mas não visível ao público                           |
| **Publicar página** | Página individual fica acessível publicamente                     |
| **Publicar site**   | Todo o site fica acessível (requer pelo menos 1 página publicada) |
| **Despublicar**     | Remove o acesso público a qualquer momento                        |

## IA integrada

O editor conta com assistência de IA para ajudar na criação de conteúdo. Ao editar textos, você pode solicitar sugestões inteligentes para melhorar títulos, descrições e chamadas para ação.

## Visualização responsiva

O editor permite pré-visualizar como suas páginas ficarão em diferentes dispositivos:

* **Desktop** — Tela completa
* **Tablet** — Tela intermediária
* **Celular** — Tela reduzida

<Tip>
  Sempre verifique a versão mobile das suas páginas antes de publicar. Muitos visitantes acessam pelo celular.
</Tip>

## Para visitantes

As páginas publicadas ficam disponíveis no endereço `/site` da sua plataforma. Os visitantes podem:

* Navegar pelas páginas do site
* Conhecer os cursos e diferenciais da plataforma
* Clicar em botões de ação para se cadastrar ou entrar em contato

## Próximos passos

<CardGroup cols={2}>
  <Card title="Ver todos addons" icon="puzzle-piece" href="/pt-br/addons/overview">
    Explore outros addons
  </Card>

  <Card title="Aparência" icon="palette" href="/pt-br/admin/appearance">
    Personalize cores e logo da plataforma
  </Card>
</CardGroup>