From an idea
to a working site.

Default

0 on all sides for newly added nodes.

Values and units

Non-negative CSS pixels. Uniform padding uses one value; Vertical and horizontal padding uses two; Individual side padding uses top, right, bottom, left.

Adds space inside the node, between its edge and its content. The value-count buttons change which sides you edit together.

Example. Use vertical 24 and horizontal 16 for a section. Use four values when its bottom needs more breathing room.

Interactions and limitations. Padding is not space between siblings: use the parent Frame’s Gap for that. Padding contributes to a Hug size and reduces the content space inside a Fixed size.

Default

No explicit color; the background shows through.

Values and units

Custom hex color, named project color, or theme color selected through Fill color; None clears the selection.

Paints the container background, including padding. A theme reference follows the selected theme’s Light and Dark values.

Example. Give a header a named background color, then check both theme appearances.

Interactions and limitations. This appearance control is different from Fill sizing. Editing a named color or theme value changes other consumers; choosing a custom color affects this node.

Default

0px.

Values and units

Corner radius (px): a non-negative number.

Rounds the corners of the container’s border and background.

Example. Use 12px on a card with a contrasting Fill.

Interactions and limitations. Radius alone does not promise that overflowing child content is clipped. Check children and generated output, especially media.

Default

No explicit color.

Values and units

Custom, named project, or theme color; None clears it.

Chooses the line color around the container.

Example. Choose a subtle named color with Solid and a 1px border.

Interactions and limitations. Border controls are omitted on the page’s root Frame. A visible border also needs a non-None style and positive width.

Default

None.

Values and units

None, Solid, Dashed, or Dotted.

Chooses the stroke pattern around the container.

Example. Use Solid for a card edge and Dashed for an intentionally outlined callout.

Interactions and limitations. Available on nested containers. None suppresses the border even when color and width have values.

Default

0px.

Values and units

Non-negative CSS pixels.

Sets the thickness of the border on all sides.

Example. Set 1px with Solid and a contrasting border color.

Interactions and limitations. Available on nested containers. Border thickness uses space inside the CSS border box.

Default

Hug on newly added containers. A root Frame with no saved sizing falls back to Fill.

Values and units

Width sizing: Hug, Fill, or Fixed. Width fixed size appears for Fixed and accepts non-negative CSS pixels.

Hug follows the content; Fill uses available parent space; Fixed requests an explicit width.

Example. Use Fill for a section within a page and Hug for a short button label. Compare the three labeled examples.

Interactions and limitations. Fill depends on the parent’s layout and available space. It is not a viewport unit. Fixed document roots use their document dimensions instead of these controls.

Default

Hug on newly added containers. A root Frame with no saved sizing falls back to Fill. Selecting Viewport first uses 100dvh.

Values and units

Height sizing: Hug, Fill, Fixed, or Viewport. Height fixed size accepts nonnegative CSS pixels. Viewport height (dvh) appears for Viewport and accepts any finite nonnegative number, including decimals.

Hug grows with normal-flow children and padding; Fill takes available parent space; Fixed requests an explicit height. Viewport requests a minimum height relative to the dynamic browser viewport and grows when content needs more space.

Example. Use Viewport 100 for a full-screen introduction, 50 for half a viewport, or 150 for one and a half. A 100dvh Frame is at least 844px tall in an 844px-high viewport, even when nested in a shorter Frame. Switch modes in the example and enable longer content.

Interactions and limitations. Viewport emits min-height: <value>dvh and height: auto. Mobile browser chrome can change the dynamic viewport. The editor uses the logical device height (or the Responsive canvas fold height), independently of zoom and camera panning. Fixed pixels and the Viewport value are retained separately when switching modes. Fill depends on available parent height; a minimum alone does not provide a definite height for percentage-sized descendants. Absolute children do not contribute normal-flow height. Padding and borders are included in the minimum; constrained ancestors and Overflow can still clip content. Viewport is available in Sites. Invoice Frames keep Hug, Fill, and Fixed; their document roots retain physical paper dimensions.

Default

Normal.

Values and units

Normal, Relative, Absolute, Fixed, or Sticky.

Normal follows the parent layout. Relative keeps its original space while offsets move it. Absolute leaves the layout and uses the nearest positioned ancestor. Fixed leaves the layout and uses the viewport. Sticky keeps its space and follows its scroll container until reaching an offset or containing boundary.

Example. Use Relative on a hero Frame and Absolute on a child caption. Use Fixed for a persistent viewport control. Scroll the separate Normal, Relative, Absolute, Fixed, and Sticky demonstrations.

Interactions and limitations. Position alone does not establish height. A Hug Frame with only Absolute children has no content height, apart from padding and border. Equivalent positioned siblings paint in child order, with later children above earlier ones. Nested stacking contexts, Fixed/Sticky, ancestor clipping, and existing Sticky elevation limit this rule; child order is not a universal layer setting. In the editor, Fixed uses the logical preview viewport; zoom and pan move the whole canvas. Verify visitor scrolling in the generated site.

Default

Auto on all sides. Existing/new Sticky without saved offsets starts with Top 0px.

Values and units

Top offset (px), Right offset (px), Bottom offset (px), Left offset (px): signed finite CSS pixels; clear a field for Auto. These fields appear for Relative, Absolute, Fixed, and Sticky.

Relative offsets shift from the original layout position: positive Top moves down and positive Left moves right. Absolute and Fixed offsets measure inward from their containing edges. Sticky offsets set the sticking threshold. Negative offsets can move outside an edge.

Example. On a Relative hero, place an Absolute caption with Left 24 and Bottom 24. Change the hero height and the caption follows its bottom edge.

Interactions and limitations. Normal retains but ignores offsets. Auto removes that edge constraint. For Absolute/Fixed with Fill sizing, an Auto edge acts as 0 on the filled axis and the Frame stretches between both edges. Hug/Fixed sizes keep their size; when opposing offsets overconstrain a box, CSS gives Top and (in left-to-right content) Left precedence. Sticky needs a non-Auto edge on the scrolling axis. Setting all four fields to Auto disables sticking until an edge is set.

Default

Default: preserve the existing sizing behavior.

Values and units

Default, Visible, Hidden, Auto, or Scroll; applies to both axes.

Visible lets content paint outside the box. Hidden clips without visitor scrollbars. Auto adds scrolling when content overflows. Scroll reserves scrolling behavior even when content fits (scrollbar appearance depends on the browser).

Example. Use Visible for a caption that crosses a card edge; use Auto on a Fixed-height panel for long content. Compare clipping and scrolling in the example.

Interactions and limitations. A scrolling Frame needs a constrained size; a Hug Frame usually grows instead. Overflow affects Sticky’s nearest scrolling ancestor. Hidden still creates a scroll container and can prevent sticking to the page. Default generated output clips Fixed sizes and cross-axis Fill; the editor retains its existing axis clipping defaults. Explicit choices agree in both surfaces. Fixed descendants use the viewport and can escape ordinary ancestor overflow. Use Hidden or Auto with Radius to clip corners.

Default

Vertical for a new Frame; Horizontal for a new Button or Link.

Values and units

Vertical layout or Horizontal layout.

Chooses the main axis along which children are arranged. Vertical stacks children; Horizontal places them in a row.

Example. Place film copy and a video in a horizontal Frame. Use a vertical Frame for a heading followed by body text.

Interactions and limitations. Changing Direction changes the axes used by Main and Cross. It does not create a breakpoint-specific setting.

Default

0px for a new Frame; 8px for a new Button or Link. Older containers with no saved gap display a 24px fallback.

Values and units

Non-negative CSS pixels.

Adds space between child items and wrapped lines, without adding padding at the outer edge.

Example. Use Gap 16 between three cards and Pad 24 around the group.

Interactions and limitations. A single child has no sibling gap. Main and Cross alignment move the group within extra space; they do not replace Gap.

Default

Start distribution.

Values and units

Start distribution, Center distribution, or End distribution.

Places the child group along the Direction axis when there is unused space.

Example. In a tall vertical Frame, Center places the child group midway down; in a horizontal Frame it centers the group across.

Interactions and limitations. A Hug container usually has little spare space to distribute. Gap remains between children.

Default

Off for newly added containers.

Values and units

On or off, beside Main.

Allows children to continue onto another line when the main axis has insufficient room.

Example. Turn Wrap on for a horizontal row of cards, then narrow the example container.

