Modificare direttamente sulla tela
Perfeziona un design HTML dopo la generazione: modifica il testo, regola gli elementi selezionati, salva le modifiche e verifica il risultato prima della condivisione.
Scegli come apportare la modifica
| La tua attività | Usa | Che cosa cambia |
|---|---|---|
| Conosci il testo, il colore o la spaziatura esatti | Edit | Il file HTML selezionato, dopo aver confermato o salvato la modifica |
| Vuoi che l'agente rielabori un elemento | Comment → Send to chat | L'agente riceve un'istruzione specifica per l'elemento |
| Vuoi descrivere un'area visiva | Mark | Alla conversazione vengono aggiunti uno screenshot e delle note |
Per una nuova sezione, un comportamento responsive o una modifica che interessa più schermate, fornisci all'agente indicazioni chiare. Usa la modifica diretta per un piccolo intervento visivo. Consulta commenti e feedback contrassegnati per gli altri due metodi.
Aprire un'anteprima modificabile
- Apri un artefatto HTML da Design Files e seleziona Preview. Anche gli artefatti di slide HTML usano l'editor di anteprima; i controlli disponibili dipendono dal file.
- Scegli Edit nella barra degli strumenti dell'anteprima, quindi seleziona l'elemento sulla tela. Attendi che vengano visualizzati il contorno di selezione e il pannello dei parametri.
- Esci da Edit prima di provare link, moduli o pulsanti come un normale utente. La selezione di un elemento in modalità di modifica ha uno scopo diverso dall'utilizzo del prototipo.
Modificare una riga di testo
- In Edit, fai clic sul testo da modificare. Il testo e le etichette dei link possono essere modificati sulla tela.
- Digita il testo sostitutivo. Premi Invio per confermare il testo; Maiusc+Invio inserisce un'interruzione di riga. Premi Esc per annullare l'inserimento di testo corrente.
- Controlla il testo nella normale modalità Preview. Se la pagina genera quel testo con JavaScript, verifica anche l'azione che lo visualizza nuovamente.
Regolare un elemento o il relativo layout
Seleziona un elemento per visualizzare le proprietà supportate. Il pannello di ispezione include tipografia, colore, dimensioni, spaziatura, bordo e raggio degli angoli. I contenitori Flex e Grid mostrano controlli di layout come direzione, allineamento e Gap. Un link può mostrare il relativo Href; un'immagine può essere sostituita con Upload image. Questi controlli sono contestuali, quindi non tutti gli elementi dispongono di tutti i campi.
Puoi trascinare un elemento selezionato per regolarne la posizione. Apporta modifiche limitate e controlla gli elementi adiacenti e i layout per dispositivi mobili: spostare un elemento finché si adatta a una singola visualizzazione desktop non crea un layout responsive.
| Campo | Che cosa inserire o controllare |
|---|---|
| Text / Href / Image URL / Alt text | Gli elementi di testo mostrano il contenuto; i link mostrano anche la destinazione. Le immagini mostrano l'origine e il testo alternativo. I campi dipendono dall'elemento selezionato. |
| Text / Background / Border color | Usa un colore esadecimale come #262626. Dopo il salvataggio, controlla il contrasto e gli stati al passaggio del puntatore. |
| Opacity | Un numero da 0 a 1: 0 indica la trasparenza e 1 l'opacità. Il valore influisce sull'elemento selezionato, non soltanto sullo sfondo. |
| Font / Size / Weight / Line height / Letter spacing | Scegli il carattere e il peso, quindi regola dimensione e spaziatura tra le lettere. Line height accetta un numero positivo o un valore in px; 1.5 è un moltiplicatore, mentre 24px è un'altezza fissa. |
| Width / Height | Un semplice numero viene interpretato come px. Per queste dimensioni sono accettati anche valori percentuali. Controlla i layout stretti prima di scegliere una larghezza fissa. |
| Padding / Margin | Regola separatamente i valori superiore, destro, inferiore e sinistro. Padding è la spaziatura interna dell'elemento; Margin lo separa dagli elementi adiacenti. Margin può usare auto. |
| Border width / Style / Radius | Imposta insieme spessore, stile e colore del bordo. Una larghezza priva di uno stile visibile può sembrare priva di effetto. Radius arrotonda gli angoli. |
| Direction / Distribution / Gap / Align | I controlli del layout richiedono la selezione di un contenitore di layout. Su un elemento normale, Align modifica l'allineamento del testo; non è un comando per ridisporre l'elemento principale. |
La maggior parte dei campi di spaziatura accetta numeri o px, non espressioni CSS arbitrarie. Se un valore viene rifiutato, controlla l'unità e l'elemento selezionato anziché ripetere più volte il salvataggio. I campi vuoti possono indicare stili ereditati o calcolati, anziché un valore pari a zero.
Salvare, annullare o ripristinare
| Azione | Significato |
|---|---|
| Invio durante la modifica del testo | Conferma la modifica del testo corrente |
| Save nel pannello dei parametri | Scrive nel file le modifiche correnti al contenuto e allo stile |
| Cancel / Reset | Annulla o reimposta la bozza corrente; non elimina tutte le modifiche confermate in precedenza |
| Undo / Redo nell'editor | Annulla o riapplica le modifiche manuali confermate |
| Delete element | Rimuove l'elemento selezionato; controlla le dipendenze e usa Undo se necessario |
Controllare il risultato salvato
- Esci da Edit e ricarica l'anteprima. Verifica che la modifica sia ancora presente.
- Imposta il menu dell'area di visualizzazione su una dimensione per dispositivi mobili e prova i controlli reali.
- Usa la cronologia delle versioni se ti serve una versione HTML precedente. Per un file condiviso, aggiorna il relativo link dopo aver controllato la nuova versione.
La modifica di un'animazione HTML non cambia un MP4 già sottoposto a rendering. Richiedi un nuovo rendering, quindi controlla il nuovo video.
Se non riesci a selezionare o salvare
Verifica di aver aperto un file HTML supportato in Preview e che il progetto sia modificabile. Un progetto condiviso di sola lettura può consentire i commenti ma disabilitare la modifica. Esci da Edit e riaprilo, quindi ricarica il file se necessario. Se la selezione continua a non mostrare alcun contorno o pannello di ispezione, usa Comment o Mark per descrivere la modifica all'agente e includi la versione dell'app quando segnali il problema. Non continuare a fare clic su Save senza un elemento selezionato o un risultato confermato.