Tutorial: CMS Felder, Kopfleiste und Einstellungen

Diese Anleitung erklärt die Arbeitsoberfläche des Content CMS vollständig: die Kopfleiste mit allen Aktionen, die Seitenfelder in der Mitte und die Medien- und Darstellungseinstellungen rechts. Der Content Tree wird nur für die Seitenauswahl geöffnet. Sobald Sie im mittleren oder rechten Bereich arbeiten, schließen Sie ihn wieder – dadurch bleiben alle Felder lesbar und Sie vermeiden Fehlklicks auf andere Seiten.

Aufteilung: Das eigenständige Tutorial CMS Editor erklärt zusätzlich jeden einzelnen Menüpunkt der Editorleiste, einschließlich Untermenüs, Medien, Modulen, Bootstrap-Komponenten und Bereichsmarkern.

Content CMS öffnen Editor-Tutorial öffnen

1. Seite auswählen – Content Tree nur dafür öffnen

Klicken Sie links oben in der CMS-Leiste auf Content Tree anzeigen.
Wählen Sie zuerst die Sprache und öffnen Sie dann die benötigten Ordner.
Klicken Sie auf die gewünschte Seite. Titel, ID und Inhalte werden in die Arbeitsbereiche geladen.
Kontrollieren Sie in der Mitte, ob dort wirklich die erwartete Seiten-ID und der erwartete Titel stehen.
Klicken Sie erneut auf die Schaltfläche links oben. Der Content Tree wird geschlossen.

Content CMS mit geöffnetem Content Tree zur Auswahl einer Seite — Der Content Tree ist hier absichtlich geöffnet, weil eine Seite ausgewählt wird. Für alle folgenden Arbeiten in Mitte und rechter Spalte wird er geschlossen.

Was im Content Tree verfügbar ist

DE, EN, ES: wählt den Sprachbestand, der im Baum angezeigt und bearbeitet wird.
Neuer Ordner: legt unter dem ausgewählten Ordner eine neue Strukturstufe an.
Neue Seite: legt eine Seite im ausgewählten Ordner an.
Suche: filtert den Baum nach Ordner- oder Seitennamen.
Pfeile an Ordnern: klappen genau diesen Ordner auf oder zu.
Ordner bearbeiten: öffnet Ordnername, Parent, Rechte und Template.
Sprachchips: zeigen, für welche Sprachen eine verknüpfte Fassung vorhanden ist.

Alle Details zu Ordnern, Sprachen und Baumaktionen stehen im Tutorial CMS Content Tree.

2. CMS-Kopfleiste – jede Anzeige und jede Schaltfläche

Nach der Auswahl schließen Sie den Content Tree. Die Kopfleiste bleibt sichtbar und bezieht sich immer auf die aktuell geladene Seite.

Content CMS mit geschlossenen Content Tree und vollständiger Aktionsleiste — Content Tree geschlossen: aktuelle Seite, Kennzahlen, sämtliche Seitenaktionen und die Felder sind gleichzeitig sichtbar.

Seitentitel und Kennzahlen

(ID) Seitentitel: bestätigt, welcher Datensatz geladen ist. Prüfen Sie diese Anzeige vor Änderungen und vor dem Löschen.
Seiten: Anzahl der Seiten im aktuellen Sprachbestand.
Ordner: Anzahl der Content-Ordner im aktuellen Sprachbestand.
Aktiv: Anzahl der aktuell aktiven Seiten.

Alle Schaltflächen von links nach rechts

