Verwenden Sie den Design-Modus

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

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

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 Onlineshop.
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.

Englische Markierungen: Geöffneter Designmodus auf der Quiet Mornings-Storefront vor der Elementauswahl

Die englischen Markierungen zeigen die Bedienelemente. Wähle das Bild aus, um es zu vergrößern.

Der Designmodus ist geöffnet, aber noch kein Element ausgewählt. Wählen Sie das zu ändernde Element, um seine verfügbaren Steuerelemente anzuzeigen. Der Screenshot zeigt weder eine Bearbeitung noch eine Speicherung.

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

Öffnen Sie die Zielseite in der normalen Vorschau, bevor Sie den Designmodus aktivieren.
Öffnen Sie den Designmodus und wählen Sie ein Element.
Wählen Sie einen Weg für diese Änderung: - Nutzen Sie für eine direkte Bearbeitung Abstand, Bild, Text oder Element löschen, prüfen Sie das Ergebnis mit Rückgängig oder Wiederholen und wählen Sie Speichern. - Speichern Sie für eine KI-Anfrage zunächst alle ausstehenden direkten Änderungen, wählen Sie bei Bedarf das Element erneut, geben Sie die Anweisung unter Runner fragen ein und senden Sie sie. Beim Start von Runner werden die Auswahl und der ungespeicherte Verlauf direkter Änderungen gelöscht.
Warten Sie, bis die gewählte Speicherung oder Runner-Anfrage abgeschlossen ist, und prüfen Sie die Seite in der normalen Vorschau.
Prüfen Sie die Seite erneut in den Ansichten PC, Tablet und Telefon. Bestätigen Sie nach dem Neuladen der Vorschau, dass gespeicherte Überschrift, Bild oder Abstand erhalten geblieben sind.
Veröffentlichen Sie erst, nachdem die gespeicherte Vorschau Ihre Prü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 noch nicht bereit.	Warten Sie, bis die Storefront vollständig geladen ist.
Sobald Runner fertig ist, können Sie wieder visuell bearbeiten.	Runner bearbeitet eine andere Anfrage.	Warten Sie auf deren Abschluss und wählen Sie das Element erneut.
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.
Ihre Designänderungen konnten nicht gespeichert werden	Runner konnte eine oder mehrere Änderungen nicht in die Dateien Ihres Shops schreiben. Diese Änderungen bleiben im Editor, und Speichern bleibt verfügbar. Bereits gespeicherte Änderungen bleiben gespeichert.	Wählen Sie erneut Speichern. Wenn es weiterhin fehlschlägt, machen Sie diese Änderung rückgängig oder beschreiben Sie die Änderung im Runner-Chat.
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.