A tidy design looks more professional, and customers trust it more. This guide shows you how to line up elements, space them evenly, neaten a row or column, and flip a single element in the Design Studio. It is for anyone building or editing a product template who wants clean, deliberate placement instead of eyeballing it.
Align elements
Alignment lines up two or more elements along a shared edge or center. Pick one of six options: align left, center horizontal, align right, align top, center vertical, or align bottom.
You can reach the align controls in three places: the Properties panel in the sidebar, the Align dropdown in the floating toolbar above the canvas, and the right-click menu on the canvas. They all do the same thing, so use whichever is closest.
Select two or more elements
Click the first element. Then Shift-click each other one you want to include. You can also drag a marquee box across the canvas to grab several at once. Alignment needs at least two elements selected.
Open the align controls
Once two or more elements are selected, the align controls appear in the Properties panel. They also live behind the Align dropdown in the floating toolbar, and under the right-click menu on the canvas.
Pick an edge or center
Choose align left, right, top, or bottom to snap the elements to that shared edge. Choose center horizontal or center vertical to line them up on a shared center. The elements move into place at once.
Distribute and tidy
Distribute spreads elements out so the gaps between them are even. This is useful when you have placed several elements roughly and want clean, equal spacing.
There are two ways to distribute:
- Equalize the gaps. This needs three or more elements. It keeps the outermost two in place and spaces everything in between so each gap is identical. In the right-click menu these are Distribute horizontally and Distribute vertically.
- Set an exact spacing. Click the chevron next to a distribute button to open the custom spacing popover. Type a pixel gap, and the elements line up with exactly that distance between them. This works with two or more elements, so you can use it even when equalize is not available.
Distribute evenly
Select three or more elements, then choose distribute horizontally or vertically. The gaps between them become equal.
Or set a custom gap
Click the chevron beside a distribute button. Enter the exact pixel spacing you want, and the elements space out to match.
Tidy up a row or column
Select the elements and choose Tidy up. Composerie reads your selection as a row or a column, equalizes the gaps along that main axis, and centers the elements on the other axis. It is a one-click way to clean up a line of elements.
To recenter your whole selection on the canvas, use Center on page from the right-click menu. It centers the selection on the artboard without changing the spacing inside it.
Snapping guides and flipping
While you drag an element around the canvas, Composerie shows guides to help you place it. You do not have to click anything. The guides appear on their own as you move.
You will see three kinds of guide:
- Violet edge guides appear when an edge or center lines up with another element. Let go while the guide is showing, and the element snaps into alignment.
- Dashed spacing guides with a pixel badge show the distance between elements, so you can match gaps by eye.
- Baseline guides help you line up text along its typographic baseline.
To flip a single element, right-click it on the canvas and choose Flip horizontal or Flip vertical. This mirrors the element in place. Flip is available for a single non-text element, such as an image or a shape. It does not appear for text or when more than one element is selected.
FAQ
Why are the align controls not showing?
Alignment needs two or more elements. Select a second element with Shift-click, and the controls appear.
Why is distribute greyed out?
The equalize distribute needs three or more elements. With two selected, use the chevron to set an exact spacing instead.
Where did the flip option go?
Flip shows only for a single non-text element. It is hidden for text and for multi-element selections.
Do align and distribute change a customer design?
No. These tools arrange elements in your template. They do not lock anything for shoppers. Customer-editable behavior is set separately.
Next
Once your elements sit where you want them, organize and reorder them with the layers panel.