Ebenenbereich
Der Ebenenbereich zeigt jedes Element auf der aktuellen Seite in einer verschachtelten Baumstruktur. Klicke in der linken Seitenleiste auf Ebenen, um ihn zu öffnen. So erreichst du am einfachsten Elemente, die klein, hinter anderen verborgen oder tief verschachtelt sind.
Wenn du den Ebenenbereich öffnest, wechselt die Arbeitsfläche zu Bearbeiten, da die Baumstruktur aus der Seite erstellt wird, die du gerade bearbeitest. Im Code-Editor ist der Bereich nicht verfügbar.
Elemente finden und auswählen
Jede Zeile zeigt den Typ des Elements oder den Namen einer Komponente. Klicke auf den Pfeil neben einer Zeile, um sie auf- oder zuzuklappen.
- Klicke auf eine Zeile, um das Element auszuwählen. Die Arbeitsfläche scrollt dorthin und der Bearbeitungsbereich zeigt die Einstellungen des Elements.
- Wähle ein Element auf der Arbeitsfläche aus, und die Baumstruktur klappt bis zur entsprechenden Zeile auf.
- Bewege den Mauszeiger über eine Zeile, um das Element auf der Arbeitsfläche hervorzuheben. Wenn du den Mauszeiger über ein Element auf der Arbeitsfläche bewegst, wird seine Zeile umrandet.
- Klicke auf eine freie Stelle im Bereich, um die Auswahl aufzuheben.
Du kannst auch mit der Tastatur durch die Baumstruktur navigieren. Up und Down wechseln zwischen den Zeilen, Right klappt eine Zeile auf und Left klappt sie zu. Enter oder Space wählt sie aus. Tastenkürzel wie Delete, ⌘C, ⌘V, ⌘X, ⌘D und ⌘Z (Ctrl unter Windows) wirken auf das ausgewählte Element. ⌘K / Ctrl+K öffnet die Leiste Mit KI bearbeiten unter der Zeile.
Elemente neu anordnen
Ziehe eine Zeile nach oben oder unten, um die Reihenfolge der Elemente zu ändern. Zeilen lassen sich innerhalb desselben übergeordneten Elements zwischen gleichgeordneten Elementen verschieben. Die Arbeitsfläche wird aktualisiert, sobald du die Zeile ablegst.
Einige Zeilen lassen sich nicht ziehen, weil WebTwizz sie in deinem Code nicht finden kann. Wenn du den Mauszeiger darüber bewegst, erscheint ein entsprechender Hinweis.
Kontextmenü
Klicke mit der rechten Maustaste auf eine Zeile, um dasselbe Menü wie auf der Arbeitsfläche zu öffnen.
| Eintrag | Tastenkürzel | Funktion |
|---|---|---|
| Bearbeiten | ⌘E | Wählt das Element aus und öffnet den Bearbeitungsbereich |
| Kopieren, Einfügen, Ausschneiden | ⌘C, ⌘V, ⌘X | Kopiert Elemente, fügt sie ein oder schneidet sie aus |
| Duplizieren | ⌘D | Erstellt eine Kopie des Elements |
| Löschen | ⌫ | Entfernt das Element |
| Stil kopieren, Stil einfügen | ⌘⌥C, ⌘⌥V | Kopiert den Stil eines Elements und überträgt ihn auf ein anderes |
| In Komponente umwandeln | ⌘⇧K | Wandelt das Element in eine wiederverwendbare Komponente um |
| Mit KI bearbeiten | ⌘K | Öffnet die Leiste „Mit KI bearbeiten“ für das Element |
Verwende unter Windows Ctrl statt ⌘ und Alt statt ⌥.
Während die KI arbeitet
Während die KI deine Website bearbeitet, kannst du keine Zeilen ziehen und alle Einträge im Kontextmenü sind ausgegraut. Sobald die KI fertig ist, ist alles wieder verfügbar.