Direkt auf der Arbeitsfläche bearbeiten
Verfeinere ein HTML-Design nach der Generierung: Bearbeite Text, passe ausgewählte Elemente an, speichere Änderungen und prüfe das Ergebnis vor dem Teilen.
Entscheiden, wie du die Änderung vornimmst
| Deine Aufgabe | Verwende | Was sich ändert |
|---|---|---|
| Du kennst den genauen Text, die Farbe oder den Abstand | Edit | Die ausgewählte HTML-Datei, nachdem du die Bearbeitung übernommen oder gespeichert hast |
| Der Agent soll ein Element überarbeiten | Comment → Send to chat | Der Agent erhält eine elementspezifische Anweisung |
| Du möchtest einen visuellen Bereich erläutern | Mark | Der Unterhaltung werden ein Screenshot und Notizen hinzugefügt |
Gib dem Agenten für einen neuen Abschnitt, responsives Verhalten oder eine Änderung über mehrere Bildschirme hinweg ein klares Briefing. Verwende die direkte Bearbeitung für eine kleine visuelle Anpassung. Weitere Informationen zu den beiden anderen Möglichkeiten findest du unter Kommentare und markiertes Feedback.
Eine bearbeitbare Vorschau öffnen
- Öffne ein HTML-Artefakt in Design Files und wähle Preview. HTML-Folienartefakte verwenden ebenfalls den Vorschau-Editor; die verfügbaren Steuerelemente hängen von der Datei ab.
- Wähle Edit in der Vorschau-Symbolleiste und dann das Element auf der Arbeitsfläche aus. Warte, bis der Auswahlrahmen und das Parameterbedienfeld angezeigt werden.
- Beende Edit, bevor du Links, Formulare oder Schaltflächen wie ein normaler Benutzer testest. Das Auswählen eines Elements im Bearbeitungsmodus hat einen anderen Zweck als die Verwendung des Prototyps.
Eine Textzeile ändern
- Klicke in Edit auf den Text, den du ändern möchtest. Text und Linkbeschriftungen können direkt auf der Arbeitsfläche bearbeitet werden.
- Gib den Ersatztext ein. Drücke die Eingabetaste, um diesen Text zu übernehmen; Umschalttaste+Eingabetaste fügt einen Zeilenumbruch ein. Drücke Escape, um die aktuelle Texteingabe abzubrechen.
- Prüfe den Wortlaut in der normalen Preview. Wenn die Seite diesen Text mit JavaScript generiert, teste auch die Aktion, durch die er erneut gerendert wird.
Ein Element oder sein Layout anpassen
Wähle ein Element aus, um die unterstützten Eigenschaften anzuzeigen. Der Inspektor enthält Einstellungen für Typografie, Farbe, Größe, Abstände, Rahmen und Eckenradius. Flex- und Grid-Container bieten Layout-Steuerelemente wie Richtung, Ausrichtung und Gap. Bei einem Link kann Href angezeigt werden; ein Bild kann über Upload image ersetzt werden. Diese Steuerelemente sind kontextabhängig, daher verfügt nicht jedes Element über jedes Feld.
Du kannst ein ausgewähltes Element ziehen, um seine Position anzupassen. Nimm nur kleine Änderungen vor und prüfe benachbarte Elemente sowie mobile Layouts. Wenn du etwas so lange verschiebst, bis es in einer Desktop-Ansicht passt, entsteht dadurch noch kein responsives Layout.
| Feld | Was du eingeben oder prüfen solltest |
|---|---|
| Text / Href / Image URL / Alt text | Textelemente zeigen den Wortlaut an; Links zeigen zusätzlich ihr Ziel an. Bei Bildern werden Quelle und Alternativtext angezeigt. Die Felder hängen vom ausgewählten Element ab. |
| Text / Background / Border color | Verwende eine hexadezimale Farbe wie #262626. Prüfe nach dem Speichern den Kontrast und die Hover-Zustände. |
| Opacity | Eine Zahl von 0 bis 1: 0 ist transparent und 1 ist deckend. Dies wirkt sich auf das ausgewählte Element aus, nicht nur auf seinen Hintergrund. |
| Font / Size / Weight / Line height / Letter spacing | Wähle Schriftart und Schriftstärke und passe dann Größe und Laufweite an. Line height akzeptiert eine positive Zahl oder einen px-Wert; 1.5 ist ein Multiplikator, während 24px eine feste Höhe ist. |
| Width / Height | Eine Zahl ohne Einheit wird als px interpretiert. Für diese Abmessungen werden Prozentwerte akzeptiert. Prüfe schmale Layouts, bevor du eine feste Breite wählst. |
| Padding / Margin | Passe oben, rechts, unten und links separat an. Padding liegt innerhalb des Elements; Margin trennt es von benachbarten Elementen. Für Margin kann auto verwendet werden. |
| Border width / Style / Radius | Lege Stärke, Stil und Farbe des Rahmens gemeinsam fest. Eine Breite ohne sichtbaren Stil kann so wirken, als würde sie nichts ändern. Radius rundet die Ecken ab. |
| Direction / Distribution / Gap / Align | Layout-Steuerelemente sind nur verfügbar, wenn ein Layout-Container ausgewählt ist. Bei einem normalen Element ändert Align die Textausrichtung; es ist kein Befehl zum Neuanordnen des übergeordneten Elements. |
Die meisten Abstandsfelder akzeptieren Zahlen oder px, aber keine beliebigen CSS-Ausdrücke. Wenn ein Wert abgelehnt wird, prüfe seine Einheit und das ausgewählte Element, statt wiederholt zu speichern. Leere Felder können geerbte oder berechnete Stile widerspiegeln und bedeuten nicht unbedingt, dass der Wert null ist.
Speichern, abbrechen oder rückgängig machen
| Aktion | Bedeutung |
|---|---|
| Eingabetaste beim Bearbeiten von Text | Die aktuelle Textbearbeitung übernehmen |
| Save im Parameterbedienfeld | Die aktuellen Inhalts- und Stiländerungen in die Datei schreiben |
| Cancel / Reset | Den aktuellen Entwurf verwerfen oder zurücksetzen; dadurch werden nicht alle zuvor übernommenen Änderungen gelöscht |
| Undo / Redo im Editor | Übernommene manuelle Änderungen rückgängig machen oder erneut anwenden |
| Delete element | Das ausgewählte Element entfernen; prüfe Abhängigkeiten und verwende bei Bedarf Undo |
Das gespeicherte Ergebnis prüfen
- Verlasse Edit und lade die Vorschau neu. Vergewissere dich, dass die Änderung erhalten bleibt.
- Stelle das Ansichtsfenster-Menü auf eine mobile Größe um und teste die tatsächlichen Steuerelemente.
- Verwende den Versionsverlauf, wenn du eine frühere HTML-Version benötigst. Aktualisiere den Link einer geteilten Datei, nachdem du die neue Version geprüft hast.
Das Bearbeiten einer HTML-Animation ändert keine bereits gerenderte MP4-Datei. Fordere ein neues Rendering an und prüfe anschließend das neue Video.
Wenn du nichts auswählen oder speichern kannst
Vergewissere dich, dass du eine unterstützte HTML-Datei in Preview geöffnet hast und das Projekt bearbeitbar ist. Bei einem schreibgeschützten geteilten Projekt können Kommentare erlaubt sein, während die Bearbeitung deaktiviert ist. Beende Edit, öffne es erneut und lade die Datei bei Bedarf neu. Wenn bei einer Auswahl weiterhin weder ein Rahmen noch der Inspektor angezeigt wird, beschreibe dem Agenten die Änderung mit Comment oder Mark und gib beim Melden des Problems deine App-Version an. Klicke nicht wiederholt auf Save, ohne dass ein Element ausgewählt oder ein Ergebnis bestätigt wurde.