Move and resize blocks on the page

You can change most of a block's size and spacing right on the page, without opening the panel on the right. Click a block and small bars appear on it. Drag a bar and the number in the panel follows. Everything here can be undone with Ctrl + Z (Cmd + Z on a Mac).

What you see when you click a block

• A thin terracotta box marks the selected block.
• Its neighbours in the same stack get a dashed box, so you can see what sits beside it.
• Moving the mouse over another block shows a thin box on that block too.
• Small bars sit on the edges you can resize. A block set to Fill has no bar on that side, because its size comes from its parent.

Resize by dragging

Drag a bar on the top, bottom, left or right edge. A small label under the block reads the width and height while you drag, for example 532 × 655. Let go and the size is saved. The Width or Height field in the panel switches to Fixed with that number. A Relative size stays a percentage.

• Hold Shift to keep the block's proportions.
• Hold Alt (Option on a Mac) to resize from the centre, so both sides move.
• Double-click a bar to set that side back to Fit content.
• Press Escape while dragging to cancel.

Very small blocks show the box but no bars. Use the panel for those.

Padding and gap

Click a stack or grid that holds other blocks. Two kinds of bars appear:

• Padding bars sit just inside the edges that are set to Fit content. Drag one to change the padding on that side. When the opposite side has the same padding, both change together. Hold Alt to change one side only, or Shift to change all four sides in steps of 10.
• Gap bars are purple and sit between the blocks inside. Drag one to change the gap between all of them. Hold Shift for steps of 10.

The number shows beside the bar while you drag. A single click on a bar, without dragging, jumps to the matching field in the panel.

Round the corners

A selected block that is at least 32 pixels wide and tall shows a small white circle with a terracotta ring just inside its top left corner. Drag the circle towards the middle of the block and all four corners round off as you go. A small label by your mouse reads the radius, for example 24. Let go and the number is saved to the Radius field in the panel.

• The circle sits further in the more rounded the corners already are, so you can see the current radius at a glance.
• Drag back towards the corner to make the corners square again. It stops at 0.
• The radius cannot go past half of the block's shorter side, so a square becomes a circle at most.
• Press Escape while dragging to cancel.
• Text does not get the circle: headings, paragraphs, labels, and buttons or links that hold only text. Round those from the panel instead.

To round each corner by a different amount, or to round text, buttons and links, use the Border section in the panel.

Move a block by dragging

Press on a block and drag it. The block follows your mouse, its old place stays empty, and a terracotta line shows where it will land. The stack that will receive it gets an outline. Drop it into another stack and the page rearranges while you are still dragging, so you can see the result before you let go.

• Let go over a valid spot to place the block.
• Let go somewhere it cannot go, or press Escape, and the block slides back to where it was.
• Drag near the edge of the editor and the page scrolls for you.

A short click still selects the block. The grip button above a selected block also drags it, as before.

Select more than one block

Drag on an empty part of the page to draw a box. Every block it touches is selected. Hold Shift to add to a selection, or Alt to pick only blocks that are fully inside the box. The selected blocks share one outer box.

Keyboard

Keys	What happens
Escape	Selects the parent of the selected block. At the top, clears the selection.
Enter	Selects everything inside the selected stack or grid.
Shift + Enter	Selects the parent.
Arrow keys	Moves a block with Absolute position by 1 pixel. Blocks inside a stack do not move with the arrows.
Shift + Arrow	Moves it by 10 pixels.
Ctrl + Arrow (Cmd on a Mac)	Makes a block with a Fixed size bigger or smaller by the same steps.

To change the 1 and 10 pixel steps, open Settings, then Shortcuts, and choose Nudge amount. You can also search for Nudge amount in the command bar.

Guides for Absolute blocks

When you drag a block whose position is Absolute, purple guide lines appear as its edges or centre line up with the blocks around it, and the block snaps into line. When the space to a neighbour matches the space between other blocks, the equal spaces are shaded and labelled. Hold Ctrl (Cmd on a Mac) to drag freely without snapping.

With a block selected, hold Alt and move the mouse over another block to see the distance between them.

Common questions

I dragged a bar but nothing changed. That side is probably set to Fill. Open the panel, change Width or Height to Fixed or Fit content, and the bar appears.

Can I rotate a block? Not yet. The editor has no rotation.