> ## Documentation Index
> Fetch the complete documentation index at: https://wl.macaly.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Modifications visuelles

> Comment modifier le design, les textes et la mise en page directement sur la page

Vous n'avez pas à décrire chaque petit changement à l'agent : vous pouvez travailler directement dans l'aperçu de votre projet. Cliquez sur un élément pour changer son apparence, réécrivez le texte sur place, ou tracez un trait sur la page pour montrer à l'agent ce dont vous parlez.

Les modifications visuelles portent toujours sur un élément précis. Vous sélectionnez un élément sur la page, vous voyez les réglages disponibles pour lui et vous les changez sur place. Les modifications de design et de texte sont écrites dans votre projet au moment de l'enregistrement, sans passer par l'agent et sans consommer de crédits.

<Callout icon="user">
  Disponible sur tous les forfaits
</Callout>

<Note>
  Les modifications visuelles fonctionnent uniquement sur ordinateur. La barre d'outils n'apparaît ni sur téléphone ni dans une fenêtre de navigateur étroite.
</Note>

## La barre d'outils

<img src="https://mintcdn.com/macalywl/Nd2JkZQZytjAmMM1/images/visual-edits-toolbar.png?fit=max&auto=format&n=Nd2JkZQZytjAmMM1&q=85&s=c362220741dead95422910ffad18abd2" alt="La barre d'outils au-dessus de l'aperçu, avec Modifier le design, Modifier le texte et Annotation" width="2400" height="1674" data-path="images/visual-edits-toolbar.png" />

Au-dessus de l'aperçu en direct de votre projet flotte une barre avec trois outils :

* **Modifier le design** : Cliquez sur n'importe quel élément pour changer son apparence, son image ou sa mise en page.
* **Modifier le texte** : Le texte modifiable est entouré, il vous suffit de cliquer dessus et de le réécrire.
* **Annotation** : Dessinez sur la page pour montrer ce dont vous parlez.

La touche **Échap** vous ramène à tout moment à la navigation normale dans l'aperçu.

### Modifier le design

Lorsque vous sélectionnez un élément, ses réglages s'ouvrent dans le panneau de gauche. Ce que vous y trouvez dépend du type d'élément : une section propose la taille, les espacements, le fond, les bordures et la disposition des éléments qu'elle contient, un élément de texte propose la typographie, et une image vous laisse remplacer le fichier.

<img src="https://mintcdn.com/macalywl/Nd2JkZQZytjAmMM1/images/visual-edits-element-selected.png?fit=max&auto=format&n=Nd2JkZQZytjAmMM1&q=85&s=92f18444292103c9f7ccee4c4af5657a" alt="Un titre sélectionné dans l'aperçu, avec ses réglages ouverts dans le panneau de gauche" width="2400" height="1674" data-path="images/visual-edits-element-selected.png" />

L'en-tête du panneau indique où vous vous trouvez, du niveau **Global** jusqu'à l'élément sélectionné, et le sélecteur de thème vous permet de vérifier votre travail en mode clair comme en mode sombre avant d'enregistrer.

### Modifier le texte

Le texte que vous pouvez réécrire est entouré directement dans l'aperçu. Cliquez dedans et tapez. C'est la façon la plus rapide de corriger un titre ou un paragraphe, puisque vous voyez le résultat à sa place pendant que vous écrivez.

### Annotation

Il est parfois plus rapide de montrer à l'agent ce que vous voulez dire que de le décrire.

Avec **Annotation** activé, tracez un trait sur la partie de la page dont vous parlez. Macaly détermine quels éléments se trouvent sous votre trait et les joint à votre message suivant. Tracez autant de traits que nécessaire, puis rédigez votre message et envoyez-le comme d'habitude.

Pendant que vous dessinez, **Annuler le trait**, **Rétablir le trait** et **Effacer** sont à portée de main dans la barre.

<img src="https://mintcdn.com/macalywl/Nd2JkZQZytjAmMM1/images/visual-edits-annotation.png?fit=max&auto=format&n=Nd2JkZQZytjAmMM1&q=85&s=8682d6500d5b075a12bcc3e0a0440bef" alt="Un trait tracé autour du titre et du paragraphe, avec l'étiquette Annotation au-dessus du message" width="2400" height="1674" data-path="images/visual-edits-annotation.png" />

Les annotations servent à montrer, pas à laisser des commentaires. Elles ne sont pas enregistrées avec votre projet et ne coûtent rien de plus que le message que vous envoyez.

<Note>
  Enregistrez ou abandonnez vos modifications de design avant de commencer à annoter, et ne changez pas la taille de l'aperçu pendant que vous dessinez. En la changeant, vos traits disparaissent, car ils sont ancrés à l'emplacement du contenu.
</Note>

## Navigation entre les éléments

Cliquer exactement sur ce que vous voulez n'est pas toujours possible, typiquement quand des éléments se chevauchent ou qu'un élément imbriqué recouvre celui qui le contient.

Une petite barre au-dessus de votre sélection vous permet de remonter d'un niveau ou de passer aux éléments voisins avec les flèches. Vous y trouvez aussi l'icône de code, qui ouvre le code source de l'élément dans l'onglet **Code**, ainsi que la possibilité de supprimer complètement l'élément.

## Demander à l'IA

Sur les textes et les images, le panneau propose **Demander à l'IA**, pour les moments où il est plus simple de décrire un changement que de le régler. Sur un texte, la formulation est réécrite selon votre demande. Sur une image, l'existante peut être modifiée ou une nouvelle générée, et vous voyez le résultat avant de le garder.

Lorsqu'un élément est sélectionné, le champ de message du chat passe lui aussi en mode modification. Tout ce que vous y écrivez ne s'applique qu'à votre sélection actuelle.

<Note>
  **Demander à l'IA** et les messages envoyés depuis le chat consomment des crédits comme toute autre requête à l'IA, et le prix de **Demander à l'IA** s'affiche avant l'exécution. Tout ce que vous réglez à la main dans le panneau est gratuit.
</Note>

## Enregistrer vos modifications

Tant que vous avez des modifications non enregistrées, la barre en affiche le nombre et vous pouvez toutes les enregistrer d'un coup avec **Enregistrer** ou les annuler avec **Abandonner**.

<img src="https://mintcdn.com/macalywl/Nd2JkZQZytjAmMM1/images/visual-edits-save.png?fit=max&auto=format&n=Nd2JkZQZytjAmMM1&q=85&s=d29513d0b7966c2847ee9c22449a03f3" alt="La barre affichant cinq modifications non enregistrées, avec Abandonner et Enregistrer" width="2400" height="1674" data-path="images/visual-edits-save.png" />

L'enregistrement ne passe pas par l'agent : il est donc immédiat et ne coûte aucun crédit. Si un changement est plus complexe, Macaly le confie à l'agent dans votre chat, où il se comporte comme n'importe quel autre message.

## Quand la barre d'outils n'est pas disponible

La barre se masque, ou se grise, quand la modification directe ne fonctionnerait pas :

* **Attendez que Macaly ait terminé** : L'agent travaille encore sur votre projet.
* **En attente de la préparation de l'aperçu** : Votre aperçu est encore en train de démarrer.
* **Fermez le plan pour modifier la page** : Un plan est ouvert dans le chat.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.