---
title: "Der Block-Editor"
description: "Der Block-Editor von Éclair: die 18 Blöcke, der Befehl /, der visuelle Modus, Einfügen aus Word, SEO- und GEO-Analyse und Versionsverlauf."
url: "https://eclaircms.org/de/dokumentation/editor"
lang: "de"
author: "Thierry Gustin"
published: "2026-10-30"
updated: "2026-10-31"
---

# Der Block-Editor

> **Das Wichtigste** — Der Block-Editor von Éclair bietet 18 Blöcke (Text, Zwischenüberschrift, Bild, FAQ, Tabelle, Banner, Team, Formular …), die du mit „/“ einfügst. Er wandelt aus Word oder Google Docs eingefügte Texte um, sichert einen lokalen Entwurf, bewahrt die letzten 20 Versionen auf und bewertet jeden Inhalt beim Schreiben in SEO und GEO.

Der Block-Editor von Éclair zerlegt jede Seite in Blöcke: einen Absatz, eine Zwischenüberschrift, ein Bild, eine FAQ … Du fügst sie mit `/` ein, verschiebst sie mit der Maus und siehst live, wie sich jede Änderung auf deine SEO- und GEO-Scores auswirkt. Kein Code, keine Plugins: Alles ist von Haus aus eingebaut.

