Tutorial: CMS Editor

Der CMS-Editor bearbeitet den eigentlichen Seiteninhalt. Dieses Tutorial erklärt jede Schaltfläche der Editorleiste und alle verfügbaren Untermenüs. Es zeigt außerdem einen sicheren Ablauf für Text, Links, Medien, Module, Bootstrap-Komponenten, Bereichsmarker und HTML-Quelltext.

Platz schaffen: Wählen Sie zuerst die Seite. Schließen Sie anschließend den Content Tree links. Für längere Texte können Sie zusätzlich die rechte Medien- und Einstellungsspalte einklappen oder den Vollbildmodus des Editors verwenden.

Content CMS öffnen CMS-Felder und Kopfleiste

1. Editor vorbereiten

Öffnen Sie den Content Tree, wählen Sie die gewünschte Seite und kontrollieren Sie ID und Titel.
Schließen Sie den Content Tree wieder.
Klicken Sie an die genaue Stelle im Text, an der Sie schreiben oder etwas einfügen möchten.
Markieren Sie Text, wenn eine Formatierung, Farbe oder ein Link auf bestehenden Text angewendet werden soll.
Behalten Sie den Speicherstatus der Seite im Blick.

CMS-Editor mit geschlossenen Seitenleisten und vollständiger Editorleiste — Content Tree und rechte Spalte sind geschlossen. Dadurch sind die vollständige Editorleiste und der Inhalt breit sichtbar.

2. Alle Editor-Schaltflächen von links nach rechts

Menüpunkt	Funktion	Richtige Verwendung
Änderungsmodus	Wechselt zwischen visueller WYSIWYG-Darstellung und HTML-Quelltext.	Quelltext nur bearbeiten, wenn Tags, Attribute und dbx-Marker verstanden werden. Danach zurück in die visuelle Ansicht wechseln und prüfen.
Alles speichern	Übernimmt den Editorinhalt in das Seitenformular und speichert die aktuelle CMS-Seite.	Auf die Rückmeldung Gespeichert warten. Das ist mehr als nur ein lokales Editor-Zwischenspeichern.
Textformatierung	Öffnet Fett, Kursiv, Unterstrichen, Durchgestrichen sowie Links-, Mittel-, Rechts- und Blocksatz.	Text markieren und das gewünschte Format auswählen. Blocksatz sparsam verwenden, besonders auf schmalen Geräten.
Unsortierte Liste	Erzeugt eine Aufzählung. Das Untermenü bietet Standard, Kreis, Punkte und Quadrate.	Für gleichrangige Punkte ohne feste Reihenfolge.
Nummerierte Liste	Erzeugt eine nummerierte Liste. Das Untermenü bietet Standard, Lower Alpha, Lower Greek, Lower Roman, Upper Alpha und Upper Roman.	Für Schritte, Prioritäten und definierte Reihenfolgen.
Einzug verkleinern	Verschiebt einen eingerückten Absatz oder Listenpunkt eine Ebene nach außen.	Ist deaktiviert, wenn an der Cursorposition kein Einzug verringert werden kann.
Einzug vergrößern	Verschiebt Absatz oder Listenpunkt eine Ebene nach innen.	Bei Listen zuerst den betreffenden Listenpunkt anklicken.
Formatblock	Wählt Absatz, Überschrift 1 bis 4, Zitat oder Code.	Überschriften hierarchisch verwenden: H2 für Hauptabschnitte, H3/H4 darunter. Nicht nur wegen der Schriftgröße auswählen.
Füllfarbe oder Textfarbe	Wählt im Untermenü zwischen Hintergrund und Text und bietet eine Farbpalette.	Text markieren. Kontrast und Lesbarkeit prüfen; informative Klassen und Komponenten sind häufig robuster als frei gewählte Farben.
Link einfügen	Öffnet Felder für URL, Text, CSS-Klasse, neue Registerkarte und Nofollow.	Interne Permalinks möglichst ohne feste Domain verwenden. Neue Registerkarte nur bewusst setzen.
Medium aus Medienbrowser einfügen	Öffnet den CMS-Medienbrowser und setzt das ausgewählte Medium an der aktuellen Cursorposition ein.	Alternativtext, Position, Ausrichtung und Größe kontrollieren. Nach dem Speichern neu laden und prüfen, ob Layout und Größe erhalten sind.
Modul Aufruf einfügen	Öffnet die Auswahl verfügbarer Modulaufrufe und setzt den gewählten Aufruf in den Inhalt.	Nur Module verwenden, deren Parameter und Rechte zum gewünschten Frontend-Kontext passen.
Bootstrap Content-Komponente	Fügt eine vorbereitete Komponente wie Alert, Card, Accordion, Tabs oder Tabelle ein.	Nach dem Einfügen Platzhaltertexte, Links und eindeutige Inhalte vollständig ersetzen.
YouTube/Vimeo Video	Öffnet den Videodialog und erzeugt eine Einbettung für eine unterstützte Video-URL.	Nur erlaubte Quellen verwenden; Datenschutz, Einwilligung und responsive Darstellung kontrollieren.
Horizontale Linie	Fügt an der Cursorposition einen sichtbaren horizontalen Trenner ein.	Für einfache optische Trennung. Für Template-Bereiche die dbx-Marker verwenden.
Trenner/Marker	Fügt dbx-spezifische Marker für Hero-Text, Header, Footer, Spalten oder Druckseitenumbruch ein.	Marker nicht wie normalen Text überschreiben. Verschieben oder löschen nur bewusst.
Rückgängig	Nimmt die letzte Editoränderung in der aktuellen Sitzung zurück.	Nach Neuladen ist die Editor-Historie nicht zuverlässig verfügbar.
Wiederholen	Stellt eine zuvor rückgängig gemachte Editoränderung wieder her.	Ist deaktiviert, wenn keine passende Änderung vorliegt.
Vollbild	Vergrößert den Editor auf die verfügbare Oberfläche und blendet störende Bereiche aus.	Erneut klicken, um den Vollbildmodus zu verlassen. Danach vor dem Seitenwechsel speichern.

