Verwenden Sie den Design-Modus

Wählen Sie Storefront-Elemente aus und verwenden Sie Runners visuelle Bearbeitungssteuerelemente sicher.

Zugriffspfad: Workspace → Store wählen → Storefront → Design-Modus

Runner-Storefront-Vorschau und Steuerung

Was dieser Leitfaden abdeckt

Öffnen Sie den Design-Modus in der neuesten Storefront-Version, wählen Sie ein sichtbares Element aus, nehmen Sie eine kontrollierte Änderung vor und speichern Sie sie als Teil des aktuellen Projekts.

Warum und wann Design-Modus nutzen

Nutzen Sie den Design-Modus für fokussierte visuelle Änderungen, die leichter zu zeigen als von Grund auf zu beschreiben sind: Überschrift umschreiben, Bild ersetzen, Abstände anpassen, Typografie ändern oder ein sichtbares Element entfernen.

Nutzen Sie Runner-Chat für umfassendere Arbeiten, die mehrere Seiten umfassen, das Store-Verhalten ändern oder neue Funktionalität erfordern.

Verfügbarkeit und Voraussetzungen

Der Design-Modus ist bedingt. Er ist verfügbar, wenn:

Sie ein Desktop-Layout verwenden;
die neueste Storefront-Version bereit und ausgewählt ist;
Sie keine ältere Version in der Vorschau anzeigen;
Runner gerade keine andere Anfrage verarbeitet; und
die Design-Modus-Funktion für den Workspace aktiviert ist.

Wenn die Vorschau noch vorbereitet wird, eine historische Version ausgewählt ist oder Runner arbeitet, kann die Schaltfläche verborgen oder deaktiviert sein.

Öffnen Sie den Design-Modus

Öffnen Sie Ihr Projekt.
Wählen Sie Storefront.
Stellen Sie sicher, dass das Versionslabel Aktuell sagt und die Vorschau bereit ist.
Wählen Sie Design-Modus in der Storefront-Symbolleiste.
Wenn eine untere Bearbeitungsleiste mit einem weiteren Design-Modus-Steuerelement angezeigt wird, wählen Sie es, um die Elementauswahl zu aktivieren.
Bewegen Sie sich über das Storefront und wählen Sie das Element aus, das Sie ändern möchten.

Design-Modus-Steuerelemente

Steuerelement	Warum Sie es verwenden	Was passiert, wenn Sie es auswählen
Design-Modus in der Storefront-Symbolleiste	Geben Sie die dedizierte Bearbeitungsansicht ein.	Runner öffnet das aktuelle Storefront im Design-Panel.
Design-Modus in der unteren Leiste	Schalten Sie die Elementprüfung ein oder aus.	Wenn aktiviert, werden wählbare Elemente hervorgehoben und das Auswählen eines öffnet seine Bearbeitungsleiste. Das Ausschalten löscht die aktuelle Bearbeitungssitzung.
Fragen Sie Runner AI-Feld und Sendepfeil	Beschreiben Sie eine Änderung für das ausgewählte Element.	Runner erhält die Anweisung mit dem ausgewählten Element. Wenn Runner startet, löscht es die Auswahl und setzt ungespeicherte direkte Änderungen und ihre Rückgängig-/Wiederherstellen-Verlauf zurück, speichern Sie also alle ausstehenden direkten Änderungen, bevor Sie senden.
Abstände	Ändern Sie den Raum innerhalb oder um das Element.	Ein Panel öffnet sich für horizontale und vertikale Ränder und Abstände.
Bild	Ersetzen Sie ein ausgewähltes Bild oder Hintergrundbild.	Ein Panel öffnet sich mit Hochladen und KI-generiert Optionen, wenn dieses Element die Medienbearbeitung unterstützt.
Text	Ändern Sie die Typografie-Einstellungen.	Ein Panel öffnet sich für Schriftgröße, Gewicht, Familie, Farbe, Deckkraft und Ausrichtung, wenn unterstützt.
Element löschen	Entfernen Sie das ausgewählte Element aus der aktuellen Bearbeitung.	Das Element verschwindet sofort im Editor. Verwenden Sie Rückgängig, wenn dies versehentlich war, und überprüfen Sie vor dem Speichern.
Rückgängig	Machen Sie die neueste ungespeicherte visuelle Änderung rückgängig.	Runner geht rückwärts durch die aktuelle Design-Modus-Bearbeitungsverlauf.
Wiederherstellen	Wenden Sie eine Änderung erneut an, die Sie gerade rückgängig gemacht haben.	Runner geht vorwärts durch die aktuelle Design-Modus-Bearbeitungsverlauf.
Speichern	Behalten Sie die aktuellen visuellen Änderungen.	Runner schreibt die ausstehenden Änderungen, zeichnet einen neuen Versions-Snapshot auf, wenn möglich, löscht diese Sitzungs-Rückgängig-/Wiederherstellen-Verlauf und lädt die Vorschau neu. Die Schaltfläche ist deaktiviert, wenn es nichts zu speichern gibt.
Schließen	Verlassen Sie das dedizierte Design-Panel.	Runner kehrt zur normalen Storefront-Vorschau zurück und löscht ungespeicherte Änderungen und Befehlsverlauf. Speichern Sie zuerst, wenn Sie die Änderungen behalten möchten.

