# Editor overview

The editor is where you change a generated or template site: select an element on the canvas, then edit it from the toolbar, the inspector, the icon rail or the AI chat.

The editor has three working areas: an icon rail on the left, the canvas in the middle and the inspector on the right. A top bar above them holds the page switcher, device preview, undo and redo, and **Publish**. Click an element to select it, double-click text to type over it, and use the inspector tabs to change how the element looks and behaves.

*Figure: The regions of the desktop editor.*

## The basics in four lines

- Click selects an element. A 2 pixel indigo outline shows the selection, and a small toolbar floats above it.
- Double-click a text element to edit it in place.
- Add things by clicking cards in **Add Elements**. Nothing is dragged in from a list.
- Every change autosaves. Press **Publish** when you want the changes live.

## Four ways to change one thing

| Way | Best for | Where it writes |
| --- | --- | --- |
| The floating toolbar above the selection | Quick text, image and spacing tweaks | Always the Desktop styles |
| The inspector tabs (Design, Content, Images, Animate, SEO) | Exact values for one element | Design tab: the size you are previewing |
| Site Styles in the icon rail | Colours and fonts, plus button shape where the template supports it | The whole site |
| The AI chat | Changes to many elements, or wording you would rather describe | Content and the Desktop styles |

## Every editor guide

- [Editor layout](https://www.uova.com/help/build/editor/anatomy): Every region, the top bar, the menus and the rail.
- [Edit text](https://www.uova.com/help/build/editor/text): In-place editing, the toolbar, typography and fonts.
- [Buttons and links](https://www.uova.com/help/build/editor/buttons-and-links): Add a button, set its label and where it goes.
- [Images, video and media](https://www.uova.com/help/build/editor/images-and-media): Replace, upload, generate and organise media.
- [The Design inspector](https://www.uova.com/help/build/editor/design-inspector): Every control in the Design tab, group by group.
- [Animations](https://www.uova.com/help/build/editor/animations): Entrance, hover, scroll and loop animations.
- [Add elements](https://www.uova.com/help/build/editor/add-elements): What each card inserts, and where it lands.
- [Sections](https://www.uova.com/help/build/editor/sections): Hide, delete and move sections, and what is pinned.
- [Layers, move, hide, duplicate, delete](https://www.uova.com/help/build/editor/layers-and-quick-actions): The layers panel and the quick-action row.
- [Keyboard shortcuts](https://www.uova.com/help/build/editor/keyboard-shortcuts): The full table, plus when shortcuts do not fire.
- [Responsive preview](https://www.uova.com/help/build/editor/responsive-preview): Desktop, Tablet and Mobile, and how overrides cascade.
- [Undo, autosave and version history](https://www.uova.com/help/build/editor/undo-autosave-history): The undo history, autosave and saved versions.
- [Edit with AI chat](https://www.uova.com/help/build/editor/ai-chat-edit): What the chat can change and what it costs.
- [Forms and contact blocks](https://www.uova.com/help/build/editor/forms): Add a form, choose fields and set the recipient.
- [Site styles](https://www.uova.com/help/build/editor/site-styles): Theme, colours, fonts, buttons and spacing.
- [Custom CSS, HTML blocks and head code](https://www.uova.com/help/build/editor/custom-code): What code you can add, and what is not allowed.

## Related areas

Pages and their navigation are covered in [Pages and navigation](https://www.uova.com/help/build/pages). Search settings are in [SEO settings](https://www.uova.com/help/build/seo). Going live is in [Publish your site](https://www.uova.com/help/build/publish/publish-your-site).

> **Phone layout:** Below 860 pixels wide the editor shows a phone layout instead: no icon rail, with Chat and Preview tabs along the bottom.

Source: https://www.uova.com/help/build/editor