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. The frame background can be solid, gradient, or image; image backgrounds use the same size, position, repeat, and solid/gradient underlay controls as widget backgrounds. 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, repeat, and underlay settings. Size can use presets or Custom width/height percentages; repeat supports no repeat, repeat, X/Y-only repeat, space, and round. Underlay accepts solid or gradient colors below the image.
  • 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.