Bearbeitungspanel

Das Bearbeitungspanel befindet sich rechts im Editor und zeigt die Steuerelemente für deine aktuelle Auswahl. Wenn nichts ausgewählt ist, bearbeitest du damit den Stil der Seite selbst.

Drücke ⌘E / Ctrl+E, um es ein- oder auszublenden. Wenn es ausgeblendet ist, klicke auf den Pfeil am rechten Fensterrand, um es wieder anzuzeigen. Das Panel wird nicht angezeigt, solange Einstellungen, Daten oder der Code-Editor geöffnet sind.

Jede Änderung, die du hier vornimmst, wird direkt in den Code deiner Website übernommen. Die Arbeitsfläche aktualisiert sich sofort.

Schwebendes Panel

Ziehe den gepunkteten Griff oben am Panel (Zum Lösen ziehen), um es über der Arbeitsfläche schweben zu lassen. Verschiebe es dann dorthin, wo es für dich praktisch ist. Ziehe am unteren Rand, um es höher oder niedriger zu machen.

Um es wieder anzudocken, ziehe es an den rechten Fensterrand. Ein hervorgehobener Streifen zeigt, wo es platziert wird (Am rechten Rand ablegen zum Andocken). Der Editor merkt sich, ob das Panel schwebt und wo du es abgelegt hast.

Seitenstile

Wenn nichts ausgewählt ist, zeigt das Panel die Stile für die gesamte Seite: Hintergrund, Typografie, Abstände, Effekte, Übergänge und Erweitert. Unter Abstände legst du den Innenabstand der Seite fest.

Die Werte entsprechen dem, was du siehst – auch wenn die Seitenfarbe aus den globalen Stilen deiner Website stammt und nicht aus der Seite selbst.

Tab „Stil“

Wähle ein Element auf der Arbeitsfläche oder im Ebenenpanel aus. Das Panel zeigt dann zwei Tabs: Stil und Eigenschaften. Es merkt sich, welchen Tab du zuletzt verwendet hast.

Mit der Schaltflächenleiste oben verankerst du ein absolut, fest oder haftend positioniertes Element links, mittig oder rechts sowie oben, in der Mitte oder unten. Bei anderen Elementen sind diese Schaltflächen ausgegraut. Darunter findest du auf- und zuklappbare Abschnitte. Das Panel merkt sich, welche du geöffnet lässt.

Wenn du mehrere Elemente auswählst, gelten Stiländerungen für alle ausgewählten Elemente.

Layout

Wähle unter Anzeige: block, flex, grid oder none. Die Optionen darunter ändern sich entsprechend:

• Block: Überlauf und Umfluss (mit Aufheben bei aktivem Umfluss).
• Flex: Richtung, Blocksatz, Ausrichten, Umbrechen und Abstand.
• Grid: Spalten, Zeilen und Abstand.

Unter Position legst du static, relative, absolute, fixed oder sticky fest. Bei absolute und fixed erscheint für jede Seite ein Feld: oben, rechts, unten und links.

Größe

Mit Abmessungen wechselst du zwischen Breite und Höhe. Lege Breite, Min. Breite und Maximale Breite (oder die entsprechenden Höhenwerte) über Vorgaben wie Automatisch, Voll, Bildschirm und Bruchteile fest oder gib einen eigenen Wert ein. Überlauf steuert, was passiert, wenn der Inhalt nicht hineinpasst.

Abstände

Wechsle zwischen Innenabstand (Platz innerhalb des Elements) und Außenabstand (Platz außerhalb). Lege dann im Feld die Werte für jede Seite fest.

Typografie

Schriftfamilie, Größe, Gewicht, Höhe (Zeilenhöhe), Abstände (Zeichenabstand), Farbe, Ausrichten, Stil (kursiv), Transformation (Großbuchstaben, Kleinbuchstaben, Wortanfänge groß) und Dekoration (unterstrichen, durchgestrichen).

Hintergrund, Rahmen und mehr

