> ## Documentation Index
> Fetch the complete documentation index at: https://help.scribe-mail.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor-Überblick

> Entdecken Sie den Signatur-Editor von Scribe und sehen Sie, wie Strukturpanel, Canvas, Stilpanel, obere Leiste und Aktionsleiste zusammen Signaturen erstellen.

Im Scribe-Editor gestalten Sie Ihre E-Mail-Signaturen. Er folgt einem dreigeteilten Layout, ähnlich wie Design-Tools wie Figma oder Framer: ein [Baumstruktur-Panel](/de/editor/tree-panel) links, eine [Arbeitsfläche](/de/editor/canvas) in der Mitte und ein [Styling-Panel](/de/editor/styling-panel) rechts.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-three-panel-layout.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=b921c9bfe8ba7ac80bfc5599c483157e" alt="Drei-Panel-Layout des Scribe-Editors mit Baum, Canvas und Styling-Panel" width="3456" height="1928" data-path="images/editor-overview-three-panel-layout.png" />
</Frame>

## Layout

**Baum-Panel (links)**: Zeigt die hierarchische Struktur Ihrer Signatur als einklappbaren Baum. Jeder Block Ihrer Signatur erscheint hier: Spalten, Textblöcke, Bilder, Banner. In diesem Panel können Sie Blöcke auswählen, neu anordnen, duplizieren, ausblenden und löschen.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-tree-panel.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=e00a98504c39679c23f6b1a558016e7d" alt="Linkes Baum-Panel mit der Hierarchie der Signaturblöcke" title="Linkes Baum-Panel mit der Hierarchie der Signaturblöcke" className="mx-auto" style={{ width:"34%" }} width="728" height="1764" data-path="images/editor-overview-tree-panel.png" />
</Frame>

**Canvas (Mitte)**: Eine Live-Vorschau Ihrer Signatur, die sich in Echtzeit aktualisiert, während Sie Änderungen vornehmen. Klicken Sie direkt im Canvas auf einen Block, um ihn auszuwählen, oder nutzen Sie das Baum-Panel. Das Canvas zeigt echte Teammitglieder-Daten aus Smartfields, sodass Sie sehen, wie die Signatur tatsächlich aussehen wird.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-canvas-center.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=5015dd3876200251071a928ce99ebeff" alt="Mittleres Canvas-Panel des Editors mit Live-Vorschau der Signatur" title="Mittleres Canvas-Panel des Editors mit Live-Vorschau der Signatur" className="mx-auto" width="2156" height="1746" data-path="images/editor-overview-canvas-center.png" />
</Frame>

**Styling-Panel (rechts)**: Erscheint, sobald Sie einen Block auswählen. Zeigt alle Styling-Optionen für diesen Block, einschließlich Layout-Eigenschaften, Textformatierung, Farben, Abständen und Smartfield-Verknüpfungen. Die Optionen ändern sich je nach ausgewähltem Blocktyp.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-styling-panel.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=e8248501203acf14c76286f788b4b7cf" alt="Rechtes Styling-Panel mit den Konfigurationsoptionen für den Block" title="Rechtes Styling-Panel mit den Konfigurationsoptionen für den Block" className="mx-auto" style={{ width:"33%" }} width="696" height="1766" data-path="images/editor-overview-styling-panel.png" />
</Frame>

## Obere Leiste

Die [obere Leiste](/de/editor/editor-top-bar) zeigt wichtige Informationen und Aktionen:

* **Pfeil zurück**: Kehrt zur Detailseite der Signatur zurück
* **Signaturname und Status**: Zeigt den Namen der Signatur, die Anzahl der zugewiesenen Teammitglieder und den aktuellen Status (Entwurf oder Veröffentlicht)
* **Vorlagen**: Durchsuchen Sie die Vorlagenbibliothek, um mit einem vorgefertigten Design zu starten
* **Qualitätsprüfung**: Führt eine Kompatibilitätsprüfung Ihres Signaturdesigns durch. Klicken Sie hier, um eine Checkliste zu sehen, die prüft, ob sich Ihre Signatur responsiv an alle Bildschirmgrößen anpasst, mit allen E-Mail-Clients und Browsern funktioniert, auf Desktop, Mobilgerät und Tablet einwandfrei läuft, dank schlankem HTML schnell lädt, beim Verfassen von E-Mails korrekt angezeigt wird und Bildproportionen plattformübergreifend beibehält. Vor dem Veröffentlichen sollten alle Prüfungen grün sein.
* **Vorschau**: Öffnet das Vorschaufenster, um zu sehen, wie die Signatur für jedes Teammitglied aussieht
* **Veröffentlichen**: Stellt Ihre Designänderungen live. Nach dem Veröffentlichen werden Aktualisierungen automatisch an alle installierten Teammitglieder gesendet.

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-top-bar.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=c72972192e2a0ce27e68763eee6cbed9" alt="Obere Editor-Leiste mit den Aktionen Vorlagen, Qualitätsprüfung, Vorschau und Veröffentlichen" width="3456" height="176" data-path="images/editor-overview-top-bar.png" />
</Frame>

## Aktionsleiste

Am unteren Rand der Arbeitsfläche bietet die Aktionsleiste:

* **Rückgängig / Wiederherstellen**: Schritt für Schritt durch Ihre Änderungen zurück oder vor
* **Ziehgriff**: Verschiebt die Ansicht der Arbeitsfläche
* **Zoom-Steuerung**: Vergrößern (+), verkleinern (−) oder eine bestimmte Zoomstufe festlegen (z. B. 100 %)

<Frame>
  <img src="https://mintcdn.com/scribe/Z_G2D9X-Tlrxu_Eh/images/editor-overview-action-bar.png?fit=max&auto=format&n=Z_G2D9X-Tlrxu_Eh&q=85&s=8ffc4d4f58a9e87a76920ddacdaed15a" alt="Aktionsleiste des Editors mit Steuerungen für Rückgängig, Wiederherstellen und Zoom" title="Aktionsleiste des Editors mit Steuerungen für Rückgängig, Wiederherstellen und Zoom" className="mx-auto" style={{ width:"66%" }} width="668" height="226" data-path="images/editor-overview-action-bar.png" />
</Frame>

## Verwandte Artikel

* [Aktionsleiste](/de/editor/action-bar)
* [Blöcke hinzufügen](/de/editor/add-blocks)
* [Layouts mit Spalten und Zeilen erstellen](/de/editor/building-layouts-with-columns-and-rows)