Interactions and limitations. Children must have useful sizes to demonstrate wrapping. Vertical wrapping needs a constrained height. This is different from Text’s Wrap control.

Default

Start alignment.

Values and units

Start alignment, Center alignment, or End alignment.

Positions children on the axis perpendicular to Direction.

Example. In a horizontal header, Center aligns a short label midway against a taller logo.

Interactions and limitations. Changing Direction swaps the physical meaning of Main and Cross. A child filling the cross axis leaves no spare cross-axis space to see alignment.

Default

Blank.

Values and units

Plain text, up to 200 characters, in Accessibility. Available on Links, Buttons, and navigation/overlay Frames.

Names an icon-only control or navigation region for assistive technology. On Links/Buttons a supplied name replaces the name otherwise taken from visible child content. Blank keeps the content-derived name. Overlay Frames fall back to their node label; unnamed navigation Frames keep the native navigation role.

Example. Name a social Link Instagram and a menu Button Open menu. Name separate navigation groups Primary and Social.

Interactions and limitations. Include existing visible wording in the name so voice-control users can identify the control. Do not include the role word such as button or navigation; assistive technology announces it. This does not change visible text, routes, commands, or current-page appearance. Names remain saved when a Frame switches back to Container, but are inactive there unless it is an Overlay.

Default

Container.

Values and units

Container or Navigation, in Accessibility on Site Frames.

Container keeps ordinary layout semantics. Navigation emits a native navigation landmark around the authored children without creating or arranging links.

Example. Mark the Frame containing the page Links as Navigation and name it Primary. Keep social links in a separately named Social navigation Frame.

Interactions and limitations. Use this for groups of navigation links. Do not put Navigation Frames inside Buttons, where only layout content is meaningful. This is independent of Normal/Overlay Presentation and Show at. Hidden Frames also hide their landmarks. Each page owns its content; aria-current is still automatic on matching Links.

Default

Normal.

Values and units

Normal or Overlay; available on Site Frames.

Normal participates in page layout. Overlay places this Frame in a viewport-sized modal shell, closed initially. The Frame keeps its own sizing, spacing, colors, and child layout inside that shell.

Example. Use Fill width and Viewport 100 height with a pale fill for a full-screen mobile menu. Add a Close Frame Button and ordinary page Links.

Interactions and limitations. Opening focuses the dialog, prevents background interaction, and locks page scrolling. Long content scrolls inside the shell. Escape or Close restores focus to the visible opener. The shell is fixed to the viewport; Position and offsets apply to the inner Frame. Hidden ancestors and Show at always win; resizing outside the allowed range closes and stays closed on return. Selecting the Frame or a descendant exposes its composition in the editor without saving an open state, even outside its allowed range. Test interaction in generated output. Overlays cannot be placed inside Buttons or Links. No JavaScript leaves them closed.

Default

All breakpoints.

Values and units

All breakpoints, or any combination of the Site’s named width ranges. Available on Frames in Sites.

Shows this Frame and its entire descendant tree only in the selected ranges. Hidden subtrees occupy no space or keyboard stops. All breakpoints includes future added ranges; unchecking All clears the selections so you can choose specific ranges.

Example. Create a header Frame shown at Tablet and Desktop, and an independent mobile header Frame shown at Mobile. Keep shared page content outside both.

Interactions and limitations. No selections hides the Frame at every width. Hidden ancestors always win, including the global Hide control. Preview uses the logical canvas width, independent of zoom; select hidden content in Components and read the Edit notice. Hidden hosted media pauses and an active external player returns to its poster; becoming visible does not restart playback. Copying across Sites maps equivalent ranges to destination IDs or reports incompatible ranges. Invoice controls are unchanged.

Default

0 on all sides for newly added nodes.

Values and units

Non-negative CSS pixels. Uniform padding uses one value; Vertical and horizontal padding uses two; Individual side padding uses top, right, bottom, left.

Adds space inside the node, between its edge and its content. The value-count buttons change which sides you edit together.

Example. Use vertical 24 and horizontal 16 for a section. Use four values when its bottom needs more breathing room.

Interactions and limitations. Padding is not space between siblings: use the parent Frame’s Gap for that. Padding contributes to a Hug size and reduces the content space inside a Fixed size.

Default

No explicit color; the background shows through.

Values and units

Custom hex color, named project color, or theme color selected through Fill color; None clears the selection.

Paints the container background, including padding. A theme reference follows the selected theme’s Light and Dark values.

Example. Give a header a named background color, then check both theme appearances.

Interactions and limitations. This appearance control is different from Fill sizing. Editing a named color or theme value changes other consumers; choosing a custom color affects this node.

Default

0px.

Values and units

Corner radius (px): a non-negative number.

Rounds the corners of the container’s border and background.

Example. Use 12px on a card with a contrasting Fill.

Interactions and limitations. Radius alone does not promise that overflowing child content is clipped. Check children and generated output, especially media.

Default

No explicit color.

Values and units

Custom, named project, or theme color; None clears it.

Chooses the line color around the container.

Example. Choose a subtle named color with Solid and a 1px border.

Interactions and limitations. Border controls are omitted on the page’s root Frame. A visible border also needs a non-None style and positive width.

Default

None.

Values and units

None, Solid, Dashed, or Dotted.

Chooses the stroke pattern around the container.

Example. Use Solid for a card edge and Dashed for an intentionally outlined callout.

Interactions and limitations. Available on nested containers. None suppresses the border even when color and width have values.

Default

0px.

Values and units

Non-negative CSS pixels.

Sets the thickness of the border on all sides.

Example. Set 1px with Solid and a contrasting border color.

Interactions and limitations. Available on nested containers. Border thickness uses space inside the CSS border box.

Default

Hug on newly added containers. A root Frame with no saved sizing falls back to Fill.

Values and units

Width sizing: Hug, Fill, or Fixed. Width fixed size appears for Fixed and accepts non-negative CSS pixels.

Hug follows the content; Fill uses available parent space; Fixed requests an explicit width.

Example. Use Fill for a section within a page and Hug for a short button label. Compare the three labeled examples.

Interactions and limitations. Fill depends on the parent’s layout and available space. It is not a viewport unit. Fixed document roots use their document dimensions instead of these controls.

Default

Hug on newly added containers. A root Frame with no saved sizing falls back to Fill. Selecting Viewport first uses 100dvh.

Values and units

Height sizing: Hug, Fill, Fixed, or Viewport. Height fixed size accepts nonnegative CSS pixels. Viewport height (dvh) appears for Viewport and accepts any finite nonnegative number, including decimals.

Hug grows with normal-flow children and padding; Fill takes available parent space; Fixed requests an explicit height. Viewport requests a minimum height relative to the dynamic browser viewport and grows when content needs more space.

Example. Use Viewport 100 for a full-screen introduction, 50 for half a viewport, or 150 for one and a half. A 100dvh Frame is at least 844px tall in an 844px-high viewport, even when nested in a shorter Frame. Switch modes in the example and enable longer content.

Interactions and limitations. Viewport emits min-height: <value>dvh and height: auto. Mobile browser chrome can change the dynamic viewport. The editor uses the logical device height (or the Responsive canvas fold height), independently of zoom and camera panning. Fixed pixels and the Viewport value are retained separately when switching modes. Fill depends on available parent height; a minimum alone does not provide a definite height for percentage-sized descendants. Absolute children do not contribute normal-flow height. Padding and borders are included in the minimum; constrained ancestors and Overflow can still clip content. Viewport is available in Sites. Invoice Frames keep Hug, Fill, and Fixed; their document roots retain physical paper dimensions.

Default

Normal.

Values and units

Normal, Relative, Absolute, Fixed, or Sticky.

Normal follows the parent layout. Relative keeps its original space while offsets move it. Absolute leaves the layout and uses the nearest positioned ancestor. Fixed leaves the layout and uses the viewport. Sticky keeps its space and follows its scroll container until reaching an offset or containing boundary.

Example. Use Relative on a hero Frame and Absolute on a child caption. Use Fixed for a persistent viewport control. Scroll the separate Normal, Relative, Absolute, Fixed, and Sticky demonstrations.

Interactions and limitations. Position alone does not establish height. A Hug Frame with only Absolute children has no content height, apart from padding and border. Equivalent positioned siblings paint in child order, with later children above earlier ones. Nested stacking contexts, Fixed/Sticky, ancestor clipping, and existing Sticky elevation limit this rule; child order is not a universal layer setting. In the editor, Fixed uses the logical preview viewport; zoom and pan move the whole canvas. Verify visitor scrolling in the generated site.