• Hintergrund: Wähle Farbe oder Bild als Typ. Die Farbauswahl unterstützt einfarbige Flächen und Verläufe. Bei Bildern gibt es Einstellungen für Position, Größe, Wiederholen und Fixierung.
• Rahmen: Farbe, Breite, Radius (alle Ecken oder jede einzeln), Stil (durchgezogen, gestrichelt, gepunktet) und Kontur, für alle Seiten oder eine einzelne.
• Effekte: Deckkraft, Schatten und dessen Farbe, Weichzeichner, Helligkeit, Kontrast, Sättigen, Farbton und ein Filter (Graustufen, Sepia, Invertieren).
• Übergänge: Eigenschaft, Dauer, Zeitsteuerung und Verzögerung, damit Änderungen wie Hover-Effekte flüssig animiert werden.
• Cursor: die Form des Mauszeigers über dem Element.
• Erweitert: weitere Stilklassen des Elements. Gib eine Klasse ein und drücke Enter, um sie hinzuzufügen, oder entferne eine aus der Liste.

Tab „Eigenschaften“

Der Tab Eigenschaften enthält den Inhalt und die Einstellungen des Elements. Jedes Element hat die Abschnitte Allgemein und Barrierefreiheit, gefolgt von Abschnitten für seinen Typ.

• Allgemein: das Element-Tag (ändere zum Beispiel ein h2 in ein h3), ID, Tooltip und Data-Attribute. Klicke auf Attribut hinzufügen, um eines hinzuzufügen.
• Barrierefreiheit: Beschriftung, Beschreibung durch, Rolle, Tab-Index und Sichtbarkeit für Screenreader.

Zu den Abschnitten für bestimmte Elemente gehören:

Abschnitt	Was du einstellen kannst
Text	Den Text selbst sowie Schriftart, Größe, Gewicht, Ausrichtung, Zeilenhöhe, Zeichenabstand und Farbe. Mit KI verbessern formuliert den Text für dich um.
Schaltfläche	Beschriftung, Typ (Schaltfläche, Absenden, Zurücksetzen), Deaktiviert, Name, Wert
Link	URL, Öffnen in (Gleicher Tab, Neuer Tab), Beziehung, Herunterladen
Bild	Quelle, Alt-Text (bei dekorativen Bildern leer lassen), Wird geladen
Eingabefeld	Typ, Name, Platzhalter, Wert, Grenzen wie Min, Max, Maximale Länge und Muster sowie Erforderlich, Deaktiviert, Nur lesen
SVG	Symbol, Breite, Höhe, Füllung, Kontur, Konturstärke

Auch Textbereiche, Auswahllisten, Formulare, Listen, Tabellen, Videos, Audio und Hintergrundbilder haben eigene Abschnitte. Dasselbe gilt für Einbettungen von YouTube, Vimeo, Google Maps, Calendly, Typeform, Stripe und PayPal.

Text aus dem Code

Mancher Text wird nicht direkt auf der Seite eingegeben. Er stammt aus einer Liste, einer Prop oder einer Datendatei, etwa der Titel einer Karte in einer Kartenreihe. Der Abschnitt Text zeigt dir, wenn das der Fall ist:

• Dieser Text stammt aus Daten oder einer Prop. Beim Speichern wird er dort aktualisiert. Gib den Text wie gewohnt ein. Nur der Wert dieses Eintrags wird dort geändert, wo er definiert ist.
• Wird von allen Einträgen dieser Liste verwendet. Text in {braces} ist Code. Eine Änderung hier ändert jeden Eintrag. Lass die Teile in geschweiften Klammern unverändert.
• Durch Code festgelegt, gefolgt vom Code. Der Text wird durch Code ermittelt. Das Feld ist deshalb schreibgeschützt. Bitte die KI, ihn zu ändern.
• Enthält verschachtelte Elemente. Wähle sie aus, um sie einzeln zu bearbeiten. Klicke auf das innere Element auf der Arbeitsfläche, um seinen Text zu bearbeiten.

Stile kopieren und einfügen

Kopiere den Stil eines Elements und wende ihn auf ein anderes an:

1. Wähle das Element aus, dessen Stil dir gefällt, und drücke ⌘⌥C / Ctrl+Alt+C.
2. Wähle das Element aus, das du ändern möchtest, und drücke ⌘⌥V / Ctrl+Alt+V.

Stil kopieren und Stil einfügen findest du auch im Rechtsklick-Menü.

Während die KI arbeitet

Das Panel zeigt Die KI bearbeitet gerade und deaktiviert seine Steuerelemente, während die KI deine Website ändert. Sobald die KI fertig ist, kannst du sie wieder verwenden.