Fügen Sie Ihrer Seite einen „Vibe“-Block aus der Blockbibliothek hinzu. Sie finden ihn in der Kategorie „Sonstiges“ oder direkt in der Liste der Kategorien.

Geben Sie im Chat-Eingabefeld einen Befehl ein, um den Block zu generieren. Klicken Sie anschließend auf die Schaltfläche „Senden“ oder drücken Sie die Eingabetaste auf Ihrer Tastatur.

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

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 anzuzeigen oder anhand dieser eigene Aufforderungen zu erstellen.

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 das Beispiel zu kopieren und den Block auf der Seite zu erstellen, klicken Sie auf „Code übernehmen“.

Klicken Sie auf „Eingabeaufforderung anwenden“, um den Editor zu öffnen und Ihre Anfrage zu bearbeiten.

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 im oberen Bereich auf „Code“, um den Editor zu öffnen. Dort können Sie den generierten Code des Blocks manuell bearbeiten.

Um das beste Ergebnis zu erzielen, können Sie den Blockcode mit derselben Eingabeaufforderung neu generieren, Ihre ursprüngliche Eingabeaufforderung verfeinern oder eine 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 anzuwenden, klicken Sie auf „Anwenden“.

Mit dieser Option können Sie zwischen verschiedenen Versionen wechseln und die passende Version auswählen. 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 „Mit KI bearbeiten“.

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.

Wechseln Sie zwischen den verschiedenen Ebenen, um das gewünschte Element oder die gewünschte Gruppe auszuwählen. Die ausgewählte Ebene wird grau hervorgehoben.

Sie können das Ebenen-Bedienfeld auch schnell ü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 Duplizierungssymbol. 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 Eingabeaufforderung. In dem Feld ist bereits der Pfad zu dem Element eingetragen, das Sie ändern möchten.

Welche Elemente Sie im Feld „Inhalt“ bearbeiten können, hängt 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.

Um den Inhalt eines Vibe-Blocks zu bearbeiten, klicken Sie auf „Inhalt“.

Im Bearbeitungsbereich werden Felder und Elemente angezeigt, die Sie schnell aktualisieren können: Text, Bilder, Symbole aus der Bibliothek und andere verfügbare Blockelemente.

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.