Default

Auto on all sides. Existing/new Sticky without saved offsets starts with Top 0px.

Values and units

Top offset (px), Right offset (px), Bottom offset (px), Left offset (px): signed finite CSS pixels; clear a field for Auto. These fields appear for Relative, Absolute, Fixed, and Sticky.

Relative offsets shift from the original layout position: positive Top moves down and positive Left moves right. Absolute and Fixed offsets measure inward from their containing edges. Sticky offsets set the sticking threshold. Negative offsets can move outside an edge.

Example. On a Relative hero, place an Absolute caption with Left 24 and Bottom 24. Change the hero height and the caption follows its bottom edge.

Interactions and limitations. Normal retains but ignores offsets. Auto removes that edge constraint. For Absolute/Fixed with Fill sizing, an Auto edge acts as 0 on the filled axis and the Frame stretches between both edges. Hug/Fixed sizes keep their size; when opposing offsets overconstrain a box, CSS gives Top and (in left-to-right content) Left precedence. Sticky needs a non-Auto edge on the scrolling axis. Setting all four fields to Auto disables sticking until an edge is set.

Default

Default: preserve the existing sizing behavior.

Values and units

Default, Visible, Hidden, Auto, or Scroll; applies to both axes.

Visible lets content paint outside the box. Hidden clips without visitor scrollbars. Auto adds scrolling when content overflows. Scroll reserves scrolling behavior even when content fits (scrollbar appearance depends on the browser).

Example. Use Visible for a caption that crosses a card edge; use Auto on a Fixed-height panel for long content. Compare clipping and scrolling in the example.

Interactions and limitations. A scrolling Frame needs a constrained size; a Hug Frame usually grows instead. Overflow affects Sticky’s nearest scrolling ancestor. Hidden still creates a scroll container and can prevent sticking to the page. Default generated output clips Fixed sizes and cross-axis Fill; the editor retains its existing axis clipping defaults. Explicit choices agree in both surfaces. Fixed descendants use the viewport and can escape ordinary ancestor overflow. Use Hidden or Auto with Radius to clip corners.

Default

Vertical for a new Frame; Horizontal for a new Button or Link.

Values and units

Vertical layout or Horizontal layout.

Chooses the main axis along which children are arranged. Vertical stacks children; Horizontal places them in a row.

Example. Place film copy and a video in a horizontal Frame. Use a vertical Frame for a heading followed by body text.

Interactions and limitations. Changing Direction changes the axes used by Main and Cross. It does not create a breakpoint-specific setting.

Default

0px for a new Frame; 8px for a new Button or Link. Older containers with no saved gap display a 24px fallback.

Values and units

Non-negative CSS pixels.

Adds space between child items and wrapped lines, without adding padding at the outer edge.

Example. Use Gap 16 between three cards and Pad 24 around the group.

Interactions and limitations. A single child has no sibling gap. Main and Cross alignment move the group within extra space; they do not replace Gap.

Default

Start distribution.

Values and units

Start distribution, Center distribution, or End distribution.

Places the child group along the Direction axis when there is unused space.

Example. In a tall vertical Frame, Center places the child group midway down; in a horizontal Frame it centers the group across.

Interactions and limitations. A Hug container usually has little spare space to distribute. Gap remains between children.

Default

Off for newly added containers.

Values and units

On or off, beside Main.

Allows children to continue onto another line when the main axis has insufficient room.

Example. Turn Wrap on for a horizontal row of cards, then narrow the example container.

Interactions and limitations. Children must have useful sizes to demonstrate wrapping. Vertical wrapping needs a constrained height. This is different from Text’s Wrap control.

Default

Start alignment.

Values and units

Start alignment, Center alignment, or End alignment.

Positions children on the axis perpendicular to Direction.

Example. In a horizontal header, Center aligns a short label midway against a taller logo.

Interactions and limitations. Changing Direction swaps the physical meaning of Main and Cross. A child filling the cross axis leaves no spare cross-axis space to see alignment.

Default

Blank.

Values and units

Plain text, up to 200 characters, in Accessibility. Available on Links, Buttons, and navigation/overlay Frames.

Names an icon-only control or navigation region for assistive technology. On Links/Buttons a supplied name replaces the name otherwise taken from visible child content. Blank keeps the content-derived name. Overlay Frames fall back to their node label; unnamed navigation Frames keep the native navigation role.

Example. Name a social Link Instagram and a menu Button Open menu. Name separate navigation groups Primary and Social.

Interactions and limitations. Include existing visible wording in the name so voice-control users can identify the control. Do not include the role word such as button or navigation; assistive technology announces it. This does not change visible text, routes, commands, or current-page appearance. Names remain saved when a Frame switches back to Container, but are inactive there unless it is an Overlay.

Default

No event commands.

Values and units

Add opens Add event command; Add command appends the configured mapping; Cancel leaves the list unchanged; Delete command removes a mapping.

Associates visitor activation with a supported command. Keyboard activation of a real button also produces a click.

Example. Add one Open cart command to a button labeled Cart.

Interactions and limitations. Use one click command: the current generated Button executes the first Click mapping. Editor clicks select the node rather than run the command.

Default

Click in Add event command.

Values and units

Click is the only supported event.

Chooses when the command runs; keyboard activation of the published Button also triggers it.

Example. Keep Click selected, choose a Command, and use Add command to save the mapping.

Interactions and limitations. The Event field is in the creation dialog. Existing mappings show Click beside their command selector.

Default

Open Frame when the page has an overlay; otherwise Add to cart. Existing mappings retain their selected command.

Values and units

Open Frame, Close Frame, Toggle Frame, Open cart, or Add to cart. Frame choices appear when overlay targets exist. The creation dialog labels this field Command.

Frame commands open, close, or alternate the target overlay. Open cart opens the cart; Add to cart adds a product.

Example. Use Open Frame on Menu and Close Frame inside the mobile menu.

Interactions and limitations. Frame commands work without an API or commerce. An open command cannot reveal a hidden ancestor or bypass Show at. Controlling Buttons expose expanded/collapsed state. Use one Click command. Cart actions still require API generation mode.

Default

First overlay in the page when adding a Frame command.

Values and units

A current-page overlay Frame, identified by its label; shown only for Open Frame, Close Frame, or Toggle Frame.

Stores the stable target node ID, so renaming or reordering the Frame preserves the connection.

Example. Choose Mobile menu for the Menu and Close Buttons. Give Frames distinct labels to make choices clear.

Interactions and limitations. Copy the complete header/menu group to remap internal targets to copied IDs. Copying a Button alone within the same page retains an available target; copying across pages reports unresolved targets before changing destination content. Missing or converted targets must be repaired or their commands removed before saving. Overlay state is never copied.

Default

No product selected in the creation dialog; switching an existing command to Add to cart selects the first available product.

Values and units

An existing project product, shown only for Add to cart. The creation dialog calls this Product / item ID.

Chooses which product the command adds.

Example. Select the product represented by the button’s nearby description.

Interactions and limitations. Changing the product changes the command, not the authored child label. Keep those consistent. A draft may have no product, but its generated button cannot add an item until a valid product is selected.

Default

1.

Values and units

Whole numbers 1–99 in the persisted command.

Chooses the count added by one activation.

Example. Set 2 for a clearly labeled two-item purchase.

Interactions and limitations. The UI prevents values below 1; the parser clamps the saved quantity to 1–99 and treats non-integers as 1. Confirm the saved value.

Default

0 on all sides for newly added nodes.

Values and units

Non-negative CSS pixels. Uniform padding uses one value; Vertical and horizontal padding uses two; Individual side padding uses top, right, bottom, left.

Adds space inside the node, between its edge and its content. The value-count buttons change which sides you edit together.

Example. Use vertical 24 and horizontal 16 for a section. Use four values when its bottom needs more breathing room.

Interactions and limitations. Padding is not space between siblings: use the parent Frame’s Gap for that. Padding contributes to a Hug size and reduces the content space inside a Fixed size.

Default

No explicit color; the background shows through.

Values and units

Custom hex color, named project color, or theme color selected through Fill color; None clears the selection.

Paints the container background, including padding. A theme reference follows the selected theme’s Light and Dark values.

Example. Give a header a named background color, then check both theme appearances.

