Übersicht: Template-Editor

Im Template-Editor gestaltest du deine Templates. Er hat vier Bereiche, und jedes Werkzeug hat seinen festen Platz in einem davon.

• Die Toolbar oben enthält die Werkzeuge.
• Auf dem Canvas in der Mitte baust du dein Design.
• Im Properties-Panel links stellst du ein, wie ein Element aussieht.
• Im Layers-Panel rechts siehst du alle Elemente deines Designs.

Toolbar

Die Toolbar liegt oben im Editor. Links speicherst du und wechselst den Canvas. In der Mitte findest du die Werkzeuge zum Gestalten. Rechts liegen Input Fields und Share.

Elemente-Werkzeuge

Mit diesen Werkzeugen wählst du Elemente aus und fügst neue hinzu. Elemente sind die Bausteine deines Designs, zum Beispiel ein Bild oder ein Text.

• Cursor-Button: wählt Elemente auf dem Canvas aus. Fahre mit der Maus darüber, um zu Canvas Drag (Ansicht verschieben) oder Scale (proportional skalieren) zu wechseln. Siehe Design-Werkzeuge.
• Bild-Werkzeug: öffnet das Popup Image Library mit deinen hochgeladenen Bildern und dem Tab Icons. Dort wählst du ein Bild aus, lädst eines hoch oder wählst ein Icon. Fahre mit der Maus über das Werkzeug und wähle Circle Image, wenn das Bild rund sein soll.
• Form-Werkzeug: fügt ein Rechteck hinzu. Fahre mit der Maus darüber und wähle Ellipse für einen Kreis oder ein Oval.
• Add text: fügt einen Text hinzu.
• Add path: zeichnet eine eigene Form, Punkt für Punkt. Siehe Pfad zeichnen und bearbeiten: eigene Formen und Linien erstellen.
• Mask elements: schneidet ein Element mit der Form eines anderen zu. Wähle dafür vorher zwei Elemente aus. Siehe Elemente maskieren: Bild auf eine Form zuschneiden.

Weitere Werkzeuge

Links in der Toolbar

• Back to templates: bringt dich zurück zu deinen Templates.
• Save: zeigt, ob deine Änderungen gespeichert sind. Ist der Button ausgegraut, ist alles gespeichert. Standardmäßig speichert Studio automatisch. Fährst du mit der Maus über den Button, kannst du Autosave mit Disable Autosave ausschalten und selbst speichern. Siehe Autosave ausschalten und selbst speichern.
• Undo und Redo: machen einen Schritt rückgängig oder wiederholen ihn.
• 1080×1080 Canvas-Auswahl: zeigt die Größe des offenen Canvas und wechselt zwischen den Canvases. Canvases sind verschiedene Größen desselben Templates.

In der Mitte der Toolbar

• Raster-Button: blendet das Layout-Raster nutzen: Elemente an Hilfslinien ausrichten und die Verbindungen zwischen Elementen ein und aus.
• 90% Zoom: vergrößert oder verkleinert die Ansicht.
• Align: richtet ausgewählte Elemente am Canvas oder aneinander aus. Das geht nur, wenn ein Element ausgewählt ist.

Rechts neben den Elemente-Werkzeugen

• Connect expressions: verknüpft eine Eigenschaft mit einer Expression. Siehe Expression-Editor verwenden.
• Anchoring tool: verbindet Kanten oder Flächen von Elementen, damit sich das Layout dem Inhalt anpasst. Siehe Anchoring-Werkzeug.
• Create Input Field: erstellt ein Input-Feld. Damit können Nutzer im Design-Generator einen Text, ein Bild oder eine andere Eigenschaft ändern.

In Video-Templates erscheint hier ein viertes Werkzeug, Animate a property. Siehe Template animieren: ein Video mit bewegten Elementen erstellen.

Rechts in der Toolbar

• Input Fields öffnet den Input Fields View. Dort siehst du alle Input-Felder deines Templates und konfigurierst sie.
• Share öffnet ein Menü mit Create campaign, Automate, Publish Template Link und Open Batch Editor.

Canvas

Der Canvas in der Mitte ist die Fläche deines Designs. Hier platzierst und bearbeitest du Elemente. Hat dein Template mehrere Canvases, siehst du immer den, den du in der Canvas-Auswahl gewählt hast.

• Klicke ein Element an, um es auszuwählen.
• Ziehe ein Element, um es zu verschieben.
• Ziehe an seinen Anfassern, um seine Größe zu ändern.
• Halte die Leertaste gedrückt und ziehe, um die Ansicht zu verschieben.

Properties-Panel

Im Properties-Panel links stellst du ein, wie ein Element aussieht. Wähle ein Element auf dem Canvas oder im Layers-Panel aus. Das Panel zeigt dann seine Eigenschaften. Ist nichts ausgewählt, zeigt es die Einstellungen deines Designs: Canvas (Größe), Format (Dateiformat), Fill (Hintergrund) und Advanced.

Layers-Panel

Im Layers-Panel rechts siehst du alle Elemente deines Designs und wie sie ineinander liegen.

Dort kannst du auch Elemente auswählen, die von anderen verdeckt sind. Gruppen und Masken enthalten weitere Elemente. Fährst du mit der Maus über eine Zeile, erscheinen Buttons, mit denen du das Element ausblendest oder sperrst.

Aufbauen und testen

1. Füge über die Toolbar Texte, Bilder oder Formen hinzu und platziere sie auf dem Canvas.
2. Lege im Properties-Panel Aussehen und Layout fest.
3. Klicke auf Create Input Field, damit Nutzer einen Text oder ein Bild ändern können.
4. Klicke auf Input Fields, um deine Input-Felder zu konfigurieren.
5. Klicke auf Share und dann auf Publish Template Link. Bluepic speichert dein Template und veröffentlicht es mit einem Link.
6. Klicke im Popup auf Copy URL und öffne den Link in einem neuen Browser-Tab. Der Design-Generator öffnet sich.
7. Teste dort dein Template mit kurzen und langen Texten, verschiedenen Bildern und jedem Canvas.