Find your way around the template editor

In the template editor you design your templates. It has four areas, and each tool has its fixed place in one of them.

• The toolbar at the top holds the tools.
• On the canvas in the middle you build your design.
• In the properties panel on the left you set how an element looks.
• In the layers panel on the right you see all elements of your design.

Toolbar

The toolbar runs along the top of the editor. On its left you save and switch canvases. In the middle you find the tools for designing. On the right are Input Fields and Share.

Element tools

With these tools you select elements and add new ones. Elements are the building blocks of your design, for example an image or a text.

• Cursor button: selects elements on the canvas. Hover over it to switch to Canvas Drag (move the view) or Scale (scale proportionally). See Design tools.
• Image tool: opens the Image Library popup with your uploaded images and the Icons tab. There you pick or upload an image, or choose an icon. Hover over the tool and choose Circle Image if the image should be round.
• Shape tool: adds a rectangle. Hover over it and choose Ellipse for a circle or an oval.
• Add text: adds a text.
• Add path: draws your own shape, point by point. See Draw and edit a path: create your own shapes and lines.
• Mask elements: cuts one element to the shape of another. Select two elements first. See Mask elements: crop an image to a shape.

Other tools

On the left of the toolbar

• Back to templates: takes you back to your templates.
• Save: shows whether your changes are saved. When the button is greyed out, everything is saved. By default, Studio saves automatically. Hover over the button to turn autosave off with Disable Autosave and save yourself. See Turn off autosave and save yourself.
• Undo and Redo: undo a step or repeat it.
• 1080×1080 Canvas picker: shows the size of the open canvas and switches between canvases. Canvases are different sizes of the same template.

In the middle of the toolbar

• Grid button: shows or hides the layout grid and the connections between elements.
• 90% Zoom: makes the view bigger or smaller.
• Align: lines up the selected elements with the canvas or with each other. It only works when an element is selected.

To the right of the element tools

• Connect expressions: links a property to an expression. See Use the expression editor.
• Anchoring tool: connects the edges or surfaces of elements, so the layout adapts to its content. See Anchoring tool.
• Create Input Field: creates an input field. With it, users can change a text, an image or another property in the design generator.

In video templates a fourth tool appears here, Animate a property. See Animate a template: make a video with moving elements.

On the right of the toolbar

• Input Fields opens the Input Fields view. There you see and configure all input fields of your template.
• Share opens a menu with Create campaign, Automate, Publish Template Link and Open Batch Editor.

Canvas

The canvas in the middle is the surface of your design. Here you place and edit elements. If your template has several canvases, you always see the one you chose in the canvas picker.

• Click an element to select it.
• Drag an element to move it.
• Drag its handles to change its size.
• Hold the Space bar and drag to move the view.

Properties panel

In the properties panel on the left you set how an element looks. Select an element on the canvas or in the layers panel. The panel then shows its properties. When nothing is selected, it shows the settings of your design: Canvas (size), Format (file format), Fill (background) and Advanced.

Layers panel

In the layers panel on the right you see all elements of your design and how they are nested.

You can also select elements that are hidden behind others. Groups and masks contain further elements. When you move the mouse over a row, buttons appear to hide or lock the element.

Build and test

1. Add text, images or shapes with the toolbar and place them on the canvas.
2. Set their look and layout in the properties panel.
3. Click Create Input Field to let users change a text or an image.
4. Click Input Fields to configure your input fields.
5. Click Share and then Publish Template Link. Bluepic saves your template and publishes it with a link.
6. Click Copy URL in the popup and open the link in a new browser tab. The design generator opens.
7. Test your template there with short and long texts, different images and every canvas.