Seiten-Vorschau anzeigen
Die Seiten-Vorschau zeigt dir, wie eine einzelne Seite deiner Website aussieht und funktioniert. Hier werden alle Blöcke in der richtigen Reihenfolge dargestellt, das gewählte Design angewendet und die Navigation entsprechend der Einstellungen positioniert. Du siehst deine Seite genau so, wie sie deine Besucher sehen werden.
Voraussetzungen
- Eine Seite muss erstellt und mit Inhalten gefüllt sein
- Website-Einstellungen müssen konfiguriert sein
- Optional: Header und Footer sollten eingerichtet sein
Aufbau der Seiten-Vorschau
Die Vorschau besteht aus mehreren automatisch angeordneten Bereichen:
Website-Container Der Hauptcontainer, der alle Inhalte umfasst und das gewählte Navigations-Layout anwendet.
Header-Bereich Falls ein Header konfiguriert ist, wird er automatisch am oberen Rand der Seite angezeigt.
Hauptinhalt Alle sichtbaren Blöcke deiner Seite werden in der von dir festgelegten Reihenfolge dargestellt.
Footer-Bereich Falls ein Footer konfiguriert ist, wird er automatisch am unteren Rand der Seite angezeigt.
Navigation-Varianten
Die Vorschau passt sich automatisch an deine gewählte Navigation an:
Top-Navigation (Standard) Die Navigation wird oben auf der Seite angezeigt, der Inhalt füllt die gesamte Breite.
Left-Navigation Die Navigation wird links angezeigt, der Hauptinhalt nimmt den verbleibenden Platz rechts ein.
Block-Darstellung
Jeder Block wird mit speziellen Eigenschaften angezeigt:
Sichtbare Blöcke Werden normal dargestellt mit allen konfigurierten Inhalten und Styling-Optionen.
Unsichtbare Blöcke Werden durch einen Platzhalter mit dem Text "Deaktiviert" ersetzt, damit du siehst, wo sie sich befinden würden.
System-Blöcke Header und Footer werden als System-Blöcke markiert und automatisch an den richtigen Positionen platziert.
Daten-Attribute für Entwickler
Jeder Block erhält automatisch spezielle Attribute:
data-instance-id Eindeutige Identifikation des Block-Exemplars.
data-block-name Name des Block-Typs (z.B. "TextBlock", "ImageBlock").
data-system Kennzeichnet, ob es sich um einen System-Block (Header/Footer) handelt.
data-visible Zeigt an, ob der Block für Besucher sichtbar ist.
So verwendest du die Seiten-Vorschau
Vollständige Ansicht: Die Vorschau zeigt deine Seite genau so, wie sie online erscheinen wird
Layout prüfen: Kontrolliere, ob Header, Inhalt und Footer korrekt angeordnet sind
Block-Reihenfolge: Überprüfe, ob alle Blöcke in der gewünschten Reihenfolge erscheinen
Responsive Design: Die Vorschau passt sich automatisch an verschiedene Bildschirmgrößen an
Unsichtbare Inhalte: Erkenne durch Platzhalter, welche Blöcke deaktiviert sind
Automatische Funktionen
Einstellungen laden Die Vorschau lädt automatisch alle relevanten Website- und Seiteneinstellungen.
Design anwenden Das gewählte Theme und alle Styling-Optionen werden automatisch angewendet.
Navigation positionieren Die Navigation wird entsprechend der gewählten Variante automatisch positioniert.
Responsive Verhalten Alle Inhalte passen sich automatisch an die Bildschirmgröße an.
Unterschied zur öffentlichen Ansicht
Die Seiten-Vorschau unterscheidet sich in einigen Punkten von der öffentlichen Website:
- Unsichtbare Blöcke werden als Platzhalter angezeigt
- Spezielle Entwickler-Attribute sind verfügbar
- Tracking und externe Skripte können deaktiviert sein
Tipps und Hinweise
- Vollständige Darstellung: Die Vorschau zeigt alle konfigurierten Elemente an
- Performance: Vorschau lädt schneller als die öffentliche Website
- Debugging: Entwickler-Attribute helfen bei der Fehlersuche
- Konsistenz: Layout und Design entsprechen der öffentlichen Website