Schaltfläche	Funktion	Was Sie beachten müssen
Content Tree anzeigen/ausblenden	Öffnet die linke Seitenauswahl oder gibt den Platz wieder für die Arbeitsbereiche frei.	Nur zur Auswahl offen lassen. Vor Arbeiten in Mitte oder rechter Spalte wieder schließen.
Seite speichern	Speichert Seitendaten, Editorinhalt und die aktuell vorbereiteten Änderungen der Seite. `Strg`+`S` beziehungsweise `Cmd`+`S` führt dieselbe Seiten-Speicherung aus.	Danach muss der Status auf Gespeichert wechseln. Medien-Teilbereiche mit eigener Speichern-Schaltfläche zusätzlich dort speichern.
In andere Sprachen übertragen	Öffnet in der Master-Sprache eine Vorschau für vorhandene und neue Sprachfassungen. Titel, Permalink, Beschreibung und Inhalt können je Zielsprache geprüft und übernommen werden.	Vorschau und Zielsprachen kontrollieren. Bei Ordnern kann optional der gesamte Unterbaum übertragen werden.
Auto-Sync wieder aktivieren	Verknüpft manuell getrennte Sprachversionen erneut mit dem Master. Künftige Master-Änderungen dürfen diese Sprachfassungen wieder synchronisieren.	Vorhandene manuelle Inhalte bleiben zunächst erhalten, können aber bei späteren Master-Änderungen überschrieben werden.
Seite löschen	Öffnet eine Bestätigung und entfernt die ausgewählte Seite.	Unbedingt ID und Titel prüfen. Medien werden von der Seite gelöst, die Dateien bleiben im Medienbestand.
Vorschau	Öffnet die aktuell gespeicherte CMS-Darstellung in einem eigenen Vorschaufenster.	Ungespeicherte Änderungen sind dort nicht zuverlässig sichtbar. Erst speichern, dann Vorschau neu laden.
Speicherstatus	Zeigt Gespeichert, Ungespeichert, einen laufenden Speichervorgang oder einen Fehler.	Das ist eine Statusanzeige, keine Aktion. Die Seite nicht verlassen, solange Änderungen ungespeichert sind.
Neue Seite	Legt im aktuell ausgewählten Ordner einen neuen Seitendatensatz an und lädt ihn direkt in die Maske.	Der Vorgang ist asynchron. Warten, bis die neue ID und der neue Titel sichtbar sind, dann alle Pflichtangaben setzen.
Ausgewählte Seite duplizieren	Erstellt eine Kopie der aktuell gewählten Seite und lädt die Kopie.	Funktioniert nur ohne ungespeicherte Änderungen. Titel und Permalink der Kopie sofort eindeutig machen.
Neu laden	Lädt Baum, Seite und Medien aus dem gespeicherten Datenbestand erneut.	Ungespeicherte Änderungen werden verworfen. Diese Funktion eignet sich zum bewussten Zurücksetzen.
Hilfe	Öffnet das Benutzerhandbuch für das Content CMS.	Die Hilfe ändert keine Daten.

Speicherregel: Prüfen Sie vor Vorschau, Duplizieren, Neu laden oder Seitenwechsel immer den Speicherstatus. Gelb beziehungsweise „Ungespeichert“ bedeutet: Die sichtbare Fassung existiert noch nicht vollständig im gespeicherten CMS-Datensatz.

3. Seitenfelder in der Mitte

Mit geschlossenem Content Tree steht die gesamte Breite zur Verfügung. Der Abschnitt Seite enthält Metadaten und Veröffentlichungseinstellungen; darunter folgt der Editor.

Feld	Bedeutung	Empfehlung
Titel	Sichtbarer Seitentitel und Bezeichnung im Content Tree.	Klar, eindeutig und zur Seitenaufgabe passend formulieren.
Permalink	URL-Pfad der Seite, zum Beispiel `tutorials-dbxapp/cms-editor`.	Kleinbuchstaben, sprechende Wörter und stabile Struktur verwenden. Änderungen können bestehende Links betreffen.
Content-Template	Bestimmt, welche Bereiche beim Rendern verwendet werden, zum Beispiel Titel, Hero, Header, Body, Gallery oder Footer.	Nur ändern, wenn der gewünschte Seitenaufbau bekannt ist; danach Frontend und Vorschau prüfen.
Status	Aktiv veröffentlicht die Seite gemäß Rechten und Navigation; Inaktiv nimmt sie aus der normalen Ausgabe.	Neue oder unvollständige Seiten zunächst inaktiv vorbereiten.
Beschreibung	Kurze Zusammenfassung für Metadaten, Listen oder Suchmaschinen; maximal 254 Zeichen.	In einem verständlichen Satz den Nutzen der Seite beschreiben.
Keywords	Interne und semantische Schlüsselwörter zur Seite.	Relevante Begriffe kommasepariert eintragen; keine beliebige Wortliste.
Editor	Der eigentliche HTML-Inhalt der Seite.	Für alle Funktionen das separate Editor-Tutorial verwenden.

4. Rechte Spalte – Medien und Darstellung

Auch hier bleibt der Content Tree geschlossen. Die rechte Spalte kann über ihre Pfeilschaltfläche ein- und ausgeblendet werden. Sie enthält drei unabhängig verwendbare Bereiche: Hero, Gallery und Im Text.

Rechte Medien- und Einstellungsspalte im CMS bei geschlossenem Content Tree — Content Tree geschlossen: rechts sind Hero, Gallery und die im Editor verwendeten Medien zugänglich.

Hero

Template: bestimmt die Hero-Darstellung; parent übernimmt den Wert des übergeordneten Ordners.
Hero-Bild: wird über Auswahl aus dem Medienbrowser zugeordnet.
Abstand oben: zusätzlicher Abstand vor dem Hero; parent übernimmt die Ordnerregel.
Höhe: steuert die Hero-Höhe; bestehende responsive Regeln bleiben zu berücksichtigen.
Variante: wählt eine konfigurierte Darstellungsvariante.
Hero sticky: legt fest, ob der Hero beim Scrollen fixiert wird.
Scroll-Ebene: steuert die vorgesehene Scroll- beziehungsweise Parallax-Ebene.
Speichern: speichert die Hero-Einstellungen. Danach die Seitenvorschau kontrollieren.