Interactions and limitations. This appearance control is different from Fill sizing. Editing a named color or theme value changes other consumers; choosing a custom color affects this node.

Default

0px.

Values and units

Corner radius (px): a non-negative number.

Rounds the corners of the container’s border and background.

Example. Use 12px on a card with a contrasting Fill.

Interactions and limitations. Radius alone does not promise that overflowing child content is clipped. Check children and generated output, especially media.

Default

No explicit color.

Values and units

Custom, named project, or theme color; None clears it.

Chooses the line color around the container.

Example. Choose a subtle named color with Solid and a 1px border.

Interactions and limitations. Border controls are omitted on the page’s root Frame. A visible border also needs a non-None style and positive width.

Default

None.

Values and units

None, Solid, Dashed, or Dotted.

Chooses the stroke pattern around the container.

Example. Use Solid for a card edge and Dashed for an intentionally outlined callout.

Interactions and limitations. Available on nested containers. None suppresses the border even when color and width have values.

Default

0px.

Values and units

Non-negative CSS pixels.

Sets the thickness of the border on all sides.

Example. Set 1px with Solid and a contrasting border color.

Interactions and limitations. Available on nested containers. Border thickness uses space inside the CSS border box.

Default

Hug on newly added containers. A root Frame with no saved sizing falls back to Fill.

Values and units

Width sizing: Hug, Fill, or Fixed. Width fixed size appears for Fixed and accepts non-negative CSS pixels.

Hug follows the content; Fill uses available parent space; Fixed requests an explicit width.

Example. Use Fill for a section within a page and Hug for a short button label. Compare the three labeled examples.

Interactions and limitations. Fill depends on the parent’s layout and available space. It is not a viewport unit. Fixed document roots use their document dimensions instead of these controls.

Default

Hug on newly added containers. A root Frame with no saved sizing falls back to Fill. Selecting Viewport first uses 100dvh.

Values and units

Height sizing: Hug, Fill, Fixed, or Viewport. Height fixed size accepts nonnegative CSS pixels. Viewport height (dvh) appears for Viewport and accepts any finite nonnegative number, including decimals.

Hug grows with normal-flow children and padding; Fill takes available parent space; Fixed requests an explicit height. Viewport requests a minimum height relative to the dynamic browser viewport and grows when content needs more space.

Example. Use Viewport 100 for a full-screen introduction, 50 for half a viewport, or 150 for one and a half. A 100dvh Frame is at least 844px tall in an 844px-high viewport, even when nested in a shorter Frame. Switch modes in the example and enable longer content.

Interactions and limitations. Viewport emits min-height: <value>dvh and height: auto. Mobile browser chrome can change the dynamic viewport. The editor uses the logical device height (or the Responsive canvas fold height), independently of zoom and camera panning. Fixed pixels and the Viewport value are retained separately when switching modes. Fill depends on available parent height; a minimum alone does not provide a definite height for percentage-sized descendants. Absolute children do not contribute normal-flow height. Padding and borders are included in the minimum; constrained ancestors and Overflow can still clip content. Viewport is available in Sites. Invoice Frames keep Hug, Fill, and Fixed; their document roots retain physical paper dimensions.

Default

Normal.

Values and units

Normal, Relative, Absolute, Fixed, or Sticky.

Normal follows the parent layout. Relative keeps its original space while offsets move it. Absolute leaves the layout and uses the nearest positioned ancestor. Fixed leaves the layout and uses the viewport. Sticky keeps its space and follows its scroll container until reaching an offset or containing boundary.

Example. Use Relative on a hero Frame and Absolute on a child caption. Use Fixed for a persistent viewport control. Scroll the separate Normal, Relative, Absolute, Fixed, and Sticky demonstrations.

Interactions and limitations. Position alone does not establish height. A Hug Frame with only Absolute children has no content height, apart from padding and border. Equivalent positioned siblings paint in child order, with later children above earlier ones. Nested stacking contexts, Fixed/Sticky, ancestor clipping, and existing Sticky elevation limit this rule; child order is not a universal layer setting. In the editor, Fixed uses the logical preview viewport; zoom and pan move the whole canvas. Verify visitor scrolling in the generated site.

Default

Auto on all sides. Existing/new Sticky without saved offsets starts with Top 0px.

Values and units

Top offset (px), Right offset (px), Bottom offset (px), Left offset (px): signed finite CSS pixels; clear a field for Auto. These fields appear for Relative, Absolute, Fixed, and Sticky.

Relative offsets shift from the original layout position: positive Top moves down and positive Left moves right. Absolute and Fixed offsets measure inward from their containing edges. Sticky offsets set the sticking threshold. Negative offsets can move outside an edge.

Example. On a Relative hero, place an Absolute caption with Left 24 and Bottom 24. Change the hero height and the caption follows its bottom edge.

Interactions and limitations. Normal retains but ignores offsets. Auto removes that edge constraint. For Absolute/Fixed with Fill sizing, an Auto edge acts as 0 on the filled axis and the Frame stretches between both edges. Hug/Fixed sizes keep their size; when opposing offsets overconstrain a box, CSS gives Top and (in left-to-right content) Left precedence. Sticky needs a non-Auto edge on the scrolling axis. Setting all four fields to Auto disables sticking until an edge is set.

Default

Default: preserve the existing sizing behavior.

Values and units

Default, Visible, Hidden, Auto, or Scroll; applies to both axes.

Visible lets content paint outside the box. Hidden clips without visitor scrollbars. Auto adds scrolling when content overflows. Scroll reserves scrolling behavior even when content fits (scrollbar appearance depends on the browser).

Example. Use Visible for a caption that crosses a card edge; use Auto on a Fixed-height panel for long content. Compare clipping and scrolling in the example.

Interactions and limitations. A scrolling Frame needs a constrained size; a Hug Frame usually grows instead. Overflow affects Sticky’s nearest scrolling ancestor. Hidden still creates a scroll container and can prevent sticking to the page. Default generated output clips Fixed sizes and cross-axis Fill; the editor retains its existing axis clipping defaults. Explicit choices agree in both surfaces. Fixed descendants use the viewport and can escape ordinary ancestor overflow. Use Hidden or Auto with Radius to clip corners.

Default

Vertical for a new Frame; Horizontal for a new Button or Link.

Values and units

Vertical layout or Horizontal layout.

Chooses the main axis along which children are arranged. Vertical stacks children; Horizontal places them in a row.

Example. Place film copy and a video in a horizontal Frame. Use a vertical Frame for a heading followed by body text.

Interactions and limitations. Changing Direction changes the axes used by Main and Cross. It does not create a breakpoint-specific setting.

Default

0px for a new Frame; 8px for a new Button or Link. Older containers with no saved gap display a 24px fallback.

Values and units

Non-negative CSS pixels.

Adds space between child items and wrapped lines, without adding padding at the outer edge.

Example. Use Gap 16 between three cards and Pad 24 around the group.

Interactions and limitations. A single child has no sibling gap. Main and Cross alignment move the group within extra space; they do not replace Gap.

Default

Start distribution.

Values and units

Start distribution, Center distribution, or End distribution.

Places the child group along the Direction axis when there is unused space.

Example. In a tall vertical Frame, Center places the child group midway down; in a horizontal Frame it centers the group across.

Interactions and limitations. A Hug container usually has little spare space to distribute. Gap remains between children.

Default

Off for newly added containers.

Values and units

On or off, beside Main.

Allows children to continue onto another line when the main axis has insufficient room.

Example. Turn Wrap on for a horizontal row of cards, then narrow the example container.

Interactions and limitations. Children must have useful sizes to demonstrate wrapping. Vertical wrapping needs a constrained height. This is different from Text’s Wrap control.

Default

Start alignment.

Values and units

Start alignment, Center alignment, or End alignment.

Positions children on the axis perpendicular to Direction.

Example. In a horizontal header, Center aligns a short label midway against a taller logo.

Interactions and limitations. Changing Direction swaps the physical meaning of Main and Cross. A child filling the cross axis leaves no spare cross-axis space to see alignment.

Default

Blank.

Values and units

Plain text, up to 200 characters, in Accessibility. Available on Links, Buttons, and navigation/overlay Frames.

Names an icon-only control or navigation region for assistive technology. On Links/Buttons a supplied name replaces the name otherwise taken from visible child content. Blank keeps the content-derived name. Overlay Frames fall back to their node label; unnamed navigation Frames keep the native navigation role.

