Vibe Block
Erstellen Sie einzigartige benutzerdefinierte Blöcke mit KI
Vibe Block ist ein neuer Bibliotheksblock, der mithilfe von KI einzigartige Inhalte auf der Grundlage Ihrer Eingabe generiert. Im Dialog mit der KI können Sie schnell einen einzigartigen, auf Ihre Bedürfnisse zugeschnittenen Block erstellen und diesen nach Belieben anpassen: Bearbeiten Sie Inhalte, Stil oder Code.
Für die Bearbeitung des Blockcodes sind möglicherweise Grundkenntnisse in HTML, CSS und JavaScript erforderlich.

Bitte beachten Sie, dass Tilda keine Fragen zum Erstellen oder Bearbeiten von benutzerdefiniertem Blockcode beantwortet.
Mehr lesen
Mehr lesen
Mehr lesen
Mehr lesen
Mehr lesen
Mehr lesen
Mehr lesen
Erste Schritte mit dem Vibe Block
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.
In the Block Library under "Other": the "Vibe Block" (VIBE) block card at the top of the list.
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.
Vibe Block: prompt input field and the submit arrow button in the center of the block.
Um ein KI-Modell für die Codegenerierung auszuwählen, klicken Sie im Block auf den Modellnamen.
Vibe Block editor: the AI model selection dropdown list in the prompt input bar.
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.
Vibe Block prompt field: the "Attach files" menu with "Upload image", "Upload video", and "Upload file" options.
Klicken Sie auf das Fragezeichen-Symbol, um Beispielaufforderungen anzuzeigen oder anhand dieser eigene Aufforderungen zu erstellen.
Vibe Block in the page editor: the prompt input field for generating block code.
Klicken Sie auf eine beliebige Beispielaufforderung, um sie zu verwenden.
In the Vibe Block editor: the "Examples" panel on the left with templates like "Cover", "Rating", "Conference Agenda", and "Schedule".
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.
Vibe Block panel: the "View demo" button next to "Apply prompt" and "Take the code".
Um das Beispiel zu kopieren und den Block auf der Seite zu erstellen, klicken Sie auf „Code übernehmen“.
In Vibe Block: the "View code" section with the generated block's code in the chat panel on the left.
Klicken Sie auf „Eingabeaufforderung anwenden“, um den Editor zu öffnen und Ihre Anfrage zu bearbeiten.
Vibe Block: prompt input field in the AI generation panel on the left.
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.
Die Limits für Anfragen hängen von Ihrem Tarif ab. Beispielsweise umfassen die kostenpflichtigen Tarife „Personal“ und „Business“ bis zu 50 Anfragen alle 12 Stunden und bis zu 100 Anfragen pro Monat. Alle Nutzungslimits können Sie hier einsehen.
Vibe Block editor: the copy prompt icon below a sent message in the chat panel.
Im Chat kannst du die Antwort der KI aufklappen, um den Code anzusehen und zu kopieren.
Vibe Block generator panel: the copy icon next to "View code" above the generated HTML code block.
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.
In Vibe Block: the "Code" tab in the top left corner of the block editing window.
Einen Vibe-Block 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.
Vibe Block editor: the "Regenerate message" icon below a user prompt in the chat window.
Sie können beispielsweise einfach beschreiben, was in dem Block geändert werden soll, und die KI passt den Code entsprechend an.
Sobald du eine neue Eingabe eingegeben hast, kannst du die vorherige Anfrage nicht mehr erneut erstellen. Du kannst die vorherige Eingabe jedoch kopieren und als neue Anfrage im Chat absenden.
Vibe Block editor: updated image in the generated block layout based on the chat prompt.
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.
In the Vibe Block chat panel: The "Apply" button next to "View code".
Um den Block nach dem Schließen des Chats erneut zu bearbeiten, klicke auf die Schaltfläche „Mit KI bearbeiten“.
The "Edit with AI" button in the top left corner of the block editor.
Gruppen und Elemente über das Stil-Bedienfeld bearbeiten
Um ein Element in einem erstellten Block zu bearbeiten, klicken Sie darauf. Das Stil- und Inhaltsfenster wird geöffnet.
In the Vibe Block editor: the "STYLE" panel on the right with settings for the selected element.
Um schnell zu einem anderen Element zu wechseln, klicken Sie auf das Symbol „Ebenen“. Das Ebenen-Bedienfeld wird geöffnet.
In Vibe Block: the layers icon in the top right of the "STYLE" panel, opening the "LAYERS" panel to the left.
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.
In the Vibe Block editor: the HTML code field under the "CONTENT" section on the "STYLE" panel on the right.
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.
Vibe Block editor: the layers icon next to the "Save" button in the top bar of the code editor window.
Element-Steuerelemente
Klicken Sie auf das Pfeilsymbol, um schnell die übergeordnete Gruppe einer verschachtelten Gruppe oder eines verschachtelten Elements auszuwählen.
In Vibe Block: the "</>" code editor button on the right-hand settings panel.
Klicken Sie auf das Code-Symbol, um das Element im Code zu bearbeiten.
Vibe Block editor: the "</>" (code editor) button in the floating "STYLE" panel on the right.
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.
Vibe Block editor: the trash can delete icon in the element toolbar within the "STYLE" panel on the right.
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.
In Vibe Block: the "Edit with AI" button in the right-hand settings panel under the element toolbar.
Das Inhaltsfeld bearbeiten
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.
Vibe Block editor: the text input field under "CONTENT" in the right-hand "STYLE" panel.
Bei einem Bild können Sie die Datei ersetzen oder löschen, eine neue hochladen oder ein Bild aus der Bildbibliothek auswählen.
In the Vibe Block editor: the "IMAGE" section in the "STYLE" panel on the right, pointing to the selected image and the "Upload file" button.
Bei einem Formular wird die Schaltfläche „Dienste“ angezeigt. Verwenden Sie diese, um eine Verbindung z Tilda , CRM oder einem anderen Datenerfassungsdienst herzustellen.
In the Vibe Block editor: the "Services" button in the form settings panel on the right.
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.
Vibe Block editor: a selected text element in the block layout and the "STYLE" panel on the right with the "CONTENT" editing field.
Bearbeiten von Stilen
Wichtig: Die Änderung eines Elements kann sich auf die Darstellung anderer ähnlicher Elemente in der Gruppe auswirken.
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.
Vibe Block editor: the gear icon next to "BREAKPOINTS" in the "STYLE" panel, opening the breakpoint settings list.
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.
In the Vibe Block editor: element dimension settings including width "W", height "H", corner radius, and opacity in the "STYLE" panel.
Sie können auch Flex-Einstellungen für Elemente konfigurieren.
Vibe Block: the "FLEX" section in the element style panel for a selected form.
Für Gruppen und Elemente können Sie Ränder und Innenabstände festlegen sowie die Hintergrundfarbe ändern.
Die verfügbaren Einstellungen können je nach Block variieren. So kann beispielsweise ein Block über eine eigene Hintergrundeinstellung verfügen, während dies bei einem anderen Block nicht der Fall ist. Die verfügbaren Optionen hängen vom Code und vom Elementtyp ab.
Vibe Block editor: size, "PADDING", and "MARGIN" fields in the "STYLE" panel on the right.
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.
In the Vibe Block editor, a selected container with text and a button, and the "STYLE" panel on the right.
Inhalte bearbeiten
Um den Inhalt eines Vibe-Blocks zu bearbeiten, klicken Sie auf „Inhalt“.
In the page editor: the "Content" button in the upper left corner of a Vibe block.
Im Bearbeitungsbereich werden Felder und Elemente angezeigt, die Sie schnell aktualisieren können: Text, Bilder, Symbole aus der Bibliothek und andere verfügbare Blockelemente.
Wichtig: Das Inhaltsfenster ist blockspezifisch. Wenn das gewünschte Element im Fenster nicht verfügbar ist, bearbeiten Sie es im HTML-Editor des Blocks oder mithilfe eines Befehls.
Vibe Block in der Praxis: Anwendungsbeispiele
Anfrage-Limits für Vibe Block
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.
Hinweis: Jedes KI-Modell hat seinen eigenen Preis pro Anfrage. Bei der Auswahl eines Modells wird neben dessen Namen eine Zahl angezeigt – dies ist die Anzahl der Anfragen, die bei Verwendung dieses Modells anfallen.
Wichtig : Einige kostenpflichtige Modelle sind nicht in Ihrem Tarif enthalten. Um diese zu nutzen, erwerben Sie zusätzliche Anfragen in Ihrem Profil .
In the Vibe Block AI panel, the drop-down menu for selecting an AI model.
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.
Vibe Block generator: the remaining requests indicator in the top panel and the "Buy requests" button in the pop-up window.
Umwandlung von Vibe Block in Zero Block
Wichtig : Die Konvertierungsfunktion befindet sich derzeit in der Beta-Phase, daher kann das konvertierte Design vom Original abweichen.
Sie können einen generierten Vibe-Block konvertieren in Zero Block Öffnen Sie dazu die Vibe Block-Einstellungen und klicken Sie auf „Konvertieren in“. Zero Block Die
Block Settings panel: the "Convert to Zero Block" button at the bottom of the panel.
Klicken Sie nach der Konvertierung auf den Block-Editor, um den Block zu öffnen. Zero Block und das Design individuell anpassen.
In the page editor, the "Block Editor" button in the top left corner of the Zero Block.
Wichtig : Sie können nicht konvertieren Zero Block Zurück zu einem Vibe Block.
Important: When converting a Vibe Block to Zero Block, enable Keep the original Vibe Block to preserve the original.
In the block settings: the **Keep original Vibe Block** checkbox.
Hergestellt am
Tilda