3. Textformatierung und Ausrichtung

Untermenü Textformatierung mit Fett, Kursiv, Unterstrichen, Durchgestrichen und Ausrichtungen — Das kombinierte Textmenü enthält Zeichenformatierung und Absatzausrichtung.

Markieren Sie exakt den Text, den Sie formatieren möchten.
Öffnen Sie den Pfeil am Menü Textformatierung.
Wählen Sie Fett für starke Bedeutung, Kursiv für Betonung, Unterstrichen nur bei eindeutiger Abgrenzung von Links und Durchgestrichen für bewusst als entfallen markierte Inhalte.
Wählen Sie für Absätze Linksbündig, Zentriert, Rechtsbündig oder Blocksatz.
Prüfen Sie das Ergebnis auf Desktop und schmaler Ansicht.

4. Listen, Einzüge und Absatzformate

Bei den beiden Listen-Schaltflächen wendet ein Klick auf das Hauptsymbol den Standardtyp an; der kleine Pfeil öffnet die Varianten. Mit Einzug vergrößern und verkleinern erzeugen oder entfernen Sie Unterebenen.

Formatblock-Menü mit Absatz, Überschriften, Zitat und Code — Formatblock: Absatz, Überschrift 1–4, Zitat und Code sind semantische HTML-Strukturen.

Formatblock im Detail

Absatz: normaler Fließtext.
Überschrift 1: oberste Dokumentüberschrift; auf normalen CMS-Seiten meist bereits durch Seitentitel oder Template belegt und deshalb selten im Inhalt nötig.
Überschrift 2: Hauptabschnitt innerhalb der Seite.
Überschrift 3: Unterabschnitt eines H2-Bereichs.
Überschrift 4: weitere Unterteilung unter H3.
Zitat: kennzeichnet ein echtes Zitat oder hervorgehobene Aussage semantisch.
Code: kennzeichnet technische Eingaben, Befehle oder Quelltext.

5. Farben

Farbauswahl des Editors mit Hintergrund- und Textfarben — Die Farbauswahl unterscheidet Hintergrund und Text. Beide Werte können unabhängig gesetzt oder entfernt werden.

Text markieren.
Farbsymbol öffnen.
Reiter Hintergrund oder Text wählen.
Farbe auswählen oder vorhandene Farbe entfernen.
Kontrast, Dark-Mode- beziehungsweise Designvarianten und mobile Lesbarkeit prüfen.

6. Links vollständig konfigurieren

Linkdialog mit URL, Text, CSS-Klasse, neuer Registerkarte und Nofollow — Der Linkdialog enthält URL, sichtbaren Text, optionale CSS-Klasse sowie Ziel- und Nofollow-Schalter.

URL: internes Ziel wie tutorials-dbxapp, externe vollständige HTTPS-Adresse, E-Mail- oder Telefonlink.
Text: sichtbare Linkbezeichnung. Sie soll das Ziel verständlich beschreiben.
Class name: optionale CSS-Klasse, beispielsweise für eine freigegebene Button-Darstellung. Nur bekannte Klassen verwenden.
In neuer Registerkarte öffnen: setzt ein neues Browserziel. Für normale interne Navigation meist nicht erforderlich.
Nofollow-Attribut: kennzeichnet Links, denen Suchmaschinen nicht normal folgen sollen; nur fachlich begründet verwenden.

