Editor-Übersicht

Im Editor gestaltest und erstellst du deine Website. Deine Website läuft live auf der Arbeitsfläche in der Mitte. Über die Panels links fügst du Elemente hinzu, verwaltest Seiten und chattest mit der KI. Im Bearbeitungspanel rechts gestaltest du das ausgewählte Element.

Die Werkzeugleiste

Von links nach rechts:

• WebTwizz-Logo öffnet das Logo-Menü: Zum Dashboard, Datei, Bearbeiten, Versionsverlauf, Website-Einstellungen, Einstellungen (helles, dunkles oder Systemdesign), Hilfe (Dokumentation und Tastenkombinationen) und Kontoeinstellungen.
• Browsen und Bearbeiten ändern das Verhalten der Arbeitsfläche. Siehe Browsen und Bearbeiten weiter unten.
• Code-Schalter (der Schalter <>) öffnet den Code-Editor. Klicke erneut darauf, um zur Arbeitsfläche zurückzukehren.
• Breitenmenü (das Gerätesymbol) legt die Breite der Arbeitsfläche fest. Siehe Responsives Design.
• Pfadleiste zeigt die aktuelle Seite an, etwa / oder /about. Klicke darauf und gib einen Pfad ein, um zu einer anderen Seite zu wechseln. Die Schaltfläche zum Aktualisieren in der Pfadleiste lädt die Arbeitsfläche neu.
• Rückgängig machen und Wiederholen.
• Vorschau (Augensymbol) öffnet deine Website in einem neuen Browser-Tab. Siehe Vorschau und Veröffentlichung.
• Speichern zeigt an, ob deine Arbeit gespeichert ist. Wenn alles gespeichert ist, erscheint ein Häkchen. Ein Klick darauf öffnet den Versionsverlauf. Siehe Deine Arbeit speichern.
• Upgraden erscheint im Free-Tarif.
• Veröffentlichen öffnet das Veröffentlichungspanel.

Wenn Einstellungen oder Daten geöffnet ist, wird die Pfadleiste ausgeblendet. Rechts in der Werkzeugleiste werden dann nur Vorschau, Upgraden und Veröffentlichen angezeigt.

Die linke Seitenleiste

Jedes Symbol in der Leiste links öffnet ein Panel:

• Elemente fügt Elemente, Layouts und Komponenten hinzu. Siehe Elemente-Panel.
• KI-Assistent öffnet den KI-Chat.
• Ebenen zeigt alle Elemente der Seite als Baumstruktur an. Siehe Ebenen-Panel.
• Seiten fügt Seiten hinzu, benennt sie um und organisiert sie. Siehe Seiten-Panel.
• Daten verwaltet deine Sammlungen und Datenquellen. Siehe Daten und CMS.
• Einstellungen öffnet die Website-Einstellungen.

Klicke erneut auf das Symbol des geöffneten Panels, um die Seitenleiste einzuklappen, oder drücke ⌘B / Ctrl+B.

Die Arbeitsfläche

Auf der Arbeitsfläche läuft deine echte Website live. Änderungen werden sofort sichtbar.

Browsen und Bearbeiten

Mit den Schaltflächen Browsen und Bearbeiten in der Werkzeugleiste wechselst du zwischen den Modi.

• Mit Browsen nutzt du die Website wie ein Besucher. Links führen zu anderen Seiten, Schaltflächen und Menüs funktionieren, und Formulare lassen sich absenden. Es werden keine Elemente ausgewählt.
• Mit Bearbeiten änderst du die Seite. Bewege den Mauszeiger über ein Element, um es hervorzuheben. Klicke darauf, um es auszuwählen. Doppelklicke auf Text, um ihn zu bearbeiten. Ein Rechtsklick öffnet das Kontextmenü. Durch Ziehen verschiebst du Elemente.

Der Editor merkt sich den zuletzt verwendeten Modus. Beim ersten Öffnen startet er im Modus Browsen. Wenn du das Panel Ebenen öffnest, wechselt er zu Bearbeiten. Die Schaltflächen sind nicht verfügbar, während die KI arbeitet, im Code-Editor und im Versionsverlauf.

Das Bearbeitungspanel

Wenn du ein Element auswählst, zeigt das Bearbeitungspanel rechts dessen Stile und Einstellungen an. Drücke ⌘E / Ctrl+E, um es ein- oder auszublenden, oder klicke auf den Pfeil am rechten Rand. Siehe Bearbeitungspanel.

Schnelle Änderungen mit „Mit KI bearbeiten“

Wähle ein Element aus und drücke ⌘K / Ctrl+K, um die Leiste Mit KI bearbeiten darunter zu öffnen. Gib eine Änderung wie „größer“ oder „dunkelblauer Text“ ein. Du siehst das Ergebnis auf der Seite, bevor du dich dafür entscheidest. Siehe Mit KI bearbeiten.

Auf dem Smartphone

Auf einem Bildschirm, der schmaler als ein Tablet ist, ist der Editor auf den Chat mit der KI und das Prüfen der Ergebnisse ausgelegt:

• Mit den Tabs Chat und Vorschau oben wechselst du zwischen dem KI-Chat und deiner Website. Tippe erneut auf Vorschau, um sie neu zu laden.
• Die Arbeitsfläche funktioniert wie im Modus Browsen. Zum Auswählen von Elementen sowie für das Bearbeitungspanel und den Code-Editor brauchst du einen breiteren Bildschirm.
• Die Schaltfläche zum Speichern befindet sich neben dem Logo. Deine Arbeit wird auch automatisch gespeichert, etwa 30 Sekunden nach deiner letzten Änderung.
• Das Logo-Menü enthält das Menü Vorschau. Dort kannst du die Vorschau in einem neuen Tab öffnen, neu laden oder den Vorschauserver neu starten. Die Einstellungen findest du unter Website-Einstellungen. Mit Zurück zum Editor kehrst du zu deiner Website zurück.

Wichtige Tastenkombinationen

Aktion	Mac	Windows
Rückgängig machen	⌘Z	Ctrl+Z
Wiederholen	⌘⇧Z	Ctrl+Shift+Z
Speichern	⌘S	Ctrl+S
Mit KI bearbeiten (Element ausgewählt)	⌘K	Ctrl+K
Element löschen	⌫	Backspace oder Delete
Auswahl aufheben	Esc	Esc
Bearbeitungspanel ein- oder ausblenden	⌘E	Ctrl+E
Seitenleiste ein- oder ausblenden	⌘B	Ctrl+B
Versionsverlauf	⌘H	Ctrl+H

Die vollständige Liste findest du unter Kontextmenü und Tastenkombinationen.