Example. Name a social Link Instagram and a menu Button Open menu. Name separate navigation groups Primary and Social.

Interactions and limitations. Include existing visible wording in the name so voice-control users can identify the control. Do not include the role word such as button or navigation; assistive technology announces it. This does not change visible text, routes, commands, or current-page appearance. Names remain saved when a Frame switches back to Container, but are inactive there unless it is an Overlay.

Default

Site page, with no destination selected on a new Link.

Values and units

Site page or URL.

Chooses whether to resolve a Page by its identity or use an explicit URL.

Example. Use Site page for About so changing its route does not break this Link.

Interactions and limitations. Changing destination type resets its destination; choose the new target before publishing.

Default

Select a page.

Values and units

An existing Page in this Site, shown with its route.

Stores the Page identity; generation resolves the current route.

Example. Create Contact, then select it as the destination.

Interactions and limitations. Missing or deleted destinations require repair. The node label is not the destination Page title.

Default

Empty when switching to URL.

Values and units

An http/https, mailto, tel, root-relative path, or #anchor URL.

Navigates to the specified address.

Example. Use mailto:hello@example.com for email or https://example.com for an external destination.

Interactions and limitations. Do not enter JavaScript or iframe HTML. A typed /path is not linked to a Page identity and will not follow later route changes.

Default

Off.

Values and units

On or off.

Requests a new browsing tab/window for the destination.

Example. Use for an external resource when retaining the current page is useful.

Interactions and limitations. Browser preferences determine the final window behavior. Make the visible label describe the destination.

Default

0 on all sides for newly added nodes.

Values and units

Non-negative CSS pixels. Uniform padding uses one value; Vertical and horizontal padding uses two; Individual side padding uses top, right, bottom, left.

Adds space inside the node, between its edge and its content. The value-count buttons change which sides you edit together.

Example. Use vertical 24 and horizontal 16 for a section. Use four values when its bottom needs more breathing room.

Interactions and limitations. Padding is not space between siblings: use the parent Frame’s Gap for that. Padding contributes to a Hug size and reduces the content space inside a Fixed size.

Default

No linked shared style on newly added Text.

Values and units

An existing project text style. The picker supports search, preview text, selection, Apply, and Cancel.

Links the node’s typography to a reusable project style. Overrides can change individual properties on this node.

Example. Choose a shared Body style for paragraphs, preview it in the picker, then Apply.

Interactions and limitations. Editing the shared style affects its consumers. Cancel leaves the selected node unchanged; preview text is a sample, not the node’s Markup.

Default

Disabled when there are no savable overrides.

Values and units

Action: name and save a new style.

Creates a reusable style from the node’s resolved typography and links it to that style.

Example. Save a custom heading treatment to reuse on other Text nodes.

Interactions and limitations. This creates a new style rather than changing the original shared style.

Default

Disabled when there is nothing to reset.

Values and units

Action.

Clears local typography overrides so the linked style controls those properties again. Without a linked style, clears explicitly saved typography back to the editor defaults.

Example. Reset a paragraph whose size drifted from the Body style.

Interactions and limitations. Read the current style before resetting; the visible text can change. Markup is preserved.

Default

Disabled without a linked text style.

Values and units

Action.

Removes the shared-style link while retaining the current resolved typography locally.

Example. Detach a one-off heading that should stop following future style edits.

Interactions and limitations. Detached nodes no longer inherit changes to that style. This does not duplicate or synchronize page components.

Default

Inherited/default text color when unset.

Values and units

Custom hex, named project color, or theme color; None clears the local choice.

Colors the text, including supported formatted content.

Example. Select a theme text color and inspect Light and Dark previews.

Interactions and limitations. Theme and named-color edits affect other consumers. Text color is separate from a surrounding Frame’s Fill.

Default

Linked style or Inter when unspecified.

Values and units

Font family selected through the font picker.

Changes the typeface; a choice on linked Text becomes a local override.

Example. Compare a heading family using the font preview before selecting it.

Interactions and limitations. Editor and generated Sites request the faces used by Text, linked styles, overrides, and Markdown. Opening the picker is not required. This does not upload a custom font; unavailable families or faces use readable browser fallbacks.

Default

Linked style or 16px when unspecified.

Values and units

CSS pixels, at least 1.

Sets the font size of this Text node.

Example. Set a heading to 40px and test its wrapping in a narrow preview.

Interactions and limitations. Changing size does not change the Semantic element. Large sizes can need more line height.

Default

Linked style or Normal.

Values and units

Normal or Italic.

Applies the selected slant to the whole Text node.

Example. Use Italic for an introductory paragraph.

Interactions and limitations. Italic Markdown affects marked text within the node; Slant affects all its text. The authored italic face is requested automatically; provider support still determines whether a real face is available.

Default

Linked style or Regular/400 when unspecified.

Values and units

Regular, 300, 400, 500, 600, 700, 800, or 900.

Sets the overall font weight.

Example. Use 300 for a light heading and 400 for body copy.

Interactions and limitations. Bold Markdown uses the browser’s relative bolder weight: ordinary 400 becomes 700; 700 becomes 900. Requests include these nested markup variants. Unspecified headings retain their native bold weight, and unspecified text inside Buttons inherits the Button weight. Select a numeric weight to make it explicit. Not every family provides every weight.

Default

Linked style, saved value, or an editor fallback of 1.5 × font size.

Values and units

CSS pixels, at least 1; this is a distance, not a unitless multiplier.

Sets the distance between successive text baselines.

Example. Use 24px line height with 16px body text.

Interactions and limitations. A value smaller than the font size can make lines collide. Check multiline headings and paragraphs.

Default

Linked style or 0px.

Values and units

CSS pixels; accepts negative values and 0.1px steps.

Adds or removes space between letters.

Example. Try 0.5px for a short uppercase label.

Interactions and limitations. Tight negative spacing can hurt legibility; long copy and narrow screens need separate visual checks.

Default

Normal.

Values and units

Heading 1, Heading 2, Heading 3, Normal, or Small.

Sets the document role/HTML element: h1, h2, h3, paragraph, or small text.

Example. Use Heading 1 for the page heading and Heading 2 for its major sections.

Interactions and limitations. Choose meaning before appearance. A large paragraph does not become a heading just because its font size increases.

Default

On.

Values and units

On or off.

Allows text to break into lines within its available width.

Example. Keep Wrap on for body copy; use off only for short labels with enough space.

Interactions and limitations. Turning it off can cause horizontal overflow. Frame Wrap controls child layout, not text line breaks.

Default

Off for empty/unmarked text.

Values and units

Toggle **bold** markup.

Adds or removes the bold Markdown wrapper around the editor text.

Example. Use **Important** in Markup when only that word should be emphasized.

Interactions and limitations. The toolbar acts on the node’s text wrapper, not a rich-text cursor selection. Edit Markup directly for a specific phrase.

Default

Off for empty/unmarked text.

Values and units

Toggle *italic* markup.

Adds or removes the italic Markdown wrapper around the editor text.

Example. Write A film by *Sonia Lowman* to emphasize only the name.

Interactions and limitations. For the whole node’s typography, Slant is also available. The toolbar does not replace direct Markdown editing.

Default

Off for empty/unmarked text.

Values and units

Toggle ~~strikethrough~~ markup.

Adds or removes the strike wrapper around the editor text.

Example. Write ~~Old wording~~ followed by its replacement when that treatment has meaning.

Interactions and limitations. Do not use strikethrough as the only explanation that information has changed.

Default

Align left.

Values and units

Left, center, or right.

Aligns lines of text within the Text node’s content width.

Example. Center a multiline heading while keeping its parent Frame aligned normally.

Interactions and limitations. Text alignment does not reposition the Text node itself. Use the parent’s Main/Cross controls for that.

Default

Empty on newly added Text; Button/Link child labels start with their control’s name.

Values and units

