Skip to main content

Page Builder Tool

The Page Builder is a visual drag-and-drop editor for creating pages without code.

Interface Overview​

The editor has three main areas:

Left Panel​

  • Block library - List of available blocks to drag and add

Working Area (Center)​

  • Live preview - See changes in real-time
  • Click to select - Select blocks to edit
  • Drag to reorder - Move blocks up/down

Right Panel​

  • Block settings - Configure selected block
  • Style options - Colors, spacing, fonts
  • Content editing - Text, images, links

Global Tools​

Change Font​

  1. Click Settings (gear icon) in toolbar
  2. Select Typography
  3. Choose heading font
  4. Choose body font
  5. Changes apply site-wide

Change Primary Color​

  1. Click Settings in toolbar
  2. Select Colors
  3. Pick primary color
  4. Secondary colors auto-generate
  5. Preview changes live

Changing Pages​

  1. Use Pages dropdown in left panel
  2. Or click page name in breadcrumb
  3. Changes auto-save when switching

Live Data Toggle​

Toggle between:

  • Sample data - Placeholder content for design
  • Live data - Actual community content

Useful for previewing how real content looks.

AI Generation​

Generate with AI​

  1. Select a block
  2. Click AI button (sparkle icon)
  3. Describe what you want
  4. AI generates content
  5. Review and apply

AI Can Generate​

  • Hero section copy
  • Feature descriptions
  • Testimonial text
  • Call-to-action messages
  • FAQ content

Next Steps​

  1. Learn block editing
  2. Publish your site