Gallery

Overflow: bestimmt, ob und wie weitere Bilder außerhalb der unmittelbar sichtbaren Auswahl präsentiert werden.
Klick: legt das Klickverhalten fest, beispielsweise Lightbox.
Auswahl: öffnet den Medienbrowser und ordnet Bilder dem Slot gallery zu.
Medienkarten: zeigen Bild, Titel und Aktionen. Über den Papierkorb wird nur die Zuordnung zur Seite entfernt.
Speichern: speichert Gallery-Einstellungen und die vorgesehene Reihenfolge.

Im Text

Hier werden Medien angezeigt, die der aktuellen Seite im Slot inline zugeordnet sind.
Auswahl öffnet den Medienbrowser; das gewählte Bild kann anschließend an der Cursorposition in den Editor eingesetzt werden.
Eine Zuordnung allein erzeugt noch nicht zwingend eine sichtbare Stelle im Text. Das Bild muss im Editorinhalt referenziert sein.
Ausrichtung, Breite und Größenangaben eines Inline-Bildes müssen beim Speichern erhalten bleiben. Nach dem Speichern die Seite erneut laden und genau diese Darstellung kontrollieren.

Die vollständige Medienlogik steht im Tutorial CMS Medienverwendung.

5. Neue Seite Schritt für Schritt

Neu angelegte CMS-Seite mit neuer ID, Standardfeldern und geschlossenem Content Tree — Nach dem asynchronen Anlegen wird die neue Seiten-ID geladen. Der Content Tree bleibt für die Bearbeitung geschlossen.

Öffnen Sie den Content Tree und wählen Sie den Zielordner.
Schließen Sie den Content Tree wieder.
Klicken Sie in der Kopfleiste auf Neue Seite.
Warten Sie, bis oben eine neue ID und ein Titel wie „Neue Seite …“ erscheinen.
Ersetzen Sie Titel und Permalink sofort durch eindeutige Werte.
Wählen Sie Content-Template und Status. Für Entwürfe ist Inaktiv die sichere Wahl.
Füllen Sie Beschreibung und Keywords aus.
Erstellen Sie den Inhalt im Editor und ordnen Sie benötigte Medien zu.
Speichern Sie, warten Sie auf Gespeichert und öffnen Sie erst danach die Vorschau.
Kontrollieren Sie Desktop- und schmale Darstellung, Links, Bilder, Rechte und Sprachfassungen.

6. Seite duplizieren

Öffnen Sie die Quellseite und stellen Sie sicher, dass keine ungespeicherten Änderungen vorhanden sind.
Klicken Sie auf Ausgewählte Seite duplizieren.
Warten Sie auf die neue ID.
Ändern Sie sofort Titel und Permalink der Kopie.
Prüfen Sie Inhalt, Links, Medien, Status, Sprachen und Rechte. Eine Kopie ist kein automatisch unabhängiger fachlicher Inhalt.
Speichern und Vorschau kontrollieren.

7. Sicherer Arbeitsablauf für Änderungen

Seite im Content Tree wählen und anhand von ID und Titel bestätigen.
Content Tree schließen.
Seitendaten, Editorinhalt oder rechte Einstellungen gezielt ändern.
Bei Inline-Bildern Position, Ausrichtung und Größe kontrollieren.
Die zuständige Speichern-Schaltfläche verwenden und auf Gespeichert warten.
Seite über Neu laden erneut aus dem CMS lesen und prüfen, ob alle Werte erhalten blieben.
Vorschau öffnen und gerenderte Darstellung mit dem Editor vergleichen.
Erst nach erfolgreicher Prüfung Sprache, Status oder weitere Seiten bearbeiten.

8. Typische Probleme

Problem	Prüfreihenfolge
Falsche Seite bearbeitet	Aktuelle ID und Titel oben prüfen → Content Tree öffnen → korrekte Seite wählen → Tree wieder schließen.
Änderung fehlt in der Vorschau	Speicherstatus → Seitenspeicherung → Teilbereich-Speicherung → Vorschau neu laden → Cache-/Gastansicht prüfen.
Bild steht nach dem Speichern anders	Inline-Zuordnung → Bildposition im Editor → Ausrichtung → Breite/Größe → speichern → CMS neu laden → Vorschau vergleichen.
Duplizieren reagiert nicht	Ungespeicherte Änderungen zuerst speichern → warten → erneut duplizieren.
Neu laden hat Inhalt entfernt	Neu laden verwirft bewusst ungespeicherte Änderungen. Den gespeicherten Stand oder eine vorherige Version wiederherstellen.
Sprachfassung wurde überschrieben	Master-Sprache → Auto-Sync-Status → manuelle Trennung beziehungsweise erneute Auto-Sync-Aktivierung prüfen.

Weiter zum vollständigen Editor-Tutorial Medienverwendung Alle Tutorials