---
title: Usa Modalità Design
description: Seleziona gli elementi della vetrina e usa i controlli di modifica visiva di Runner in sicurezza.
---

**Percorso di accesso:** Area di lavoro → seleziona un negozio → **Vetrina** → **Modalità Design**

![Anteprima e controlli della vetrina Runner](https://ixft9x6szo.ufs.sh/f/Cc8uxBgAYTzgzyPnD9dvQbMAZ2hlg7w6ye8S5vnLIHkGPOqr)

## Cosa copre questa guida

Apri Modalità Design sulla versione più recente della vetrina, seleziona un elemento visibile, fai una modifica controllata e salvala come parte del progetto attuale.

## Perché e quando usare Modalità Design

Usa Modalità Design per modifiche visive mirate che sono più facili da indicare che descrivere da zero: riscrivi un titolo, sostituisci un'immagine, regola la spaziatura, cambia la tipografia o rimuovi un elemento visibile.

Usa la chat di Runner per il lavoro più ampio che copre diverse pagine, cambia il comportamento del negozio o richiede nuove funzionalità.

## Disponibilità e prerequisiti

Modalità Design è condizionale. È disponibile quando:

- stai usando un layout desktop;
- la versione più recente della vetrina è pronta e selezionata;
- non stai visualizzando un'anteprima di una versione precedente;
- Runner non sta attualmente elaborando un'altra richiesta; e
- la funzionalità Modalità Design è abilitata per l'area di lavoro.

Se l'anteprima è ancora in preparazione, è selezionata una versione storica o Runner sta lavorando, il pulsante può essere nascosto o disabilitato.

## Apri Modalità Design

1. Apri il tuo progetto.
2. Seleziona **Vetrina**.
3. Assicurati che l'etichetta della versione dica **Attuale** e che l'anteprima sia pronta.
4. Seleziona **Modalità Design** nella barra degli strumenti della vetrina.
5. Se una barra di modifica inferiore appare con un altro controllo **Modalità Design**, selezionalo per abilitare la selezione degli elementi.
6. Sposta il mouse sulla vetrina e seleziona l'elemento che vuoi modificare.

## Controlli di Modalità Design

| Controllo | Perché lo usi | Cosa succede quando lo selezioni |
| --- | --- | --- |
| **Modalità Design** nella barra degli strumenti della vetrina | Entra nella vista di modifica dedicata. | Runner apre la vetrina attuale nel pannello di progettazione. |
| **Modalità Design** nella barra inferiore | Attiva o disattiva l'ispezione degli elementi. | Quando attivo, gli elementi selezionabili sono delineati e la selezione di uno apre la sua barra di modifica. Disattivarlo cancella la sessione di modifica attuale. |
| Campo **Chiedi a Runner AI** e freccia di invio | Descrivi una modifica per l'elemento selezionato. | Runner riceve l'istruzione con l'elemento selezionato. Quando Runner inizia, cancella la selezione e ripristina le modifiche dirette non salvate e la loro cronologia di annullamento/ripristino, quindi salva le modifiche dirette in sospeso prima di inviare. |
| **Spaziatura** | Cambia lo spazio dentro o intorno all'elemento. | Un pannello si apre per margine e padding orizzontale e verticale. |
| **Immagine** | Sostituisci un'immagine selezionata o un'immagine di sfondo. | Un pannello si apre con le opzioni **Carica** e **Generata da AI** quando quell'elemento supporta la modifica dei media. |
| **Testo** | Cambia lo stile del tipo. | Un pannello si apre per dimensione del carattere, peso, famiglia, colore, opacità e allineamento quando supportato. |
| **Elimina elemento** | Rimuovi l'elemento selezionato dalla modifica attuale. | L'elemento scompare immediatamente nell'editor. Usa **Annulla** se questo era accidentale e rivedi prima di salvare. |
| **Annulla** | Inverti la modifica visiva non salvata più recente. | Runner torna indietro nella cronologia di modifica della sessione corrente di Modalità Design. |
| **Ripristina** | Riapplica una modifica che hai appena annullato. | Runner avanza nella cronologia di modifica della sessione corrente di Modalità Design. |
| **Salva** | Mantieni le modifiche visive attuali. | Runner scrive le modifiche in sospeso, registra uno snapshot di nuova versione quando possibile, cancella la cronologia di annullamento/ripristino di questa sessione e ricarica l'anteprima. Il pulsante è disabilitato quando non c'è nulla da salvare. |
| **Chiudi** | Esci dal pannello di progettazione dedicato. | Runner torna all'anteprima normale della vetrina e cancella le modifiche non salvate e la cronologia dei comandi. Salva prima se vuoi mantenere le modifiche. |

## Fai una modifica visiva sicura

1. Naviga alla pagina di destinazione in Anteprima normale prima di aprire Modalità Design.
2. Entra in Modalità Design e seleziona un elemento.
3. Scegli un percorso per questa modifica:
   - Per una modifica diretta, usa **Spaziatura**, **Immagine**, **Testo** o **Elimina elemento**, quindi rivedi con **Annulla** o **Ripristina** e seleziona **Salva**.
   - Per una richiesta AI, salva prima le modifiche dirette in sospeso, riseleziona l'elemento se necessario, inserisci l'istruzione in **Chiedi a Runner AI** e inviala. Quando Runner inizia, la selezione e la cronologia di modifica diretta non salvata vengono cancellate.
4. Attendi che il salvataggio o la richiesta di Runner scelti finiscano, quindi rivedi la pagina in Anteprima normale.
5. Controlla di nuovo la pagina nei layout **PC**, **Tablet** e **Telefono**.
6. Pubblica solo dopo che l'anteprima salvata ha superato la tua revisione.

## Stati, limiti e risoluzione dei problemi

| Cosa vedi | Significato | Cosa fare |
| --- | --- | --- |
| **Avvio di design mode…** | Runner sta preparando l'anteprima modificabile. | Mantieni la versione più recente selezionata. |
| **Design mode non è stato avviato** | L'anteprima modificabile non è diventata pronta. | Seleziona **Riprova**. Se si ripete, torna all'Anteprima normale e aggiorna. |
| **Iframe è ancora in caricamento** | L'ispezione degli elementi non è pronta. | Attendi che la vetrina finisca di caricarsi. |
| **Editor visivo disabilitato mentre AI sta elaborando** | Runner sta gestendo un'altra richiesta. | Attendi che la richiesta finisca, quindi seleziona di nuovo l'elemento. |
| Runner inizia dopo una richiesta **Chiedi a Runner AI** | L'editor visivo si ripristina per il nuovo compito. | Qualsiasi modifica diretta non salvata e la loro cronologia di annullamento/ripristino vengono scartate. Salva le modifiche dirette prima di inviare la richiesta. |
| **Modifica AI non disponibile per contenuto dinamico** | Il contenuto selezionato non può essere modificato tramite quel controllo. | Descrivi la pagina e il risultato desiderato nella chat regolare di Runner. |
| **Nulla da annullare / ripristinare / salvare** | La sessione corrente di Modalità Design non ha l'azione corrispondente. | Seleziona un elemento modificabile e fai una modifica prima. |
| **Modifiche salvate nei file di origine** | Runner ha completato il salvataggio di Modalità Design. | Attendi che l'anteprima si ricarichi, quindi rivedi di nuovo la pagina modificata. |
| La modifica è salvata ma non live | Il salvataggio delle modifiche aggiorna il progetto, non la vetrina pubblicata. | Rivedi la versione attuale, quindi seleziona **Pubblica modifiche**. |

## Guide correlate

- [Modifica contenuto, pagine e media](./edit-content-pages-and-media)
- [Visualizza l'anteprima del tuo negozio](./preview-your-store)
- [Usa la cronologia delle versioni](./version-history)