Skip to content

Frame

A frame is a rectangular region that holds other objects (widgets and groups). It is the main “screen” or column inside the article.

Frame role

Set the frame role in properties:

  • Frame — a normal container: bounds and grid for children; not used for viewport selection.
  • Breakpoint — this frame is a responsive variant of the article; multiple breakpoints define adaptive layout. See Breakpoints.

Breakpoint frames expose width boundaries (on the scale) and Scalable — whether content scales inside the range.

Grid & look

Frames support a grid for aligning children and a background for the region. Some style controls are trimmed compared to widgets so decoration stays on content, not on every nested shell.

Color Changer

Color Changer is available on frames with the Breakpoint role. It is a set of vertical markers inside the frame: as the article scrolls to a marker, the article background and default text color change.

A Color Changer marker contains:

  • Y — the marker's vertical position inside the frame.
  • Background — the marker background: solid, gradient, or image. Image backgrounds use the color control's size, position, and repeat settings.
  • Text — the default text color after the marker becomes active. Explicit colors inside text widgets remain stronger than this value.

Section settings:

  • Scope — the background area. Article paints the frame/article width, while Site stretches the layer to the viewport width so it can behave like the host site's page background around the article.
  • Attachment — how the layer moves. Local scrolls with the article, while Fixed stays in the viewport and is visually clipped to the article top and bottom. Blocks does not use attachment: blocks are always local.
  • Mode — how the background is rendered. Crossfade replaces the current layer with the next layer, Overlay keeps passed layers stacked, and Blocks renders static vertical blocks between markers.
  • Mixing — how Crossfade and Overlay blend layers. Timed animates when the active marker changes, while Scroll ties blending to scroll progress between the current and next marker.
  • Duration — animation duration for Timed mixing. The default is 250ms linear.
  • Preview in editor — runs Color Changer directly on the editor canvas. In the editor, the background is forced to stay inside the frame so it does not cover neighboring frames.

Defaults: Article, Local, Crossfade, Timed, 250ms.

On the published page, the background is owned by the article: even Site + Fixed does not paint sections after the article, such as related materials, comments, or feeds.

Typical use

Use separate frames for desktop / mobile (or other widths) and place article blocks inside. A regular Frame can sit inside a breakpoint — e.g. a column or card.