# The Design inspector

Every control in the Design tab, group by group: section settings, size and layout, position, typography, fill, border, shadow, hover styles and the advanced section.

Select an element and open the **Design** tab. The groups below are the same for every element, except that **Section settings** appears only for sections and containers, **Typography** only for headings, paragraphs and buttons, and the layout rows depend on the Display value you choose. **Size & Layout**, **Typography** and **Background / Fill** start open. **Position**, **Border & Corners**, **Shadow**, **Hover Styles** and **Advanced** start closed.

> **Sizes:** Most Design-tab values are written to the size you are previewing: Desktop, Tablet or Mobile. Switch before you change a value that should apply to one size only. Custom CSS and Hover Styles are the exceptions, and are stored once. A small round **T** or **M** beside a control means this size overrides a larger one. Click it to remove the override. See [Responsive preview](https://www.uova.com/help/build/editor/responsive-preview).

## Section settings

A selected section or container also gets a **Section settings** group above the others. **Spacing** has four presets that set the top and bottom padding and keep the left and right padding. If there is no horizontal padding yet, 32px is used.

| Preset | Top and bottom padding |
| --- | --- |
| None | 0px |
| Compact | 48px |
| Cozy | 88px |
| Spacious | 140px |

The group's **Hide section** or **Show section** button toggles the element's visibility. A hidden element is kept in the editor, listed in Layers with a crossed-eye badge, and is hidden on the live site after you publish.

## Size & Layout

| Control | Options | Shown when |
| --- | --- | --- |
| Width, Height | A size value such as 100% or 320px. The boxes read "auto" when empty | Always |
| Min H, Max W | A minimum height and a maximum width | Always |
| Overflow | Default, Hidden, Auto, Visible, Scroll | Always |
| Display | Default, Flex, Grid, Block, Inline Flex, None | Always |
| Direction | Column, Row, Row Rev, Col Rev | Display is Flex or Inline Flex |
| Justify | Default, Start, Center, End, Between, Around | Display is Flex or Inline Flex |
| Align | Default, Start, Center, End, Stretch | Display is Flex or Inline Flex |
| Gap | A spacing value, such as 16px | Display is Flex, Inline Flex or Grid |
| Columns | The grid columns definition, such as 1fr 1fr | Display is Grid |

## Position

| Control | Options |
| --- | --- |
| Position | Static, Relative, Absolute, Fixed, Sticky |
| Top, Right, Bottom, Left | Offsets. They appear only once Position is not Static |
| Z-Index | Stacking order. The box reads "auto" when empty |
| Padding | Space inside the element |
| Margin | Space outside the element |

Padding and Margin each have a link toggle. Linked, one box takes a shorthand such as `20px 32px`. Unlinked, it shows Top, Right, Bottom and Left boxes.

## Typography

Font, Size, Weight, Line H, Spacing, Align, Transform and Color. Each is explained in [Edit text](https://www.uova.com/help/build/editor/text).

## Background / Fill

| Control | What it sets |
| --- | --- |
| Color | Background colour, with a swatch, a picker and a text field |
| Opacity | A slider from 0 to 1 in steps of 0.05. It applies to the whole element, and 1 is fully visible |
| Background | Any background value, with the placeholder "gradient or image" |
| Object Fit | Shown on images only: Default, Cover, Contain, Fill, None |

## Border & Corners

| Control | Options |
| --- | --- |
| Width | A value such as 0px |
| Style | None, Solid, Dashed, Dotted |
| Color | Border colour |
| Radius | One value for all four corners. Press the link toggle to unlink them and set TL, TR, BL and BR separately. |

## Shadow

| Preset | Box shadow set |
| --- | --- |
| None | none |
| Subtle | 0 1px 3px rgba(0,0,0,0.08) |
| Medium | 0 4px 12px rgba(0,0,0,0.1) |
| Heavy | 0 8px 30px rgba(0,0,0,0.16) |

**Custom** takes any shadow value, and **Transform** takes any transform value.

## Hover Styles

Six presets apply a hover effect, and each adds to whatever hover styles are already set. Individual boxes then set the exact values a visitor sees while pointing at the element.

| Preset | Hover effect |
| --- | --- |
| Scale Up | Grows to 105 percent |
| Lift | Moves up 4px with a soft shadow |
| Brighten | Opacity 0.85 |
| Glow | A blue glow |
| Dim | Opacity 0.7 |
| Rotate | Turns 2 degrees |

The boxes are **BG Color**, **Color**, **Transform**, **Opacity**, **Shadow** and **Border**. **Clear Hover Styles** removes them all. Hover styles are stored for the desktop size only.

## Advanced

The **Advanced** group is closed by default. Press `Cmd+Shift+I` or open the group to use it.

| Control | What it takes |
| --- | --- |
| Filter | A value such as blur(4px) saturate(120%) |
| Backdrop Filter | A value such as blur(12px) |
| Transform Origin | A value such as 50% 50% |
| Mix Blend Mode | Normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity |
| Cursor | A cursor name such as pointer |
| Custom CSS | One declaration per line. See [Custom CSS, HTML blocks and head code](https://www.uova.com/help/build/editor/custom-code). |

## Limits

- There is no Spacing tab for site-wide spacing on template sites. See [Site styles](https://www.uova.com/help/build/editor/site-styles).
- The inspector edits one selected element. To change many elements, ask the AI chat or use Site Styles.
- Resize handles are not part of the default canvas. Use Width, Height and the other size controls.
- Values are not validated. A value the browser does not understand is stored and has no visible effect.

## Common questions

**Where is Opacity, and where is Z-Index?**

Opacity is in **Background / Fill**. Z-Index is in **Position**, which starts closed.

**How do I stack a row of columns on a phone?**

Switch to Mobile in the top bar, select the container, set **Display** to Flex if it is not, and set **Direction** to Column. There is no Stack on mobile toggle.

**Why is Direction missing?**

Direction appears only when **Display** is Flex or Inline Flex. Set Display first.

**Where did my hover effect go on tablet?**

Hover styles are stored once, for desktop, and are not separate per breakpoint.

Source: https://www.uova.com/help/build/editor/design-inspector