Page Builder Fundamentals

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:

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.

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:

• 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.