Elements

Un Element est une pièce individuelle à l’intérieur d’une frame, comme un titre, un bouton, une image, un champ de formulaire, ou tout autre composant que la frame affiche. Les Elements sont ce que vous ciblez lorsque vous voulez modifier une seule pièce d’une frame sans régénérer l’ensemble.

​

Sélectionner un élément

Utilisez l’outil Edit sur la barre d’outils. Avec Edit actif, cliquez à l’intérieur d’une frame active pour sélectionner l’élément sous le curseur. L’élément sélectionné reçoit un contour en surbrillance et un petit prompt en ligne où vous pouvez demander à Agent de le modifier.

​

Agir sur un élément sélectionné

​

Demander à Agent de le modifier

Demandez à Agent de mettre à jour le texte, la couleur, la mise en page, l’espacement, ou le comportement de l’élément avec le prompt en ligne.

​

Remplacer une image directement

Sélectionnez un élément image et la section Image du Visual Editor affiche le chemin de la source avec un bouton Upload Image, afin que vous puissiez remplacer le fichier sans écrire de prompt.

​

Visual Editor

Sélectionner un élément ouvre le Visual Editor — un panneau latéral droit associé au prompt en ligne. Le panneau regroupe chaque contrôle en sections claires afin que vous puissiez trouver celui dont vous avez besoin plus rapidement : Text, Layout, Color, et Border. (La section Image apparaît aussi lorsque vous sélectionnez un élément image.)

​

Layout

La section Layout est l’endroit où vous ajustez la façon dont les enfants se placent à l’intérieur d’un conteneur sans passer par Agent. Sélectionnez un conteneur flex, développez Layout, et vous obtenez :

• Alignment : un sélecteur de points 3×3 pour définir où les éléments se placent le long des deux axes à l’intérieur du conteneur.
• Direction : deux boutons flèches qui empilent les enfants en ligne ou en colonne.
• Gap : une valeur en pixels pour l’espace entre les éléments. L’icône à côté du champ Gap change pour correspondre à la direction actuelle, afin que vous sachiez toujours si vous ajustez l’espacement horizontal ou vertical. À côté, une icône flèche bascule Distribute space between items, qui pousse les enfants vers les bords opposés du conteneur.
• Outer space : des champs par côté pour l’espace à l’extérieur de l’élément (un champ par côté, avec une bascule de lien pour verrouiller les quatre côtés à la fois).
• Inner space : des champs pour l’espace à l’intérieur de l’élément le long de chaque axe, avec une bascule de lien pour les deux axes à la fois.

La section Layout n’apparaît que lorsqu’au moins un contrôle de mise en page s’applique à l’élément sélectionné. Les nœuds de texte simple sans propriétés d’espacement ou de mise en page masquent entièrement la section, afin que l’éditeur reste compact. Pour les sections Text, Color, Border, et Image, consultez le guide du Visual Editor.

​

Pages associées

• Canvas — présentation et anatomie.
• Frames — les conteneurs à l’intérieur desquels vivent les Elements.
• Toolbar — où se trouve l’outil Edit.
• Visual Editor — guide complet de l’édition d’éléments.