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.
For the complete documentation index, see llms.txt. This page is also available as Markdown.
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.
#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.
#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 CmdShiftI 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. |
#Limits
- There is no Spacing tab for site-wide spacing on template sites. See 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
Opacity is in Background / Fill. Z-Index is in Position, which starts closed.
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.
Direction appears only when Display is Flex or Inline Flex. Set Display first.
Hover styles are stored once, for desktop, and are not separate per breakpoint.