Design Controls

The Design tab in the right sidebar provides breakpoint-aware styling controls. All properties apply to the selected element and can vary by viewport size.

Layout

Control how the element arranges its children:

• display — block, flex, grid, inline, inline-block, none
• flexDirection — row, column, row-reverse, column-reverse
• flexWrap — nowrap, wrap, wrap-reverse
• justifyContent — start, center, end, space-between, space-around, space-evenly
• alignItems — start, center, end, stretch, baseline
• gap — Spacing between flex or grid children
• gridTemplateColumns / gridTemplateRows — Grid column and row definitions
• divideX / divideY — Dividers between children

Typography

Control text appearance:

• fontFamily — Font family from your installed fonts (see Fonts for adding Google Fonts and custom fonts)
• fontWeight — Normal, bold, or numeric weight (available weights depend on the selected font)
• fontSize — Text size
• textAlign — left, center, right, justify
• letterSpacing — Character spacing
• lineHeight — Line height
• color — Text color (solid, linear gradient, radial gradient, or image background clipped to text)
• textTransform — none, uppercase, lowercase, capitalize
• textDecoration — Add via the ”+” menu: underline with configurable color, thickness, and offset

For text layers, the color picker includes an Image tab where you can set a background image that clips to the text shape. Choose an image from the file manager, enter a custom URL, or bind to a CMS field. Configure size, position, and repeat settings for the image.

Spacing

Set margin and padding using the visual box-model editor. The diagram shows margin (outer ring) and padding (inner ring), with inline inputs for each side.

• margin — All sides or individual top, right, bottom, left
• padding — All sides or individual sides
• Shift + drag — Update all sides at once
• Alt + drag — Update opposite sides together (top/bottom or left/right)

Values support px, rem, em, and percentage units.

Sizing

Control element dimensions:

• width / height — Explicit dimensions (px, %, auto)
• minWidth / minHeight — Minimum constraints
• maxWidth / maxHeight — Maximum constraints
• aspectRatio — Add via the ”+” menu with presets (Square, Video 16:9, 4:3, 3:4) or a custom ratio
• objectFit — cover, contain, fill, none (for images)
• gridColumnSpan / gridRowSpan — Grid cell spanning

Borders

Add and customize borders:

• borderWidth — All sides or individual sides
• borderStyle — solid, dashed, dotted, none
• borderColor — Border color
• borderRadius — Corner radius (all or per corner)

Outline — Add via the ”+” menu in the Borders section. Configure outline width, color, and offset. Outlines render outside the border and do not affect layout, making them useful for focus indicators and decorative effects.

Dividers — Add via the ”+” menu in the Borders section. Dividers create lines between child elements. Configure direction (vertical or horizontal), style (solid, dashed, dotted, double), and color. Remove dividers with the X button.

Backgrounds

Set element backgrounds:

• backgroundColor — Solid color
• backgroundImage — URL or gradient
• backgroundSize — cover, contain, auto, or explicit dimensions
• backgroundPosition — top, center, bottom, or coordinates
• backgroundRepeat — repeat, no-repeat, repeat-x, repeat-y

Effects

Effects are addable and removable. Use the ”+” menu in the Effects section header to add individual effects, and the X button to remove them.

• opacity — 0 to 1
• boxShadow — Add via ”+” menu; configure shadow offset, blur, spread, and color
• blur — Add via ”+” menu; blur filter on the element
• backdropBlur — Add via ”+” menu; blur behind the element
• filter — CSS filter values

Position

Control positioning and stacking:

• position — static, relative, absolute, fixed, sticky
• top / right / bottom / left — Offset values
• zIndex — Stacking order

Layer Styles

Layer Styles are reusable saved style sets. You apply them to elements to keep design consistent across the site.

Create — Style an element, then use the context menu or Design panel to save the current styles as a Layer Style. Give it a name.

Apply — Select an element and choose a Layer Style from the panel. The element receives all properties from that style.

Detach — Remove the Layer Style link from an element. The element keeps its current appearance but no longer updates when the style changes.

Edit — Edit a Layer Style to update all elements that use it. Changes propagate to every instance.