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

# Zwischen Visuell und Code wechseln

> Wandeln Sie eine Code-Vorlage in Blöcke um, bearbeiten Sie den Code einer visuellen Vorlage und erfahren Sie, was mit Ihrer Arbeit passiert, wenn Sie zurückwechseln.

Jede Vorlage besteht im Kern aus Liquid und HTML. Der Editor **Visuell** erstellt diesen Code für Sie aus Blöcken und Dokumentstilen; der Editor **Code** zeigt den Code selbst. Sie wechseln über die Tabs **Visuell** und **Code** oben im Editor. Foliant verwirft beim Wechseln nie Code: Alles, was nicht in einen regulären Block umgewandelt werden kann, bleibt als Block **Benutzerdefiniertes Liquid** erhalten.

## Bevor Sie beginnen

Der Tab **Visuell** hängt von Ihrem Tarif ab. Ist er nicht enthalten, zeigt der Tab den Tarif an, der ihn enthält, und der Code-Editor funktioniert wie gewohnt. Siehe [Verfügbarkeit des visuellen Editors nach Tarif](https://foliant-help.iforiti.com/de/template-editor/visual-editor-plans.md).

## Eine Code-Vorlage in Blöcke umwandeln

1. Öffnen Sie die Vorlage im Editor. Sie öffnet sich in **Code**.
2. Klicken Sie auf den Tab **Visuell**. Der Dialog **In visuell umwandeln** öffnet sich.
3. Wählen Sie, wie Sie beginnen möchten:

| Option | Was passiert |
| - | - |
| **Mit einem Block-Layout beginnen** | Wählen Sie ein **Layout** (zum Beispiel **Rechnung**, **Lieferschein** oder **Rücksendeformular**) und klicken Sie auf **Block-Layout verwenden**. Ihr aktueller Code wird durch dieses Layout ersetzt. Bis Sie speichern, stellt **Verwerfen** Ihren Code wieder her; nach dem Speichern bleibt er im Versionsverlauf erhalten. |
| **Meinen Code als Block „Benutzerdefiniertes Liquid“ behalten** | Klicken Sie auf **Meinen Code behalten**. Ihr Code bleibt erhalten, und Sie können neue Blöcke darum herum hinzufügen. Foliant wandelt erkannte Abschnitte (etwa Kopfbereich, Adressen, Artikeltabelle oder Summen) in reguläre Blöcke um, wenn sie dieselben Bestelldaten drucken, und behält alles andere an Ort und Stelle als Blöcke „Benutzerdefiniertes Liquid“. |

4. Prüfen Sie die Seite und speichern Sie dann.

Welche Layouts angeboten werden, hängt von der Vorlage ab: ein Dokument pro Bestellung (Rechnung, Gutschrift, Angebot, Lieferschein, Rücksendeformular, Handelsrechnung, Bestellung beim Lieferanten, Allgemeines Bestelldokument, Versandetikett, Beleg) oder ein Dokument für alle ausgewählten Bestellungen (Kommissionierliste, Bestellübersicht). Ein Layout für einen Dokumenttyp weist einer Vorlage ohne Typ diesen Typ zu, sodass ein Rechnungslayout wie eine Rechnung nummeriert wird.

## Den Code einer visuellen Vorlage ansehen oder bearbeiten

1. Klicken Sie in einer visuellen Vorlage auf den Tab **Code**. Sie sehen **Kompiliertes Liquid**: den Code, den Foliant aus Ihren Blöcken und Dokumentstilen erzeugt. Er ist schreibgeschützt.
2. Um ihn zu ändern, klicken Sie auf **Code bearbeiten**. Ab jetzt ist der Code-Editor aktiv, und beim Speichern wird Ihr Code gespeichert.
3. Beim Speichern liest Foliant die Blöcke aus Ihrem Code zurück, sodass die Vorlage visuell bleibt.

Sie können auch den kompilierten Code eines einzelnen Blocks öffnen: Wählen Sie ihn aus und klicken Sie in seinem Tab **Inhalt** auf **Kompiliertes Liquid ansehen**.

## Nach dem Bearbeiten des Codes zurück zu Visuell wechseln

Klicken Sie auf den Tab **Visuell**. Foliant liest die Blöcke aus Ihrem Code:

* Blöcke, deren Code Sie nicht geändert haben, kommen unverändert zurück.
* Passt Code nicht mehr zu seinem Block oder wurde er außerhalb eines Blocks geschrieben, listet der Dialog **Zurück zu Visuell wechseln?** diese Teile unter **Als benutzerdefiniertes Liquid beibehaltene Teile** mit dem Grund auf:
  * **Bearbeiteter Code**: Der Code des Blocks wurde geändert, daher wird er zu einem Block „Benutzerdefiniertes Liquid“.
  * **Außerhalb eines Blocks geschrieben**: neuer Code, den Sie zwischen Blöcken hinzugefügt haben.
* Klicken Sie auf **Zu Visuell wechseln**, um fortzufahren, oder auf **In Liquid bleiben**, um den Code weiter zu bearbeiten.

Es wird nichts entfernt, und Sie können den Wechsel rückgängig machen. Sie müssen alle Codefehler beheben, bevor Sie wechseln können.

## Eine Vorlage durch eine Vorlage ersetzen

**Durch eine Vorlage ersetzen…** in der oberen Leiste ersetzt den gesamten Inhalt des Editors durch eine Startvorlage oder ein Design. Die Startvorlagen sind Code-Vorlagen, daher wird eine visuelle Vorlage zu einer Code-Vorlage. Bis Sie speichern, ändert sich nichts, und **Verwerfen** stellt den vorherigen Stand wieder her.

## Gut zu wissen

* Blöcke „Benutzerdefiniertes Liquid“ können wie jeder andere Block verschoben, gestaltet und mit Bedingungen versehen werden. Ihr Code wird genau so gedruckt, wie er geschrieben ist.
* Die Umwandlung erfolgt pro Vorlage und nur, wenn Sie sie wählen.
* Vorlagen, die aus einem gekauften Design erstellt wurden, verwenden den Design-Editor und können hier nicht zu Visuell oder Code gewechselt werden.

## Verwandte Artikel

* [Den Vorlageneditor öffnen](https://foliant-help.iforiti.com/de/template-editor/editor-overview.md)
* [Den Code einer Vorlage bearbeiten](https://foliant-help.iforiti.com/de/template-editor/code-editor.md)
* [Block-Referenz](https://foliant-help.iforiti.com/de/template-editor/block-catalogue.md)
* [Verfügbarkeit des visuellen Editors nach Tarif](https://foliant-help.iforiti.com/de/template-editor/visual-editor-plans.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.