---
title: Getting started
description: Open Site Builder, pick a template or start from scratch, make your first edits, and publish.
sidebar:
  order: 2
---

import { Steps, Aside } from '@astrojs/starlight/components';
import Beta from '~/content/partials/beta-callout.mdx';
import SignIn from '~/content/partials/signing-in.mdx';
import Support from '~/content/partials/support-link.mdx';

<Beta />

## Before you start

- A **site** added in WHP that you want Site Builder to manage. Any container type works — Site Builder writes its output to the site's docroot when you publish, so a **Static HTML** site is the cleanest fit.
- About 10–15 minutes for your first walkthrough.

## Sign in to WHP

<SignIn />

## Open Site Builder

<Steps>

1. In the sidebar, click **Site Builder**. You'll see a card for each site on your account.
   ![Site Builder landing — list of your sites](~/assets/screenshots/whp/whp-site-builder-landing.png)

2. Click **Build Site** on the site you want to edit. The visual editor opens.

</Steps>

## Pick a template (or start blank)

The editor opens onto an empty canvas, but the fastest way to get a real-looking site is to start from one of the 16 included templates.

<Steps>

1. Click **Templates** in the top bar.
   ![Templates picker](~/assets/screenshots/whp/whp-site-builder-templates.png)

2. Browse the categories: **Business**, **Creative**, **Personal**, **Community**, or **All**. Each card shows the template name, a tag (Business / Creative / etc.), a short description, and the page count.

3. Click a template to preview and apply. Most templates ship as multi-page sites with their own header, footer, and a few sample pages so you can see structure right away.

</Steps>

<Aside type="tip">
  Applying a template replaces the current site contents. If you've already made edits, save first (or duplicate the site) so you can roll back.
</Aside>

If you'd rather start from scratch, skip Templates — the empty canvas with just a Header placeholder is the right starting point.

## Make your first edit

The editor has three panels:

- **Left:** the **Blocks** panel (also **Pages**, **Layers**, **Assets**).
- **Centre:** the canvas — what your visitors will see.
- **Right:** the **Styles** panel.

<Steps>

1. From the **Blocks** panel, drag a **Heading** block onto the canvas.

2. Click the heading on the canvas. An inline toolbar appears; type to replace the text.

3. Drag a **Text** block underneath and add a sentence or two.

4. Drag a **Button** block next. Click it, set its label and link in the right-side panel.

</Steps>

You've built your first page. The header at the top is the **shared header** — every page on the site uses it.

## Preview the result

The top bar has three device toggles next to the site name: **desktop**, **tablet**, **mobile**. Click each to see how your page looks at that width. The **Preview** button opens a full-window preview without the editor chrome.

## Save vs. publish

Two distinct actions:

- **Save** stores a draft. Your changes are kept on the server but the live site is unchanged.
- **Publish** writes the rendered HTML and assets to the site's docroot. Your visitors see the new version on the next request.

<Aside type="tip">
  Save often as you work — every Save is a checkpoint. Publish only when you're happy with what you've built.
</Aside>

## Get back to the Site Builder list

Click **Back to Panel** in the top-left of the editor. You can come back any time and continue from where you left off.

## What's next

- **[Blocks & pages](/whp/site-builder/blocks-and-pages/)** — the rest of the block library, and how to add more pages.
- **[Styling your site](/whp/site-builder/styling/)** — set your colours and fonts in one place.
- **[Publishing & code injection](/whp/site-builder/publishing/)** — add analytics, custom fonts, or global CSS.

## Still stuck?

<Support />