> For the complete documentation index, see [llms.txt](https://docs.scaleflex.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scaleflex.com/studio/template-builder/building-a-template/layouts.md).
# 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**.
{% hint style="warning" %}
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**.
{% endhint %}
#### 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.
{% hint style="info" %}
Content is shared, geometry is not. Editing the words in a text layer changes them everywhere; moving that layer changes only the current layout.
{% endhint %}
### 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](/developers-headless/studio/template-builder/render-url.md) 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](/studio/template-builder/building-a-template/layers.md) to add content.
* [Variations](/studio/template-builder/variations.md) to pick a layout when producing an image.
