---
title: Verwenden Sie den Design-Modus
description: 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](https://ixft9x6szo.ufs.sh/f/Cc8uxBgAYTzgzyPnD9dvQbMAZ2hlg7w6ye8S5vnLIHkGPOqr)

## 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

1. Öffnen Sie Ihr Projekt.
2. Wählen Sie **Storefront**.
3. Stellen Sie sicher, dass das Versionslabel **Aktuell** sagt und die Vorschau bereit ist.
4. Wählen Sie **Design-Modus** in der Storefront-Symbolleiste.
5. Wenn eine untere Bearbeitungsleiste mit einem weiteren **Design-Modus**-Steuerelement angezeigt wird, wählen Sie es, um die Elementauswahl zu aktivieren.
6. 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

1. Navigieren Sie zur Zielseite in der normalen Vorschau, bevor Sie den Design-Modus öffnen.
2. Geben Sie den Design-Modus ein und wählen Sie ein Element aus.
3. 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.
4. Warten Sie, bis das ausgewählte Speichern oder die Runner-Anfrage abgeschlossen ist, überprüfen Sie dann die Seite in der normalen Vorschau.
5. Überprüfen Sie die Seite erneut in **PC**-, **Tablet**- und **Telefon**-Layouts.
6. 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**. |

## Verwandte Leitfäden

- [Bearbeiten Sie Inhalte, Seiten und Medien](./edit-content-pages-and-media)
- [Vorschau Ihres Stores](./preview-your-store)
- [Verwenden Sie den Versionsverlauf](./version-history)