Link bearbeiten: Cursor in den vorhandenen Link setzen und den Linkdialog erneut öffnen. Link entfernen: den Link auswählen und die angebotene Link-Aufhebung verwenden oder den Link im Quelltext gezielt entfernen.

7. Medien einfügen – Position und Größe müssen erhalten bleiben

Setzen Sie den Cursor an die gewünschte Stelle.
Klicken Sie auf Medium aus Medienbrowser einfügen.
Suchen oder laden Sie das Medium und kontrollieren Sie Titel und Alternativtext.
Wählen Sie das Medium aus. Es wird der Seite als Inline-Medium zugeordnet und an der Cursorposition eingesetzt.
Stellen Sie die gewünschte Position ein, zum Beispiel Bild links und Text rechts.
Stellen Sie die gewünschte Bildbreite beziehungsweise Größe ein.
Speichern Sie die Seite vollständig.
Laden Sie die Seite im CMS neu. Position, Ausrichtung und Größe müssen unverändert bleiben.
Öffnen Sie die Vorschau und vergleichen Sie die gerenderte Darstellung mit dem Editor.

Nicht nur optisch prüfen: Wenn Text nach dem Speichern unter statt rechts neben dem Bild steht oder die Größe zurückspringt, ist die Änderung nicht korrekt erhalten. Prüfen Sie Inline-Zuordnung, Bildattribute, Klassen, gespeicherten HTML-Inhalt und Frontend-CSS.

8. Modulaufrufe

Der Menüpunkt Modul Aufruf einfügen öffnet eine Auswahl der verfügbaren dbx-Module. Der ausgewählte Aufruf wird als technischer Inhaltsbaustein eingefügt und beim Rendern vom zuständigen Modul verarbeitet.

Cursor in einen eigenen Absatz setzen.
Modulbrowser öffnen und das gewünschte Modul wählen.
Vorgesehene Parameter vollständig setzen.
Den technischen Aufruf im Editor nicht wie normalen Text umschreiben.
Speichern und sowohl Vorschau als auch Frontend mit den benötigten Benutzerrechten prüfen.

9. Bootstrap Content-Komponenten

Bootstrap-Komponentenmenü mit Alert, Cards, List Group, CTA, openWin, Accordion, Tabs und Tabelle — Vorbereitete Bootstrap-Komponenten werden an der Cursorposition eingefügt.

Komponente	Einsatz	Nach dem Einfügen
Hinweis / Alert	Hervorgehobene Information oder Warnung.	Titel, Text und passende Alert-Variante anpassen.
Card	Ein einzelner strukturierter Inhaltsblock mit Titel, Text und Link.	Platzhalter und `#`-Link ersetzen.
3 Karten	Drei responsive Karten in einer Reihe.	Alle drei Karten vollständig pflegen; Darstellung auf schmaler Ansicht prüfen.
List Group	Liste von auswählbaren oder verlinkten Punkten.	Aktivstatus, Texte und Ziele ersetzen.
CTA Button	Zwei Handlungsaufforderungen.	Linktexte, Ziele und Priorität anpassen.
openWin Link	Öffnet das Ziel in einem dbx-Fenster.	`kontakt`, Fenstertitel und Parameter auf das echte Ziel ändern.
Accordion	Ein- und ausklappbare Inhaltsbereiche.	Überschriften und Inhalte ersetzen; automatisch erzeugte IDs nicht vereinheitlichen.
Tabs	Mehrere Inhaltsflächen als Register.	Tab-Titel und Inhalte ersetzen; Bedienbarkeit mit Tastatur prüfen.
Tabelle	Responsive, gestreifte Datentabelle.	Spaltenüberschriften und alle Beispielwerte ersetzen.

10. Video und horizontale Linie

YouTube/Vimeo

Cursor an die Zielposition setzen.
Video-Schaltfläche öffnen.
Unterstützte YouTube- oder Vimeo-URL eintragen.
Einbettung erstellen, speichern und responsive Darstellung prüfen.
Datenschutz und erforderliche Einwilligung gesondert prüfen.

Horizontale Linie

Die horizontale Linie fügt ein normales <hr> als optische Trennung ein. Sie definiert keinen Hero-, Header-, Footer- oder Spaltenbereich.

11. dbx-Bereichsmarker

