Studio Design

Aligning and Distributing Widgets

4 min read

Line widgets up, space them evenly, tidy a messy scene in one click, and lock the pieces you don't want to move again.

Dragging widgets into place by eye gets a scene 90% of the way there. The last 10% — the row of buttons where one sits four pixels low, the three cards with slightly different gaps — is what makes a lesson look either deliberate or rushed.

The Align & distribute menu does that last 10% for you. You'll find it in the widget toolbar at the top of the canvas, behind the button with the alignment icon.

Aligning

Select two or more widgets, open Align & distribute, and pick one of the six alignment buttons:

Left, horizontal centres, right — line widgets up along a vertical edge
Top, vertical centres, bottom — line them up along a horizontal edge

The widgets line up against the outer edges of your selection. Align three buttons to the left and they all move to the left edge of the leftmost one — nothing jumps somewhere you weren't already looking.

With just one widget selected, aligning centres it on the scene instead. This is the quickest way to centre a title: select it, open the menu, and click Align horizontal centres. The menu tells you when it's about to do this.

Distributing

Distribute evens out the space _between_ widgets. Select three or more, then choose Distribute horizontally or Distribute vertically.

The first and last widget stay exactly where they are — they set the space being filled — and everything in between shifts so the gaps are equal.

Note that Berdee evens out the gaps, not the centre points. If your widgets are different sizes — and buttons usually are, since they grow to fit their labels — equal gaps is what actually looks even. Equal centre spacing would leave a wide button crowding its neighbour on one side.

Distribute needs at least three widgets. With two, they're already the first and last, so there's nothing in between to space out.

Setting an exact gap

Under the distribute buttons is a Gap field showing the current spacing in pixels. Type a number and press Enter to lay your selection out with exactly that gap.

The label tells you which direction it will work in — Gap across for a row, Gap down for a column — chosen from how your widgets are currently arranged. The first widget stays put and the rest follow at the spacing you asked for.

This is how you get a deliberate rhythm across a lesson. Pick a number — 16 or 24 works well — and use it for every group of related widgets, so scenes feel like they belong to the same lesson.

Tidy up

Tidy up is align and distribute in a single click. Select a roughly-arranged group and press it:

Widgets sitting in one row get their centres lined up and their gaps evened out.
Widgets in one column get the same treatment vertically.
Anything else is arranged into an even grid, with the rows lined up and evenly spaced.

Tidy up always works inside the space your selection already occupies, so nothing flies off to a corner of the scene. It's the fastest way to rescue a scene that got messy while you were experimenting.

Locking widgets in place

Once a widget is where you want it, select it and press Lock in the toolbar.

A locked widget can't be dragged, resized, or edited by accident. When you select one, it shows a dashed outline instead of resize handles, so you can tell it's selected but won't move. That makes it perfect for:

A background image or decorative panel you keep grabbing instead of the widget on top of it
A header that should stay put while you rearrange everything below it
Anything you've finished and don't want to disturb

Press the button again to unlock. If you've selected a mix of locked and unlocked widgets, the first press locks all of them — Berdee won't release something you deliberately protected without you asking twice.

Locked widgets still count when Berdee works out where things go: they help define the edges your other widgets align to, they just don't move themselves. If a distribute or tidy would need to move a locked widget, nothing happens at all — Berdee won't give you a half-finished layout.

Snapping while you drag and resize

You don't always need the menu. As you drag a widget, it snaps to line up with its neighbours' edges and centres, and pink guide lines show you what it's lining up with.

The same thing happens while you resize. Drag a handle and the edge you're moving snaps to nearby widgets' edges and centres, and to the scene's own edges and middle — so making two cards the same width, or stretching an image to meet the panel beside it, takes one drag instead of a trip to the properties panel.

The rest of the widget stays put while you resize: dragging the left handle only moves the left edge.

Rotating

Drag the handle above a selected widget to rotate it. It settles onto 15° steps as you turn, so straight is easy to get back to and the common angles land exactly.

For an exact angle, use the Rotation slider in the properties panel on the right.

A workflow that works

Drop your widgets roughly where they belong — don't fuss over placement.
Select the group and press Tidy up.
Set an exact Gap if you want the spacing to match another scene.
Lock anything you're finished with.

You'll get a cleaner result in less time than nudging widgets one arrow key at a time. To follow this workflow step by step on a real scene, try the tutorial Line up a row of pictures with Tidy up, Gap, and Lock.