# Builder Basics

> Learn the drag and drop website builder - the canvas, adding elements, the Inspector, the Outline, and how saving relates to going live.

Every page in Seedly Sites is built in the visual builder: a real drag and drop website builder with a live canvas, not a template picker. This page covers the parts of the builder you will touch on every page.

---

## The Builder Layout

Open any page for editing and you get three working surfaces:

| Surface | What it does |
|---------|-------------|
| **Canvas** | A live preview of the page. Click anything to select it, drag to reorder, and see changes as you make them. |
| **Outline** | The page as a tree: Sections, Rows, Columns, and the elements inside them. Use it to select or move things that are hard to click on the canvas. |
| **Inspector** | The settings panel for whatever is selected. Fields are grouped into tabs, typically **Content**, **Settings**, and **Advanced**. |

The canvas also has a device-width switcher so you can preview the page at phone, tablet, and desktop widths while you edit.

<DocShot src="/sites-docs-screens/builder-canvas.webp" alt="The visual builder with the outline panel on the left and the live page canvas on the right" />

---

## The Page Structure

Pages follow a strict hierarchy, top to bottom:

1. **Section** - a full-width horizontal band of the page
2. **Row** - a layout grid inside a Section (Whole, Halves, Thirds, and more)
3. **Column** - a slot inside a Row
4. **Elements** - the content itself: headings, text, images, buttons, grids, and so on

This structure is what keeps every page responsive. You never position anything with pixel coordinates; you place elements into columns and let the layout system handle each screen size. See [Sections](/docs/help/sections) and [Rows and Columns](/docs/help/rows-columns) for the layout controls.

---

## Adding Elements

1. Select the Column (or container element) you want to add to
2. Click the add button to open the element library
3. Pick an element tile - the library is organized with layout pieces first, then content elements and blocks
4. The element appears on the canvas with placeholder content; select it and edit in the Inspector

The library also has a **Presets** tab (ready-made sections like heroes and feature grids) and a **My Presets** tab (sections you have saved yourself). See [Presets and Saved Blocks](/docs/help/presets-saved-blocks).

<DocShot src="/sites-docs-screens/builder-element-library.webp" alt="The element library with layout pieces, blocks, and content elements to add to a page" />

---

## Selecting and Reordering

- **Click** an element on the canvas to select it and open its Inspector
- **Drag** elements on the canvas or in the Outline to reorder them
- Container elements (Buttons, Accordions, Grids, Slideshows) manage a list of child items; the Inspector shows the item list so you can add, reorder, and remove items

If you cannot grab something on the canvas, use the Outline - every node on the page is selectable there.

---

## Undo and Redo

The builder keeps a full edit history for your session:

- **Cmd/Ctrl+Z** - undo
- **Cmd/Ctrl+Shift+Z** (or **Ctrl+Y**) - redo

Standard text editing shortcuts keep working inside text fields.

---

## Styling: Use Native Fields First

Almost everything you want to change has a purpose-built field in the Inspector:

- Section **Style**, **Text Color**, **Max Width**, and padding scales
- Row **Layout**, gaps, and alignment
- Column widths per breakpoint, background, and padding
- Heading **Style** (size), **Color**, and **Text Alignment**
- Button **Style** and **Size**

Use those native fields. They keep the page consistent with the site's brand tokens, they respond correctly on every device, and they stay editable by anyone who opens the page later.

### The Advanced Tab

Every element carries the same Advanced bundle:

| Field | Purpose |
|-------|---------|
| **Name** | A label for this element inside the builder (shows in the Outline) |
| **Status** | Disable the element so it stays in the page but does not render on the live site |
| **ID** | A custom HTML id (useful for anchor links) |
| **Classes** | One or more CSS class names, separated by spaces |
| **Attributes** | Extra HTML attributes, one per line as name=value |
| **CSS** | Custom CSS scoped to this element only |

The **CSS** box is the escape hatch, not the default. Reach for it only when no native field models what you need. If you find yourself writing CSS for padding, colors, alignment, or widths, there is almost always a native field that does it better.

The **Classes** field is how you apply your site's shared brand classes so one global change updates every element that uses them - see [Brand DNA](/docs/help/brand-dna).

---

## Saving, Publishing, and Going Live

This is the most important concept in the whole product:

1. **Save** stores your work in the CMS
2. **Publish** marks the page as the version that should be live
3. **Deploy** actually rebuilds the static site and ships it to hosting

Publishing does not change the live website. Nothing changes the live website until someone clicks **Deploy**. Deploys are always a deliberate, manual step - there is no automatic deploy when you save or publish. This is a safety feature: you can edit and publish all afternoon, then ship everything in one reviewed deploy.

Read [Preview, Publish, and Deploy](/docs/help/preview-publish) for the full workflow.

---

## Summary

| Task | Where |
|------|-------|
| Add an element | Select a Column, click add, pick from the library |
| Change content | Select the element, use the **Content** tab |
| Change styling | Select the element, use the **Settings** tab (native fields first) |
| Anchor links, classes, custom CSS | **Advanced** tab |
| Reorder anything | Drag on the canvas or in the Outline |
| Undo a mistake | Cmd/Ctrl+Z |
| Make it live | Save, publish, then **Deploy** (manual, always) |

---
Source: https://seedlysites.com/docs/help/builder-basics