dbx-Bereichsmarker für Hero, Header, Footer, Spalten und Druckseitenumbruch — Marker trennen technische Inhaltsbereiche und werden im Editor als eigene, geschützte Elemente dargestellt.

Marker	Technischer Schlüssel	Bedeutung
Hero-Text	`dbx:hero`	Trennt beziehungsweise kennzeichnet Text für den Hero-Bereich.
Header	`dbx:header`	Markiert den Beginn des Header-Inhalts.
Footer	`dbx:footer`	Markiert den Beginn des Footer-Inhalts.
col-2 Trenner	`dbx:col2`	Teilt einen vorgesehenen Bereich in zwei Spalten.
col-3a Trenner	`dbx:col3a`	Erster Trenner für eine dreispaltige Struktur.
col-3b Trenner	`dbx:col3b`	Zweiter Trenner für eine dreispaltige Struktur.
Druck Seitenumbruch	`dbx:pagebreak`	Erzeugt einen vorgesehenen Seitenwechsel in der Druckausgabe.

Marker sind Struktur: Nicht beschriften, ineinander verschachteln oder versehentlich in einen Link ziehen. Ein Marker wird als Ganzes verschoben oder gelöscht. Das gewählte Content-Template muss die betreffenden Bereiche unterstützen.

12. HTML-Quelltextmodus

HTML-Quelltextmodus des CMS-Editors mit formatiertem Seiteninhalt — Im Quelltextmodus werden HTML-Tags, Klassen, Medienreferenzen, Modulaufrufe und dbx-Marker direkt sichtbar.

Was Sie dort ändern dürfen

Fehlerhafte, klar verstandene HTML-Struktur korrigieren.
Bekannte Bootstrap-Klassen oder freigegebene Attribute gezielt ergänzen.
Links und Text kontrolliert anpassen.

Was Sie nicht unbedacht ändern dürfen

data-cms-media-id, Medien-URL und Slot-Zuordnung auseinanderziehen.
Breiten-, Größen- und Ausrichtungsangaben von Inline-Bildern entfernen.
data-dbx-marker oder technische Markerattribute löschen.
IDs von Accordion oder Tabs duplizieren.
Modulaufrufe, Platzhalter oder technische Datenattribute wie normalen Text behandeln.

13. Rückgängig, Wiederholen und Vollbild

Rückgängig: schrittweise Änderungen innerhalb der aktuellen Editor-Sitzung zurücknehmen.
Wiederholen: eine rückgängig gemachte Änderung erneut anwenden.
Vollbild: Editor vergrößern; erneut auf das Symbol klicken, um zurückzukehren.

Diese Funktionen ersetzen keine gespeicherte Versionierung. Vor größeren Quelltext- oder Strukturänderungen den aktuellen Stand speichern und die Vorschau dokumentieren.

14. Speichern und Ergebnis kontrollieren

Visuelle Darstellung im Editor kontrollieren.
Bei Bildern Position, Ausrichtung und Größe prüfen.
Auf Alles speichern klicken.
Auf den Seitenstatus Gespeichert warten.
Über die CMS-Kopfleiste Neu laden wählen. Damit wird der gespeicherte Inhalt erneut gelesen.
Prüfen, ob Text, Struktur, Links, Marker und Bildlayout unverändert vorhanden sind.
Vorschau öffnen und die gerenderte Seite mit dem Editor vergleichen.
Mindestens eine schmale Bildschirmbreite testen.

15. Typische Fehler

Fehler	Lösung
Formatierung betrifft zu viel Text	Rückgängig → Auswahl exakt neu setzen → Format erneut anwenden.
Überschrift sieht richtig aus, ist aber nur fett	Formatblock öffnen und H2/H3/H4 semantisch wählen.
Liste hat falsche Ebenen	Cursor in den betroffenen Listenpunkt → Einzug verkleinern oder vergrößern.
Interner Link öffnet falsche Domain	Permalink relativ eintragen und feste Test-/localhost-Domain entfernen.
Bildlayout springt nach dem Speichern	Position, Breite, Größe, Klassen und Medienattribute prüfen → speichern → neu laden → Frontend-CSS vergleichen.
Komponente funktioniert nicht	Quelltext auf eindeutige IDs und vollständige Struktur prüfen; keine Teilstücke von Accordion/Tabs löschen.
Marker erscheint als normaler Text oder Bereich fehlt	Marker über das Menü neu setzen und passendes Content-Template prüfen.
Vorschau zeigt alten Stand	Seitenstatus prüfen → vollständig speichern → Vorschau neu laden → Gast-/Cache-Ausgabe kontrollieren.

CMS-Felder und Kopfleiste CMS-Medienverwendung Alle Tutorials