# Template editor (basics)

> Get oriented in the template editor and learn the basics: the four regions, creating design elements, and adding input fields.

Source: https://bluepic.io/help/design-elements-and-tools/template-editor-basics  
Language: en  
Category: design-elements-and-tools  
Last updated: 2026-06-10

The template editor is made up of four main regions.

- **Toolbar**: the bar across the top. It holds your tools for adding elements, the [design tools](https://bluepic.io/help/design-elements-and-tools/design-tools) for positioning them, the [layout grid](https://bluepic.io/help/design-elements-and-tools/layout-grid), [input fields](https://bluepic.io/help/input-fields), undo and redo, your save status, and **Publish**.
- **Canvas**: the area in the middle where your design lives and where you arrange elements.
- **Property Panel**: on the left. Select an element to edit its properties here. It stays empty until you select something.
- **Layer Panel**: on the right. The stacked list of every element in your design.

![](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/af56a551-c2e8-4f09-fc9f-cd6314d37e00/max)

## Create design elements

Pick a tool from the **Toolbar** (image, text, shape, or path), then draw it on the **Canvas**. With an element selected, its options appear in the **Property Panel**. For what each type can do, see [Design elements](https://bluepic.io/help/design-elements-and-tools/design-elements).

![](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/2f22842b-9584-49e2-1eef-f5c872091b00/max)

## Add input fields

Input fields are the controls your end-users see in the published design generator. To create one, expose an element's property with **Add Input Field** in the Toolbar. See [Adding input fields](https://bluepic.io/help/input-fields/adding-input-fields).

![](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/09b7db0b-4e8b-4cac-a840-8f10a288c900/public)

## Manage input fields

Click **Show Input Fields** in the Toolbar to open the list of all your input fields, where you can reorder, edit, and remove them. See the [Input fields](https://bluepic.io/help/input-fields) section for details.