![Der Block-Editor von Éclair mit der SEO- und GEO-Analyse (Score 100), daneben der veröffentlichte Beitrag auf einem Smartphone](https://eclaircms.org/media/2026/10/de-editor-seo-geo-mobile.webp)
*Links der Editor mit seiner Analyse, rechts derselbe Beitrag, veröffentlicht auf dem Smartphone.*

## Welche 18 Blöcke bietet der Block-Editor?

Jeder Block hat eine klare Aufgabe. Zusammen decken sie einen Blogbeitrag ebenso ab wie eine komplette Startseite.

| Block | Wofür er da ist |
| --- | --- |
| Text | Ein Absatz, mit Fett, Kursiv, Links, Code und Hervorhebung. |
| Zwischenüberschrift | Eine Abschnittsüberschrift H2, H3 oder H4: Sie speist das Inhaltsverzeichnis. |
| Liste | Eine Liste mit Aufzählungszeichen oder nummeriert. |
| Zitat | Ein hervorgehobener Satz, mit seinem Autor. |
| Bild | Ein Bild aus der Mediathek, in normaler, breiter oder kleiner Größe, mit Bildunterschrift. |
| Infobox | Eine Nachricht „Gut zu wissen“, „Tipp“, „Achtung“, „Merke“ oder „Hinweis“. |
| FAQ | Fragen und Antworten, automatisch als FAQPage ausgezeichnet. |
| Tabelle | Daten in Zeilen und Spalten, mit Kopfzeile. |
| Button | Ein Call-to-Action, primär oder sekundär. |
| Video | Ein YouTube- oder Vimeo-Video, ohne Cookies vor dem Klick. |
| Code | Ein Quellcode-Ausschnitt, unverändert angezeigt. |
| Trenner | Eine Linie, die eine lange Seite auflockert. |
| Banner | Eine große Begrüßungsüberschrift mit Text, Bild und zwei Buttons. |
| Vorteile | Ein Raster mit Leistungen oder Vorteilen, mit Icons. |
| Team | Porträts mit Name, Funktion, Kurzvorstellung und Link. |
| Neueste Beiträge | Die automatische Liste deiner neuesten Beiträge. |
| Produkte | Eine automatische Auswahl deiner Produkte, wenn der Shop geöffnet ist. |
| Kontaktformular | Ein Formular mit Spamschutz, ohne Captcha. |

Der FAQ-Block erzeugt die strukturierten Daten [FAQPage von schema.org](https://schema.org/FAQPage): Google und KI-Antwortmaschinen erkennen sofort, dass es sich um Fragen und Antworten handelt.

## Wie fügst du einen Block ein und verschiebst ihn?

Drei Handgriffe genügen:

1. Tippe in einer leeren Zeile **`/`**: Die Liste der Blöcke öffnet sich. Filtere sie mit ein paar Buchstaben und bestätige mit `Enter`. Der Button **Block hinzufügen** erledigt dasselbe mit der Maus.
2. **Ziehe** einen Block an seinem Griff, um ihn zu verschieben.
3. Lösche einen Block mit einem Klick: Falls du es dir anders überlegst, erscheint für ein paar Sekunden ein Button **Abbrechen**.

In einem Text erzeugt `Enter` einen neuen Absatz und `Umschalt+Enter` einen einfachen Zeilenumbruch.

## Wie bearbeitest du eine Seite im visuellen Modus?

Seit Éclair 1.7 hat der Editor zwei Modi. Wechsle oben im Editor von **Blöcke** zu **Visuell**: Deine Seite erscheint im echten Theme der Website, genau so, wie deine Besucher sie sehen werden, und du bearbeitest sie direkt dort. Deine Wahl wird für das nächste Mal gespeichert.

![Der visuelle Modus des Editors: Die Seite wird im Theme der Website angezeigt, der Block „Vorteile“ ist ausgewählt, mit seiner Werkzeugleiste (nach oben, nach unten, duplizieren, löschen, hinzufügen, mit KI überarbeiten) und seinem Formular im rechte](https://eclaircms.org/media/2026/10/de-visual-mode.webp)
*Der visuelle Modus: ein ausgewählter Block, seine Werkzeugleiste und sein Formular im rechten Bereich.*

- **Schreiben**: Klicke auf eine Überschrift, einen Absatz, eine FAQ-Frage oder den Text eines Buttons und tippe los. `Enter` bestätigt ein einzeiliges Feld; in einem Absatz legt es den nächsten Absatz an. Eingefügt wird als reiner Text.
- **Anordnen**: Ein Klick auf einen Block zeigt seine Leiste: ↑ ↓ zum Verschieben, ⧉ zum Duplizieren, ✕ zum Löschen, +↑ und +↓, um einen Block darüber oder darunter hinzuzufügen. Die Leiste lässt sich auch per Tastatur bedienen (`Tab`, dann `Enter`).
- **Bilder**: Klicke auf ein Bild (Banner, Bildblock, Teamporträt, Beitragsbild), um in der Mediathek ein anderes auszuwählen.
- **Block-Einstellungen**: Der rechte Bereich zeigt das Formular des ausgewählten Blocks, darunter die Tabs Dokument, SEO und Analyse.
- **✨ Feinschliff mit KI**, wenn der Assistent aktiviert ist: den Text des Blocks verbessern, korrigieren, kürzen, ausbauen, vereinfachen, im Tonfall anpassen oder übersetzen.
- **Breite**: 390 px, 768 px oder volle Breite, um die Darstellung auf Smartphone und Tablet zu prüfen.

Links, Buttons und Formulare der Seite reagieren während der Bearbeitung nicht. Ein Block, der auf der Website unsichtbar ist, etwa ein noch nicht ausgewähltes Bild, erscheint als gestrichelter Rahmen, den du im rechten Bereich ausfüllst. Den visuellen Modus gibt es nur in der Vorschau des Adminbereichs: Deine öffentlichen Seiten bleiben bis aufs Byte identisch.

## Wie formatierst du Text und erstellst Links?

Markiere eine Textstelle: Die Formatierungsleiste bietet Fett, Kursiv, Link, Code und Hervorhebung. Für einen Link drückst du `Strg+K`. Der Block-Editor schlägt dir dann beim Tippen deine eigenen Seiten und Beiträge vor: Die interne Verlinkung, die für die Suchmaschinenoptimierung sehr wichtig ist, erledigst du in zwei Sekunden.

> **Einfügen aus Word oder Google Docs** — Das intelligente Einfügen wandelt die Überschriften, Listen, Tabellen und den Fettdruck eines Word-Dokuments, eines Google-Docs-Dokuments oder einer Webseite in saubere Blöcke um. Überflüssige Formatierungen werden entfernt: Dein Code bleibt sauber.

## Was enthalten die Tabs Dokument, SEO und Analyse?

Rechts neben dem Block-Editor bündeln drei Tabs die Einstellungen des Inhalts.

- **Dokument**: Status (Entwurf oder veröffentlicht), Veröffentlichungsdatum, Adresse (URL), Kategorie, Beitragsbild, Autor, Sprache, verknüpfte Übersetzung, Layout (Titel ausblenden, volle Breite, Inhaltsverzeichnis), Versionsverlauf, Duplizieren und Löschen.
- **SEO**: die Google-Vorschau, der SEO-Titel (ideal: 30 bis 60 Zeichen), die Meta-Beschreibung (110 bis 160 Zeichen), die Fokus-Keyphrase und, unter den erweiterten Optionen, die kanonische URL und noindex.
- **Analyse**: deine SEO- und GEO-Scores von 0 bis 100, die beim Schreiben neu berechnet werden, mit einem konkreten Tipp zu jedem Punkt, der besser werden kann.

Wenn du die Adresse eines bereits veröffentlichten Inhalts änderst, legt Éclair automatisch eine 301-Weiterleitung von der alten Adresse an: keine kaputten Links. Die einzelnen Prüfungen werden in den Leitfäden [SEO-Optimierung](https://eclaircms.org/de/dokumentation/seo) und [GEO: von KI zitiert werden](https://eclaircms.org/de/dokumentation/geo) ausführlich erklärt.

## Wofür ist „Das Wichtigste“ gut?

Über dem Inhalt öffnet der Button **„Das Wichtigste“ hinzufügen** ein Feld, in dem du deine Seite in 2 oder 3 Sätzen zusammenfasst: die direkte Antwort auf die Frage, die sich dein Leser stellt. Diese Zusammenfassung erscheint am Anfang des Beitrags und steht in `llms.txt`. Oft ist es genau die Passage, die KI-Systeme wörtlich übernehmen. Ziele auf 25 bis 90 Wörter.

## Wie speicherst du, siehst die Vorschau an und planst die Veröffentlichung?

- **`Strg+S`** speichert jederzeit. Parallel dazu behält der Block-Editor einen lokalen Entwurf in deinem Browser: Bei einem Verbindungsabbruch bietet er dir an, die ungespeicherte Version wiederherzustellen.
- **Vorschau** zeigt den Inhalt so, wie er auf der Website erscheinen wird, noch vor jeder Veröffentlichung.
- **Veröffentlichungsdatum**: Lass das Feld leer für „jetzt“ oder wähle ein Datum in der Zukunft, um die Veröffentlichung zu planen. Die Uhrzeit richtet sich nach der Zeitzone der Website (Einstellungen › Allgemein), nicht nach der deines Computers.
- **Versionsverlauf**: Die letzten 20 Versionen jedes Inhalts werden aufbewahrt. Ein Klick auf **Wiederherstellen** bringt dich zu einer davon zurück.

## Welche Tastenkürzel gibt es?

| Tastenkürzel | Aktion |
| --- | --- |
| `/` in einer leeren Zeile | Block einfügen |
| `Strg+S` | Speichern |
| `Strg+K` | Link erstellen |
| `Strg+B` | Fett |
| `Strg+I` | Kursiv |
| `Enter` | Neuer Absatz |
| `Umschalt+Enter` | Zeilenumbruch |
| `Strg+J` | KI-Assistenten öffnen |
| `Strg+Z` | Im visuellen Modus rückgängig machen, bis zu 50 Schritte |

Auf dem Mac nimmst du statt `Strg` die Taste `Cmd`.

## Funktioniert der Block-Editor mit dem KI-Assistenten?

Ja, wenn du ihn aktiviert hast. Markiere eine Textstelle und klicke dann auf ✨: Der Assistent bietet an, den Text zu verbessern, Fehler zu korrigieren, zu kürzen, auszubauen, zu vereinfachen oder zu übersetzen. Ein Klick auf „Abbrechen“ stellt das Original wieder her. Alles dazu steht im Leitfaden zum [KI-Assistenten](https://eclaircms.org/de/dokumentation/ki-assistent).

![Menü des KI-Assistenten im Block-Editor bei einer markierten Textstelle: Verbessern, Fehler korrigieren, Kürzen, Ausbauen, Vereinfachen, Übersetzen](https://eclaircms.org/media/2026/10/de-ai-assistant-edits.webp)

## Fragen zum Editor

### Kann ich den HTML-Code eines Blocks bearbeiten?

Nein, und das ist Absicht: Jeder Text wird über eine Allowlist erlaubter Tags (Fett, Kursiv, Link, Code …) bereinigt. Deine Website bleibt sauber, barrierefrei und vor dem Einschleusen von Skripten geschützt.

### Was passiert, wenn ich den Tab schließe, ohne zu speichern?

Der Block-Editor behält einen lokalen Sicherungsentwurf. Wenn du den Inhalt das nächste Mal öffnest, bietet er dir an, die ungespeicherte Version wiederherzustellen.

### Wie plane ich einen Beitrag für später?

Wähle im Tab Dokument ein Datum in der Zukunft und veröffentliche dann. Der Beitrag erscheint zur geplanten Zeit, in der Zeitzone der Website, und der Cache aktualisiert sich von selbst.

### Wie binde ich ein Video ohne Cookies ein?

Nutze den Block Video mit einem YouTube- oder Vimeo-Link. Der Player und seine Cookies werden erst geladen, wenn der Besucher klickt: Ein Cookie-Banner ist nicht nötig.

### Verändert der visuelle Modus meine öffentliche Website?

Nein. Es gibt ihn nur in der Vorschau des Adminbereichs, die angemeldeten Personen mit Schreibrecht vorbehalten ist und nie gecacht oder indexiert wird. Deine öffentlichen Seiten bleiben bis aufs Byte identisch.