Das Layers-Panel

Im Layers-Panel rechts im Template-Editor siehst du alle Elemente deines Designs und wie sie ineinander liegen. Hier wählst du Elemente aus, blendest sie aus, sperrst sie, benennst sie um und änderst ihre Reihenfolge. Auch Elemente, die auf dem Canvas von anderen verdeckt sind, erreichst du hier.

Was das Layers-Panel zeigt

• Zeilen: Jede Zeile ist ein Element. Sie zeigt links ein Symbol für die Art des Elements, zum Beispiel ein T für einen Text oder ein kleines Vorschaubild für ein Bild. Daneben steht die Element-ID, also der Name des Elements.
• Reihenfolge: Die oberste Zeile liegt im Design ganz vorne. Zeilen weiter unten liegen dahinter.
• Gruppen und Masken: Sie haben einen Rahmen und links einen Pfeil. Ein Klick auf den Pfeil klappt ihren Inhalt auf oder zu. Wählst du ein Element darin aus, klappen sie von selbst auf.
• Masken haben zwei Teile: Unter Masked Layers liegt, was durchscheint. Unter Masking Layers liegt die Form, die zuschneidet. Ein leerer Teil zeigt Drop here.
• Buttons in einer Zeile: Das Quadrat mit dem Plus (Add Input Field) und ⋮ sind immer da. Ein F im Kreis erscheint, wenn das Element schon Input-Felder hat. Auge und Schloss erscheinen, wenn du mit der Maus über die Zeile fährst oder das Element ausgewählt ist.
• Warnsymbol: Ein gelbes Warnsymbol neben der Element-ID zeigt ein Problem, meist mit einer Expression des Elements. Fahre mit der Maus über das Symbol, um die Meldung zu lesen. Wie du es behebst, steht in Eine Expression funktioniert nicht?.

Hat dein Design noch keine Elemente, steht im Layers-Panel „Create an element to start“. Breiter oder schmaler machst du das Layers-Panel, indem du an seinem linken Rand ziehst.

Elemente auswählen

• Klicke auf eine Zeile. Das Element ist ausgewählt, und das Properties-Panel zeigt seine Eigenschaften.
• Halte Shift gedrückt und klicke auf eine andere Zeile. Alle Zeilen zwischen der ersten ausgewählten und dieser sind jetzt ausgewählt.
• Halte Alt (am Mac Option) gedrückt und klicke auf eine Zeile, um nur dieses eine Element hinzuzufügen oder abzuwählen.
• Drücke Cmd + A (unter Windows Strg + A), um alle Elemente auszuwählen.
• Klicke auf eine freie Stelle im Layers-Panel, um die Auswahl aufzuheben.

Ausblenden und sperren

Fahre mit der Maus über eine Zeile. Ein Auge und ein Schloss erscheinen.

• Hide layer (Auge): blendet das Element aus. Es fehlt dann auch im fertigen Design und im Design-Generator. Ein Klick auf das durchgestrichene Auge (Show layer) blendet es wieder ein.
• Lock layer (Schloss): Du kannst das Element nicht mehr per Klick auf dem Canvas auswählen. So verschiebst du es nicht aus Versehen. Im Layers-Panel kannst du es weiter auswählen und ändern. Ein Klick auf das geschlossene Schloss (Unlock layer) hebt die Sperre auf.

Element umbenennen

Die Element-ID ist der Name, mit dem du das Element in Expressions ansprichst, zum Beispiel headline.bottom.

1. Doppelklicke in der Zeile auf die Element-ID. Die ID lässt sich jetzt bearbeiten.
2. Gib die neue ID ein. Erlaubt sind Buchstaben, Ziffern, _ und $, am Anfang keine Ziffer. Andere Zeichen werden zu _.
   Der Button Update fehlt?

   Die ID ist nicht erlaubt oder schon von einem anderen Element belegt. Eine rote Meldung unter der ID sagt, was nicht passt, zum Beispiel „Element ID '1text' is not a valid identifier“. Gib eine andere ID ein.

   
   
3. Klicke rechts im Feld auf Update. Das Element heißt jetzt so. Expressions in anderen Elementen, die die alte ID verwenden, nutzen ab jetzt die neue.
4. Schau auf dem Canvas, ob Elemente, die sich auf dieses Element beziehen, noch richtig aussehen.

Zum Abbrechen klickst du irgendwo außerhalb des Felds. Die alte ID bleibt dann.

Reihenfolge ändern

1. Ziehe die Zeile an ihren neuen Platz. Sind mehrere Elemente ausgewählt, ziehst du sie alle zusammen.
   • Weiter nach vorne oder hinten:
     • Ziehe die Zeile nach oben oder unten. Eine gestrichelte blaue Linie zeigt, wo sie landet.
   • In eine Gruppe oder Maske:
     • Ziehe die Zeile auf die Mitte der Gruppe oder Maske oder auf Drop here. Bei einer Maske landet das Element unter Masked Layers.
2. Schau auf dem Canvas, ob das Element jetzt vor oder hinter den richtigen Elementen liegt.

Kontextmenü

Klicke in einer Zeile auf ⋮ oder mit der rechten Maustaste auf die Zeile. Gehört die Zeile zur Auswahl, wirkt das Menü auf alle ausgewählten Elemente.

• Remove: löscht das Element. Tastenkürzel: Backspace.
• Copy und Paste: kopieren Elemente und fügen sie wieder ein. Tastenkürzel: Cmd + C (unter Windows Strg + C) und Cmd + V (unter Windows Strg + V).
• Duplicate: legt sofort eine Kopie an. Tastenkürzel: Cmd + D (unter Windows Strg + D).
• Bring to front und Send to back: schieben das Element ganz nach vorne oder ganz nach hinten im Design. Dabei verlässt es auch eine Gruppe oder Maske.
• Bring up und Send down: schieben das Element eine Stufe nach vorne oder nach hinten. Es bleibt dabei in seiner Gruppe oder Maske.
• Group: fasst die ausgewählten Elemente zu einer Gruppe zusammen. Tastenkürzel: Cmd + G (unter Windows Strg + G). Mehr dazu in Elemente gruppieren: zusammen bewegen und anordnen.
• Ungroup: erscheint, wenn nur Gruppen ausgewählt sind. Es löst die Gruppen auf, ihre Elemente bleiben. Tastenkürzel für eine ausgewählte Gruppe: Cmd + Shift + G (unter Windows Strg + Shift + G).
• Leave group: erscheint, wenn ein ausgewähltes Element in einer Gruppe liegt. Es nimmt die Elemente aus ihrer Gruppe. Bleibt die Gruppe dabei leer, verschwindet sie.
• Mask: braucht mindestens zwei ausgewählte Elemente. Das Element, das du zuerst ausgewählt hast, schneidet zu. Mehr dazu in Elemente maskieren: Bild auf eine Form zuschneiden.

Input-Felder an einem Element

• Klicke in einer Zeile auf das Quadrat mit dem Plus. Das ist Add Input Field. Ein Popup öffnet sich, in dem du ein Input-Feld mit diesem Element verbindest. Weiter geht es wie in Input-Feld erstellen: Text oder Bild änderbar machen.
• Klicke auf das F im Kreis, wenn das Element schon Input-Felder hat. Der Input Fields View öffnet sich, und die Input-Felder dieses Elements sind markiert.