Website-Vorschau-Frame
Der Vorschau-Frame zeigt deine Website genau so an, wie sie später für Besucher aussehen wird. Hier siehst du alle Änderungen in Echtzeit und kannst direkt mit den Inhalten interagieren.
Voraussetzungen
- Du befindest dich im Website-Editor
- Eine Seite ist zum Bearbeiten geöffnet
Aufbau der Seite
Der Vorschau-Frame ist ein eingebettetes Fenster, das:
- Live-Vorschau: Zeigt deine Website in Echtzeit
- Interaktive Elemente: Ermöglicht direkte Bearbeitung
- Responsive Darstellung: Passt sich der gewählten Bildschirmgröße an
- Block-Aktionen: Zeigt Bearbeitungsoptionen beim Überfahren
So arbeitest du mit dieser Seite
Blöcke bearbeiten
- Block anklicken: Klicke auf einen Block um ihn zu bearbeiten
- Hover-Menü nutzen: Fahre über einen Block um Aktionen zu sehen
- Direkte Bearbeitung: Manche Texte können direkt bearbeitet werden
Block-Aktionen verwenden
Beim Überfahren eines Blocks erscheinen verschiedene Schaltflächen:
- Konfigurieren (Zahnrad): Öffnet die Block-Einstellungen
- Hinzufügen (Plus): Fügt einen neuen Block danach hinzu
- Löschen (Papierkorb): Entfernt den Block
- Kopieren (Kopieren-Symbol): Kopiert den Block in die Zwischenablage
- Einfügen (Einfügen-Symbol): Fügt einen kopierten Block ein
- Nach oben (Pfeil hoch): Verschiebt den Block nach oben
- Nach unten (Pfeil runter): Verschiebt den Block nach unten
- Sichtbarkeit (Auge): Blendet den Block ein/aus
Responsive Vorschau
- Ansicht wechseln: Nutze die Schaltflächen in der Editor-Kopfleiste
- Mobil-Ansicht: Zeigt, wie die Seite auf Smartphones aussieht
- Tablet-Ansicht: Zeigt die Darstellung auf Tablets
- Desktop-Ansicht: Zeigt die vollständige Desktop-Version
Echtzeit-Updates
- Automatische Aktualisierung: Änderungen werden sofort sichtbar
- Einstellungs-Updates: Design-Änderungen werden live übertragen
- Block-Updates: Neue Inhalte erscheinen sofort
Tipps und Hinweise
- Verschiedene Größen testen: Wechsle regelmäßig zwischen den Ansichten
- Hover-Effekte nutzen: Die Bearbeitungsoptionen erscheinen beim Überfahren
- Scroll-Verhalten beachten: Teste, wie sich die Seite beim Scrollen verhält
- Ladezeiten prüfen: Achte auf die Performance bei vielen Bildern
- Links testen: Klicke auf Links um zu prüfen, ob sie funktionieren
- Formulare testen: Probiere Kontaktformulare und andere interaktive Elemente
Häufige Aktionen
- Block hinzufügen: Plus-Symbol → Block-Typ wählen
- Block bearbeiten: Zahnrad-Symbol → Einstellungen anpassen
- Block verschieben: Pfeil-Symbole → Position ändern
- Block kopieren: Kopieren-Symbol → An anderer Stelle einfügen
- Block löschen: Papierkorb-Symbol → Bestätigung
Fehlerbehebung
- Vorschau lädt nicht: Aktualisiere die Seite oder wechsle die Ansicht
- Änderungen nicht sichtbar: Speichere zuerst im Editor
- Hover-Menü verschwindet: Bewege die Maus langsamer über die Blöcke
- Responsive Probleme: Teste in verschiedenen Ansichten