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

# Site builder

> Build and customize your pages by stacking and composing blocks. Powerful under the hood, simple to use.

Site builder is the visual editor that controls how your Sherpo **pages** (home page, landing pages, and product pages), along with your **header** and **footer**, are structured.

You do not design with code or fixed templates. Instead, you build your site by combining **blocks**, each representing a self-contained section.

Everything you see on a page is a block, ordered vertically from top to bottom. Reordering blocks changes the layout instantly.

***

## Open Site builder

* Sign in to [Sherpo Dash](https://dash.sherpo.io)
* Open your space
* Navigate to **Site → Site builder**

***

## Pages

In addition to your homepage, Sherpo lets you create dedicated pages such as **/pricing**, **/features**, **/courses**, or any custom page you need.

<Frame>
  <img className="rounded-xl mr-auto" src="https://mintcdn.com/sherpo/bDZl7OERfEKGuq5y/images/site-builder-initial.png?fit=max&auto=format&n=bDZl7OERfEKGuq5y&q=85&s=4a208fd750e2a31fc7ebed3e8e4e3248" alt="Sherpo pages editor" title="Pages home" width="2318" height="1648" data-path="images/site-builder-initial.png" />
</Frame>

All **pages use the same block-based editor**, so you can design each page visually without writing code. Pages can also be **imported or exported between Sherpo spaces**.

### Create a new page

1. Navigate to **Site → Pages**
2. Click **New Page**
3. Enter a **Title** and **URL Slug**
4. (Optional) Add a **Description**
5. Optionally toggle **Add to header** to display the page in your top navigation (up to **3 pages** can appear in the header)
6. Click **Create Page**

***

## How Site builder works

Inside each page you will see:

* A list of blocks on the left
* A live preview of your site on the right
* Device and theme toggles at the top of the preview

A Sherpo page is a **vertical stack of blocks**.

* Blocks render from top to bottom
* Each block is independent
* Reordering a block never breaks other blocks
* Header and footer are global sections
* Everything in between is fully customizable

Think of Site builder like a list. Changing the order of items changes the page, and changes are applied only after clicking **Update**.

<Frame>
  <img className="rounded-xl mr-auto" src="https://mintcdn.com/sherpo/fpZ-p-AqvUed1O9r/images/page-builder-initial.png?fit=max&auto=format&n=fpZ-p-AqvUed1O9r&q=85&s=7784ae4b7a8fe2e66a64a09c648b7655" alt="Sherpo layout editor showing blocks stacked vertically" title="Layout overview" width="2770" height="648" data-path="images/page-builder-initial.png" />
</Frame>

***

### The editor and live preview

Site builder is split into two panels:

* **Left side:** block list and editing controls
* **Right side:** a **live preview** of your page that updates as you add, remove, hide, or reorder blocks

<Frame>
  <img className="rounded-xl mr-auto" src="https://mintcdn.com/sherpo/PBkvAFgLLXzeeEqb/images/site-builder-home.png?fit=max&auto=format&n=PBkvAFgLLXzeeEqb&q=85&s=0c2b92272e810d312c7a8badead67216" alt="Site Builder Home" title="Site Builder Home" width="2880" height="1696" data-path="images/site-builder-home.png" />
</Frame>

To find a block on the page, click **Highlight in Preview** on a block. Sherpo highlights the block in the preview (in blue) so you can quickly locate it in the layout.

At the top of the preview you can also:

* Toggle **Desktop**, **Tablet**, and **Mobile** to see how the page appears across devices
* Toggle **Light** and **Dark** mode to preview both themes

***

## Blocks explained

Blocks are the **building blocks** of your site. Each block represents a section of content such as text, images, videos, product listings, pricing tables, or FAQs.

All blocks share the same core behavior.

### What you can do with any block

For every block you can:

* Move it up or down
* Add a block before or after it
* Hide it (except global sections like the header and footer)
* Delete it (except protected blocks)

<Frame>
  <img className="rounded-xl mr-auto" src="https://mintcdn.com/sherpo/FXo28HcDUdksum-e/images/blocks-moveoptions.png?fit=max&auto=format&n=FXo28HcDUdksum-e&q=85&s=7a411b0375e6f10594d5f84455d889b1" alt="Blocks move options" title="Blocks move options" width="1064" height="1112" data-path="images/blocks-moveoptions.png" />
</Frame>

<Info>
  Hiding a block is useful for experimentation. Hidden blocks are not visible on your live site.
</Info>

### Hero block

The **Hero block** is the first section of a page and is included by default in every layout.

It is designed to introduce the page with a clear headline and primary actions. While the Hero block cannot be deleted, it **can be hidden** if you prefer to begin your page with another section.

Inside the Hero block you can configure the titled section (eyebrow, title, subtitle, description, alignment) and add **Highlights**, which appear as short bullet points under the hero content, commonly used to emphasize benefits. The Hero block also supports **call-to-action buttons (CTAs)**. Each CTA includes:

* **Label** — Button text
* **URL** — Destination link
* **Style** — Primary or Ghost
* **Arrow** — Optional arrow icon indicator

You can add multiple CTAs and reorder them. A common pattern is:

* **Primary CTA** → main action (e.g. *Start now, it's free*)
* **Secondary CTA** → supporting action (e.g. *Compare plans*)

***

### Add a new block

Click **Add block** to insert a new block.

Blocks are grouped into categories:

* **Content**
* **Data**
* **Layout**
* **Products**
* **Utility**

***

## Block categories

Below is a quick overview of what each block type is best used for.

***

### Content blocks

Use Content blocks to add standalone elements.

<Frame>
  <img className="rounded-xl mr-auto" src="https://mintcdn.com/sherpo/FXo28HcDUdksum-e/images/blocks-content.png?fit=max&auto=format&n=FXo28HcDUdksum-e&q=85&s=69ce933a4e716293b5a126a1db5630ab" alt="Blocks content" title="Blocks content" width="1996" height="766" data-path="images/blocks-content.png" />
</Frame>

* **Image** — Add a standalone image for visuals, screenshots, or galleries
* **Video** — Upload a standalone video using Sherpo’s [custom video player](https://docs.sherpo.io/products/course#custom-player)
* **YouTube** — Embed a YouTube video
* **Markdown** — Write [long-form text](https://docs.sherpo.io/dashboard/markdown) such as landing page copy, policies, or explanations

<Tip>
  For most landing pages, use a Markdown block for the main copy, then combine it with Image or Video blocks.
</Tip>

***

### Layout blocks

Layout blocks structure and organize other blocks.

<Frame>
  <img className="rounded-xl mr-auto" src="https://mintcdn.com/sherpo/yLUHw6QX5fBqQtB7/images/blocks-layout.png?fit=max&auto=format&n=yLUHw6QX5fBqQtB7&q=85&s=4a89e209dba7539da71ef6ce5e106d51" alt="Blocks Layout" title="Blocks Layout" width="1998" height="838" data-path="images/blocks-layout.png" />
</Frame>

* **Card** — Wrap other blocks inside a styled container
* **Titled section** — Add eyebrow, title, subtitle, description, and nested content
* **Side by side** — Create a two-column layout
* **Carousel** — Display scrollable images or videos
* **Grid** — Create customizable column layouts responsive across devices
* **Theme-Aware** — Show different blocks depending on light or dark mode
* **Expandable** — Collapsible content sections

<Note>
  Layout blocks can contain other blocks. In most cases, blocks must be created inside the layout block rather than dragged into it.
</Note>

***

### Products blocks

Products blocks display items from your Sherpo catalog.

<Frame>
  <img className="rounded-xl mr-auto" src="https://mintcdn.com/sherpo/bxOxTWT9FYD_m0V5/images/blocks-product.png?fit=max&auto=format&n=bxOxTWT9FYD_m0V5&q=85&s=b020e9955a3402f41a0eb0d23a8f3eea" alt="Blocks Product" title="Blocks Product" width="1998" height="344" data-path="images/blocks-product.png" />
</Frame>

* **Line Products** — Display all products with line visibility
* **Grid Products** — Display all products with grid visibility
* **Product Card** — Feature a single selected product

<Note>
  Product order and visibility are managed in **Products**, not in Site builder.
</Note>

***

### Utility blocks

Utility blocks control spacing and layout helpers.

<Frame>
  <img className="rounded-xl mr-auto" src="https://mintcdn.com/sherpo/bxOxTWT9FYD_m0V5/images/blocks-utility.png?fit=max&auto=format&n=bxOxTWT9FYD_m0V5&q=85&s=63791a5c48353769992f7c56a75186c4" alt="Blocks Utility" title="Blocks Utility" width="1998" height="330" data-path="images/blocks-utility.png" />
</Frame>

* **Horizontal rule** — Add a divider line (solid, dashed, or dotted)
* **Spacer** — Add adjustable vertical spacing
* **Background image** — Add a subtle full-page background image

***

### Data blocks

Data blocks display structured information.

<Frame>
  <img className="rounded-xl mr-auto" src="https://mintcdn.com/sherpo/FXo28HcDUdksum-e/images/blocks-data.png?fit=max&auto=format&n=FXo28HcDUdksum-e&q=85&s=6bc46ba70661ffdf88f7a98234a8a682" alt="Blocks data" title="Blocks data" width="1998" height="602" data-path="images/blocks-data.png" />
</Frame>

* **Stats** — Display metrics and key numbers
* **FAQ** — Collapsible frequently asked questions
* **Pricing** — Build SaaS-style pricing tables
* **Timeline** — Display sequential events or milestones
* **Contact** — Show contact information
* **Logos** — Display partner or customer logos

***

## Compose sections with blocks

Complex sections are created by combining simple blocks.

A common structure:

* Titled section
* Side by side layout
* Markdown content on the left
* Image or video on the right
* Spacer
* Pricing or FAQ

You are not configuring a single large component. You are composing **reusable blocks**, which makes pages easier to update later.

For inspiration, explore our [templates](https://docs.sherpo.io/dashboard/templates).

***

## Header and footer

The **header** appears at the top of every page and cannot be moved or deleted.

<Frame>
  <img className="rounded-xl mr-auto" src="https://mintcdn.com/sherpo/DaBq2jIklm7bDrUV/images/header-block.png?fit=max&auto=format&n=DaBq2jIklm7bDrUV&q=85&s=4326eb232267f0f631a1529a1f4a489b" alt="Header block" title="Header block" width="998" height="444" data-path="images/header-block.png" />
</Frame>

The **footer** contains legal links, theme toggles, social links, and the **Powered by Sherpo** badge.

<Frame>
  <img className="rounded-xl mr-auto" src="https://mintcdn.com/sherpo/zCbTLwG3MwqnO0cG/images/footer-block.png?fit=max&auto=format&n=zCbTLwG3MwqnO0cG&q=85&s=bce62a495195ad9adae97ec21d7b8e6d" alt="Footer configuration panel" title="Footer settings" width="998" height="1140" data-path="images/footer-block.png" />
</Frame>

The **Powered by Sherpo** badge is enabled by default and can be disabled on the **Ultra plan**.

***

## Best practices for creators

* Start with one clear goal per page
* Pair explanations with visuals using Side-by-side sections
* Add social proof early using Logos or Stats
* Place FAQs near the bottom
* Keep pages scannable with clear headings and spacing

***

### Common mistakes

If your page does not look as expected, check these first.

* **A block is hidden:** Hidden blocks do not appear on your live site.
* **Changes are not live:** Changes appear on your site only after clicking **Update**. Creators on the **Start plan** can edit and preview pages, but changes appear on the live site only after upgrading.
* **Content was added to the wrong block:** Some layout blocks contain internal content areas. Ensure you are editing the correct block.

***

## Availability

Site builder availability depends on your plan.

* **Pro** and **Ultra** users can publish changes to their live site
* **Start** users can build and preview layouts, but publishing requires an upgrade

<Note>
  Start users can freely experiment. Any page you build will be ready to publish immediately after upgrading.
</Note>

***

## FAQ

<AccordionGroup>
  <Accordion title="Who can use Site builder and publish changes?">
    Pro and Ultra users can publish page changes to their live site. Start users can design and preview layouts but publishing requires an upgrade.
  </Accordion>

  <Accordion title="Can I reorder blocks freely?">
    Yes. Blocks can be moved up or down at any time.
  </Accordion>

  <Accordion title="How do I find a block in the preview?">
    Click **Highlight in Preview** to locate the block in the page preview.
  </Accordion>

  <Accordion title="Can I preview mobile and dark mode?">
    Yes. Use the toggles at the top of the preview to switch between devices and themes.
  </Accordion>

  <Accordion title="Does hiding a block delete its content?">
    No. Hidden blocks keep their content and can be restored later.
  </Accordion>

  <Accordion title="Can I nest blocks inside other blocks?">
    Yes. Layout blocks such as Card, Titled section, Side by side, Carousel, Grid, Theme-Aware, and Expandable can contain other blocks.
  </Accordion>

  <Accordion title="Why can’t I move or delete the header or footer?">
    The header and footer are global sections used across all pages.
  </Accordion>

  <Accordion title="Is the Powered by Sherpo badge mandatory?">
    No. You can disable it on the Ultra plan.
  </Accordion>
</AccordionGroup>