Frames & layout

A frame is a box that holds other items. Use frames to group things that belong together - a card, a navigation bar, a pricing column - so they move, resize and behave as one.

Making a frame

• From a selection - select two or more items and press Ctrl + G (or use Group in the panel). A frame is drawn around them; nothing moves.
• Empty - click Frame on the toolbar, then drag items into it.
• By dropping - hold Alt while dropping one item onto another to combine them into a new frame.
• While something is already selected - press any "Add" toolbar button (text, image, button…) with a frame (or an item inside one) selected, and the new item is added straight into that same frame - as that frame's child if the frame itself was selected, or as a new sibling right next to whatever item was selected. Nothing selected adds it at the top level, same as before.

To take an item out of a frame, drag it outside the frame's visible bounds - it detaches to a top-level item at wherever you dropped it. To move it into a DIFFERENT frame without dragging, use the "Parent frame" dropdown (Properties → Layout) and pick the target frame directly. To remove the frame but keep its contents where they are, select the frame and press Ctrl + Shift + G (ungroup). Deleting a frame deletes everything inside it (undo brings it back).

Arranging what's inside

Rows and columns also offer Width and Height: Fixed keeps the size you set; Hug contents makes the frame grow and shrink to fit what's inside. Resizing a hugging side by hand switches it back to Fixed. Stack on phones turns a row into a column on phones (a Carousel keeps swiping on phones by default instead, since that's a natural touch gesture - check the box if you want it to stack there too).

Lining things up evenly

Any Row, Column or Grid frame has two alignment dropdowns - "Spread across/down" (how items are distributed along the main direction: from the start, centred, to the end, or spaced evenly between) and "Line up" (how they sit on the other axis: start, centre, end, or stretch to fill). Combine Centred with an "Inner padding" value and a single "Gap between items" to get items centred as a group with identical breathing room on every side - that gap stays identical automatically as you add, remove or reorder items. On a Grid frame, these two fields centre an item WITHIN its own cell rather than across the whole row.

Linking a whole frame

A frame can be a link too, not just text or an image inside it - open its Properties and use the "Link" field near the top of the Frame section, same as any other item. Inside a Collection's card template, the same thing is offered as "Fill from post" → "Link to the post", so the whole card can open the real page it represents (see Collections).

Rounded corners clip their content

Setting a Corner radius (Appearance) on an image, video or any other leaf item automatically clips its content to match - you don't need a separate step to make the rounding actually visible. A frame's own corner radius is left alone on purpose, since a frame may deliberately need something (like a dropdown) to show outside its rounded box.

Frame roles

A frame's Role (Properties → Frame) tells search engines and screen readers what the frame is. It doesn't change how it looks.