> ## Documentation Index > Fetch the complete documentation index at: https://www.macaly.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Visuelle Bearbeitung > Wie du Design, Texte und Layout direkt auf der Seite änderst Du musst nicht jede Kleinigkeit dem Agenten beschreiben, sondern kannst direkt in der Vorschau deines Projekts arbeiten. Klicke ein Element an, um sein Aussehen zu ändern, schreibe Text an Ort und Stelle um, oder zeichne eine Markierung über die Seite, um dem Agenten zu zeigen, was du meinst. Die visuelle Bearbeitung arbeitet immer mit einem einzelnen Element. Du wählst ein Element auf der Seite aus, siehst die verfügbaren Einstellungen dafür und änderst sie direkt. Design- und Textänderungen werden beim Speichern in dein Projekt geschrieben, ohne Zutun des Agenten und ohne Credits zu verbrauchen. Verfügbar in allen Plänen Die visuelle Bearbeitung funktioniert nur am Computer. Auf dem Handy und in schmalen Browserfenstern erscheint die Leiste nicht. ## Die Werkzeugleiste Die Werkzeugleiste über der Vorschau mit Design bearbeiten, Text bearbeiten und Anmerkung Über der Live-Vorschau deines Projekts schwebt eine Leiste mit drei Werkzeugen: * **Design bearbeiten**: Klicke ein beliebiges Element an, um Aussehen, Bild oder Layout zu ändern. * **Text bearbeiten**: Bearbeitbarer Text wird umrandet, du klickst ihn an und schreibst ihn um. * **Anmerkung**: Zeichne auf die Seite, worum es dir geht. Mit **Esc** kehrst du jederzeit zum normalen Betrachten der Vorschau zurück. Wenn die Leiste ein Element verdeckt, das du bearbeiten willst, klicke auf **Symbolleiste ausblenden**. Dein Werkzeug bleibt aktiv, und ungespeicherte Änderungen bleiben erhalten. ### Design bearbeiten Wenn du **Design bearbeiten** einschaltest, öffnet sich das Panel mit dem Bereich **Website-Stile**, wo du Schriften, Eckenradius und Farben für die ganze Website festlegst. Klicke ein Element auf der Seite an, um seine Einstellungen zu öffnen. Bei Texten, Bildern und Abschnitten siehst du zuerst die Grundoptionen. Ausrichtung, Rahmen, Schatten, Abstände und Layout findest du unter **Erweitert**. Eine ausgewählte Überschrift in der Vorschau mit ihren Einstellungen im linken Panel Mit dem Themenschalter im Kopf des Panels prüfst du dein Ergebnis vor dem Speichern im hellen und im dunklen Modus. #### Reihenfolge und Abstände anpassen Um ein Element zu verschieben, wähle es aus und zieh den Griff darunter an eine neue Stelle, zum Beispiel um zwei Karten zu tauschen. Du kannst auch die Pfeiltasten nutzen. Um Abstände zu ändern, zieh die Griffe am unteren Rand des ausgewählten Elements. Beide Änderungen werden zusammen mit deinen übrigen Bearbeitungen gespeichert oder verworfen. Elemente lassen sich nur innerhalb ihrer eigenen Gruppe verschieben. Einträge, die aus einer Liste erzeugt werden, etwa Produkte oder Blogartikel, kannst du nicht ziehen. Bitte stattdessen den Agenten, sie neu anzuordnen. ### Text bearbeiten Text, den du umschreiben kannst, wird direkt in der Vorschau umrandet. Klicke hinein und tippe. So korrigierst du eine Überschrift oder einen Absatz am schnellsten, weil du das Ergebnis beim Schreiben an Ort und Stelle siehst. ### Anmerkung Manchmal geht es schneller, dem Agenten zu zeigen, was du meinst, als es zu beschreiben. Ist **Anmerkung** aktiv, zeichnest du über den Teil der Seite, um den es geht. Macaly ermittelt, welche Elemente unter deiner Markierung liegen, und hängt sie an deine nächste Nachricht an. Zeichne so viele Markierungen, wie du brauchst, tippe dann deine Nachricht und schicke sie wie gewohnt ab. Beim Zeichnen liegen **Markierung rückgängig machen**, **Markierung wiederholen** und **Löschen** direkt in der Leiste bereit. Eine Markierung um Überschrift und Absatz, über dem Nachrichtenfeld der Chip Anmerkung Anmerkungen dienen zum Zeigen, nicht zum Hinterlassen von Kommentaren. Sie werden nicht mit deinem Projekt gespeichert und kosten nichts außer der Nachricht, die du abschickst. Speichere oder verwirf deine Designänderungen, bevor du mit dem Zeichnen beginnst, und ändere die Größe der Vorschau nicht, während du zeichnest. Beim Ändern der Größe verschwinden deine Markierungen, weil sie an der Position des Inhalts verankert sind. ## Navigation zwischen Elementen Genau das anzuklicken, was du willst, klappt nicht immer, typischerweise wenn Elemente sich überlappen oder ein verschachteltes Element sein übergeordnetes verdeckt. Über deiner Auswahl liegt eine kleine Leiste, mit der du eine Ebene nach oben oder mit den Pfeilen zu benachbarten Elementen wechselst. Dort findest du auch das Code-Symbol, das den Quelltext des Elements im Tab **Code** öffnet, sowie die Möglichkeit, das Element ganz zu entfernen. ## Mit KI bearbeiten Bei Texten und Bildern kannst du eine Änderung im Panel auch beschreiben, statt sie einzustellen. **Mit KI umschreiben** schreibt den Text nach deiner Vorgabe um. **Mit KI erzeugen** bearbeitet das aktuelle Bild oder erstellt ein neues, und du siehst das Ergebnis, bevor du es übernimmst. Ist ein Element ausgewählt, wechselt auch das Nachrichtenfeld im Chat in den Bearbeitungsmodus. Alles, was du dort schreibst, gilt nur für deine aktuelle Auswahl. Die KI-Buttons im Panel und Nachrichten aus dem Chat verbrauchen Credits wie jede andere KI-Anfrage, und das Panel zeigt dir den Preis, bevor du sie ausführst. Alles, was du im Panel von Hand einstellst, ist kostenlos. ## Änderungen speichern Solange du ungespeicherte Änderungen hast, zeigt die Leiste ihre Anzahl an, und du kannst sie alle auf einmal mit **Speichern** übernehmen oder mit **Verwerfen** wieder loswerden. Die Leiste mit fünf ungespeicherten Änderungen sowie Verwerfen und Speichern Das Speichern läuft nicht über den Agenten, ist also sofort erledigt und kostet keine Credits. Ist eine Änderung aufwendiger, gibt Macaly sie an den Agenten im Chat weiter, wo sie sich wie jede andere Nachricht verhält. ## Wann die Werkzeugleiste nicht verfügbar ist Die Leiste blendet sich aus oder wird ausgegraut, wenn direktes Bearbeiten nicht funktionieren würde: * **Warte, bis Macaly fertig ist**: Der Agent arbeitet gerade an deinem Projekt. * **Warten, bis die Vorschau bereit ist**: Deine Vorschau startet noch. * **Schließe den Plan, um die Seite zu bearbeiten**: Im Chat ist ein Plan geöffnet. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.