Ajoutez un bloc « Vibe » de la bibliothèque de blocs à votre page. Vous le trouverez dans la catégorie « Autres » ou directement dans la liste des catégories.

Saisissez une commande dans le champ de saisie du chat pour générer le bloc. Cliquez ensuite sur le bouton « Envoyer » ou appuyez sur la touche Entrée de votre clavier.

Pour sélectionner un modèle d'IA destiné à la génération de code, cliquez sur le nom du modèle dans le bloc.

Pour joindre une image, un fichier ou une vidéo à votre consigne, cliquez sur l'icône en forme de trombone. Vous pouvez utiliser ce fichier comme contenu du bloc ou comme référence.

Cliquez sur l'icône en forme de point d'interrogation pour afficher des exemples de consignes ou pour créer votre propre consigne à partir de celles-ci.

Cliquez sur n'importe quelle suggestion pour l'utiliser.

Vous pouvez également consulter un exemple de page de garde sous forme de démo en direct sur une page distincte .

Pour copier l'exemple et créer le bloc sur la page, cliquez sur « Copier le code ».

Cliquez sur « Appliquer la consigne » pour ouvrir l'éditeur et modifier votre requête.

Une fois le bloc généré, l'assistant IA affichera le message « Terminé ! », indiquant que le bloc est prêt à être utilisé. Sous la ligne de commande, vous verrez les options permettant de le copier, de le régénérer ou de le supprimer.

Dans la fenêtre de discussion, vous pouvez développer la réponse générée par l'IA pour afficher et copier le code.

Pour afficher le code complet, cliquez sur « Code » dans le panneau supérieur afin d'ouvrir l'éditeur, où vous pourrez modifier manuellement le code généré du bloc.

Pour obtenir le meilleur résultat possible, vous pouvez régénérer le code du bloc en utilisant la même instruction, affiner votre instruction initiale ou saisir une nouvelle requête.

Par exemple, il vous suffit de décrire ce qui doit être modifié dans le bloc, et l'IA se chargera de mettre à jour le code.

Par défaut, le bloc affiche la dernière version générée. Pour consulter une version précédente, cliquez sur l'icône en forme d'œil. Pour l'appliquer, cliquez sur « Appliquer ».

Grâce à cette option, vous pouvez passer d'une version à l'autre et sélectionner celle qui vous convient. Pour enregistrer votre résultat, il vous suffit de fermer la fenêtre de discussion avec l'IA.

Pour modifier à nouveau le bloc après avoir fermé la conversation, cliquez sur le bouton « Modifier avec l'IA ».

Pour modifier un élément d'un bloc créé, cliquez dessus. Le panneau de style et de contenu s'ouvrira.

Pour passer rapidement à un autre élément, cliquez sur l'icône « Calques ». Le panneau « Calques » s'ouvre.

Passez d'un calque à l'autre pour sélectionner l'élément ou le groupe souhaité. Le calque sélectionné est surligné en gris.

Vous pouvez également ouvrir rapidement le panneau « Layers » à partir du code Vibe Block. Cliquez sur l'icône « Layers », puis sélectionnez le calque souhaité. Le panneau « Style » s'ouvrira.

Cliquez sur l'icône en forme de flèche pour sélectionner rapidement le groupe parent d'un groupe ou d'un élément imbriqué.

Cliquez sur l'icône de code pour modifier l'élément dans le code.

Pour copier un élément, cliquez sur l'icône « Dupliquer ». Pour le supprimer, cliquez sur l'icône « Corbeille ». Utilisez les flèches vers le haut et vers le bas pour déplacer l'élément dans le panneau « Calques » et modifier son ordre.

Pour modifier un élément à l'aide de l'IA, cliquez sur « Modifier avec l'IA ». Un panneau permettant de saisir une instruction s'ouvrira. Le champ contiendra déjà le chemin d'accès à l'élément que vous souhaitez modifier.

Les éléments que vous pouvez modifier dans le champ « Contenu » dépendent de l'élément sélectionné.

Pour un élément de texte, vous pouvez modifier le texte dans le champ « Contenu ».

Pour une image, vous pouvez remplacer ou supprimer le fichier, en télécharger un nouveau ou sélectionner une image dans la bibliothèque d'images.

Dans un formulaire, le bouton « Services » s'affichera. Utilisez-le pour vous connecter à Tilda CRM ou à un autre service de collecte de données.

Pour un groupe contenant des éléments, le code s'affichera. Vous pouvez le modifier dans le champ « Contenu » ou l'ouvrir directement dans l'éditeur de code.

Pour configurer la réactivité d'un groupe ou d'un élément, sélectionnez l'icône d'écran souhaitée dans le champ « Points de rupture ».

Quatre points de rupture sont disponibles par défaut, mais vous pouvez ajouter des valeurs personnalisées. Cliquez sur l'icône en forme de roue dentée, sélectionnez « Ajouter », saisissez la largeur d'écran souhaitée, puis enregistrez les modifications.

Pour un groupe ou un élément, vous pouvez configurer la largeur et la hauteur, le rayon des coins, l'opacité, ainsi que les dimensions minimales et maximales.

Vous pouvez également configurer les paramètres Flex pour les éléments.

Pour les groupes et les éléments, vous pouvez configurer les marges et les espacements intérieurs, ainsi que modifier la couleur d'arrière-plan.

Pour ajouter une bordure à un groupe ou à un élément, cliquez sur « Bordure ». Les options disponibles s'afficheront dans le panneau de style.

Vous pouvez également configurer des effets supplémentaires ou ajouter des propriétés à un élément, comme une animation.

Vibe Block propose des limites de requêtes gratuites incluses par défaut dans toutes les formules tarifaires. Le tableau ci-dessous indique le nombre de requêtes que vous pouvez effectuer toutes les 12 heures et par mois, en fonction de votre formule tarifaire.

Si vous avez atteint la limite de requêtes de votre compte, vous pouvez acheter des requêtes supplémentaires. Pour ce faire, rendez-vous sur la page « Achats de requêtes IA » ou cliquez sur le bouton « Acheter des requêtes » dans le menu contextuel du bloc de discussion.

Dans cette même fenêtre, vous pouvez également consulter votre limite de requêtes pour la journée en cours ainsi que le solde total des limites d'utilisation incluses dans votre forfait.