Comment activer et utiliser l'Édition visuelle dans Coderick AI
Décrire un changement visuel avec des mots est parfois plus compliqué qu’il n’y paraît. Demander à une IA de modifier le texte de votre en-tête ou de déplacer cet en-tête légèrement vers la gauche peut transformer une correction de deux secondes en un échange de cinq minutes. Certaines choses sont simplement plus rapides à faire manuellement.
C’est exactement pour cela que l’Édition visuelle existe. Au lieu de passer par des ajustements mineurs, vous pouvez désormais cliquer directement dans l’aperçu de votre projet et effectuer des modifications sur place.
Voici comment l’utiliser.
Comment activer l’Édition visuelle
Dans votre projet Coderick, cliquez sur le bouton Édition visuelle dans la barre supérieure.
Une fois activé, les éléments de votre aperçu deviennent sélectionnables et modifiables. Toute modification effectuée avec l’Édition visuelle sera enregistrée automatiquement. Pour annuler ou rétablir ces modifications, vous aurez deux nouveaux boutons à côté de l’Édition visuelle : Annuler et Rétablir.
Comment modifier directement dans l’écran d’aperçu
Avec l’Édition visuell activé, cliquez sur n’importe quel élément dans l’aperçu pour le sélectionner. Une barre d’outils apparaît avec des options adaptées au type d’élément.
Modifications manuelles
Texte
Cliquez sur n’importe quel élément de texte pour le modifier en ligne. Depuis la barre d’outils, vous pouvez :
- Modifier le texte directement
- Modifier le type, la taille et le style de la police (gras, italique, souligné)
- Ajuster l’alignement
- Ajouter un lien ou un emoji
- Modifier la couleur du texte
- Ajouter des ombres au texte
- Ajouter des guillemets stylisés
- Modifier la capitalisation du texte
- Modifier avec l’éditeur de code
- Barrer ou souligner le texte
Boutons
Les boutons qui peuvent être modifiés visuellement ont ces options générales :
- Modifier le texte du bouton en ligne
- Changer la couleur du texte et de l’arrière-plan
- Ajouter ou mettre à jour un lien
- Modifier la transparence du bouton
- Changer le remplissage, la taille de la bordure et le rayon
- Modifier les boutons dans l’éditeur de code
Images
Cliquez sur une image pour :
- Remplacez-le et téléchargez une image depuis votre appareil
- Ajoutez ou mettez à jour un lien
- Ajoutez un texte alternatif qui sert de description de métadonnées SEO
- Ajoutez un effet de transparence
- Personnalisez le remplissage, la taille de la bordure et le rayon
- Modifiez l’image dans l’éditeur de code
Comment modifier avec l’IA
Pour les éléments trop complexes pour des modifications manuelles, comme les menus de navigation, les pieds de page ou les boutons de connexion, vous verrez une option Modifier avec l’IA dans la barre d’outils à la place. Ces éléments ont plus de complexité en arrière-plan, donc l’AI gère les modifications pour tout garder intact.
Vous pouvez également choisir Modifier avec l’IA pour n’importe quel élément standard si vous préférez décrire le changement plutôt que le faire manuellement.
Lorsque vous cliquez sur Modifier avec l’IA sur un élément sélectionné :
- Cet élément est mis en évidence, et une boîte de chat apparaît en dessous.
- Coderick AI concentre ses modifications uniquement sur cet élément spécifique.
- Vous décrivez ce que vous souhaitez dans le chat : modifier le texte, générer un nouvel élément HTML ou une image, changer les couleurs, etc.
Comment modifier le code
En plus des options d’édition visuelle manuelle et avec l’IA, Coderick AI propose un éditeur de code complet qui vous permet de modifier directement le code de la page générée.
Bien que l’édition de code et l’édition visuelle soient des modes distincts, vous pouvez les utiliser en combinaison pour faciliter le processus d’édition.
En mode Édition visuelle, sélectionnez un élément et choisissez Voir le code dans son menu contextuel.
Cela ouvrira l’éditeur de code, où le code de la page entière est affiché, mais le code de l’élément choisi est mis en surbrillance.
Sauvegarde et contrôle de vos modifications
Vous n’avez pas besoin de sauvegarder manuellement les modifications apportées à votre projet. L’éditeur enregistre toutes les modifications, mais vous avez toujours des options pour les gérer.
Pour annuler la modification la plus récente, appuyez sur le bouton Annuler.
Si vous avez annulé une modification mais que vous décidez de la restaurer, utilisez le bouton Rétablir.
