Füge deiner Seite einen Vibe-Block aus der Block-Bibliothek hinzu. Du findest ihn in der Kategorie „Sonstiges“ oder direkt in der Liste der Kategorien unterhalb Zero Block.

Gib eine Eingabeaufforderung in das Eingabefeld ein, um den Block zu generieren. Sobald deine Eingabeaufforderung fertig ist, klicke auf die Schaltfläche „Senden“ oder drücke die Eingabetaste auf deiner Tastatur.

Um ein KI-Modell für die Codegenerierung auszuwählen, klicken Sie auf den Modellnamen unterhalb des Eingabefelds.

Um ein Bild, eine Datei oder ein Video an Ihre Eingabe anzuhängen, klicken Sie auf das Büroklammer-Symbol. Sie können die Datei als Blockinhalt oder als Referenz verwenden.

Klicken Sie auf das Fragezeichen-Symbol, um Beispielaufforderungen für die Erstellung eines Blocks anzuzeigen oder diese als Ausgangspunkt für Ihre eigene Aufforderung zu nutzen.

Klicken Sie auf eine beliebige Beispielaufforderung, um sie zu verwenden.

Sie können sich ein Beispiel für eine Eingabeaufforderung auch als Live-Demo auf einer separaten Seite ansehen, beispielsweise ein Beispiel für ein Deckblatt.

Um den generierten Blockcode zu kopieren, klicken Sie auf „Code kopieren“. Der Block wird dann automatisch zu Ihrer Seite hinzugefügt.

Klicken Sie auf „Prompt anwenden“, um den Editor zu öffnen und Ihre Anfrage zu bearbeiten. Im Editor können Sie außerdem Bilder anhängen oder ein anderes KI-Modell für die Generierung auswählen.

Sobald der Block erstellt wurde, zeigt der KI-Chat die Meldung „Fertig!“ an, um darauf hinzuweisen, dass der Block einsatzbereit ist. Unterhalb der Eingabeaufforderung siehst du die Optionen zum Kopieren, erneuten Erstellen oder Löschen des Blocks.

Im Chat kannst du die Antwort der KI aufklappen, um den Code anzusehen und zu kopieren.

Um den vollständigen Code anzuzeigen, klicken Sie oben auf „Code“, um den Editor zu öffnen. Dort können Sie den Code manuell bearbeiten und den Block weiter anpassen.

Um das beste Ergebnis zu erzielen, können Sie entweder den Blockcode neu generieren, indem Sie Ihre ursprüngliche Eingabe verfeinern, oder eine völlig neue Anfrage eingeben.

Sie können beispielsweise einfach beschreiben, was in dem Block geändert werden soll, und die KI passt den Code entsprechend an.

Standardmäßig zeigt der Block die zuletzt generierte Version an. Um eine frühere Version anzuzeigen, klicken Sie auf das Augensymbol. Um diese Version zu übernehmen, klicken Sie auf „Übernehmen“.

Mit dieser Option können Sie zwischen verschiedenen Versionen des Blocks wechseln. Um Ihr Ergebnis zu speichern, schließen Sie einfach das KI-Chat-Fenster.

Um den Block nach dem Schließen des Chats erneut zu bearbeiten, klicke auf die Schaltfläche „Block-Editor“.

Um ein Element in einem erstellten Block zu bearbeiten, klicken Sie darauf. Das Stil- und Inhaltsfenster wird geöffnet.

Um schnell zu einem anderen Element zu wechseln, klicken Sie auf das Symbol „Ebenen“. Das Ebenen-Bedienfeld wird geöffnet.

Wählen Sie verschiedene Ebenen aus, um das gewünschte Element oder die gewünschte Gruppe zu finden. Die ausgewählte Ebene wird grau hervorgehoben.

Sie können das Ebenen-Bedienfeld auch über den Vibe-Block-Code öffnen. Klicken Sie auf das Ebenen-Symbol und wählen Sie dann die gewünschte Ebene aus. Das Stil-Bedienfeld wird geöffnet.

Klicken Sie auf das Pfeilsymbol, um schnell die übergeordnete Gruppe einer verschachtelten Gruppe oder eines verschachtelten Elements auszuwählen.

Klicken Sie auf das Code-Symbol, um das Element im Code zu bearbeiten.

Um ein Element zu kopieren, klicken Sie auf das Kopiersymbol. Um es zu löschen, klicken Sie auf das Papierkorbsymbol. Verwenden Sie die Auf- und Ab-Pfeile, um das Element im Ebenenbedienfeld zu verschieben und seine Reihenfolge zu ändern.

Um ein Element mit KI zu bearbeiten, klicken Sie auf „Mit KI bearbeiten“. Es öffnet sich ein Fenster zur Eingabe einer Anweisung. Das Feld ist bereits mit dem Pfad zu dem Element ausgefüllt, das Sie ändern möchten.

Die im Feld „Inhalt“ verfügbaren Optionen hängen vom ausgewählten Element ab.

Bei einem Textelement können Sie den Text im Feld „Inhalt“ bearbeiten.

Bei einem Bild können Sie die Datei ersetzen oder löschen, eine neue hochladen oder ein Bild aus der Bildbibliothek auswählen.

Bei einem Formular wird die Schaltfläche „Dienste“ angezeigt. Verwenden Sie diese, um eine Verbindung z Tilda , CRM oder einem anderen Datenerfassungsdienst herzustellen.

Bei einer Gruppe, die Elemente enthält, wird der Code angezeigt. Sie können ihn im Feld „Inhalt“ bearbeiten oder direkt im Code-Editor öffnen.

Um die Reaktionsfähigkeit einer Gruppe oder eines Elements zu konfigurieren, wählen Sie das gewünschte Bildschirmsymbol im Feld „Breakpoints“ aus.

Standardmäßig stehen vier Breakpoints zur Verfügung, Sie können jedoch benutzerdefinierte Werte hinzufügen. Klicken Sie auf das Zahnrad-Symbol, wählen Sie „Hinzufügen“, geben Sie die gewünschte Bildschirmbreite ein und speichern Sie die Änderungen.

Für eine Gruppe oder ein Element können Sie die Breite und Höhe, den Eckenradius, die Deckkraft sowie die Mindest- und Höchstabmessungen festlegen.

Sie können auch Flex-Einstellungen für Elemente konfigurieren.

Für Gruppen und Elemente können Sie Ränder und Innenabstände festlegen sowie die Hintergrundfarbe ändern.

Um einer Gruppe oder einem Element einen Rahmen hinzuzufügen, klicken Sie auf „Rahmen“. Die verfügbaren Optionen werden im Stil-Bedienfeld angezeigt.

Sie können außerdem zusätzliche Effekte konfigurieren oder einem Element Eigenschaften hinzufügen, beispielsweise Animationen.

Vibe Block verfügt über Limits für kostenlose Anfragen, die standardmäßig in allen Tarifen enthalten sind. Die folgende Tabelle zeigt, wie viele Anfragen Sie je nach Tarif alle 12 Stunden und pro Monat stellen können.

Wenn Sie das Anfragelimits Ihres Kontos erreicht haben, können Sie zusätzliche Anfragen erwerben. Gehen Sie dazu auf die Seite „AI-Anfragen kaufen“ oder klicken Sie im Popup-Menü im Chat-Block auf die Schaltfläche „Anfragen kaufen“.

Im selben Fenster können Sie auch Ihr Anfragelimits für den aktuellen Tag sowie die insgesamt verbleibenden Nutzungslimits Ihres Tarifs einsehen.