---
title: Blocks & pages
description: The Site Builder block library, plus how to add pages and edit the shared header and footer.
sidebar:
  order: 3
---

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

<Beta />

## The block library

The **Blocks** panel on the left of the editor groups every available content block into five collapsible categories. Drag any block onto the canvas to add it.

![Blocks panel showing the Sections category open](~/assets/screenshots/whp/whp-site-builder-blocks.png)

### Basic

Building-block primitives for any page:

- **Heading** — H1–H6, with the size set from the inline toolbar.
- **Text** — paragraph copy. Supports bold, italic, links, and lists.
- **Button** — call-to-action with label, link, and style.
- **Logo** — drop in your site logo from Assets.
- **Menu** — the site's main navigation (most commonly placed in the Header).
- **Footer** — quick footer wrapper (or use the dedicated Footer editor; see below).
- **Divider** — horizontal rule.
- **Spacer** — adjustable vertical whitespace.
- **Icon** — pick from a built-in icon set.
- **Star Rating** — five-star widget for reviews.
- **Social Links** — links to your social profiles with icons.
- **HTML** — drop in raw HTML when nothing else fits.

### Layout

Structural blocks that hold other blocks:

- **Section** — a full-width strip of the page.
- **Container** — a centered, max-width wrapper.
- **1 / 2 / 3 / 4 / 5 / 6 Columns** — pre-set column rows.
- **Sidebar Left / Right** — content area with a sidebar.

### Sections

Pre-composed page sections — Hero, Features, CTA, Accordion, Tabs, Pricing, Gallery, Countdown, and more. Drop one in and edit the placeholder content.

### Media

Image, video, audio, and gallery blocks. Uploaded files live in the **Assets** panel and can be re-used across pages.

### Forms

Contact form, newsletter signup, and similar input blocks.

<Aside type="tip">
  Selecting any block on the canvas swaps the right-hand panel from **Styles** to **Block settings**, so you can edit its content, colour, padding, and link target without leaving the editor.
</Aside>

## Editing blocks

Click a block on the canvas to select it. From there:

- **Inline toolbar** — quick text formatting (bold, italic, link, alignment).
- **Right panel** — block-specific settings (colour, padding, link, size, alt text, etc.).
- **Layers panel** (left) — see the block tree, drag to re-parent or re-order.

To delete a block, select it and press **Delete** on your keyboard, or use the trash control in the inline toolbar.

## Pages

Most templates ship as multi-page sites. Manage pages from the **Pages** tab.

![Pages panel with Edit Header / Edit Footer + page list](~/assets/screenshots/whp/whp-site-builder-pages.png)

The **PAGES** list shows every page on the site, with its path (e.g. `Home /index`). The currently-edited page is highlighted.

### Add a page

1. In the Pages tab, click **+ Add Page**.
2. Give the page a name (used in navigation) and confirm the slug (used in the URL).
3. The new page opens, empty, ready for blocks.

### Edit the shared header

The **Edit Header** button at the top of the Pages tab opens the header in isolation. Whatever you put there appears on every page. The same applies to **Edit Footer**.

This is the right place to drop your Menu, Logo, and Social Links blocks — once, instead of once per page.

### Reorder or delete pages

Click a page in the list to edit it. The menu beside the page name lets you rename, change the slug, duplicate, or delete. Deleting a page removes it from the site on the next publish.

<Aside type="caution">
  Renaming a slug changes the URL. If the page is already published and indexed, set up a redirect (or hold off until you can update inbound links).
</Aside>

## Layers panel

The **Layers** tab on the left shows the block tree for the current page — useful when blocks are nested inside containers and clicking on the canvas keeps selecting the wrong level. Click any layer to select that block; drag a layer to re-parent it.

## Assets panel

The **Assets** tab is where uploaded images, videos, and other media live. Drag an image directly from this panel into an image block, or use the **Upload** button to add new files.

## Related

- [Getting started](/whp/site-builder/getting-started/)
- [Styling your site](/whp/site-builder/styling/)
- [Publishing & code injection](/whp/site-builder/publishing/)

## Still stuck?

<Support />