Chapter 4: The Builder — Visual Editor

How to use the PageGenius Puck editor: add widgets, edit content, manage pages, save, publish, SEO, and translate.

---

4.1 Builder Layout

+-------------------------------------------------------------------+
|  HEADER BAR                                                       |
|  [← Back]  My Project  [Home] [About] [+]  [💾 Save] [🚀 Pub]   |
+-------------------------------------------------------------------+
|                                                                   |
|  +-- Sidebar (Widgets) ----+  +-- CANVAS (Editing) --------+   |
|  |                          |  |                             |   |
|  | SEARCH                   |  |  ┌─────────────────────┐   |   |
|  | [________________]       |  |  │   HERO              │   |   |
|  |                          |  |  │   Big headline      │   |   |
|  | WIDGETS                  |  |  │   [Button]            │   |   |
|  | [Hero] [Text] [Button]   |  |  └─────────────────────┘   |   |
|  | [Map] [Form] [FAQ] ...   |  |  ┌─────────────────────┐   |   |
|  |                          |  |  │   SERVICES          │   |   |
|  |                          |  |  │   • Service 1        │   |   |
|  |                          |  |  │   • Service 2        │   |   |
|  |                          |  |  └─────────────────────┘   |   |
|  |                          |  |  ┌─────────────────────┐   |   |
|  |                          |  |  │   FORM              │   |   |
|  |                          |  |  │   [Name________]   │   |   |
|  |                          |  |  │   [Email________]  │   |   |
|  |                          |  |  │   [Submit]          │   |   |
|  |                          |  |  └─────────────────────┘   |   |
|  +--------------------------+  +----------------------------+   |
|                                                                   |
|  FOOTER BAR                                                       |
|  [Preview]  [Publish]  ⚙️ Config  🤖 AI Assistant                |
+-------------------------------------------------------------------+

Zones explained

Real screenshot:

---

4.2 Adding Widgets to the Canvas

Method 1: Drag and Drop

1. In the sidebar, grab a widget (e.g., "Hero")
2. Drag it to the canvas
3. Drop it where you want it (top, bottom, or between other widgets)

Method 2: Click to Add

1. Click a widget in the sidebar
2. It's automatically added to the end of the canvas
3. Then move it by dragging

Reordering widgets

On the canvas, each widget has a handle (two horizontal lines ☰) in the top left corner. Grab that handle and drag the widget up or down.

---

4.3 Editing a Widget

Click any widget on the canvas. A right-side panel opens with that widget's properties.

Typical properties structure

+-- Properties Panel --------+
|  HERO                       |
|                             |
|  Content                    |
|  Title: [Business title]    |
|  Subtitle: [Subtitle]       |
|  Button text: [Call Now]    |
|  Button link: [tel:+1234]   |
|                             |
|  Style                      |
|  Variant: [Gradient Blue ▼] |
|  Align: [Center ▼]          |
|  Background: [Image ▼]      |
|                             |
|  Actions                    |
|  [🗑 Delete] [📋 Duplicate]   |
+-----------------------------+

Property field types

---

4.4 Multiple Pages

PageGenius supports real multi-page sites.

Create a new page

1. In the header bar, click the "+" next to the tabs
2. Enter the page name: "About", "Services", "Contact"
3. Choose whether you want:
4. Blank page
5. Generate with AI (the AI builds the page based on your project)
6. Click "Create"

Switch between pages

Click on the tab of the page you want to edit. The canvas updates instantly.

Reorder pages

Drag the tabs left/right to change the order. This affects:

• The navigation order on the published site
• The order in sitemap.xml

Rename a page

1. Right-click on the tab → "Rename"
2. Or: click ⚙️ Config → Pages → edit the name

Delete a page

1. Right-click on the tab → "Delete"
2. Confirmation: "Delete 'About' and all its content?"

Note: You cannot delete the Home page. It's mandatory.

Slug / Path of the page

Each page has a URL within your project:

• Home → / (root)
• About → /about
• Services → /services
• Contact → /contact

To change it: ⚙️ Config → Pages → edit the "Path" field.

---

4.5 Save vs. Publish

Save (Ctrl/Cmd + S)

• Auto-saves every 3 seconds if you're editing
• Also saves manually with Ctrl/Cmd + S
• A green toast says "Saved" when complete

Publish (Ctrl/Cmd + P)

1. Click "Publish" (or Ctrl/Cmd + P)
2. Select which pages to publish (default: all)
3. Click "Confirm"
4. Wait 5-15 seconds while HTML is generated
5. We show you the live URL: ``` https://slug.mypagegenius.com https://slug.mypagegenius.com/about https://slug.mypagegenius.com/services https://slug.mypagegenius.com/contact ```

What publishing includes:

• Optimized static HTML (no React, no heavy server)
• Inline CSS (loads instantly, no waiting for external files)
• Minimal JavaScript: mobile menu, forms, analytics, scroll-reveal
• Automatic Schema.org JSON-LD (for Google)
• Automatic sitemap.xml and robots.txt
• WebP images with srcset (adapts to screen size)
• Favicon and meta tags (OG image for social media)
• Automatic Header and Footer on all pages

---

4.6 SEO Settings

Click ⚙️ Config → SEO.

Per-page fields

Global SEO (Business Info)

Click ⚙️ Config → Business Info.

PageGenius generates Schema.org automatically from this data. You don't have to touch code.

---

4.7 AI Assistant in the Builder

Click 🤖 AI Assistant in the footer bar.

What it can do

Limitations

• It cannot change widget structure (only texts)
• It cannot upload images
• It cannot modify global colors or styles

---

4.8 Copy / Paste Widgets

PageGenius allows copying and pasting widgets between pages.

1. Click on a widget → "Copy" (or Ctrl/Cmd + C)
2. Go to another page (e.g., from Home to About)
3. Click on the canvas where you want to paste → Ctrl/Cmd + V

What gets copied:

• ✅ All widget content
• ✅ Style configuration
• ❌ Uploaded images (they're referenced, not duplicated)

---

4.9 Builder Problems and Solutions

"I can't add more widgets"

• Cause: You've reached the widget limit per page (50 on Free, 100 on Pro/Agency).
• Solution: Delete unused widgets, or upgrade your plan.

"The widget I added doesn't show"

• Cause: The widget is "collapsed" (no content) or has text color equal to the background.
• Solution: Click on the widget and fill in the required fields (title, text, etc.).

"I saved but changes don't appear live"

• Cause: You saved but did NOT publish. The live site still has the previous version.
• Solution: Click "Publish". Save ≠ Publish.

"Publishing failed"

• Cause: Rendering error in some widget, or server timeout.
• Solution: Check that no widgets have empty required fields. If it persists, contact support.

"The builder feels slow"

• Cause: Too many heavy widgets (galleries with many images, videos, carousels).
• Solution: Reduce the number of images per gallery. Compress images before uploading.

"I can't find a widget"

• Cause: The widget is in the wrong category or is "Premium" and your plan is Free.
• Solution: Use the sidebar search. If it doesn't appear, it might require an upgrade.

"I want to undo a change"

• Solution: Ctrl/Cmd + Z. The builder has unlimited undo/redo.

"My page looks different in the builder vs. the published site"

• Cause: The builder uses a preview mode. Some styles render slightly differently live.
• Solution: Use "Preview" (button in footer bar) to see exactly how it will look live.

---

Chapter 4 Summary

---

Next chapter: Chapter 5: Widgets Reference