Nehmen Sie eine sichere visuelle Änderung vor

Navigieren Sie zur Zielseite in der normalen Vorschau, bevor Sie den Design-Modus öffnen.
Geben Sie den Design-Modus ein und wählen Sie ein Element aus.
Wählen Sie einen Pfad für diese Änderung:
- Für eine direkte Bearbeitung verwenden Sie Abstände, Bild, Text oder Element löschen, überprüfen Sie es dann mit Rückgängig oder Wiederherstellen und wählen Sie Speichern.
- Für eine KI-Anfrage speichern Sie zuerst alle ausstehenden direkten Änderungen, wählen Sie das Element erneut aus, wenn nötig, geben Sie die Anweisung in Fragen Sie Runner AI ein und senden Sie sie. Wenn Runner startet, werden die Auswahl und der ungespeicherte direkte Änderungsverlauf gelöscht.
Warten Sie, bis das ausgewählte Speichern oder die Runner-Anfrage abgeschlossen ist, überprüfen Sie dann die Seite in der normalen Vorschau.
Überprüfen Sie die Seite erneut in PC-, Tablet- und Telefon-Layouts.
Veröffentlichen Sie nur, nachdem die gespeicherte Vorschau Ihre Überprüfung bestanden hat.

Zustände, Limits und Fehlerbehebung

Was Sie sehen	Bedeutung	Was zu tun ist
Design-Modus wird gestartet…	Runner bereitet die bearbeitbare Vorschau vor.	Behalten Sie die neueste Version ausgewählt.
Design-Modus ist nicht gestartet	Die bearbeitbare Vorschau wurde nicht bereit.	Wählen Sie Erneut versuchen. Wenn es sich wiederholt, kehren Sie zur normalen Vorschau zurück und aktualisieren Sie.
Iframe wird noch geladen	Die Elementprüfung ist nicht bereit.	Warten Sie, bis das Storefront das Laden abgeschlossen hat.
Visueller Editor deaktiviert, während KI verarbeitet	Runner verarbeitet eine andere Anfrage.	Warten Sie, bis die Anfrage abgeschlossen ist, wählen Sie dann das Element erneut aus.
Runner startet nach einer Fragen Sie Runner AI-Anfrage	Der visuelle Editor wird für die neue Aufgabe zurückgesetzt.	Alle ungespeicherten direkten Änderungen und ihr Rückgängig-/Wiederherstellen-Verlauf werden verworfen. Speichern Sie direkte Änderungen, bevor Sie die Anfrage senden.
KI-Bearbeitung nicht verfügbar für dynamischen Inhalt	Der ausgewählte Inhalt kann durch dieses Steuerelement nicht geändert werden.	Beschreiben Sie die Seite und das gewünschte Ergebnis im regulären Runner-Chat.
Nichts zum Rückgängigmachen / Wiederherstellen / Speichern	Die aktuelle Design-Modus-Sitzung hat keine entsprechende Aktion.	Wählen Sie ein bearbeitbares Element aus und nehmen Sie zuerst eine Änderung vor.
Änderungen an Quelldateien gespeichert	Runner hat das Design-Modus-Speichern abgeschlossen.	Warten Sie, bis die Vorschau neu geladen wird, überprüfen Sie dann die geänderte Seite erneut.
Die Änderung wird gespeichert, aber nicht live	Das Speichern von Änderungen aktualisiert das Projekt, nicht das veröffentlichte Storefront.	Überprüfen Sie die aktuelle Version, wählen Sie dann Änderungen veröffentlichen.