The layout editor: drag, resize and layer, without breaking on phones
In Edit mode you can select any element on the page, drag it within its section, or drag its edge to resize it. The layout editor never records a drop as a fixed position. Each drop becomes an order, a layer or an anchor, and each resize becomes a share of the row snapped to its columns, so the page still works on a phone. A keyboard inspector edits the same rules.
Why drops don't become coordinates
The classic drag and drop layout editor stores where you let go: 312 pixels from the left, 80 from the top. That looks right on the screen you used and wrong on every other one, which is why so many hand-arranged sites fall apart on a phone. Anticode's editor reads your intent from the drop instead and writes it as a rule the page compiler understands. The result is the same arrangement you made, expressed in a form that reflows.
What each gesture becomes
| You do | It becomes |
|---|---|
| Drag an element between two others | A new order within its section |
| Drag it onto the middle of a neighbour | A layer over that neighbour, such as a heading over a photo |
| Drag a layer to a corner or edge of what it covers | One of nine anchors: top left, top, top right, left, middle, right and the bottom three |
| Drag an element's right edge | A width: a number of columns in a grid, or a share of the row snapped to common fractions |
While you drag, a line shows where an element will land in the order and a box labelled "Layer over …" shows when it will become a layer. Escape cancels a drag. Every change is described in plain words in the edit log, such as "Services heading → 2 of 3 columns".
The inspector, for the keyboard and for precision
Select an element by clicking it or by choosing it from the Element list, grouped by section. Its grip moves it with the arrow keys and its size handle resizes it with left and right. The Layout panel then offers:
- Arrange
- Whether the containing frame is a column, a row or a grid; the number of columns; the gap; the space around; the narrowest a column may get; alignment (start, centre, end or fill); and Move earlier or Move later.
- Size
- Columns spanned in a grid, or a width slider in steps of five per cent; never under and never over limits in pixels; and, in a row, fill the rest of the row.
- Position
- Stay in view while the section scrolls (sticky) with a distance from the top; layer over another element, its anchor, cover it fully, and a readable panel behind the text.
- Motion on scroll
- Default, None, Rise or Drift.
Reset element and Reset for the frame undo your layout choices at either level. Focus returns to the control you used after each rebuild, so keyboard users don't lose their place.
Staying correct at every width
Because widths are columns or fractions with optional pixel limits, the page compiler can work out how your arrangement reflows as the screen narrows, using the narrowest-column setting and any pixel limits you set, while layers keep their anchor relative to what they cover. Scroll motion is written with CSS scroll-driven animation, used only in browsers that support it and switched off for visitors whose device asks for reduced motion, which is also one of the checks the design gate enforces before publishing.
As with every edit, the page is rebuilt from the project and the design and security checks run again, so a layout change can't quietly break something Sentinel or the Critic look for.
Limits
- Within a section. Elements move inside their own section. To move whole sections, use the section handles of the visual editor.
- Pages, not apps. It works on pages laid out by the design engine. Model-written apps are changed by asking in words.
- Some pages are fixed. Dashboards keep a fixed layout and show a note instead of the controls.
- No free positioning. You can't place an element at an arbitrary point; that's deliberate, for the reasons above.
- A layer can't be dragged on its own. Set Layer over to None first, then move it like any other element.
Questions people ask
Will moving things on desktop break my mobile layout?
It shouldn't. Each drop is stored as an order, layer, anchor or column-based width, which the page compiler reflows for narrow screens. Check the phone preview after big changes anyway.
Can I put text over an image?
Yes. Drag the text onto the middle of the image to make it a layer, pick an anchor, and keep the readable panel on so the text has enough contrast.
Does the layout editor use my build allowance?
No. Layout changes are applied by the design engine in your browser with no model call.
Can I use it without a mouse?
Yes. Every gesture has a keyboard equivalent: arrow keys on the grip and size handle, and the inspector's controls for everything else.