Layouts

A layout is one output size of your template. It holds the canvas dimensions, the background, and the position and size of every layer at that size.

Layers themselves belong to the template, so a headline you add once exists in every layout. What changes per layout is where it sits, how big it is and how its text is set. That is what lets one template produce a wide banner and a square social post without maintaining two designs.

Every template has at least one layout, and one of them is the default.

Adding a layout

1. In the left rail, next to Layouts, click + Add.

2. Give the layout a Name, 3 to 32 characters.

3. Pick a Canvas size preset, or set Width and Height yourself. The lock between them keeps the proportions.

4. Choose a Color for the background.

5. Under Base layer positioning on layout, pick the layout to copy positions from. It defaults to the one you are working in.

6. Click Add.

A layout's slug is fixed at the moment it is created. It is derived from the name you type here, for the first layout as for every other, and nothing afterwards changes it - renaming the layout leaves the slug alone. Since the slug is how a render request asks for a particular layout, a request naming a slug the template no longer has falls back to the default layout. Get the name right before you click Add.

How layers are carried over

The layout you base a new one on decides where everything starts. Each layer's position, size, font size, letter spacing and baseline shift are scaled to the new canvas, so a design built for 800 x 400 arrives at 1080 x 1080 roughly intact rather than clustered in one corner.

Scaling is a starting point, not a result. Text that fitted a wide banner usually needs its size or line breaks adjusted for a square one. Adjust freely: you are only changing the layout you are in.

Content is shared, geometry is not. Editing the words in a text layer changes them everywhere; moving that layer changes only the current layout.

Editing a layout

Click a layout in the rail to work on it. With no layer selected, the properties panel on the right shows the layout itself, under Dimensions:

Property	What it does
Width, Height	Canvas size in pixels, 10 to 5000. The lock keeps the proportions
Background	Canvas background color. The first swatch is transparent
Opacity	Opacity of the background, 0 to 100 percent

The default layout

One layout is marked default. It is the one used when an image is requested without naming a layout, and it is the one the template's thumbnail and preview come from.

To change it, open a layout's menu and choose Make default.

A render request names a layout with $layout, set to the layout's slug rather than its name - normally the name lowercased, with anything that is not a letter or a digit turned into an underscore, so Square post is reached with ?$layout=square_post. Leave the parameter off and the default layout renders. The render URL page lists every parameter a link can carry.

Renaming, duplicating and deleting

Hover a layout in the rail and open its menu:

Action	What happens
Rename layout	Edit the name in place. Press Enter to keep it, Esc to abandon it
Duplicate layout	Copies the layout with all of its positioning
Make default	Marks it as the layout used when none is named
Delete layout	Removes it after a confirmation

You cannot delete the last remaining layout: a template always needs one.

Where to go next

• Layers to add content.

• Variations to pick a layout when producing an image.