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

> Visual drag-and-drop website builder to create your platform's public showcase

## Site Builder

**Paid addon** — Create a customized public website for your EAD platform with a visual drag-and-drop editor. Ideal for creating presentation pages, course showcases and landing pages.

## Overview

The Site Builder allows administrators to create and publish web pages without technical knowledge. The visual editor offers ready-made components that can be dragged, configured and organized freely.

## How it works

<Steps>
  <Step title="Create your site">
    Go to **Admin → Site Builder** and create your platform's site. Each platform can have one site.
  </Step>

  <Step title="Add pages">
    Create as many pages as needed, each with its own custom URL (e.g., `/`, `/about-us`, `/contact`).
  </Step>

  <Step title="Edit visually">
    Use the visual editor to drag components and build the page layout. Preview how it looks on desktop, tablet and mobile.
  </Step>

  <Step title="Publish">
    Publish individual pages or the entire site. Published pages become publicly accessible.
  </Step>
</Steps>

## Available components

Drag and drop the following blocks to build your pages:

<CardGroup cols={2}>
  <Card title="Hero" icon="image">
    Main banner with title, description and action buttons. 4 variations: centered, split (text + image), background image and minimal.
  </Card>

  <Card title="Statistics" icon="chart-bar">
    Display impactful numbers like student count, courses and certificates issued.
  </Card>

  <Card title="Cards" icon="square">
    Content blocks with title and description. Useful for listing benefits, differentials or testimonials.
  </Card>

  <Card title="Logos" icon="icons">
    Partner, client or certification logo showcase. Grid display with highlight effect.
  </Card>

  <Card title="Rich text" icon="align-left">
    Fully formatted text block for detailed descriptions.
  </Card>

  <Card title="Button" icon="hand-pointer">
    Action button with custom link. Primary and secondary styles.
  </Card>

  <Card title="Headings" icon="heading">
    Headers and subtitles to organize content.
  </Card>

  <Card title="Grid and Flex" icon="table-columns">
    Grid and flexible layouts to organize components side by side.
  </Card>
</CardGroup>

### Component customization

Each component can be personalized:

* **Text** — Titles, descriptions and button labels
* **Links** — Destination URLs for buttons and cards
* **Images** — Upload background images and illustrations
* **Spacing** — Configurable internal padding (small, medium, large, extra large)
* **Style** — Visual variations per component

## Publishing flow

| Action           | What happens                                                        |
| ---------------- | ------------------------------------------------------------------- |
| **Save draft**   | Page saved but not visible to the public                            |
| **Publish page** | Individual page becomes publicly accessible                         |
| **Publish site** | Entire site becomes accessible (requires at least 1 published page) |
| **Unpublish**    | Removes public access at any time                                   |

## Integrated AI

The editor features AI assistance to help with content creation. When editing text, you can request smart suggestions to improve titles, descriptions and calls to action.

## Responsive preview

The editor allows previewing how your pages look on different devices:

* **Desktop** — Full screen
* **Tablet** — Medium screen
* **Mobile** — Small screen

<Tip>
  Always check the mobile version of your pages before publishing. Many visitors access from their phones.
</Tip>

## For visitors

Published pages are available at the `/site` route of your platform. Visitors can:

* Browse the site pages
* Learn about the platform's courses and differentials
* Click action buttons to register or get in touch

## Next steps

<CardGroup cols={2}>
  <Card title="View all addons" icon="puzzle-piece" href="/en/addons/overview">
    Explore other addons
  </Card>

  <Card title="Appearance" icon="palette" href="/en/admin/appearance">
    Customize platform colors and logo
  </Card>
</CardGroup>