Website-Vorschau
Die Website-Vorschau zeigt dir deine komplette Website so an, wie sie deine Besucher sehen werden. Hier werden alle Seiten-Inhalte, die Navigation, Header und Footer in der richtigen Anordnung dargestellt. Du kannst zwischen verschiedenen Seiten wechseln und das responsive Verhalten testen.
Voraussetzungen
- Eine Website muss erstellt und konfiguriert sein
- Mindestens eine Seite mit Inhalten muss vorhanden sein
- Website-Einstellungen müssen gespeichert sein
Aufbau der Website-Vorschau
Die Vorschau besteht aus mehreren automatisch angeordneten Bereichen:
Website-Container Der Hauptcontainer, der die gesamte Website umfasst und das responsive Verhalten steuert.
Navigations-Layout Die Anordnung passt sich automatisch an die gewählte Navigations-Variante an (oben oder links).
Header-Bereich Falls konfiguriert, wird der Header automatisch an der richtigen Position angezeigt.
Hauptinhalt-Bereich Alle sichtbaren Blöcke der aktuellen Seite werden in der konfigurierten Reihenfolge dargestellt.
Footer-Bereich Falls konfiguriert, wird der Footer automatisch am Ende der Seite angezeigt.
weboffice-Branding Ein dezenter weboffice-Footer wird automatisch hinzugefügt.
Navigations-Varianten
Die Vorschau passt sich automatisch an deine Navigations-Einstellungen an:
Top-Navigation Die Navigation wird oben angezeigt, der Inhalt nutzt die volle Breite darunter.
Left-Navigation Die Navigation wird links angezeigt, der Hauptinhalt nimmt den verbleibenden Platz rechts ein. Der Container erhält die CSS-Klasse "mainLeft" für spezielle Styling-Optionen.
Inhalts-Darstellung
Sichtbare Blöcke Alle als sichtbar markierten Blöcke werden mit ihren konfigurierten Inhalten und Styling-Optionen angezeigt.
Reihenfolge Blöcke erscheinen in der Reihenfolge, wie du sie in der Seitenverwaltung angeordnet hast.
Responsive Verhalten Alle Inhalte passen sich automatisch an verschiedene Bildschirmgrößen an.
Interaktive Elemente Buttons, Links und andere interaktive Elemente funktionieren wie auf der echten Website.
Automatische Funktionen
Einstellungen laden Die Vorschau lädt automatisch alle Website- und Seiteneinstellungen.
Design anwenden Das gewählte Theme, Farben und Schriftarten werden automatisch angewendet.
404-Seite Falls keine spezifische Seite geladen wird, zeigt die Vorschau automatisch die 404-Fehlerseite an.
Cascading Settings Website-Einstellungen werden automatisch an alle Blöcke weitergegeben.
Seiten-Verwaltung
Aktuelle Seite Die Vorschau zeigt die Seite an, die über die PageId spezifiziert wurde.
Website-Fallback Falls keine spezifische Seite angegeben ist, wird die Standard-404-Seite der Website angezeigt.
Dynamisches Laden Seiten-Inhalte werden dynamisch aus der Datenbank geladen und in der Vorschau dargestellt.
So verwendest du die Website-Vorschau
Vollständige Ansicht: Betrachte deine Website in der kompletten Darstellung mit Navigation und allen Elementen
Responsive Test: Ändere die Browsergröße, um zu sehen, wie sich deine Website auf verschiedenen Geräten verhält
Navigation testen: Überprüfe, ob die Navigation korrekt positioniert und funktionsfähig ist
Inhalt prüfen: Kontrolliere, ob alle Blöcke korrekt angezeigt werden und in der richtigen Reihenfolge stehen
Design validieren: Stelle sicher, dass Farben, Schriftarten und Abstände deinen Vorstellungen entsprechen
Unterschied zur öffentlichen Website
Die Vorschau unterscheidet sich minimal von der öffentlichen Website:
- Tracking-Codes können deaktiviert sein
- Entwickler-Tools sind verfügbar
- Schnellere Ladezeiten durch optimierte Vorschau-Umgebung
- Gleiche Darstellung und Funktionalität wie die öffentliche Website
Flexibles Layout-System
Container-Fluid Die Website nutzt ein flexibles Container-System, das sich an verschiedene Bildschirmgrößen anpasst.
Flex-Layout Moderne CSS-Flexbox-Technologie sorgt für optimale Anordnung der Elemente.
Responsive Grid Automatische Anpassung an verschiedene Bildschirmgrößen ohne manuelle Eingriffe.
Tipps und Hinweise
- Vollständige Darstellung: Die Vorschau zeigt deine Website genau so, wie sie online erscheint
- Performance: Vorschau lädt schneller als die öffentliche Website
- Responsive Design: Teste verschiedene Bildschirmgrößen für optimale Darstellung
- Interaktivität: Alle Links und Buttons funktionieren wie auf der echten Website