# Editor layout

A tour of every region of the desktop editor: the top bar and its menus, the icon rail, the canvas and its toolbar, the inspector tabs and Project settings.

The desktop editor is used at 860 pixels of screen width and above. Below that, a phone layout replaces it. The regions below are the same on generated sites and template sites, except where a store template adds rail items.

*Figure: The top bar, icon rail, canvas and inspector.*

## The top bar

From left to right the top bar holds:

- The UOVA logo menu, then a workspace chip and a project chip.
- A settings cog.
- The page dropdown, for switching the page you edit. Pages with deeper views, such as a list with detail pages, show them in the same dropdown.
- The Desktop, Tablet and Mobile icons. See [Responsive preview](https://www.uova.com/help/build/editor/responsive-preview).
- Zoom controls: **-**, the percentage and **+**.
- **Undo** and **Redo**.
- A **Preview** menu.
- **Share**.
- **Upgrade**, shown only while the account is on the Free plan.
- **Publish**, which reads **Update** once the site is live.
- Your account menu, a circle with your initial.

## The menus

| Menu | What it holds |
| --- | --- |
| Logo menu | **Back to Homepage** (asks "Exit editor?" and says your work is automatically saved), **Dashboard** and **Go to Site**. |
| Workspace chip | Your email and a Personal badge. |
| Project chip | **Rename...**, **Duplicate** (opens the copy), **Star project**, **Version history**, **Export...** and **Share preview...**. |
| Settings cog | **Brand Kit** (opens Site Styles), **Pages & SEO** (opens Pages), **Domain** (opens the Publish window), **Analytics**, **Version history**, **All project settings**, and the **Stripe** integration. |
| Preview menu | **Preview in Editor** (a full-width view without editor chrome), **Preview in New Tab**, **Preview on Mobile** and **Preview on Tablet**. |
| Account menu | Your email, your plan and a credit bar reading "<n> of <limit> credits remaining", then **Go to Sites**, **Create New Site**, **Account Settings**, **Domains**, **Billing** and **Terms**. |

## The icon rail

The rail on the left opens a flyout panel. In order from the top:

| Rail item | What it does |
| --- | --- |
| UOVA AI | The AI chat. See [Edit with AI chat](https://www.uova.com/help/build/editor/ai-chat-edit). The tooltip reads "AI Chat" with its shortcut. |
| Media | An AI image and video generator with a permanent Library. See [Images, video and the media library](https://www.uova.com/help/build/editor/images-and-media). |
| Add Elements | Click-to-insert blocks, layout, text, media and buttons. See [Add elements](https://www.uova.com/help/build/editor/add-elements). |
| Layers | The element tree with a right-click menu. See [Layers, move, hide, duplicate, delete](https://www.uova.com/help/build/editor/layers-and-quick-actions). |
| Pages | Your pages. See [Pages and navigation](https://www.uova.com/help/build/pages). |
| Site Styles | Theme, colours, fonts, buttons and spacing. See [Site styles](https://www.uova.com/help/build/editor/site-styles). |
| Version history | Saved versions. See [Undo, autosave and version history](https://www.uova.com/help/build/editor/undo-autosave-history). |

Store templates (vanta, veil, terrace and plinth) add rail items for Products, Payments, Discounts, Collections, Customers, Storefront Copy and Social links.

## The canvas

The canvas shows your page as visitors see it, in a frame. Hover an element to see a faint outline with its tag. Click to select it. Double-click text to edit it in place. On any image, background image or video a **Replace image** or **Replace video** pill appears on hover.

- The selection outline is 2 pixels wide and indigo, not blue.
- Resize handles on elements do not exist on the default canvas. Size comes from the Design tab.
- Zoom runs from 25 to 200 percent in steps of 10. On a touch screen you can pinch to zoom. The command palette has **Reset zoom to 100%**. Cmd+scroll zoom and Space+drag panning do not exist.

## The selection toolbar

A small toolbar floats above the selected element, or below it near the top of the canvas. It changes with the element: text gets font, size, weight, bold, italic, underline, alignment and colour; images get Replace, a source address, alt text, object fit and corner radius; sections and containers get background colour, padding and gap. It hides while you type in the element, while a preview is open and for locked elements. Its edits always go to the Desktop styles. See [Edit text](https://www.uova.com/help/build/editor/text).

## The inspector

The right-hand inspector has five tabs. Above them it shows the selected element's type, its name and its nesting depth, such as L3, with the quick-action row beneath.

| Tab | Needs a selected element | What it holds |
| --- | --- | --- |
| Design | Yes | Layout, typography, fill, border, shadow, hover styles and advanced controls. See [The Design inspector](https://www.uova.com/help/build/editor/design-inspector). |
| Content | Yes | The element's Name and type, Text Content, Form Fields, the Link field and an Upload Media zone. |
| Images | Yes | Upload, Paste URL, Generate with AI, Alt text and Object fit. See [Images, video and the media library](https://www.uova.com/help/build/editor/images-and-media). |
| Animate | Yes | Entrance, hover, scroll and loop animations. See [Animations](https://www.uova.com/help/build/editor/animations). |
| SEO | No | Page-scoped search and sharing settings. See [SEO settings](https://www.uova.com/help/build/seo). |

With nothing selected the Design, Content, Images and Animate tabs say "Select an element" and offer "Or ask UOVA". The quick-action row holds Move up, Move down, Duplicate, Hide or Show, and Delete.

## Share, export and Project settings

**Share** and **Share preview...** open the same window. It shows a preview link, with **Copy** and **Open in new tab**, and says the link opens for you while you are signed in. To show your site to anyone else, publish it and send the live link.

**Export...** offers **Website (.zip)**, a static folder of HTML, CSS, images, fonts and scripts, and **Content (.json)**, every word, image and link. The files download as site-export.zip and content.json. A very large site can hit a size limit, and the download then says so and points to manifest.json inside for what was left out. Forms, orders, bookings and analytics cannot be exported.

**All project settings** opens a window with these tabs: General, Domains & Hosting, Analytics, Pages & SEO, Forms, Booking, Blog and Billing & Plan. `Cmd+,` opens the settings cog menu, not this window. There is no Custom Code tab. Connecting your own Google Analytics property is not available.

## Common questions

**Where did the rail go?**

Below 860 pixels of screen width the editor uses the phone layout, which has no icon rail.

**Can I drag the corners to resize an element?**

Not on the default canvas. Set Width, Height and the other size controls in the Design tab.

**Can I invite a collaborator?**

Not yet. The editor has no team or transfer feature.

**Why is Upgrade missing?**

It is shown only while the account is on the Free plan.

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