Plain text with **bold**, *italic*, ~~strikethrough~~, `code`, [links](https://example.com), and line breaks.

Provides the content rendered by the node.

Example. Write Contact [our team](mailto:hello@example.com) for an inline email link.

Interactions and limitations. HTML is escaped, not executed. This safe Markdown subset is not a general HTML editor. Avoid inline links inside a Link or Button.

Default

Blank; the uploaded filename remains the fallback.

Values and units

Plain text up to 1000 characters, in Accessibility on Site Images.

Describes what this image contributes in this specific page context. Generated and preview Images use this text in the alt attribute.

Example. Describe a portrait as Sonia Lowman speaking at a film screening, without repeating an adjacent caption.

Interactions and limitations. Blank nondecorative descriptions retain the existing filename fallback; replace that fallback with a useful description. The same uploaded asset can have different descriptions on different nodes. Alt text stays saved while Decorative image is on.

Default

Off.

Values and units

On or off, in Accessibility on Site Images.

On emits an empty alt attribute so assistive technology skips the image; the visual image remains.

Example. Use for an ornamental divider or a redundant image inside a Link that already has an accessible name.

Interactions and limitations. Only use when the image adds no information needed to understand or operate the page. The Alt text control is disabled while decorative, but its value is retained. Turning this off restores that description, or the filename fallback. An image-only Link still needs a useful accessible name.

Default

0 on all sides for newly added nodes.

Values and units

Non-negative CSS pixels. Uniform padding uses one value; Vertical and horizontal padding uses two; Individual side padding uses top, right, bottom, left.

Adds space inside the node, between its edge and its content. The value-count buttons change which sides you edit together.

Example. Use vertical 24 and horizontal 16 for a section. Use four values when its bottom needs more breathing room.

Interactions and limitations. Padding is not space between siblings: use the parent Frame’s Gap for that. Padding contributes to a Hug size and reduces the content space inside a Fixed size.

Default

Original ratio for Images; Aspect ratio for Videos.

Values and units

Original ratio / Fill Frame on Image; Aspect ratio / Fill Frame on Video. Available in Sites.

Proportional sizing preserves the Image’s natural dimensions within its available space, or uses the Video’s authored Aspect ratio. Fill Frame takes the space available in the containing Frame instead, creating the display area for a crop.

Example. For a portrait card, give a Frame a Fixed width and height, put an Image inside it, and select Fill Frame. For a hero, use a Viewport-height Frame. A row of equally sized Frames makes a consistent image strip.

Interactions and limitations. Fill Frame media participates in the parent’s flex layout without contributing its natural size. A Hug Frame containing only Fill Frame media has no content height apart from padding/border: give it Fixed or Viewport height, or an available Fill height. Padding reduces the media surface. A Video’s Aspect ratio is retained but its control is hidden while Fill Frame is selected. This is independent of Contain/Cover and does not create breakpoint overrides. Invoice image behavior is unchanged.

Default

Contain.

Values and units

Media fit: Contain or Cover.

Contain scales the entire source into the display area without distortion, leaving unused space when ratios differ. Cover fills the display area without distortion and crops the excess. Neither changes the uploaded file.

Example. Use Cover for portrait crops and edge-to-edge heroes. Use Contain when every part of a photograph or film must remain visible.

Interactions and limitations. A differently proportioned display area is needed to see cropping. Original-ratio images may look identical in both modes; choose Fill Frame and set the Frame’s dimensions. Native video and its poster use the same fit. External video fitting affects the authored poster; the provider controls playback inside its iframe. Image empty space shows the Frame background; Video uses its dark surface.

Default

50% (center).

Values and units

Horizontal focal position (%): a finite number from 0 to 100, including decimals.

Aligns the source horizontally within its display area. 0 keeps the left edge, 50 centers it, and 100 keeps the right edge. With Cover it controls which side of excess width is cropped; with Contain it positions narrower content in the spare space.

Example. Move toward 0 to keep a subject near the left edge visible in a portrait crop.

Interactions and limitations. Percentages align the same percentage position of the rendered source and its display area; they are not pixel offsets or a guarantee that an arbitrary source point will appear at the center. There is no visible change when source and display widths already match. Values are per node, so copies can crop the same asset independently.

Default

50% (center).

Values and units

Vertical focal position (%): a finite number from 0 to 100, including decimals.

Aligns the source vertically. 0 keeps the top edge, 50 centers it, and 100 keeps the bottom edge. Cover crops excess height; Contain positions shorter content in the spare space.

Example. Move toward 0 to retain the top of a portrait in a shallow image strip, then inspect desktop and mobile.

Interactions and limitations. No visible change occurs when source and display heights already match. The value remains saved when switching sizing or fit. External player content is controlled by its provider; these settings position its authored poster only.

Default

No image selected.

Values and units

An existing project image asset; invoice sources may use supported template expressions.

Changes the image referenced by this node without uploading another copy.

Example. Reuse a portrait already uploaded to the same project.

Interactions and limitations. API clients use the returned asset ID, not a local path. An unresolved invoice expression needs representative order data to preview.

Default

No selected upload.

Values and units

An image file chosen from the device.

Uploads an image to cloud media storage and associates it with the node.

Example. Upload a hero photograph, wait for completion, then reload the page to confirm the source.

Interactions and limitations. Media size, Fit, and focal controls set the display without changing the asset. Authored alt text remains a separate enhancement; compose surrounding layout with Frames.

Default

0 on all sides for newly added nodes.

Values and units

Non-negative CSS pixels. Uniform padding uses one value; Vertical and horizontal padding uses two; Individual side padding uses top, right, bottom, left.

Adds space inside the node, between its edge and its content. The value-count buttons change which sides you edit together.

Example. Use vertical 24 and horizontal 16 for a section. Use four values when its bottom needs more breathing room.

Interactions and limitations. Padding is not space between siblings: use the parent Frame’s Gap for that. Padding contributes to a Hug size and reduces the content space inside a Fixed size.

Default

Original ratio for Images; Aspect ratio for Videos.

Values and units

Original ratio / Fill Frame on Image; Aspect ratio / Fill Frame on Video. Available in Sites.

Proportional sizing preserves the Image’s natural dimensions within its available space, or uses the Video’s authored Aspect ratio. Fill Frame takes the space available in the containing Frame instead, creating the display area for a crop.

Example. For a portrait card, give a Frame a Fixed width and height, put an Image inside it, and select Fill Frame. For a hero, use a Viewport-height Frame. A row of equally sized Frames makes a consistent image strip.

Interactions and limitations. Fill Frame media participates in the parent’s flex layout without contributing its natural size. A Hug Frame containing only Fill Frame media has no content height apart from padding/border: give it Fixed or Viewport height, or an available Fill height. Padding reduces the media surface. A Video’s Aspect ratio is retained but its control is hidden while Fill Frame is selected. This is independent of Contain/Cover and does not create breakpoint overrides. Invoice image behavior is unchanged.

Default

Contain.

Values and units

Media fit: Contain or Cover.

Contain scales the entire source into the display area without distortion, leaving unused space when ratios differ. Cover fills the display area without distortion and crops the excess. Neither changes the uploaded file.

Example. Use Cover for portrait crops and edge-to-edge heroes. Use Contain when every part of a photograph or film must remain visible.

Interactions and limitations. A differently proportioned display area is needed to see cropping. Original-ratio images may look identical in both modes; choose Fill Frame and set the Frame’s dimensions. Native video and its poster use the same fit. External video fitting affects the authored poster; the provider controls playback inside its iframe. Image empty space shows the Frame background; Video uses its dark surface.

Default

50% (center).

Values and units

Horizontal focal position (%): a finite number from 0 to 100, including decimals.

Aligns the source horizontally within its display area. 0 keeps the left edge, 50 centers it, and 100 keeps the right edge. With Cover it controls which side of excess width is cropped; with Contain it positions narrower content in the spare space.

Example. Move toward 0 to keep a subject near the left edge visible in a portrait crop.

Interactions and limitations. Percentages align the same percentage position of the rendered source and its display area; they are not pixel offsets or a guarantee that an arbitrary source point will appear at the center. There is no visible change when source and display widths already match. Values are per node, so copies can crop the same asset independently.

Default

50% (center).

Values and units

Vertical focal position (%): a finite number from 0 to 100, including decimals.

Aligns the source vertically. 0 keeps the top edge, 50 centers it, and 100 keeps the bottom edge. Cover crops excess height; Contain positions shorter content in the spare space.

Example. Move toward 0 to retain the top of a portrait in a shallow image strip, then inspect desktop and mobile.

Interactions and limitations. No visible change occurs when source and display heights already match. The value remains saved when switching sizing or fit. External player content is controlled by its provider; these settings position its authored poster only.

Default

Hosted media on new nodes. Existing URL videos remain External URL.

Values and units

Hosted media or External URL.

Chooses which source this Video plays and shows only the controls for that source.

Example. Upload your own reel, switch to External URL to try a YouTube trailer, then switch back to the same uploaded reel.

Interactions and limitations. The file and valid URL are retained independently; switching does not delete or re-upload either. Title, ratio, and poster apply to both. An incomplete invalid URL is cleared when switching to Hosted media. Only the active source renders, and inactive uploaded videos are excluded from generated packages.

Default

None.

Values and units

None or an active video asset in this project; shown for Hosted media.

Selects a video already uploaded to hosted media storage.

Example. Reuse a reel from the project without uploading it again.

Interactions and limitations. Selecting None clears the node reference without deleting the file. Generated uploaded video uses a relative asset path, including on nested routes. Video format and codec support depend on the visitor’s browser.

Default

No file selected.

Values and units

A video file from the device; shown for Hosted media.

Uploads to MyShot cloud media storage and selects the completed upload as this Video’s file.

Example. Upload a browser-compatible MP4 or WebM, wait for upload completion and autosave, then reload.

Interactions and limitations. Files are not transcoded. Use browser-compatible codecs. Standard playback uses native controls, inline playback, and fullscreen without autoplay or looping. Background playback is muted, loops, and offers a pause/play button.

Default

Standard.

Values and units

Standard or Background; shown for Hosted media.

Standard displays a visitor-controlled film. Background automatically attempts muted, looping, inline playback and provides a named pause/play button; it is decorative, without native sound/fullscreen controls.

Example. Put a Background Video with Media size Fill Frame and Fit Cover inside an Absolute Frame with all offsets zero, beneath ordinary content in a Relative hero. Give the hero a height, such as Viewport 100dvh.

Interactions and limitations. The editor shows the still poster composition and clicking it selects the Video. Verify motion in the generated preview. Reduced motion prevents automatic playback; a visitor may explicitly choose Play. A preference change to reduced motion, a hidden breakpoint Frame, or a hidden browser tab stops playback and restores the poster. Returning to visibility does not restart it. Blocked autoplay or loading failure keeps the poster and Play button. No JavaScript keeps the poster without a button. Without a poster, the fallback is a dark surface. Keep essential information in ordinary Text/Links. Background settings remain saved but inactive with External URL.

Default

0%.

Values and units

A finite number from 0 to 100, including fractions; shown only for Hosted media with Background playback.

Applies a black layer over both the moving video and its still poster. It leaves the pause/play button and separately authored text unchanged.

Example. Try 40% behind white hero text, and check readability against both the darkest and brightest moments.

Interactions and limitations. 0 is transparent; 100 makes the media black. Dimming does not edit the uploaded source. It follows the media surface and its cropping/padding. Switching to Standard or External URL retains the value without applying it. Text readability still depends on the content, colors, and typography.

Default

Empty.

Values and units

An HTTP(S) YouTube watch, youtu.be, Shorts, live, or embed URL; a Vimeo video or player URL. Shown for External URL; saved URLs use HTTPS.

Chooses an externally hosted film without uploading its video file. It plays only when Video source is External URL.

Example. Use https://www.youtube.com/watch?v=bX_odQeTeEs&t=1s to start Black Boys at one second. Vimeo supports #t=1m2s.

Interactions and limitations. Start times are retained; unrelated query parameters are removed. Vimeo unlisted links retain their privacy hash. Arbitrary iframe HTML, unsupported hosts, playlists, and invalid timestamps are rejected. An incomplete or invalid URL pauses page autosave and shows an inline error until corrected, cleared, or replaced by switching to Hosted media. Provider privacy and embedding permissions still apply.

Default

Video; a blank title saves as Video.

Values and units

Plain text.

Names the uploaded video or external Play button and iframe for assistive technology, and labels the editor preview.

Example. Use Black Boys — official trailer instead of an asset filename.

Interactions and limitations. The title applies to either source and does not change the provider’s own metadata. Give each film a useful, distinct name.

Default

16:9.

Values and units

16:9, 4:3, 1:1, or 9:16; width:height, with no pixel units.

Reserves proportional height as either video source fills its available content width. 16:9 at 320px wide is 180px tall; 1:1 is 320px tall.

Example. Use 16:9 for a landscape trailer or 9:16 for a portrait film.

Interactions and limitations. The parent Frame controls available width; padding sits outside the proportional surface. Media size must be Aspect ratio for this control to appear; Fill Frame retains but ignores the value. Fit chooses Contain or Cover for uploaded video; providers may letterbox inside their player. Editor and generated output use the same area.

Default

None.

Values and units

None or an active image asset in this project.

Displays the selected image before playback, using the authored Fit and focal position; Contain leaves a dark background wherever ratios differ.

Example. Reuse a film still as a poster for either source.

Interactions and limitations. The poster is decorative because the video has an accessible title. None removes the reference without deleting the asset. Builds copy posters into relative media paths. No automatic provider thumbnail is fetched. Without a poster, Standard uploaded video may show its first frame; Background uses a dark surface until playback starts; external video shows the title on a dark surface.

Default

No file selected.

Values and units

An image file from the device.

Uploads an image to cloud media storage and selects it as this Video’s poster, for either source.

Example. Upload a still, wait for upload completion and autosave, then reload.

Interactions and limitations. The poster does not replace the selected video file or URL. For external sources it is replaced by the provider player after Play; provider controls and autoplay permissions still apply.

Default

0 on all sides for newly added nodes.

Values and units

Non-negative CSS pixels. Uniform padding uses one value; Vertical and horizontal padding uses two; Individual side padding uses top, right, bottom, left.

Adds space inside the node, between its edge and its content. The value-count buttons change which sides you edit together.

Example. Use vertical 24 and horizontal 16 for a section. Use four values when its bottom needs more breathing room.

Interactions and limitations. Padding is not space between siblings: use the parent Frame’s Gap for that. Padding contributes to a Hug size and reduces the content space inside a Fixed size.

Default

Inherited/default text color when unset.

Values and units

Custom, named project, or theme color; enabled only for SVGs using currentColor.

Recolors the SVG paths that use currentColor.

Example. Choose a theme foreground color for a single-color arrow SVG.

Interactions and limitations. Fixed-color SVG paths retain their authored colors; the disabled control explains this. Choosing a color does not rewrite the SVG.

Default

No SVG selected.

Values and units

An active SVG asset from this project.

Reuses an uploaded SVG without duplicating its file.

Example. Reuse one social icon on several independently authored pages.

Interactions and limitations. This shares the asset, not the surrounding Link’s settings or page content.

Default

No selected upload.

Values and units

An .svg / image/svg+xml file.

Uploads a reusable SVG and selects it for this Icon.

Example. Upload an SVG that uses currentColor when authors need to recolor it.

Interactions and limitations. The surrounding control needs a meaningful name. An SVG alone does not explain an unfamiliar action.

Default

0 on all sides for newly added nodes.

Values and units

Non-negative CSS pixels. Uniform padding uses one value; Vertical and horizontal padding uses two; Individual side padding uses top, right, bottom, left.

Adds space inside the node, between its edge and its content. The value-count buttons change which sides you edit together.

Example. Use vertical 24 and horizontal 16 for a section. Use four values when its bottom needs more breathing room.

Interactions and limitations. Padding is not space between siblings: use the parent Frame’s Gap for that. Padding contributes to a Hug size and reduces the content space inside a Fixed size.

Default

0 on all sides for newly added nodes.

Values and units

Non-negative CSS pixels. Uniform padding uses one value; Vertical and horizontal padding uses two; Individual side padding uses top, right, bottom, left.

Adds space inside the node, between its edge and its content. The value-count buttons change which sides you edit together.

Example. Use vertical 24 and horizontal 16 for a section. Use four values when its bottom needs more breathing room.

Interactions and limitations. Padding is not space between siblings: use the parent Frame’s Gap for that. Padding contributes to a Hug size and reduces the content space inside a Fixed size.

Default

First overlay in the page when adding a Frame command.

Values and units

A current-page overlay Frame, identified by its label; shown only for Open Frame, Close Frame, or Toggle Frame.

Stores the stable target node ID, so renaming or reordering the Frame preserves the connection.

Example. Choose Mobile menu for the Menu and Close Buttons. Give Frames distinct labels to make choices clear.

Interactions and limitations. Copy the complete header/menu group to remap internal targets to copied IDs. Copying a Button alone within the same page retains an available target; copying across pages reports unresolved targets before changing destination content. Missing or converted targets must be repaired or their commands removed before saving. Overlay state is never copied.

Default

Select a product.

Values and units

An existing product from this project.

Chooses which catalog record supplies the card.

Example. Select a featured item, then verify its image and price in generated output.

Interactions and limitations. A missing selection cannot produce a complete card. Edit product content in the catalog.

Default

Off.

Values and units

On or off.

Gives the generated card a wider featured layout; wide screens can place image and content side by side.

Example. Turn on for a single lead product above a product collection.

Interactions and limitations. This changes this node’s presentation, not the product record or sorting of other lists. Check mobile and desktop.

Default

0 on all sides for newly added nodes.

Values and units

Non-negative CSS pixels. Uniform padding uses one value; Vertical and horizontal padding uses two; Individual side padding uses top, right, bottom, left.

Adds space inside the node, between its edge and its content. The value-count buttons change which sides you edit together.

Example. Use vertical 24 and horizontal 16 for a section. Use four values when its bottom needs more breathing room.

Interactions and limitations. Padding is not space between siblings: use the parent Frame’s Gap for that. Padding contributes to a Hug size and reduces the content space inside a Fixed size.

Default

Empty: all eligible products.

Values and units

Multiple existing project products.

Limits the starting set to selected products; an empty selection imposes no allow-list restriction.

Example. Select three products for a small collection.

Interactions and limitations. Excluded products are removed after the allow list, even when selected in both lists. Use the platform’s multiple-selection keyboard gestures.

Default

Empty: no exclusions.

Values and units

Multiple existing project products.

Removes selected products from the list.

Example. Allow all products, then exclude an item not intended for this page.

Interactions and limitations. Exclusion wins over inclusion. Removing a product from this list does not delete it from the catalog.

Default

Off.

Values and units

On or off.

Adds visitor-facing search to filter the generated product cards.

Example. Enable it for a longer collection and search for part of a product title.

Interactions and limitations. The filter operates on the available list; it cannot reveal products excluded by the author. Static output uses its build snapshot.

Default

0 on all sides for newly added nodes.

Values and units

Non-negative CSS pixels. Uniform padding uses one value; Vertical and horizontal padding uses two; Individual side padding uses top, right, bottom, left.

Adds space inside the node, between its edge and its content. The value-count buttons change which sides you edit together.

Example. Use vertical 24 and horizontal 16 for a section. Use four values when its bottom needs more breathing room.

Interactions and limitations. Padding is not space between siblings: use the parent Frame’s Gap for that. Padding contributes to a Hug size and reduces the content space inside a Fixed size.

Default

Inherited/default text color when unset.

Values and units

Custom hex, named project color, or theme color.

Colors the protected invoice rows or totals generated from order data.

Example. Use the same text color for order rows and subtotal so the invoice reads consistently.

Interactions and limitations. The picker’s accessible label is Order item text color. Verify the actual rendered invoice/PDF; template editing is not proof of data rendering.

Default

20px.

Values and units

Non-negative CSS pixels.

Sets spacing between the invoice’s generated columns.

Example. Increase the gap when amounts crowd a long item description.

Interactions and limitations. This is internal column spacing, not the parent Frame’s gap between nodes. Check long descriptions and large amounts.

Default

Inter.

Values and units

Font family name as text.

Selects the typeface used for the generated invoice data.

Example. Match the family used by surrounding invoice labels.

Interactions and limitations. A name alone does not upload a font. Confirm that the PDF renderer can resolve the chosen font.

Default

16px.

Values and units

CSS pixels, at least 1.

Sets the size of the generated invoice text.

Example. Try 14px for a dense invoice, then inspect a representative PDF at reading size.

Interactions and limitations. Larger text needs more row height and may increase the number of pages.

Default

400.

Values and units

300, 400, 500, 600, 700, 800, or 900.

Chooses the weight for generated invoice text.

Example. Use 400 for ordinary rows and compare 600 on the subtotal.

Interactions and limitations. The selected font must provide the weight. Verify both readable contrast and numeric alignment in the PDF.

Default

On.

Values and units

On or off.

Includes fee rows alongside the order’s product rows.

Example. Turn it off when a separate Fee list should display fees elsewhere on the invoice.

Interactions and limitations. This changes where fees are shown, not the order’s fees or calculations. Check that fees appear exactly where intended.

Default

0 on all sides for newly added nodes.

Values and units

Non-negative CSS pixels. Uniform padding uses one value; Vertical and horizontal padding uses two; Individual side padding uses top, right, bottom, left.

Adds space inside the node, between its edge and its content. The value-count buttons change which sides you edit together.

Example. Use vertical 24 and horizontal 16 for a section. Use four values when its bottom needs more breathing room.

Interactions and limitations. Padding is not space between siblings: use the parent Frame’s Gap for that. Padding contributes to a Hug size and reduces the content space inside a Fixed size.

Default

Inherited/default text color when unset.

Values and units

Custom hex, named project color, or theme color.

Colors the protected invoice rows or totals generated from order data.

Example. Use the same text color for order rows and subtotal so the invoice reads consistently.

Interactions and limitations. The picker’s accessible label is Order item text color. Verify the actual rendered invoice/PDF; template editing is not proof of data rendering.

Default

20px.

Values and units

Non-negative CSS pixels.

Sets spacing between the invoice’s generated columns.

Example. Increase the gap when amounts crowd a long item description.

Interactions and limitations. This is internal column spacing, not the parent Frame’s gap between nodes. Check long descriptions and large amounts.

Default

Inter.

Values and units

Font family name as text.

Selects the typeface used for the generated invoice data.

Example. Match the family used by surrounding invoice labels.

Interactions and limitations. A name alone does not upload a font. Confirm that the PDF renderer can resolve the chosen font.

Default

16px.

Values and units

CSS pixels, at least 1.

Sets the size of the generated invoice text.

Example. Try 14px for a dense invoice, then inspect a representative PDF at reading size.

Interactions and limitations. Larger text needs more row height and may increase the number of pages.

Default

400.

Values and units

300, 400, 500, 600, 700, 800, or 900.

Chooses the weight for generated invoice text.

Example. Use 400 for ordinary rows and compare 600 on the subtotal.

Interactions and limitations. The selected font must provide the weight. Verify both readable contrast and numeric alignment in the PDF.

Default

0 on all sides for newly added nodes.

Values and units

Non-negative CSS pixels. Uniform padding uses one value; Vertical and horizontal padding uses two; Individual side padding uses top, right, bottom, left.

Adds space inside the node, between its edge and its content. The value-count buttons change which sides you edit together.

Example. Use vertical 24 and horizontal 16 for a section. Use four values when its bottom needs more breathing room.

Interactions and limitations. Padding is not space between siblings: use the parent Frame’s Gap for that. Padding contributes to a Hug size and reduces the content space inside a Fixed size.

Default

Inherited/default text color when unset.

Values and units

Custom hex, named project color, or theme color.

Colors the protected invoice rows or totals generated from order data.

Example. Use the same text color for order rows and subtotal so the invoice reads consistently.

Interactions and limitations. The picker’s accessible label is Order item text color. Verify the actual rendered invoice/PDF; template editing is not proof of data rendering.

Default

20px.

Values and units

Non-negative CSS pixels.

Sets spacing between the invoice’s generated columns.

Example. Increase the gap when amounts crowd a long item description.

Interactions and limitations. This is internal column spacing, not the parent Frame’s gap between nodes. Check long descriptions and large amounts.

Default

Inter.

Values and units

Font family name as text.

Selects the typeface used for the generated invoice data.

Example. Match the family used by surrounding invoice labels.

Interactions and limitations. A name alone does not upload a font. Confirm that the PDF renderer can resolve the chosen font.

Default

16px.

Values and units

CSS pixels, at least 1.

Sets the size of the generated invoice text.

Example. Try 14px for a dense invoice, then inspect a representative PDF at reading size.

Interactions and limitations. Larger text needs more row height and may increase the number of pages.

Default

400.

Values and units

300, 400, 500, 600, 700, 800, or 900.

Chooses the weight for generated invoice text.

Example. Use 400 for ordinary rows and compare 600 on the subtotal.

Interactions and limitations. The selected font must provide the weight. Verify both readable contrast and numeric alignment in the PDF.

Default

On.

Values and units

On or off.

Shows or hides the aggregate fees summary line in the totals area.

Example. Keep it on when the reader needs to see the combined fee amount beside other totals.

Interactions and limitations. Hiding the summary line does not remove fees from the order or change the amount owed. Compare the rendered PDF to order totals.