New Semantics

Deutsch

English

Deutsch

English

Theme

Widget mit Vibe Code AI generieren ​

Das Vibe Code AI-Widget baut aus einer Beschreibung in natuerlicher Sprache ein eigenes Pagebuilder-Widget. Du beschreibst im Chat, was du willst — ein Banner, einen Bild-Slider, ein Feature-Raster — und die KI generiert dir das Layout, die editierbaren Felder und das Styling. Den eigentlichen Inhalt pflegst du danach im Settings-Tab, genau wie bei jedem anderen Widget — ganz ohne Coding.

Diese Seite fuehrt dich durch das Generieren eines Widgets, das Verfeinern und das Bearbeiten des Inhalts.

Voraussetzung: Ein Admin muss zuerst eine AI-Verbindung dem Vibe Code AI-Feature zuweisen (siehe Schritt 1). Ausserdem brauchst du eine im Pagebuilder geoeffnete Seite mit mindestens einer Row und Column. Falls du keine hast, starte mit Erste Seite anlegen.

Wie es funktioniert ​

Vibe Code AI teilt die Arbeit auf zwei Stellen auf:

  • Der Chat (der Vibe Code-Tab) generiert und aendert die Struktur — das HTML-Layout, welche Felder es gibt, und das Styling.
  • Der Settings-Tab ist die Stelle, an der du den eigentlichen Inhalt bearbeitest — Text, Bilder und wiederholbare Items — genau wie bei jedem Standard-Widget.

Behalt diese Aufteilung im Kopf: Du beschreibst die Form im Chat und fuellst die Form danach im Settings-Tab mit Inhalt.

1. AI-Verbindung zuweisen (Admin, einmalig) ​

Vibe Code AI braucht einen verbundenen AI-Anbieter, bevor es etwas generieren kann. Ein Administrator richtet das einmalig unter Suchmaschinen & KI → AI-Einstellungen (/admin/ai) ein:

  1. Oeffne das Panel AI-Einstellungen.
  2. Find das Vibe Code AI-Feature in der Feature-Liste.
  3. Weis ihm eine AI-Verbindung zu.

Nutze ein starkes Modell

Vibe Code AI schreibt komplette Layouts, Felder und CSS in einem Durchgang. Ein starkes Modell (zum Beispiel Opus oder GPT-4o) liefert deutlich bessere Ergebnisse als ein kleines/schnelles Modell. Weis diesem Feature die staerkste Verbindung zu, die du hast.

Ist keine Verbindung zugewiesen, schlaegt das Generieren mit einer Fehlermeldung im Chat fehl. Siehe Haeufige Fehler.

2. Vibe-Code-AI-Widget hinzufuegen ​

Klick im Pagebuilder auf das +-Icon in der Column, in der du das Widget haben willst. Der Widget-Picker oeffnet sich. Find Vibe Code AI und klick es an.

Das Widget wird in der Column platziert. Da es noch keinen Inhalt hat, zeigt es einen leeren Platzhalter an, bis du einen generierst.

3. Widget im Chat beschreiben ​

Waehl das Widget aus. Die Properties-Panel rechts oeffnet sich direkt auf dem Vibe Code-Tab — einer Chat-Box.

Tipp in natuerlicher Sprache ein, was du willst, und klick dann auf Generate (oder druecke Ctrl+Enter / Cmd+Enter). Zum Beispiel:

  • „ein Banner mit Hintergrundbild, Titel, Text und einem Button"
  • „ein Bild-Slider mit 3 sichtbaren Slides, Autoplay und Pfeilen"
  • „ein 3-spaltiges Feature-Raster, jede Spalte mit einem Icon, einer Ueberschrift und einem kurzen Text"
  • „eine Preis-Karte mit Titel, Preis, einer Feature-Liste und einem Call-to-Action-Button"

Der Button zeigt Generating…, waehrend die KI arbeitet. Wenn sie fertig ist, wird das Widget gebaut und erscheint sofort in der Live-Vorschau — mit Layout, editierbaren Feldern und Styling.

Das Generieren laeuft im Hintergrund

Das Generieren kann bei einem komplexen Widget bis zu einigen Minuten dauern. Es laeuft als Hintergrund-Job, sodass du im Pagebuilder anderswo weiterarbeiten kannst, waehrend es fertig wird. Das Ergebnis erscheint im Chat und in der Vorschau, sobald es bereit ist.

4. Mit weiteren Nachrichten verfeinern ​

Der Chat behaelt die Konversation. Um das Widget zu aendern, schick einfach eine weitere Nachricht, die die Aenderung beschreibt. Zum Beispiel:

  • „mach die Akzentfarbe gruen"
  • „zeig 4 Slides statt 3"
  • „fueg einen Untertitel unter dem Titel hinzu"
  • „schalte Autoplay aus und fueg Navigations-Dots hinzu"

Jede Verfeinerung aktualisiert die Struktur und rendert die Vorschau neu.

Verfeinerungen gelten fuer alle Sprachen

