Das Studio

Variante öffnen#

Das Studio zeigt links die Liste, in der Mitte die Vorschau und rechts Props und Code. Es führt 226 der 350 Components des Kits mit 1.162 Varianten, jede davon voll bearbeitbar. Die Liste wächst mit jedem Release.

Auf jeder Components-Seite führt der Knopf Im Studio öffnen direkt zur Variante. Der Link trägt sie mit, du kannst ihn auch selbst bauen. Eine Variante, die noch nicht im Studio steht, öffnet stattdessen auf ihrer Components-Seite.

/studio/?c=hero&v=split

Hero split im Studio öffnen

Props bearbeiten#

Rechts steht jede Prop der Variante als Feld. Texte, Zahlen und Schalter änderst du direkt, Listen wie Pläne, Fragen oder Leistungen erweiterst, entfernst und sortierst du. Die Vorschau folgt bei jedem Tastendruck, ohne neu zu laden.

Ein Wort zwischen Sternen wird in vielen Überschriften zum Akzent, Websites, die *verkaufen*.

Vorschau#

• Drei Breiten

  Telefon 390, Tablet 768 und Desktop 1280 Pixel, oder frei am Rand ziehen.

• Hell und dunkel

  Sieh jede Änderung in beiden Modi, bevor du den Code kopierst.

• Akzent und Radius

  Jeder fertige Akzent und jede Rundung, live an deinen Inhalten.

Code kopieren#

Der Reiter Code zeigt die Component mit deinen Werten, fertig zum Einfügen. Bilder, Logos und andere Knoten bleiben als markierte Stelle stehen, dort setzt du dein eigenes Element ein.

<Hero
  variant="split"
  title="Frisches Brot, jeden Morgen"
  media={/* Bild oder Screenshot */ null}
/>

Die Component selbst holst du mit aiw add @ai-website/hero, siehe Installation.

Link teilen#

Bearbeitete Props stehen im Link unter p=. Wer ihn öffnet, sieht deine Fassung, praktisch für Abstimmungen im Team oder mit Kunden.

Tastenkürzel#

• Liste durchsuchenCtrlK/⌘K
• Telefon, 390 Pixel1
• Tablet, 768 Pixel2
• Desktop, 1280 Pixel3
• Code kopierenC
• RückgängigCtrlZ/⌘Z
• WiederholenCtrlShiftZ/⌘ShiftZ
• Leiste oder Sheet schließenEsc

Am Rand der Vorschau ändern die Pfeiltasten die Breite um 10 Pixel, mit Umschalt um 100.