# Page Builder Fundamentals

Learn how to visually design your website pages using the drag-and-drop Page Builder canvas and Block Palette.

The **Page Builder** is Club Creator's drag-and-drop editor. It enables you to assemble professional web pages by arranging configurable web components called **Blocks** on a live canvas.

## Step 1: The Page Builder Interface

When you open a project in the builder, you will see three main workspace regions:

![Page Builder Editor Canvas](/images/guides/builder-fundamentals/step-1-builder-canvas.png)

1. **Top Header Bar**: Switch between **Site Pages**, toggle **Canvas Viewport** screen sizes (Desktop, Tablet, Mobile), and save or publish changes.
2. **Left Block Palette**: Browse registered block components grouped by category with visual wireframe previews.
3. **Center Canvas**: The visual workspace where blocks are rendered and can be reordered via drag-and-drop.

## Step 2: Adding Blocks from the Palette

The left sidebar lists available block types categorized under **Header**, **Hero**, **Content**, **Forms**, **Collections**, and **Footer**.

![Block Palette with Wireframe Previews](/images/guides/builder-fundamentals/step-2-block-palette.png)

To add a section to your active page:
- Click the **+ (Add)** button on any block card to insert it at the bottom of the canvas.
- Or click and drag a block directly to the exact position you want on the canvas.

## Step 3: Selecting and Managing Blocks

Clicking on any block on the canvas highlights it with a colored selection border.

Hovering over a block reveals a quick toolbar:
- **Drag Handle**: Click and hold to drag the block up or down to reorder sections.
- **Duplicate**: Clones the block and its configured settings.
- **Delete**: Permanently removes the block from the active page.

## Step 4: Responsive Screen Preview

Use the **Canvas Viewport** switcher in the top toolbar to preview how your website looks across different device dimensions:

![Viewport Switcher](/images/guides/builder-fundamentals/step-5-viewport-switcher.png)

- **Desktop**: Full-width desktop browser layout.
- **Tablet**: Fixed 768px tablet layout.
- **Mobile**: Fixed 375px smartphone portrait layout.

## Step 5: Saving your Changes

Changes made on the canvas are held in a **Block-Level Draft**. Click the **Save** button in the header (or press `Cmd + S` / `Ctrl + S`) to persist your changes to the project's **Draft Configuration**.