Learn the Site Builder Basics

The Editor Interface

When you open a project, you'll see three main areas:

The Toolbar (Top)

• File: Create, save, export, or manage your project.
• Edit: Undo, redo, cut, copy, paste, and select all.
• View: Toggle panels, zoom, and responsive preview.
• Blocks: Browse built-in and custom blocks.
• Custom Library: Import custom blocks and templates.

Creating Pages

Every project starts with an index page (your homepage). Add more pages as needed.

1. Click the + button in the Pages list (left sidebar).
2. Name your page (e.g., "about", "services", "blog").
3. The page name becomes the filename when you export.
4. Links between pages work automatically.

Tip: Use clear, descriptive page names. Avoid spaces—use hyphens instead (about-us, not about us).

Adding Blocks to Your Page

Blocks are reusable sections. Start with built-in blocks, then customize.

1. Click Blocks in the toolbar.
2. Browse the library (Hero, Feature, Pricing, etc.).
3. Drag a block onto your canvas.
4. The block appears on your page, ready to edit.
5. Select the block and use the Properties panel to customize it.

Customizing Blocks

Every block is editable. Click a block, then use the Properties panel on the right to:

• Change text, headlines, and descriptions
• Upload images and set alt text
• Adjust colors, spacing, and typography
• Add links and buttons
• Configure block-specific settings

Keyboard Shortcuts

Shortcuts work when you are not typing in a text field, textarea, or select menu.

• Cmd/Ctrl + S: Save the current project.
• Cmd/Ctrl + Z: Undo the latest editor change.
• Cmd/Ctrl + Shift + Z or Cmd/Ctrl + Y: Redo.
• Delete or Backspace: Remove the selected block.
• Cmd/Ctrl + ↑ / ↓: Move the selected block up or down.
• Cmd/Ctrl + ← / →: Move the selected column left or right.
• Hold Cmd/Ctrl and drag blocks in the canvas or Layout panel to reorder them.
• Esc: Close open modals.

Page Settings

Each page can have its own settings. Right-click a page to access:

• SEO Title: Browser tab title and search engine display.
• Meta Description: Summary shown in search results.
• Page Settings: Custom CSS, scripts, or other metadata.
• Custom Domain: After export, this page's slug is its URL.

Saving and Exporting

You can save your work in the browser, export your site as HTML files for free, or use Pro for direct deployment from inside the builder.

1. Save: Stores the project in this browser's storage.
2. Download ZIP: Downloads a ZIP with all HTML, CSS, JS, images, and builder project data.
3. Backup and Restore: Keep the ZIP intact. If browser storage is cleared, choose Upload Existing Site from the builder dashboard and upload the ZIP.
4. Transfer Browsers: Download the ZIP in one browser and upload it in another browser to keep editing there.
5. Deploy from Builder: The Deploy feature publishes directly to supported hosts and requires Pro.
6. Extract the ZIP and you have a complete static site ready to deploy anywhere.

Key Concepts

Understanding these ideas will help you work faster:

• Static HTML: Your site is pure HTML/CSS/JS. No server needed. Fast and secure.
• Responsive Design: The builder creates mobile-friendly sites by default.
• Portable: Export once, deploy anywhere. You own your files.
• Blocks Over Pages: Reuse blocks across multiple pages to save time.
• No Lock-in: Export your site anytime. It's yours to keep.

Next Steps

• Build a Page: Open the builder and drag a few blocks onto a blank page.
• Explore Blocks: Try different built-in blocks to see what's available.
• Customize: Click a block and tweak text, colors, and images.
• Add More Pages: Create an about page and link to it from your home page.
• Export: File > Export to see your finished site as HTML files.