Modifications visuelles dans CrocoVibe : retouchez votre projet sans prompt ni code

Votre projet CrocoVibe est presque prêt, mais un titre est trop long, un bouton n'a pas la bonne couleur ou une section manque d'air ? Inutile de rédiger un nouveau prompt ou d'ouvrir le code. Les modifications visuelles vous permettent de cliquer directement sur un élément de l'aperçu et de le retoucher, comme dans un constructeur de page classique.

Pourquoi utiliser les modifications visuelles ?

L'IA de CrocoVibe génère une première version très complète, mais les dernières retouches sont souvent des détails : corriger une faute, ajuster un espacement, harmoniser deux boutons. Pour ce type de finition, décrire le changement à l'IA prend plus de temps que de le faire soi-même.

• Retouches directes : vous cliquez sur un élément de l'aperçu et vous modifiez son texte ou son style, sans passer par l'éditeur de code.

• Aucune consommation d'IA : les changements faits avec les réglages du panneau ne font pas appel à l'IA. Seul l'envoi d'un prompt la sollicite.

• Prompts ciblés : quand vous préférez décrire le changement, vous pouvez viser un ou plusieurs éléments précis plutôt que toute la page.

• Aperçu avant validation : rien n'est appliqué au projet tant que vous n'avez pas enregistré.

Exemple concret : un coach a généré sa page de vente avec CrocoVibe. Il veut remplacer « Réserver » par « Réserver mon appel découverte » sur le bouton principal et réduire l'espace au-dessus de la section témoignages. Deux clics, deux réglages, c'est fait.

Activer le mode Modifications visuelles

Aucun réglage à activer au préalable : la fonction est disponible dans tous vos projets CrocoVibe.

1. Ouvrez CrocoVibe dans la navigation de gauche, puis cliquez sur le projet à retoucher.

2. Dans la zone de saisie en bas à gauche, cliquez sur Modifications visuelles.

3. Le panneau Édits visuels s'ouvre à gauche. Cliquez sur un élément de l'aperçu pour commencer.

Pour sélectionner plusieurs éléments à la fois, maintenez la touche Cmd enfoncée pendant que vous cliquez dans l'aperçu.

Ce que vous pouvez modifier

Le panneau s'adapte à l'élément sélectionné : il n'affiche que les réglages qui le concernent. Un bouton ne propose pas les mêmes options qu'une image ou qu'un conteneur.

Modifier un élément pas à pas

Les réglages du panneau

Une fois un élément sélectionné, le panneau Édits visuels présente ses réglages par blocs :

• Contenu : le texte de l'élément, modifiable directement.

• Attributs : le type de l'élément et son Aria label (le libellé lu par les lecteurs d'écran, utile pour l'accessibilité).

• Typographie : Famille de polices, Taille de police, Style de police, Épaisseur de police et Alignement.

• Couleurs : les couleurs du thème de votre projet, plus une palette complète.

• Espacement : Marge (l'espace autour de l'élément) et Marge interne (l'espace entre le bord de l'élément et son contenu).

• Bordure : épaisseur, couleur et style de la bordure.

• Effets : Rayon de courbure (l'arrondi des coins), Ombre et Opacité.

Chaque changement s'affiche immédiatement dans l'aperçu.

Modifier un texte directement sur la page

Pour une correction rapide, double-cliquez sur un texte de l'aperçu et tapez directement dessus. Vous pouvez aussi passer par le champ Contenu du panneau.

Changer une icône

Sélectionnez une icône dans l'aperçu pour ouvrir sa bibliothèque : plus de 1 600 icônes, avec une recherche par mot-clé. L'icône choisie remplace l'ancienne instantanément, sans rechargement. Vous pouvez aussi ajuster sa taille.

Remplacer une image et régler son cadrage

Sélectionnez une image pour modifier son URL (et donc la remplacer), mettre à jour son texte alternatif, et choisir comment elle remplit son emplacement grâce au menu de mise en page du panneau.

Utiliser un prompt sur les éléments sélectionnés

Quand vous sélectionnez un ou plusieurs éléments, ils apparaissent comme étiquettes dans la zone de saisie Demandez à l'IA.... Votre prompt ne s'applique alors qu'à eux.

Sur un seul élément, c'est pratique pour :

• « Rends cette section plus moderne »

• « Aère l'intérieur de ce bloc »

• « Adoucis le style de ce bouton »

Sur plusieurs éléments, c'est idéal pour harmoniser des composants répétés :

• « Donne le même style à ces trois boutons »

• « Aligne l'espacement entre ces cartes »

• « Applique la couleur principale du thème à ces titres »

Enregistrer ou ignorer vos modifications

Les modifications visuelles fonctionnent en mode aperçu : tant que vous n'avez pas validé, votre projet n'est pas touché. Dès que vous changez quelque chose, une barre Modifications en attente apparaît en bas du panneau.

• Cliquez sur Enregistrer pour appliquer les changements au projet.

• Cliquez sur Ignorer pour annuler les changements non enregistrés et revenir à la version précédente.

Pour quitter le mode, cliquez sur Fermer en haut du panneau.

Chaque enregistrement crée une nouvelle version de votre projet. Vous pouvez donc toujours revenir en arrière depuis l'historique des versions, comme expliqué dans le guide CrocoVibe : créez sites, pages et applications 100% codé avec l'IA de CrocoClick. Les modifications ne sont visibles en ligne qu'après une nouvelle publication.

Besoin d'aller plus loin qu'un réglage visuel ? L'éditeur de code de CrocoVibe vous donne accès à tous les fichiers du projet. Et pour relier un formulaire ou un calendrier de votre page à votre compte, suivez le guide Connecter des formulaires et calendriers dans CrocoVibe.

Questions fréquentes