Eine Verfeinerung aendert die Widget-Struktur (Layout, Felder, Styling) ueber alle Sprachen hinweg auf einmal. Dein bereits eingegebener Inhalt bleibt erhalten — Text und Bilder, die du im Settings-Tab eingegeben hast, bleiben intakt. Nur die Form aendert sich, nicht deine Worte.

Um von vorn zu beginnen, klick auf das Reset-Icon neben der Chat-Box (der kreisfoermige Pfeil). Das loescht die Konversation, sodass deine naechste Nachricht eine frische Beschreibung startet.

5. Inhalt im Settings-Tab bearbeiten ​

Sobald die Struktur existiert, wechsel zum Settings-Tab in der Properties-Panel. Hier bearbeitest du den echten Inhalt des Widgets — genau wie bei jedem anderen Pagebuilder-Widget:

  • Textfelder — Titel, Untertitel, Button-Beschriftungen.
  • Rich Text (CKEditor) — formatierte Absaetze mit Ueberschriften, Listen und Links.
  • Bilder — klick ein Bildfeld an, um den Media Manager zu oeffnen und ein Bild zu waehlen oder hochzuladen.
  • Items (Repeater) — fuer Slider, Raster oder Listen: Eintraege hinzufuegen, per Drag sortieren und loeschen. Jedes Item hat eigene Felder (zum Beispiel Slide-Bild, Titel und Link).
  • Dazu Zahl-, Farb- und Auswahl-Felder, je nachdem, was du beschrieben hast.

Klick nach dem Bearbeiten oben in der Properties-Panel auf Speichern. Das Widget rendert auf der Seite neu.

Erst generieren, dann fuellen

Die KI bestueckt das Widget mit sinnvollem Beispiel-Inhalt, damit die Vorschau sofort vollstaendig aussieht. Ersetz diesen Platzhalter-Text und die Beispielbilder im Settings-Tab durch deine eigenen.

6. Pro Sprache uebersetzen ​

Vibe-Code-AI-Widgets sind voll mehrsprachig. Nutz die Sprach-Tabs im Settings-Tab, um die Sprache zu wechseln und den Inhalt pro Sprache zu uebersetzen.

Die Struktur (Layout und Felder) wird ueber alle Sprachen geteilt — du uebersetzt nur die Werte. Bilder und Icons werden als Startpunkt aus der ersten Sprache uebernommen, sodass du sie nicht in jeder Sprache neu auswaehlen musst; tausch sie nur dort, wo eine Sprache ein anderes Bild braucht.

7. Speichern und Seite pruefen ​

Klick in der Properties-Panel auf Speichern und dann Veröffentlichen die Seite, wenn du mit dem Ergebnis zufrieden bist. Das Widget rendert auf der Live-Seite wie jedes andere Widget.

Was du generieren kannst ​

Vibe Code AI kann eine breite Palette an Inhalts-Widgets erzeugen:

  • Slider und Carousels — 1, 2, 3 oder mehr sichtbare Slides, Autoplay, Loop, Pfeile und Dots.
  • Rich-Text-Bloecke — formatierter Text, bearbeitet ueber CKEditor.
  • Bilder — ausgewaehlt und verwaltet ueber den Media Manager.
  • Font-Awesome-Icons — fuer Feature-Listen, Karten und Buttons.
  • Mehrsprachiger Inhalt — pro Sprache uebersetzt bei geteilter Struktur.
  • Gescoptes Styling — das generierte CSS betrifft nur dieses Widget, sodass es nicht in den Rest der Seite ausstrahlt.

Haeufige Fehler ​

Das Generieren schlaegt fehl oder der Chat zeigt einen Fehler. Die haeufigste Ursache ist, dass dem Vibe Code AI-Feature keine AI-Verbindung zugewiesen ist. Bitte einen Admin, unter Suchmaschinen & KI → AI-Einstellungen (/admin/ai) eine zuzuweisen. Siehe Schritt 1.

Items erscheinen im Editor, sind aber auf der Seite leer. Generierte Items sind Startpunkte. Oeffne jedes Item im Settings-Tab, fuell seine Felder aus und klick dann auf Speichern. Achte ausserdem darauf, dass du die Items in jeder Sprache uebersetzt hast, die du veroeffentlichst — in einer Sprache hinzugefuegte Items brauchen ihren Text auch in den anderen.

Eine Verfeinerung hat das Layout geaendert, aber mein Text ist weg. Dein Text wird nicht geloescht — Verfeinerungen bewahren den Inhalt. Wenn ein Feld nach einer Verfeinerung leer aussieht, wurde es von der KI moeglicherweise umbenannt oder umstrukturiert. Gib das betroffene Feld im Settings-Tab erneut ein. Wenn du die alte Struktur zurueck willst, beschreib sie im Chat noch einmal.

Das Widget sieht leer aus, nachdem ich es hinzugefuegt habe. Das ist vor dem ersten Generieren zu erwarten. Waehl das Widget aus, oeffne den Vibe Code-Tab, beschreib, was du willst, und klick auf Generate.

Siehe auch ​